页面优化

main/manager-web/src/views/DictManagement.vue

@@ -49,9 +49,13 @@
                             v-loading="dictDataLoading" element-loading-text="拼命加载中"
                             element-loading-spinner="el-icon-loading"
                             element-loading-background="rgba(255, 255, 255, 0.7)"
-                            @selection-change="handleDictDataSelectionChange" class="data-table"
+                            class="data-table"
                             header-row-class-name="table-header">
-                            <el-table-column type="selection" width="55" align="center"></el-table-column>
+                            <el-table-column label="选择" align="center" width="55">
+                                <template slot-scope="scope">
+                                    <el-checkbox v-model="scope.row.selected"></el-checkbox>
+                                </template>
+                            </el-table-column>
                             <el-table-column label="字典标签" prop="dictLabel" align="center"></el-table-column>
                             <el-table-column label="字典值" prop="dictValue" align="center"></el-table-column>
                             <el-table-column label="排序" prop="sort" align="center"></el-table-column>
@@ -153,7 +157,6 @@ export default {
             // 字典数据相关
             dictDataList: [],
             dictDataLoading: false,
-            selectedDictData: [],
             isAllDictDataSelected: false,
             dictDataDialogVisible: false,
             dictDataDialogTitle: '新增字典数据',
@@ -265,7 +268,10 @@ export default {
                 dictValue: ''
             }, ({ data }) => {
                 if (data.code === 0) {
-                    this.dictDataList = data.data.list
+                    this.dictDataList = data.data.list.map(item => ({
+                        ...item,
+                        selected: false
+                    }))
                     this.total = data.data.total
                 } else {
                     this.$message.error(data.msg || '获取字典数据失败')
@@ -273,16 +279,11 @@ export default {
                 this.dictDataLoading = false
             })
         },
-        handleDictDataSelectionChange(val) {
-            this.selectedDictData = val
-            this.isAllDictDataSelected = val.length === this.dictDataList.length
-        },
         selectAllDictData() {
-            if (this.isAllDictDataSelected) {
-                this.$refs.dictDataTable.clearSelection()
-            } else {
-                this.$refs.dictDataTable.toggleAllSelection()
-            }
+            this.isAllDictDataSelected = !this.isAllDictDataSelected
+            this.dictDataList.forEach(row => {
+                row.selected = this.isAllDictDataSelected
+            })
         },
         showAddDictDataDialog() {
             if (!this.selectedDictType) {
@@ -329,17 +330,18 @@ export default {
             })
         },
         batchDeleteDictData() {
-            if (this.selectedDictData.length === 0) {
+            const selectedRows = this.dictDataList.filter(row => row.selected)
+            if (selectedRows.length === 0) {
                 this.$message.warning('请选择要删除的字典数据')
                 return
             }
 
-            this.$confirm('确定要删除选中的字典数据吗?', '提示', {
+            this.$confirm(`确定要删除选中的${selectedRows.length}个字典数据吗?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
-                const ids = this.selectedDictData.map(item => item.id)
+                const ids = selectedRows.map(item => item.id)
                 dictApi.deleteDictData(ids, ({ data }) => {
                     if (data.code === 0) {
                         this.$message.success('删除成功')
@@ -832,4 +834,18 @@ export default {
     flex: 1;
     overflow: hidden;
 }
+
+:deep(.el-checkbox__inner) {
+    background-color: #eeeeee !important;
+    border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__inner:hover) {
+    border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    background-color: #5f70f3 !important;
+    border-color: #5f70f3 !important;
+}
 </style>

main/manager-web/src/views/roleConfig.vue

@@ -318,7 +318,6 @@ export default {
 <style scoped>
 .welcome {
   min-width: 900px;
-  min-height: 506px;
   height: 100vh;
   display: flex;
   position: relative;
@@ -334,7 +333,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 24px;
+  padding: 1.5vh 24px;
 }
 
 .page-title {
@@ -344,7 +343,7 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  margin: 1vh 22px;
   border-radius: 15px;
   height: calc(100vh - 24vh);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -416,7 +415,7 @@ export default {
 }
 
 .form-content {
-  padding: 20px 0;
+  padding: 2vh 0;
 }
 
 .form-grid {
@@ -450,11 +449,11 @@ export default {
 }
 
 .template-item {
-  height: 37px;
+  height: 4vh;
   width: 76px;
   border-radius: 8px;
   background: #e6ebff;
-  line-height: 37px;
+  line-height: 4vh;
   font-weight: 400;
   font-size: 11px;
   text-align: center;
@@ -471,7 +470,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 20px;
+  margin-top: 2vh;
   align-items: center;
 }