大数据树形表格优化

src/api/api-types/user.d.ts

@@ -128,7 +128,7 @@ export namespace User {
     MultipleResult<ResponseUserInfo>
   >
   /** 修改用户密码 */
-  type UpdateUserPwd = BaseDefine<{ password: string }>
+  type UpdateUserPwd = BaseDefine<{ password: string; employer?: string }>
   /** 修改用户姓名 */
   type UpdateUserName = BaseDefine<{ name: string; employer?: string }>
   /** 重置指定用户密码 */

src/assets/styles/app.scss

@@ -175,4 +175,14 @@ span.preview {
 }
 .splitpanes.default-theme .splitpanes__splitter{
   background-color:transparent !important
+}
+
+.vxe-checkbox .vxe-checkbox--icon, .vxe-custom--checkbox-option .vxe-checkbox--icon, .vxe-export--panel-column-option .vxe-checkbox--icon, .vxe-table--filter-option .vxe-checkbox--icon, .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
+  font-size:15px;
+}
+.vxe-icon-checkbox-unchecked:before,.vxe-checkbox--icon:before{
+  font-weight: normal;
+}
+.vxe-cell--checkbox,.vxe-checkbox--icon{
+  transition:all .2s;
 }

src/components/common/ChooseMarkers.vue

@@ -5,13 +5,15 @@
     >
     <base-dialog v-model="modalVisible" title="选择评卷员" :width="600" class="marker-dialog">
       <vxe-table
+        size="small"
+        show-overflow
         :max-height="tableMaxHeight"
-        :column-config="{ resizable: true }"
-        :tree-config="{ childrenField: 'markers', rowField: 'id', expandAll: true }"
+        :tree-config="{ childrenField: 'markers', rowField: 'id', expandAll: true, transform: true }"
         :data="tableData"
         :checkbox-config="{ highlight: false }"
-        :scroll-y="{ enabled: true }"
+        :scroll-y="{ enabled: true, gt: 40 }"
         @checkbox-change="selectChangeEvent"
+        @checkbox-all="selectChangeEvent"
       >
         <vxe-column type="checkbox" title="ID" width="280" tree-node></vxe-column>
         <vxe-column field="showName" title="姓名"></vxe-column>
@@ -43,15 +45,37 @@ const tableMaxHeight = window.innerHeight - 150 + 'px'
 const modalVisible = ref(false)
 const { fetch: fetchMarkers, result } = useFetch('adminGetMarkers')
 const tableData = computed(() => {
-  return (result.value || []).map((item: any) => {
+  let arr = []
+  let res = result.value || []
+  for (let i = 0; i < res.length; i++) {
+    let item = res[i]
+    item.id = '_' + item.markingGroupNumber
     item.showName = `第${item.markingGroupNumber}组`
-    !item.id && (item.id = '_' + item.markingGroupNumber)
-    item.markers = (item.markers || []).map((v: any) => {
-      v.showName = v.loginName + '-' + v.name
-      return v
-    })
-    return item
-  })
+    item.parentId = null
+    arr.push({ ...item })
+    let children = item.markers || []
+    for (let j = 0; j < children.length; j++) {
+      let child = children[j]
+      let v = { id: child.id + '', parentId: item.id, showName: child.loginName + '-' + child.name }
+      arr.push({ ...v })
+    }
+  }
+  return arr
+  //以下为大数据量下的测试代码，经验证不卡顿
+  // let arr = result.value || []
+  // let arr2 = []
+  // for (let i = 0; i < 10000; i++) {
+  //   let item = JSON.parse(JSON.stringify(arr[0]))
+  //   item.id = Math.random() + ''
+  //   item.parentId = null
+  //   item.showName = '组组组'
+  //   arr2.push({ ...item })
+  //   for (let j = 0; j < item.markers.length; j++) {
+  //     let v = { id: Math.random(), parentId: item.id, showName: item.markers[j].loginName + '-' + item.markers[j].name }
+  //     arr2.push({ ...v })
+  //   }
+  // }
+  // return arr2
 })
 const props = defineProps<{
   subjectCode: string | number | undefined
@@ -69,6 +93,7 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ $table }) => {
   console.info(`勾选${records.length}个树形节点`, records)
   chooseResult.value = records.filter((item) => !!item.loginName)
 }
+
 const confirm = () => {
   confirmResult.value = cloneDeep(chooseResult.value)
   emits('user-list', [...confirmResult.value])

src/modules/analysis/group-monitoring/index.vue

@@ -75,7 +75,7 @@ const columns: any = [
     prop: 'totalCount',
     minWidth: 138,
     sortable: true,
-    formatter(row) {
+    formatter(row: any) {
       return (
         <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'VIEW')}>
           {row.totalCount}
@@ -88,7 +88,7 @@ const columns: any = [
     prop: 'totalReScoreCount',
     minWidth: 138,
     sortable: true,
-    formatter(row) {
+    formatter(row: any) {
       return (
         <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'MARK')}>
           {row.totalReScoreCount}
@@ -188,7 +188,7 @@ const chartOptions = computed(() => {
           color: '#444',
           fontSize: 10,
           position: 'top',
-          formatter({ value }) {
+          formatter({ value }: { value: number }) {
             return value > 0 ? `${value}` : ''
           },
         },
@@ -205,7 +205,7 @@ const chartOptions = computed(() => {
           color: '#444',
           fontSize: 10,
           position: 'top',
-          formatter({ value }) {
+          formatter({ value }: { value: number }) {
             return value > 0 ? `${value}` : ''
           },
         },