Explorar el Código

refactor(score/event,portrait): optimize table and chart styles, adjust form layout

1. 优化TestResult.vue图表的图例配置,改为滚动横向布局
2. 优化score/event页面的表单布局和表格样式:
   - 调整区域选择框宽度
   - 为表格添加全屏宽度和常驻滚动条
   - 为表格列添加resizable和合适的宽高配置
   - 整理代码格式和空行
   - 调整接口调用顺序
3. 新增表格容器的less样式优化横向滚动体验
huoyi hace 1 semana
padre
commit
5630d84dac

+ 4 - 3
src/views/portraitManagement/components/TestResult.vue

@@ -31,9 +31,10 @@ const setChartsOptionsBar = computed(() => {
31
       textStyle: { color: '#fff' }
31
       textStyle: { color: '#fff' }
32
     },
32
     },
33
     legend: {
33
     legend: {
34
-      top: '10%',
35
-      left: '0%',
36
-      orient: 'vertical',
34
+      type: 'scroll',
35
+      top: '0%',
36
+      left: 'center',
37
+      orient: 'horizontal',
37
       textStyle: { color: '#fff' }
38
       textStyle: { color: '#fff' }
38
     },
39
     },
39
     series: [{
40
     series: [{

+ 74 - 61
src/views/score/event/index.vue

@@ -51,21 +51,20 @@
51
         </el-select>
51
         </el-select>
52
       </el-form-item>
52
       </el-form-item>
53
       <el-form-item label="区域" prop="regionalId">
53
       <el-form-item label="区域" prop="regionalId">
54
-        <el-select v-model="queryParams.regionalId" placeholder="请选择区域" clearable filterable
55
-          style="width:150px" @change="handleRegionalChange">
54
+        <el-select v-model="queryParams.regionalId" placeholder="请选择区域" clearable filterable style="width:200px"
55
+          @change="handleRegionalChange">
56
           <el-option v-for="item in regionalOptions" :key="item.id" :label="item.name" :value="item.id" />
56
           <el-option v-for="item in regionalOptions" :key="item.id" :label="item.name" :value="item.id" />
57
         </el-select>
57
         </el-select>
58
       </el-form-item>
58
       </el-form-item>
59
       <el-form-item label="工作点" prop="channelId">
59
       <el-form-item label="工作点" prop="channelId">
60
-        <el-select v-model="queryParams.channelId" placeholder="请选择工作点" clearable filterable
61
-          style="width:150px">
60
+        <el-select v-model="queryParams.channelId" placeholder="请选择工作点" clearable filterable style="width:150px">
62
           <el-option v-for="item in channelOptions" :key="item.id" :label="item.positionName" :value="item.id" />
61
           <el-option v-for="item in channelOptions" :key="item.id" :label="item.positionName" :value="item.id" />
63
         </el-select>
62
         </el-select>
64
       </el-form-item>
63
       </el-form-item>
65
       <el-form-item label="岗位" prop="postId">
64
       <el-form-item label="岗位" prop="postId">
66
         <el-tree-select v-model="queryParams.postId" :data="postTreeData"
65
         <el-tree-select v-model="queryParams.postId" :data="postTreeData"
67
-          :props="{ value: 'postId', label: 'postName', children: 'children' }" clearable filterable
68
-          placeholder="请选择岗位" check-strictly />
66
+          :props="{ value: 'postId', label: 'postName', children: 'children' }" clearable filterable placeholder="请选择岗位"
67
+          check-strictly />
69
       </el-form-item>
68
       </el-form-item>
70
       <el-form-item>
69
       <el-form-item>
71
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
70
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -97,31 +96,32 @@
97
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
96
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
98
     </el-row>
97
     </el-row>
99
 
98
 
100
-    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
101
-      <el-table-column type="selection" width="55" align="center" />
102
-      <el-table-column label="配分层级" align="center" prop="org" width="110">
99
+    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" style="width: 100%;"
100
+      :scrollbar-always-on="true">
101
+      <el-table-column type="selection" width="55" align="center" resizable />
102
+      <el-table-column label="配分层级" align="center" prop="org" width="110" resizable>
103
         <template #default="{ row }"><dict-tag :options="score_level" :value="row.org" /></template>
103
         <template #default="{ row }"><dict-tag :options="score_level" :value="row.org" /></template>
104
       </el-table-column>
104
       </el-table-column>
105
-      <el-table-column label="事件时间" align="center" prop="eventTime" width="120">
105
+      <el-table-column label="事件时间" align="center" prop="eventTime" width="120" resizable>
106
         <template #default="{ row }">{{ parseTime(row.eventTime, '{y}-{m}-{d}') }}</template>
106
         <template #default="{ row }">{{ parseTime(row.eventTime, '{y}-{m}-{d}') }}</template>
107
       </el-table-column>
107
       </el-table-column>
108
-      <el-table-column label="维度" align="center" prop="dimensionName" width="110" />
109
-      <el-table-column label="二级指标" align="center" prop="level2Name" show-overflow-tooltip />
110
-      <el-table-column label="三级指标" align="center" prop="level3Name" show-overflow-tooltip />
111
-      <el-table-column label="责任人" align="center" prop="personName" width="80" />
112
-      <el-table-column label="部门" align="center" prop="deptName" />
113
-      <el-table-column label="班组" align="center" prop="teamName" />
114
-      <el-table-column label="区域" align="center" prop="regionalName" />
115
-      <el-table-column label="工作点" align="center" prop="channelName" />
116
-      <el-table-column label="岗位" align="center" prop="postName" />
117
-      <el-table-column label="基础分值" align="center" prop="scoreValue" width="90">
108
+      <el-table-column label="维度" align="center" prop="dimensionName" width="110" resizable />
109
+      <el-table-column label="二级指标" align="center" prop="level2Name" min-width="150" show-overflow-tooltip resizable />
110
+      <el-table-column label="三级指标" align="center" prop="level3Name" min-width="170" show-overflow-tooltip resizable />
111
+      <el-table-column label="责任人" align="center" prop="personName" width="80" resizable />
112
+      <el-table-column label="部门" align="center" prop="deptName" min-width="120" resizable />
113
+      <el-table-column label="班组" align="center" prop="teamName" min-width="120" resizable />
114
+      <el-table-column label="区域" align="center" prop="regionalName" min-width="180" resizable />
115
+      <el-table-column label="工作点" align="center" prop="channelName" min-width="100" resizable />
116
+      <el-table-column label="岗位" align="center" prop="postName" min-width="180" resizable />
117
+      <el-table-column label="基础分值" align="center" prop="scoreValue" width="90" resizable>
118
         <template #default="{ row }">
118
         <template #default="{ row }">
119
           <span :style="{ color: row.scoreValue > 0 ? '#67c23a' : row.scoreValue < 0 ? '#f56c6c' : '' }">
119
           <span :style="{ color: row.scoreValue > 0 ? '#67c23a' : row.scoreValue < 0 ? '#f56c6c' : '' }">
120
             {{ row.scoreValue > 0 ? '+' : '' }}{{ row.scoreValue }}
120
             {{ row.scoreValue > 0 ? '+' : '' }}{{ row.scoreValue }}
121
           </span>
121
           </span>
122
         </template>
122
         </template>
123
       </el-table-column>
123
       </el-table-column>
124
-      <el-table-column label="叠加分" align="center" prop="cascadeScore" width="80">
124
+      <el-table-column label="叠加分" align="center" prop="cascadeScore" width="80" resizable>
125
         <template #default="{ row }">
125
         <template #default="{ row }">
126
           <span v-if="row.cascadeScore" :style="{ color: row.cascadeScore > 0 ? '#67c23a' : '#f56c6c' }">
126
           <span v-if="row.cascadeScore" :style="{ color: row.cascadeScore > 0 ? '#67c23a' : '#f56c6c' }">
127
             {{ row.cascadeScore > 0 ? '+' : '' }}{{ row.cascadeScore }}
127
             {{ row.cascadeScore > 0 ? '+' : '' }}{{ row.cascadeScore }}
@@ -129,22 +129,22 @@
129
           <span v-else style="color:#c0c4cc">-</span>
129
           <span v-else style="color:#c0c4cc">-</span>
130
         </template>
130
         </template>
131
       </el-table-column>
131
       </el-table-column>
132
-      <el-table-column label="总分值" align="center" prop="totalScore" width="90">
132
+      <el-table-column label="总分值" align="center" prop="totalScore" width="90" resizable>
133
         <template #default="{ row }">
133
         <template #default="{ row }">
134
           <strong :style="{ color: row.totalScore > 0 ? '#67c23a' : row.totalScore < 0 ? '#f56c6c' : '' }">
134
           <strong :style="{ color: row.totalScore > 0 ? '#67c23a' : row.totalScore < 0 ? '#f56c6c' : '' }">
135
             {{ row.totalScore > 0 ? '+' : '' }}{{ row.totalScore }}
135
             {{ row.totalScore > 0 ? '+' : '' }}{{ row.totalScore }}
136
           </strong>
136
           </strong>
137
         </template>
137
         </template>
138
       </el-table-column>
138
       </el-table-column>
139
-      <el-table-column label="来源" align="center" width="90">
139
+      <el-table-column label="来源" align="center" width="90" resizable>
140
         <template #default="{ row }">
140
         <template #default="{ row }">
141
           <el-tag :type="row.sourceType === '1' ? 'primary' : 'warning'" size="small">
141
           <el-tag :type="row.sourceType === '1' ? 'primary' : 'warning'" size="small">
142
             {{ row.sourceType === '1' ? '手动录入' : '台账同步' }}
142
             {{ row.sourceType === '1' ? '手动录入' : '台账同步' }}
143
           </el-tag>
143
           </el-tag>
144
         </template>
144
         </template>
145
       </el-table-column>
145
       </el-table-column>
146
-      <el-table-column label="事件描述" width="460" align="center" prop="eventDesc" show-overflow-tooltip />
147
-      <el-table-column label="操作" align="center" width="180">
146
+      <el-table-column label="事件描述" min-width="200" align="center" prop="eventDesc" show-overflow-tooltip resizable />
147
+      <el-table-column label="操作" align="center" width="180" resizable>
148
         <template #default="{ row }">
148
         <template #default="{ row }">
149
           <el-button link type="primary" icon="Edit" @click="handleUpdate(row)"
149
           <el-button link type="primary" icon="Edit" @click="handleUpdate(row)"
150
             v-hasPermi="['score:event:edit']">修改</el-button>
150
             v-hasPermi="['score:event:edit']">修改</el-button>
@@ -206,16 +206,15 @@
206
           </el-col>
206
           </el-col>
207
           <el-col :span="12">
207
           <el-col :span="12">
208
             <el-form-item label="区域">
208
             <el-form-item label="区域">
209
-              <el-select v-model="form.regionalId" placeholder="请选择区域" clearable filterable
210
-                style="width:100%" @change="handleFormRegionalChange">
209
+              <el-select v-model="form.regionalId" placeholder="请选择区域" clearable filterable style="width:100%"
210
+                @change="handleFormRegionalChange">
211
                 <el-option v-for="item in regionalOptions" :key="item.id" :label="item.name" :value="item.id" />
211
                 <el-option v-for="item in regionalOptions" :key="item.id" :label="item.name" :value="item.id" />
212
               </el-select>
212
               </el-select>
213
             </el-form-item>
213
             </el-form-item>
214
           </el-col>
214
           </el-col>
215
           <el-col :span="12">
215
           <el-col :span="12">
216
             <el-form-item label="工作点">
216
             <el-form-item label="工作点">
217
-              <el-select v-model="form.channelId" placeholder="请选择工作点" clearable filterable
218
-                style="width:100%">
217
+              <el-select v-model="form.channelId" placeholder="请选择工作点" clearable filterable style="width:100%">
219
                 <el-option v-for="item in formChannelOptions" :key="item.id" :label="item.name" :value="item.id" />
218
                 <el-option v-for="item in formChannelOptions" :key="item.id" :label="item.name" :value="item.id" />
220
               </el-select>
219
               </el-select>
221
             </el-form-item>
220
             </el-form-item>
@@ -349,7 +348,7 @@ const rules = computed(() => {
349
 
348
 
350
 // 搜索表单责任人选项:未选择部门/班组/小组时使用全量人员,否则使用过滤后的人员
349
 // 搜索表单责任人选项:未选择部门/班组/小组时使用全量人员,否则使用过滤后的人员
351
 const searchPersonOptions = computed(() => {
350
 const searchPersonOptions = computed(() => {
352
-  
351
+
353
   if (queryParams.deptId || queryParams.teamId || queryParams.groupId) {
352
   if (queryParams.deptId || queryParams.teamId || queryParams.groupId) {
354
     return queryPersonOptions.value
353
     return queryPersonOptions.value
355
   }
354
   }
@@ -378,6 +377,10 @@ async function handleFormLevelChange() {
378
   teamOptions.value = []; groupOptions.value = []; personOptions.value = []
377
   teamOptions.value = []; groupOptions.value = []; personOptions.value = []
379
 
378
 
380
   const org = form.org
379
   const org = form.org
380
+
381
+
382
+  const r = await getDimensionAll({ pageNum: 1, pageSize: 100, org })
383
+  dimensionOptions.value = r.data || []
381
   // if (org === '2') {
384
   // if (org === '2') {
382
   await loadAllTeams()
385
   await loadAllTeams()
383
   // } else if (org === '3') {
386
   // } else if (org === '3') {
@@ -385,9 +388,6 @@ async function handleFormLevelChange() {
385
   // } else if (org === '4') {
388
   // } else if (org === '4') {
386
   await loadAllPersons()
389
   await loadAllPersons()
387
   // }
390
   // }
388
-
389
-  const r = await getDimensionAll({ pageNum: 1, pageSize: 100, org })
390
-  dimensionOptions.value = r.data || []
391
 }
391
 }
392
 
392
 
393
 async function loadAllTeams() {
393
 async function loadAllTeams() {
@@ -407,7 +407,7 @@ async function loadAllGroups() {
407
 
407
 
408
 async function loadAllPersons() {
408
 async function loadAllPersons() {
409
   const r = await listUser({ pageSize: 9999 })
409
   const r = await listUser({ pageSize: 9999 })
410
-  
410
+
411
   personOptions.value = r.rows || []
411
   personOptions.value = r.rows || []
412
 }
412
 }
413
 
413
 
@@ -517,24 +517,24 @@ function getList() {
517
 function handleQuery() { queryParams.pageNum = 1; getList() }
517
 function handleQuery() { queryParams.pageNum = 1; getList() }
518
 function resetQuery() {
518
 function resetQuery() {
519
   dateRange.value = []
519
   dateRange.value = []
520
-  Object.assign(queryParams, { 
521
-    pageNum: 1, 
522
-    pageSize: 10, 
523
-    personId: null, 
524
-    personName: '', 
525
-    deptId: null, 
526
-    deptName: '', 
527
-    teamId: null, 
528
-    teamName: '', 
529
-    groupId: null, 
530
-    groupName: '', 
531
-    dimensionId: null, 
532
-    sourceType: '', 
533
-    org: '', 
534
-    scoreType: null, 
535
-    regionalId: null, 
536
-    channelId: null, 
537
-    postId: null 
520
+  Object.assign(queryParams, {
521
+    pageNum: 1,
522
+    pageSize: 10,
523
+    personId: null,
524
+    personName: '',
525
+    deptId: null,
526
+    deptName: '',
527
+    teamId: null,
528
+    teamName: '',
529
+    groupId: null,
530
+    groupName: '',
531
+    dimensionId: null,
532
+    sourceType: '',
533
+    org: '',
534
+    scoreType: null,
535
+    regionalId: null,
536
+    channelId: null,
537
+    postId: null
538
   })
538
   })
539
   queryTeamOptions.value = []; queryGroupOptions.value = []; queryPersonOptions.value = []; channelOptions.value = []
539
   queryTeamOptions.value = []; queryGroupOptions.value = []; queryPersonOptions.value = []; channelOptions.value = []
540
   queryRef.value?.resetFields()
540
   queryRef.value?.resetFields()
@@ -760,15 +760,28 @@ const processPostTree = (nodes, isFirstLevel = true) => {
760
   })
760
   })
761
 }
761
 }
762
 
762
 
763
-onMounted(() => { 
764
-  loadDimensions(); 
765
-  loadDepts(); 
766
-  loadQueryDepts(); 
767
-  loadAllPersons(); 
768
-  loadRegions(); 
769
-  listAllTree().then(res => { 
763
+onMounted(() => {
764
+  loadDimensions();
765
+  loadDepts();
766
+  loadQueryDepts();
767
+  loadAllPersons();
768
+  loadRegions();
769
+  listAllTree().then(res => {
770
     postTreeData.value = processPostTree(res.data || [])
770
     postTreeData.value = processPostTree(res.data || [])
771
-  }); 
772
-  getList() 
771
+  });
772
+  getList()
773
 })
773
 })
774
 </script>
774
 </script>
775
+
776
+<style scoped lang="less">
777
+/* Element Plus表格横向滚动配置 */
778
+.table-container :deep(.el-table) {
779
+  width: 100%;
780
+  min-width: 100%;
781
+}
782
+
783
+.table-container :deep(.el-table .el-table__header-wrapper),
784
+.table-container :deep(.el-table .el-table__body-wrapper) {
785
+  overflow-x: auto !important;
786
+}
787
+</style>