单元格样式调整

2024-12-06 09:18:13 +08:00
parent 9e8fe2c91f
commit 393ad5fa0b
4 changed files with 120 additions and 103 deletions
--- a/frontend/src/api/device/interface/monitor.ts
+++ b/frontend/src/api/device/interface/monitor.ts
@@ -1,35 +1,35 @@
-import type { ReqPage,ResPage } from '@/api/interface'
+import type { ReqPage, ResPage } from '@/api/interface'

 // 被检设备模块
 export namespace Monitor {
-  
+
  /**
   * 电能质量指标字典数据表格分页查询参数
   */
-  export interface ReqPqMonParams extends ReqPage{
+  export interface ReqPqMonParams extends ReqPage {
    id: string; // 装置序号id 必填
    devType?: string; // 设备名称
-    createTime?:string; //创建时间
+    createTime?: string; //创建时间
  }

-    /**
+  /**
   * 被检设备新增、修改、根据id查询返回的对象
   */
-    export interface ResPqMon {
-        id: string;     //监测点ID
-        code: string; //默认与谐波系统监测点ID相同
-        devId: string; //所属设备ID
-        name: string; //所属母线
-        num: number; //监测点序号
-        pt: number; //PT变比
-        ct: number; //CT变比
-        ptType:string; //接线方式，字典表
-    }
+  export interface ResPqMon {
+    id: string;     //监测点ID
+    code: string; //默认与谐波系统监测点ID相同
+    devId: string; //所属设备ID
+    name: string; //所属母线
+    num: number; //监测点序号
+    pt: number; //PT变比
+    ct: number; //CT变比
+    ptType: string; //接线方式，字典表
+  }

-      /**
+  /**
   * 被检设备表格查询分页返回的对象；
   */
  export interface ResPqMonPage extends ResPage<ResPqMon> {

  }
-  }
+}
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -1,3 +1,5 @@
+
+
 /* flex */
 .flx-center {
  display: flex;
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -142,17 +142,18 @@
      margin-bottom: 15px;
    }
  }
-.el-table__body{
-  // border-left: 1px solid var(--el-table-border-color)
-}
+
+  .el-table__body {
+    // border-left: 1px solid var(--el-table-border-color)
+  }
+
  // el-table 表格样式
  .el-table {
    // border: 1px solid var(--el-table-border-color);
    // flex: 1;
    width: 100%;
    height: 100%;
-    border-left: 1px solid var(--el-table-border-color)
-    // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
+    border-left: 1px solid var(--el-table-border-color) // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
    table {
      width: 100%;
    }
@@ -467,94 +468,118 @@
  margin-left: 13px;
  line-height: 18px;
  padding: 2px;
+
  .icon {
    font-size: 12px !important;
    // color: var(--ba-bg-color-overlay) !important;
  }
 }
-.el-message-box{
+
+.el-message-box {
  padding: 0px !important;
-  .el-message-box__header{
-    background-color:  var(--el-color-primary);
-    .el-message-box__title{
+
+  .el-message-box__header {
+    background-color: var(--el-color-primary);
+
+    .el-message-box__title {
      color: #fff;
      padding: 10px 10px 0;
    }
-   
+
  }

-  .el-message-box__headerbtn{
+  .el-message-box__headerbtn {
    top: 5px;
  }
-  .el-message-box__close{
-    svg{
+
+  .el-message-box__close {
+    svg {
      color: #fff;
    }
-    :hover{
+
+    :hover {
      color: #409eff;
    }
  }
-  .el-message-box__content{
-    padding: 10px ;
+
+  .el-message-box__content {
+    padding: 10px;
    border-bottom: 1px solid #cccccc;
  }
-  .el-message-box__btns {
-  
-    padding: 10px;}
-  }

-  .form-one {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        width: 98%;
-        margin-bottom: 15px !important;
-        .el-form-item__content {
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
-    }
+  .el-message-box__btns {
+
+    padding: 10px;
+  }
 }
+
+.form-one {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .el-form-item {
+    display: flex;
+    width: 98%;
+    margin-bottom: 15px !important;
+
+    .el-form-item__content {
+      flex: 1;
+
+      .el-select,
+      .el-cascader,
+      .el-input__inner,
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+  }
+}
+
 .form-two {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .el-form-item {
    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        width: 48%;
-        .el-form-item__content {
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
+    width: 48%;
+
+    .el-form-item__content {
+      flex: 1;
+
+      .el-select,
+      .el-cascader,
+      .el-input__inner,
+      .el-date-editor {
+        width: 100%;
+      }
    }
+  }
 }
+
 .form-three {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-between;
+  .el-form-item {
    display: flex;
-    flex-wrap: wrap;
-    // justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        width: 32.3%;
-        .el-form-item__content {
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
+    width: 32.3%;
+
+    .el-form-item__content {
+      flex: 1;
+
+      .el-select,
+      .el-cascader,
+      .el-input__inner,
+      .el-date-editor {
+        width: 100%;
+      }
    }
-}
+  }
+}
+
+.el-table__cell {
+  border-right: 1px solid #ebeef5 !important;
+  border-left: 1px solid #ebeef5 !important;
+}
--- a/frontend/src/views/demo/proTable/index.vue
+++ b/frontend/src/views/demo/proTable/index.vue
@@ -32,15 +32,12 @@
 </template>
 <script setup lang='tsx' name='useProTable'>
 import { ref, reactive } from 'vue'
-import { User } from '@/api/user/interface'
 import { useHandleData } from '@/hooks/useHandleData'
-import { useDownload } from '@/hooks/useDownload'
 import { useAuthButtons } from '@/hooks/useAuthButtons'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import userDataList from '@/api/user/userData'
 import { useDictStore } from '@/stores/modules/dict'
 import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
 import Open from '@/views/demo/proTable/Open.vue'
@@ -53,9 +50,6 @@ const dictStore = useDictStore()
 import {
  getUserList,
  deleteUser,
-  changeUserStatus,
-  exportUserInfo,
-  BatchAddUser,
 } from '@/api/user/user'
 import { ElMessageBox } from 'element-plus'

@@ -87,7 +81,7 @@ const getTableList = (params: any) => {
 // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
 const { BUTTONS } = useAuthButtons()
 // 表格配置项
-const columns = reactive<ColumnProps<User.ResUserList>[]>([
+const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
@@ -173,38 +167,34 @@ const batchDelete = async (id: string[]) => {
  proTable.value?.getTableList()
 }
 // 重置用户密码
-const resetPass = async (params: User.ResUserList) => {
+const resetPass = async (params: any) => {
  // await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
  // proTable.value?.getTableList()
  doubleColumn.value.open('双列弹出框')
 }
 // 切换用户状态
-const changeStatus = async (row: User.ResUserList) => {
-  await useHandleData(changeUserStatus, {
-    id: row.id,
-    status: row.status == 1 ? 0 : 1,
-  }, `切换【${row.username}】用户状态`)
+const changeStatus = async (row: any) => {
+  // await useHandleData(changeUserStatus, {
+  //   id: row.id,
+  //   status: row.status == 1 ? 0 : 1,
+  // }, `切换【${row.username}】用户状态`)
  proTable.value?.getTableList()
 }
 // 导出用户列表
 const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
-      useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
-  )
+
 }
 // 批量添加用户
 const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
 const batchAdd = () => {
  const params = {
    title: '用户',
-    tempApi: exportUserInfo,
-    importApi: BatchAddUser,
    getTableList: proTable.value?.getTableList,
  }
  dialogRef.value?.acceptParams(params)
 }
 // 打开 drawer(新增、查看、编辑)
-const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
+const openDrawer = (title: string, row: Partial<any> = {}) => {
  singleColumn.value.open('单列弹出框')
 }
 </script>