单元格样式调整

frontend/src/styles/common.scss

@@ -1,3 +1,5 @@
+
+
 /* flex */
 .flx-center {
   display: flex;

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 表格样式
   .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)
+    border-left: 1px solid var(--el-table-border-color) // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
-    // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
     table {
       width: 100%;
     }
@@ -467,15 +468,19 @@
   margin-left: 13px;
   line-height: 18px;
   padding: 2px;
+
   .icon {
     font-size: 12px !important;
     // color: var(--ba-bg-color-overlay) !important;
   }
 }
+
 .el-message-box {
   padding: 0px !important;
+
   .el-message-box__header {
     background-color: var(--el-color-primary);
+
     .el-message-box__title {
       color: #fff;
       padding: 10px 10px 0;
@@ -486,33 +491,41 @@
   .el-message-box__headerbtn {
     top: 5px;
   }
+
   .el-message-box__close {
     svg {
       color: #fff;
     }
+
     :hover {
       color: #409eff;
     }
   }
+
   .el-message-box__content {
     padding: 10px;
     border-bottom: 1px solid #cccccc;
   }
+
   .el-message-box__btns {
 
-    padding: 10px;}
+    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,
@@ -522,15 +535,19 @@
     }
   }
 }
+
 .form-two {
   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,
@@ -540,6 +557,7 @@
     }
   }
 }
+
 .form-three {
   display: flex;
   flex-wrap: wrap;
@@ -547,8 +565,10 @@
   .el-form-item {
     display: flex;
     width: 32.3%;
+
     .el-form-item__content {
       flex: 1;
+
       .el-select,
       .el-cascader,
       .el-input__inner,
@@ -558,3 +578,8 @@
     }
   }
 }
+
+.el-table__cell {
+  border-right: 1px solid #ebeef5 !important;
+  border-left: 1px solid #ebeef5 !important;
+}

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) => {
+const changeStatus = async (row: any) => {
-  await useHandleData(changeUserStatus, {
+  // await useHandleData(changeUserStatus, {
-    id: row.id,
+  //   id: row.id,
-    status: row.status == 1 ? 0 : 1,
+  //   status: row.status == 1 ? 0 : 1,
-  }, `切换【${row.username}】用户状态`)
+  // }, `切换【${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>