From 0bb4f633d6fbc429fcbc73362711f639e234b571 Mon Sep 17 00:00:00 2001
From: wang-liang0615 <dhuwl0615@163.com>
Date: Thu, 27 Jul 2023 15:08:25 +0800
Subject: [PATCH 1/3] fix acl change page size

---
 .../views/module/permissionHistoryTable.vue    | 17 ++++++++++-------
 .../acl/views/module/resourceHistoryTable.vue  | 18 ++++++++++--------
 .../views/module/resourceTypeHistoryTable.vue  | 18 ++++++++++--------
 .../acl/views/module/roleHistoryTable.vue      | 18 ++++++++++--------
 .../acl/views/module/triggerHistoryTable.vue   | 14 ++++++++------
 .../modules/permissionTable.vue                | 16 +++++++++-------
 .../modules/resourceHistoryTable.vue           | 18 ++++++++++--------
 .../modules/resourceTypeHistoryTable.vue       | 18 ++++++++++--------
 .../modules/roleHistoryTable.vue               | 17 +++++++++--------
 .../modules/triggerHistoryTable.vue            | 14 ++++++++------
 10 files changed, 94 insertions(+), 74 deletions(-)

diff --git a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
index 0811f70f..90ada886 100644
--- a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
@@ -78,6 +78,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import Pager from './pager.vue'
 import SearchForm from './searchForm.vue'
 import { searchPermissonHistory } from '@/modules/acl/api/history'
@@ -251,23 +252,25 @@ export default {
     },
     // 处理查询参数
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let q = ''
-      for (const key in queryParams) {
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
           key !== 'app_id' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return q ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return q ? newQueryParams : _queryParams
     },
 
     // searchForm相关
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
index 6d12a0a4..010a127b 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
@@ -245,9 +245,11 @@ export default {
     },
 
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -255,16 +257,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
index 090ea98c..bbc36109 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
@@ -206,9 +206,11 @@ export default {
     },
 
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -216,16 +218,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)
diff --git a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
index 91fd9c60..4319f96b 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
@@ -237,9 +237,11 @@ export default {
 
     // 处理查询参数
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -247,16 +249,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     // 处理tag颜色
     handleTagColor(operateType) {
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
index 6b733cb3..2f42bcd4 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
@@ -281,25 +281,27 @@ export default {
       }
     },
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let q = ''
-      for (const key in queryParams) {
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
           key !== 'app_id' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           if (q) {
-            q += `,${key}:${queryParams[key]}`
+            q += `,${key}:${_queryParams[key]}`
           } else {
-            q += `${key}:${queryParams[key]}`
+            q += `${key}:${_queryParams[key]}`
           }
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return q ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return q ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
index 0aa33055..853728d2 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import debounce from 'lodash/debounce'
 import Pager from '../../module/pager.vue'
 import SearchForm from '../../module/searchForm.vue'
@@ -387,23 +388,24 @@ export default {
     },
 
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
       let q = ''
-      for (const key in queryParams) {
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
           key !== 'app_id' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return q ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return q ? newQueryParams : _queryParams
     },
   },
 }
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
index 77023733..78e01750 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
@@ -317,9 +317,11 @@ export default {
     },
 
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -327,16 +329,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
index 014b1189..f7417120 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
@@ -253,9 +253,11 @@ export default {
     },
 
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -263,16 +265,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
index bd3094e2..cf9a290f 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
@@ -247,9 +247,10 @@ export default {
 
     // 处理查询参数
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
       let flag = false
-      let q = queryParams.q ? queryParams.q : ''
-      for (const key in queryParams) {
+      let q = _queryParams.q ? _queryParams.q : ''
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
@@ -257,16 +258,16 @@ export default {
           key !== 'q' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           flag = true
-          if (q) q += `,${key}:${queryParams[key]}`
-          else q += `${key}:${queryParams[key]}`
-          delete queryParams[key]
+          if (q) q += `,${key}:${_queryParams[key]}`
+          else q += `${key}:${_queryParams[key]}`
+          delete _queryParams[key]
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return flag ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return flag ? newQueryParams : _queryParams
     },
     // 处理tag颜色
     handleTagColor(operateType) {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
index a7ee747f..a0169ba2 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
@@ -326,25 +326,27 @@ export default {
       }
     },
     handleQueryParams(queryParams) {
+      const _queryParams = _.cloneDeep(queryParams)
+
       let q = ''
-      for (const key in queryParams) {
+      for (const key in _queryParams) {
         if (
           key !== 'page' &&
           key !== 'page_size' &&
           key !== 'app_id' &&
           key !== 'start' &&
           key !== 'end' &&
-          queryParams[key] !== undefined
+          _queryParams[key] !== undefined
         ) {
           if (q) {
-            q += `,${key}:${queryParams[key]}`
+            q += `,${key}:${_queryParams[key]}`
           } else {
-            q += `${key}:${queryParams[key]}`
+            q += `${key}:${_queryParams[key]}`
           }
         }
       }
-      const newQueryParams = { ...queryParams, q }
-      return q ? newQueryParams : queryParams
+      const newQueryParams = { ..._queryParams, q }
+      return q ? newQueryParams : _queryParams
     },
     handleTagColor(operateType) {
       return this.colorMap.get(operateType)

From be50f505d1a2be629992e1584e8f5a7362a74619 Mon Sep 17 00:00:00 2001
From: wang-liang0615 <dhuwl0615@163.com>
Date: Thu, 27 Jul 2023 15:30:27 +0800
Subject: [PATCH 2/3] acl

---
 .../modules/acl/views/module/permissionHistoryTable.vue    | 2 +-
 .../src/modules/acl/views/module/resourceHistoryTable.vue  | 7 ++++++-
 .../modules/acl/views/module/resourceTypeHistoryTable.vue  | 2 +-
 cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue  | 7 ++++++-
 cmdb-ui/src/modules/acl/views/module/searchForm.vue        | 2 --
 .../src/modules/acl/views/module/triggerHistoryTable.vue   | 2 +-
 .../views/operation_history/modules/permissionTable.vue    | 2 +-
 .../operation_history/modules/resourceHistoryTable.vue     | 2 +-
 .../operation_history/modules/resourceTypeHistoryTable.vue | 2 +-
 .../views/operation_history/modules/roleHistoryTable.vue   | 2 +-
 .../operation_history/modules/triggerHistoryTable.vue      | 2 +-
 11 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
index 90ada886..2e4e5610 100644
--- a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
@@ -286,7 +286,7 @@ export default {
       this.getTable(this.queryParams)
     },
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, app_id: this.app_id }
+      this.queryParams = { ...this.queryParams, ...queryParams, app_id: this.app_id }
       this.getTable(this.queryParams)
     },
 
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
index 010a127b..a0b4d9cb 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
@@ -212,7 +212,12 @@ export default {
 
     // searchForm相关
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, app_id: this.app_id, scope: this.checked ? 'resource_group' : 'resource' }
+      this.queryParams = {
+        ...this.queryParams,
+        ...queryParams,
+        app_id: this.app_id,
+        scope: this.checked ? 'resource_group' : 'resource',
+      }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
index bbc36109..773a2cf0 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
@@ -179,7 +179,7 @@ export default {
 
     // searchForm相关
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, app_id: this.app_id, scope: 'resource_type' }
+      this.queryParams = { ...this.queryParams, ...queryParams, app_id: this.app_id, scope: 'resource_type' }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
index 4319f96b..b11d5597 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
@@ -220,7 +220,12 @@ export default {
       this.getTable(this.queryParams)
     },
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, app_id: this.app_id, scope: this.checked ? 'role_relation' : 'role' }
+      this.queryParams = {
+        ...this.queryParams,
+        ...queryParams,
+        app_id: this.app_id,
+        scope: this.checked ? 'role_relation' : 'role',
+      }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/module/searchForm.vue b/cmdb-ui/src/modules/acl/views/module/searchForm.vue
index b01448a4..c00509eb 100644
--- a/cmdb-ui/src/modules/acl/views/module/searchForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/searchForm.vue
@@ -147,7 +147,6 @@ export default {
       expand: false,
       queryParams: {
         page: 1,
-        page_size: 50,
       },
       date: undefined,
       checked: false,
@@ -188,7 +187,6 @@ export default {
     handleReset() {
       this.queryParams = {
         page: 1,
-        page_size: 50,
       }
       this.date = undefined
       this.$emit('searchFormReset')
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
index 2f42bcd4..7018efc2 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
@@ -200,7 +200,7 @@ export default {
 
     // searchForm相关
     handleSearch(queryParams) {
-      this.queryParams = queryParams
+      this.queryParams = { ...this.queryParams, ...queryParams }
       this.queryParams.app_id = this.app_id
       this.getTable(this.queryParams)
     },
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
index 853728d2..83d52c81 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
@@ -348,7 +348,7 @@ export default {
       this.getTable(this.queryParams)
     },
     handleSearch(queryParams) {
-      this.queryParams = queryParams
+      this.queryParams = { ...this.queryParams, ...queryParams }
       this.getTable(this.queryParams)
     },
     handleExpandChange(expand) {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
index 78e01750..18e182b7 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
@@ -267,7 +267,7 @@ export default {
       this.isExpand = expand
     },
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, scope: this.checked ? 'resource_group' : 'resource' }
+      this.queryParams = { ...this.queryParams, ...queryParams, scope: this.checked ? 'resource_group' : 'resource' }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
index f7417120..67a812c4 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
@@ -217,7 +217,7 @@ export default {
       this.isExpand = expand
     },
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, scope: 'resource_type' }
+      this.queryParams = { ...this.queryParams, ...queryParams, scope: 'resource_type' }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
index cf9a290f..4d9f3f54 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
@@ -231,7 +231,7 @@ export default {
       this.getTable(this.queryParams)
     },
     handleSearch(queryParams) {
-      this.queryParams = { ...queryParams, scope: this.checked ? 'role_relation' : 'role' }
+      this.queryParams = { ...this.queryParams, ...queryParams, scope: this.checked ? 'role_relation' : 'role' }
       this.getTable(this.queryParams)
     },
     searchFormReset() {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
index a0169ba2..75e5ed85 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
@@ -241,7 +241,7 @@ export default {
       this.isExpand = expand
     },
     handleSearch(queryParams) {
-      this.queryParams = queryParams
+      this.queryParams = { ...this.queryParams, ...queryParams }
       this.getTable(this.queryParams)
     },
     searchFormReset() {

From a88c9cf7f7ecaf4ed5cc1fd01f4852975a970d5f Mon Sep 17 00:00:00 2001
From: wang-liang0615 <dhuwl0615@163.com>
Date: Thu, 27 Jul 2023 15:47:13 +0800
Subject: [PATCH 3/3] common-setting

---
 .../views/setting/companyStructure/index.vue  |   6 +-
 .../setting/components/employeeTable.vue      | 958 +++++-------------
 2 files changed, 272 insertions(+), 692 deletions(-)

diff --git a/cmdb-ui/src/views/setting/companyStructure/index.vue b/cmdb-ui/src/views/setting/companyStructure/index.vue
index 63e1578b..7620d25c 100644
--- a/cmdb-ui/src/views/setting/companyStructure/index.vue
+++ b/cmdb-ui/src/views/setting/companyStructure/index.vue
@@ -534,7 +534,7 @@ export default {
       })
     },
     getAllFlatEmployees() {
-      getEmployeeList({ block_status: 0, page_size: 99999 }).then((res) => {
+      getEmployeeList({ block_status: -1, page_size: 99999 }).then((res) => {
         this.allFlatEmployees = res.data_list
       })
     },
@@ -721,7 +721,7 @@ export default {
       this.loading = false
     },
     updateAll() {
-      this.expression = []
+      // this.expression = []
       this.updateCount()
       this.updateTableDataByFilter()
     },
@@ -774,7 +774,7 @@ export default {
     },
     reset() {
       this.filterName = ''
-      this.$refs.filterComp.expression = ''
+      this.$refs.filterComp.expression = []
       this.updateTableDataByFilter()
     },
     handleSearch(expression) {
diff --git a/cmdb-ui/src/views/setting/components/employeeTable.vue b/cmdb-ui/src/views/setting/components/employeeTable.vue
index 979b25dd..652ea12e 100644
--- a/cmdb-ui/src/views/setting/components/employeeTable.vue
+++ b/cmdb-ui/src/views/setting/components/employeeTable.vue
@@ -57,23 +57,7 @@
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>用户名</span>
         </span>
       </template>
@@ -88,23 +72,7 @@
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>邮箱</span>
         </span>
       </template>
@@ -120,23 +88,7 @@
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>性别</span>
         </span>
       </template>
@@ -151,57 +103,25 @@
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>手机号</span>
         </span>
       </template>
     </vxe-column>
     <vxe-column
-      field="department_id"
+      field="department_name"
       title="部门"
       min-width="90px"
       sortable
       v-if="
         checkedCols.findIndex((v) => v == 'department_name') !== -1 &&
-        attributes.findIndex((v) => v == 'department_name') !== -1
+          attributes.findIndex((v) => v == 'department_name') !== -1
       "
       key="department_name"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>部门</span>
         </span>
       </template>
@@ -217,29 +137,13 @@
       sortable
       v-if="
         checkedCols.findIndex((v) => v == 'position_name') !== -1 &&
-        attributes.findIndex((v) => v == 'position_name') !== -1
+          attributes.findIndex((v) => v == 'position_name') !== -1
       "
       key="position_name"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>岗位</span>
         </span>
       </template>
@@ -251,29 +155,13 @@
       sortable
       v-if="
         checkedCols.findIndex((v) => v == 'direct_supervisor_id') !== -1 &&
-        attributes.findIndex((v) => v == 'direct_supervisor_id') !== -1
+          attributes.findIndex((v) => v == 'direct_supervisor_id') !== -1
       "
       key="direct_supervisor_id"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>直接上级</span>
         </span>
       </template>
@@ -290,30 +178,14 @@
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'annual_leave') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'annual_leave') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'annual_leave') !== -1
       "
       key="annual_leave"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>年假</span>
         </span>
       </template>
@@ -325,30 +197,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'virtual_annual_leave') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'virtual_annual_leave') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'virtual_annual_leave') !== -1
       "
       key="virtual_annual_leave"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>虚拟年假</span>
         </span>
       </template>
@@ -360,34 +216,58 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'parenting_leave') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'parenting_leave') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'parenting_leave') !== -1
       "
       key="parenting_leave"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>育儿假</span>
         </span>
       </template>
     </vxe-column>
+    <vxe-column
+      field="current_company"
+      title="目前所属主体"
+      sortable
+      min-width="120"
+      v-if="
+        useDFC &&
+          checkedCols.findIndex((v) => v == 'current_company') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'current_company') !== -1
+      "
+      key="current_company"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>目前所属主体</span>
+        </span>
+      </template>
+    </vxe-column>
+    <vxe-column
+      field="dfc_entry_date"
+      title="初始入职日期"
+      sortable
+      min-width="120"
+      v-if="
+        useDFC &&
+          checkedCols.findIndex((v) => v == 'dfc_entry_date') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'dfc_entry_date') !== -1
+      "
+      key="dfc_entry_date"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>初始入职日期</span>
+        </span>
+      </template>
+    </vxe-column>
     <vxe-column
       field="entry_date"
       title="目前主体入职日期"
@@ -395,30 +275,14 @@
       min-width="150"
       v-if="
         checkedCols.findIndex((v) => v == 'entry_date') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'entry_date') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'entry_date') !== -1
       "
       key="entry_date"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>目前主体入职日期</span>
         </span>
       </template>
@@ -431,30 +295,14 @@
       v-bind="tableType === 'structure' ? { filters: internOptions, 'filter-multiple': false } : {}"
       v-if="
         checkedCols.findIndex((v) => v == 'is_internship') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'is_internship') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'is_internship') !== -1
       "
       key="is_internship"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>正式/实习生</span>
         </span>
       </template>
@@ -469,30 +317,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'leave_date') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'leave_date') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'leave_date') !== -1
       "
       key="leave_date"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>离职日期</span>
         </span>
       </template>
@@ -504,30 +336,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'id_card') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'id_card') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'id_card') !== -1
       "
       key="id_card"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>身份证号码</span>
         </span>
       </template>
@@ -539,30 +355,14 @@
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'nation') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'nation') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'nation') !== -1
       "
       key="nation"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>民族</span>
         </span>
       </template>
@@ -574,30 +374,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'id_place') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'id_place') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'id_place') !== -1
       "
       key="id_place"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>籍贯</span>
         </span>
       </template>
@@ -609,30 +393,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'party') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'party') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'party') !== -1
       "
       key="party"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>组织关系</span>
         </span>
       </template>
@@ -644,30 +412,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'household_registration_type') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'household_registration_type') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'household_registration_type') !== -1
       "
       key="household_registration_type"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>户籍类型</span>
         </span>
       </template>
@@ -679,30 +431,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'hometown') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'hometown') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'hometown') !== -1
       "
       key="hometown"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>户口所在地</span>
         </span>
       </template>
@@ -714,30 +450,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'marry') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'marry') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'marry') !== -1
       "
       key="marry"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>婚姻情况</span>
         </span>
       </template>
@@ -749,30 +469,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'max_degree') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'max_degree') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'max_degree') !== -1
       "
       key="max_degree"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>最高学历</span>
         </span>
       </template>
@@ -784,30 +488,14 @@
       min-width="110"
       v-if="
         checkedCols.findIndex((v) => v == 'emergency_person') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'emergency_person') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'emergency_person') !== -1
       "
       key="emergency_person"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>紧急联系人</span>
         </span>
       </template>
@@ -819,30 +507,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'emergency_phone') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'emergency_phone') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'emergency_phone') !== -1
       "
       key="emergency_phone"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>紧急联系电话</span>
         </span>
       </template>
@@ -854,30 +526,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'bank_card_number') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'bank_card_number') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'bank_card_number') !== -1
       "
       key="bank_card_number"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>卡号</span>
         </span>
       </template>
@@ -889,30 +545,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'bank_card_name') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'bank_card_name') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'bank_card_name') !== -1
       "
       key="bank_card_name"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>银行</span>
         </span>
       </template>
@@ -924,30 +564,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'opening_bank') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'opening_bank') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'opening_bank') !== -1
       "
       key="opening_bank"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>开户行</span>
         </span>
       </template>
@@ -959,30 +583,14 @@
       min-width="120"
       v-if="
         checkedCols.findIndex((v) => v == 'account_opening_location') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'account_opening_location') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'account_opening_location') !== -1
       "
       key="account_opening_location"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>开户地</span>
         </span>
       </template>
@@ -993,30 +601,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'school') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'school') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'school') !== -1
       "
       key="school"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>学校</span>
         </span>
       </template>
@@ -1027,30 +619,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'major') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'major') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'major') !== -1
       "
       key="major"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>专业</span>
         </span>
       </template>
@@ -1061,30 +637,14 @@
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'education') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'education') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'education') !== -1
       "
       key="education"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>学历</span>
         </span>
       </template>
@@ -1095,30 +655,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'graduation_year') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'graduation_year') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'graduation_year') !== -1
       "
       key="graduation_year"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>毕业年份</span>
         </span>
       </template>
@@ -1129,30 +673,14 @@
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'name') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'name') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'name') !== -1
       "
       key="name"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>子女姓名</span>
         </span>
       </template>
@@ -1163,30 +691,14 @@
       min-width="80"
       v-if="
         checkedCols.findIndex((v) => v == 'gender') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'gender') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'gender') !== -1
       "
       key="gender"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>子女性别</span>
         </span>
       </template>
@@ -1197,30 +709,14 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'birthday') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'birthday') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'birthday') !== -1
       "
       key="birthday"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>子女出生日期</span>
         </span>
       </template>
@@ -1231,34 +727,51 @@
       min-width="100"
       v-if="
         checkedCols.findIndex((v) => v == 'parental_leave_left') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'parental_leave_left') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'parental_leave_left') !== -1
       "
       key="parental_leave_left"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>剩余育儿假</span>
         </span>
       </template>
     </vxe-column>
+    <vxe-column
+      field="roles"
+      title="角色"
+      v-bind="tableType === 'structure' ? { filters: [], 'filter-multiple': true } : {}"
+      :min-width="120"
+      v-if="
+        checkedCols.findIndex((v) => v == 'roles') !== -1 &&
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'roles') !== -1
+      "
+      key="role"
+    >
+      <template #header>
+        <span class="vxe-handle">
+          <OpsMoveIcon class="move-icon" />
+          <span>角色</span>
+        </span>
+      </template>
+      <template #default="{ row }">
+        <a-popover v-if="row.roles.length">
+          <template slot="content">
+            <a-tag v-for="item in row.roles" color="blue" :key="item.role_id" :style="{ marginBottom: '2px' }">
+              {{ item.role_name }}
+            </a-tag>
+          </template>
+          <span>
+            <a-tag v-for="item in row.roles" color="blue" :key="item.role_id" :style="{ marginBottom: '2px' }">
+              {{ item.role_name }}
+            </a-tag>
+          </span>
+        </a-popover>
+      </template>
+    </vxe-column>
     <vxe-column
       field="last_login"
       title="上次登录时间"
@@ -1267,30 +780,14 @@
       :formatter="formatDate"
       v-if="
         checkedCols.findIndex((v) => v == 'last_login') !== -1 &&
-        tableType == 'structure' &&
-        attributes.findIndex((v) => v == 'last_login') !== -1
+          tableType == 'structure' &&
+          attributes.findIndex((v) => v == 'last_login') !== -1
       "
       key="last_login"
     >
       <template #header>
         <span class="vxe-handle">
-          <svg
-            t="1662694543392"
-            class="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="2689"
-            width="17"
-            height="17"
-            style="display: none; position: absolute; left: -3px; top: 12px"
-          >
-            <path
-              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
-              p-id="2690"
-              fill="#8a8a8a"
-            ></path>
-          </svg>
+          <OpsMoveIcon class="move-icon" />
           <span>上次登录时间</span>
         </span>
       </template>
@@ -1317,7 +814,7 @@
           >
             <template slot="content">
               <div :style="{ maxHeight: `${windowHeight - 320}px`, overflowY: 'auto', width: '160px' }">
-                <a-checkbox-group v-model="unsbmitCheckedCols" :options="options" style="display: grid">
+                <a-checkbox-group v-model="unsbmitCheckedCols" :options="options" style="display: grid;">
                 </a-checkbox-group>
               </div>
               <div
@@ -1333,32 +830,40 @@
                 <a-button size="small" @click="handleSubmit" type="primary">确定</a-button>
               </div>
             </template>
-            <a-icon type="control" style="cursor: pointer" />
+            <a-icon type="control" style="cursor: pointer;" />
           </a-popover>
         </template>
       </template>
       <template #default="{ row }">
         <a-space v-if="tableType === 'structure'">
-          <a><a-icon type="edit" @click="openEmployeeModal(row, 'edit')" /></a>
+          <a><a-icon type="edit" @click="openEmployeeModal(row, 'edit')"/></a>
           <a-tooltip>
-            <template slot="title"> 重置密码 </template>
-            <a><a-icon type="reload" @click="openBatchModal('password', row)" /></a>
+            <template slot="title">
+              重置密码
+            </template>
+            <a><a-icon type="reload" @click="openBatchModal('password', row)"/></a>
           </a-tooltip>
           <a-tooltip v-if="!row.block">
-            <template slot="title"> 禁用 </template>
+            <template slot="title">
+              禁用
+            </template>
             <a :style="{ color: 'red' }" @click="openBatchModal('block', row, 1)">
               <ops-icon type="icon-xianxing-weilianjie" />
             </a>
           </a-tooltip>
           <a-tooltip v-else>
-            <template slot="title"> 恢复 </template>
+            <template slot="title">
+              恢复
+            </template>
             <a @click="openBatchModal('block', row, 0)">
               <ops-icon type="icon-xianxing-yilianjie" />
             </a>
           </a-tooltip>
         </a-space>
         <a-tooltip v-else>
-          <template slot="title"> 移除 </template>
+          <template slot="title">
+            移除
+          </template>
           <a :style="{ color: 'red' }" @click="removeEmployee(row)">
             <ops-icon type="icon-xianxing-shanchuyonghu" />
           </a>
@@ -1376,13 +881,17 @@
 
 <script>
 import { mapState } from 'vuex'
+import { getRoleList } from '@/api/role'
 import { getDepartmentName, getDirectorName } from '@/utils/util'
 import Bus from '../companyStructure/eventBus/bus'
 import appConfig from '@/config/app'
 import Sortable from 'sortablejs'
 import XEUtils from 'xe-utils'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
+
 export default {
   name: 'EmployeeTable',
+  components: { OpsMoveIcon },
   props: {
     tableData: {
       type: Array,
@@ -1496,6 +1005,7 @@ export default {
       checkedCols,
       unsbmitCheckedCols: [],
       visible: false,
+      useDFC: appConfig.useDFC,
       tableDragClassName: [], // 表格拖拽的参数
       attributes: [],
       internMap: [
@@ -1530,10 +1040,11 @@ export default {
     Bus.$on('reqExportSelectEvent', () => {
       this.exportExcel()
     })
-    this.options = this.options
-      .filter((item) => item.label !== '目前所属主体')
-      .filter((item) => item.label !== '初始入职日期')
-
+    if (!this.useDFC) {
+      this.options = this.options
+        .filter((item) => item.label !== '目前所属主体')
+        .filter((item) => item.label !== '初始入职日期')
+    }
     this.unsbmitCheckedCols = this.checkedCols
   },
   beforeDestroy() {
@@ -1545,6 +1056,8 @@ export default {
       localStorage.removeItem('setting-table-CheckedCols')
     }
     setTimeout(() => {
+      // 获取并设置角色过滤项
+      this.setRoleFilter()
       // table拖拽
       this.columnDrop()
     }, 1000)
@@ -1557,6 +1070,37 @@ export default {
   methods: {
     getDepartmentName,
     getDirectorName,
+    getVxetableRef() {
+      return this.$refs.employeeTable
+    },
+    setRoleFilter() {
+      // 获取并设置角色过滤项
+      this.$nextTick(() => {
+        if (this.tableType === 'structure') {
+          getRoleList('all').then((res) => {
+            const _filterRoleList = []
+            Object.keys(res).forEach((key) => {
+              _filterRoleList.push(
+                ...res[key].role_list.map((role) => {
+                  return {
+                    label: role.role_name,
+                    value: role.role_id,
+                  }
+                })
+              )
+            })
+            this.filterRoleList = _filterRoleList
+            const $table = this.$refs.employeeTable
+            if ($table) {
+              const nameColumn = $table.getColumnByField('role')
+              if (nameColumn) {
+                $table.setFilter(nameColumn, this.filterRoleList)
+              }
+            }
+          })
+        }
+      })
+    },
     initAttributes() {
       // 过滤用户没有权限的字段
       if (this.tableData.length) {
@@ -1644,6 +1188,9 @@ export default {
       })
     },
     contentMethod({ column }) {
+      if (column.property === 'role') {
+        return ''
+      }
       return null
     },
     // table中上次登录时间如果后端返回None则显示为空
@@ -1673,6 +1220,10 @@ export default {
     },
     handleSubmit() {
       this.visible = false
+      // 如果用户选择了角色列，获取角色list
+      if (!this.checkedCols.includes('roles') && this.unsbmitCheckedCols.includes('roles')) {
+        this.setRoleFilter()
+      }
       localStorage.setItem('setting-table-CheckedCols', JSON.stringify(this.unsbmitCheckedCols))
       this.$nextTick(() => {
         this.checkedCols = JSON.parse(localStorage.getItem('setting-table-CheckedCols'))
@@ -1695,7 +1246,14 @@ export default {
         this.fillZero(minute) +
         this.fillZero(second)
       this.$refs.employeeTable.exportData({
-        data: this.$refs.employeeTable.getCheckboxRecords(),
+        data: this.$refs.employeeTable.getCheckboxRecords().map((item) => {
+          return {
+            ...item,
+            is_internship: item.is_internship ? '实习生' : '正式',
+            direct_supervisor_id: getDirectorName(this.allFlatEmployees, item.direct_supervisor_id),
+            roles: this.getRoleName(item.roles)
+          }
+        }),
         filename: 'employee-' + now_time,
         sheetName: 'Sheet1',
         type: 'xlsx',
@@ -1703,11 +1261,16 @@ export default {
         useStyle: true, // 是否导出样式
         isFooter: false, // 是否导出表尾（比如合计）
         // 过滤那个字段导出
-        columnFilterMethod: function (column, $columnIndex) {
+        columnFilterMethod: function(column, $columnIndex) {
           return !(column.$columnIndex === 0)
           // 0是复选框 不导出
         },
       })
+      this.$refs.employeeTable.clearCheckboxRow()
+      this.$refs.employeeTable.clearCheckboxReserve()
+      this.$refs.employeeTable.clearSort()
+      this.tableSortData = undefined
+      Bus.$emit('changeSelectedRowKeys', [])
     },
     fillZero(str) {
       let realNum
@@ -1718,6 +1281,14 @@ export default {
       }
       return realNum
     },
+    getRoleName(roles) {
+      let roles_str = ''
+      roles.forEach(role => {
+        roles_str += `${role.role_name}` + '，'
+      })
+      roles_str = roles_str.substring(0, roles_str.length - 1)
+      return roles_str
+    },
     columnDrop() {
       this.$nextTick(() => {
         if (this.$refs.employeeTable) {
@@ -1760,7 +1331,16 @@ export default {
 <style lang="less" scoped>
 .vxe-handle {
   cursor: move;
-  &:hover > svg {
+  .move-icon {
+    display: none;
+    width: 17px;
+    height: 17px;
+    display: none;
+    position: absolute;
+    left: -3px;
+    top: 12px;
+  }
+  &:hover > .move-icon {
     display: inline !important;
   }
 }