feat: 自定义列

config/unplugin/auto-import.ts

@@ -1,3 +1,7 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-24 16:29:10
+ */
 /**
  * 自动引入API
  * */
@@ -17,7 +21,7 @@ export function configAutoImport() {
       '@vueuse/core',
       {
         dayjs: [['default', 'dayjs']],
-        'lodash-es': ['cloneDeep', 'omit', 'pick'],
+        'lodash-es': ['cloneDeep', 'omit', 'pick', 'union'],
         '@/hooks': ['useModal'],
       },
     ],

package.json

@@ -28,8 +28,10 @@
     "swiper": "^11.2.8",
     "vue": "^3.2.45",
     "vue-cropper": "^1.1.4",
+    "vue-draggable-plus": "^0.6.0",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

pnpm-lock.yaml

@@ -41,18 +41,30 @@ importers:
       pinia:
         specifier: ^2.0.29
         version: 2.0.29(typescript@4.9.5)(vue@3.2.45)
+      sass:
+        specifier: ^1.89.2
+        version: 1.89.2
       swiper:
         specifier: ^11.2.8
         version: 11.2.8
       vue:
         specifier: ^3.2.45
         version: 3.2.45
+      vue-cropper:
+        specifier: ^1.1.4
+        version: 1.1.4
+      vue-draggable-plus:
+        specifier: ^0.6.0
+        version: 0.6.0(@types/sortablejs@1.15.8)
       vue-echarts:
         specifier: ^7.0.3
         version: 7.0.3(@vue/runtime-core@3.2.45)(echarts@5.6.0)(vue@3.2.45)
       vue-router:
         specifier: ^4.1.6
         version: 4.1.6(vue@3.2.45)
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.2.45)
     devDependencies:
       '@babel/core':
         specifier: ^7.20.12
@@ -80,10 +92,10 @@ importers:
         version: 0.49.2
       '@vitejs/plugin-vue':
         specifier: ^4.0.0
-        version: 4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))(vue@3.2.45)
+        version: 4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.0.0
-        version: 3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))(vue@3.2.45)
+        version: 3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)
       '@vue/eslint-config-prettier':
         specifier: ^7.0.0
         version: 7.0.0(eslint@8.33.0)(prettier@2.8.3)
@@ -134,7 +146,7 @@ importers:
         version: 4.9.5
       unocss:
         specifier: ^0.49.2
-        version: 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+        version: 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
       unplugin-auto-import:
         specifier: ^0.13.0
         version: 0.13.0(@vueuse/core@9.12.0(vue@3.2.45))(rollup@3.12.0)
@@ -149,13 +161,13 @@ importers:
         version: 1.4.5(rollup@3.12.0)(vue@3.2.45)
       vite:
         specifier: ^4.0.4
-        version: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+        version: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+        version: 0.5.1(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
       vite-plugin-progress:
         specifier: ^0.0.6
-        version: 0.0.6(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+        version: 0.0.6(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
       vue-eslint-parser:
         specifier: ^9.1.0
         version: 9.1.0(eslint@8.33.0)
@@ -550,6 +562,88 @@ packages:
     resolution: {integrity: sha512-/KuoCDVGrLD9W7vwuYhu4HbdT/BpbrhA4Pm9dGn7Jah40kHDGqUnJxugvMjt+4suq53rLQyTA0LRDWfFxfxAOQ==}
     engines: {node: ^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
 
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
   '@polka/url@1.0.0-next.21':
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
@@ -595,6 +689,9 @@ packages:
   '@types/semver@7.3.13':
     resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
 
+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -1032,6 +1129,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
   chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -1204,6 +1305,11 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   digest-header@1.1.0:
     resolution: {integrity: sha512-glXVh42vz40yZb9Cq2oMOt70FIoWiv+vxNvdKdU8CwjLad25qHM3trLxhl9bVjdr6WaslIXhWpn0NO8T/67Qjg==}
     engines: {node: '>= 8.0.0'}
@@ -1684,6 +1790,9 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
+  immutable@5.1.3:
+    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2124,6 +2233,9 @@ packages:
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-fetch-native@1.0.1:
     resolution: {integrity: sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==}
 
@@ -2397,6 +2509,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
   regexp.prototype.flags@1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
     engines: {node: '>= 0.4'}
@@ -2465,6 +2581,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass@1.89.2:
+    resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
 
@@ -2550,6 +2671,9 @@ packages:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
 
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
   source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -2895,6 +3019,9 @@ packages:
       terser:
         optional: true
 
+  vue-cropper@1.1.4:
+    resolution: {integrity: sha512-5m98vBsCEI9rbS4JxELxXidtAui3qNyTHLHg67Qbn7g8cg+E6LcnC+hh3SM/p94x6mFh6KRxT1ttnta+wCYqWA==}
+
   vue-demi@0.13.11:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
@@ -2906,6 +3033,15 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-draggable-plus@0.6.0:
+    resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-echarts@7.0.3:
     resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
     peerDependencies:
@@ -2939,6 +3075,11 @@ packages:
   vue@3.2.45:
     resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
 
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
   webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -3463,6 +3604,67 @@ snapshots:
       - rollup
       - supports-color
 
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher@2.5.1':
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.5
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+    optional: true
+
   '@polka/url@1.0.0-next.21': {}
 
   '@rollup/pluginutils@5.0.2(rollup@3.12.0)':
@@ -3497,6 +3699,8 @@ snapshots:
 
   '@types/semver@7.3.13': {}
 
+  '@types/sortablejs@1.15.8': {}
+
   '@types/web-bluetooth@0.0.16': {}
 
   '@typescript-eslint/eslint-plugin@5.50.0(@typescript-eslint/parser@5.50.0(eslint@8.33.0)(typescript@4.9.5))(eslint@8.33.0)(typescript@4.9.5)':
@@ -3583,11 +3787,11 @@ snapshots:
       '@typescript-eslint/types': 5.50.0
       eslint-visitor-keys: 3.3.0
 
-  '@unocss/astro@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))':
+  '@unocss/astro@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))':
     dependencies:
       '@unocss/core': 0.49.2
       '@unocss/reset': 0.49.2
-      '@unocss/vite': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+      '@unocss/vite': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
     transitivePeerDependencies:
       - rollup
       - vite
@@ -3687,7 +3891,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.49.2
 
-  '@unocss/vite@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))':
+  '@unocss/vite@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))':
     dependencies:
       '@ampproject/remapping': 2.2.0
       '@rollup/pluginutils': 5.0.2(rollup@3.12.0)
@@ -3699,23 +3903,23 @@ snapshots:
       chokidar: 3.5.3
       fast-glob: 3.2.12
       magic-string: 0.27.0
-      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
     transitivePeerDependencies:
       - rollup
 
-  '@vitejs/plugin-vue-jsx@3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))(vue@3.2.45)':
+  '@vitejs/plugin-vue-jsx@3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)':
     dependencies:
       '@babel/core': 7.20.12
       '@babel/plugin-transform-typescript': 7.20.13(@babel/core@7.20.12)
       '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.20.12)
-      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
       vue: 3.2.45
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))(vue@3.2.45)':
+  '@vitejs/plugin-vue@4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)':
     dependencies:
-      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
       vue: 3.2.45
 
   '@volar/language-core@1.0.24':
@@ -4137,6 +4341,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
   chownr@2.0.0: {}
 
   clean-stack@2.2.0: {}
@@ -4282,6 +4490,9 @@ snapshots:
 
   destroy@1.2.0: {}
 
+  detect-libc@1.0.3:
+    optional: true
+
   digest-header@1.1.0: {}
 
   dir-glob@3.0.1:
@@ -4829,6 +5040,8 @@ snapshots:
   image-size@0.5.5:
     optional: true
 
+  immutable@5.1.3: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -5251,6 +5464,9 @@ snapshots:
 
   nice-try@1.0.5: {}
 
+  node-addon-api@7.1.1:
+    optional: true
+
   node-fetch-native@1.0.1: {}
 
   node-releases@2.0.9: {}
@@ -5518,6 +5734,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.1.2: {}
+
   regexp.prototype.flags@1.4.3:
     dependencies:
       call-bind: 1.0.2
@@ -5582,6 +5800,14 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass@1.89.2:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.3
+      source-map-js: 1.2.0
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+
   sax@1.2.4: {}
 
   scroll-into-view-if-needed@2.2.31:
@@ -5671,6 +5897,8 @@ snapshots:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 4.0.0
 
+  sortablejs@1.14.0: {}
+
   source-map-js@1.0.2: {}
 
   source-map-js@1.2.0: {}
@@ -5891,9 +6119,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)):
+  unocss@0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)):
     dependencies:
-      '@unocss/astro': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+      '@unocss/astro': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
       '@unocss/cli': 0.49.2(rollup@3.12.0)
       '@unocss/core': 0.49.2
       '@unocss/preset-attributify': 0.49.2
@@ -5909,7 +6137,7 @@ snapshots:
       '@unocss/transformer-compile-class': 0.49.2
       '@unocss/transformer-directives': 0.49.2
       '@unocss/transformer-variant-group': 0.49.2
-      '@unocss/vite': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3))
+      '@unocss/vite': 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -6039,23 +6267,23 @@ snapshots:
       spdx-correct: 3.1.1
       spdx-expression-parse: 3.0.1
 
-  vite-plugin-compression@0.5.1(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)):
+  vite-plugin-compression@0.5.1(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)):
     dependencies:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-progress@0.0.6(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)):
+  vite-plugin-progress@0.0.6(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)):
     dependencies:
       picocolors: 1.0.0
       progress: 2.0.3
       rd: 2.0.1
-      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)
+      vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
 
-  vite@4.0.4(@types/node@18.11.18)(less@4.1.3):
+  vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2):
     dependencies:
       esbuild: 0.16.17
       postcss: 8.4.21
@@ -6065,11 +6293,18 @@ snapshots:
       '@types/node': 18.11.18
       fsevents: 2.3.2
       less: 4.1.3
+      sass: 1.89.2
+
+  vue-cropper@1.1.4: {}
 
   vue-demi@0.13.11(vue@3.2.45):
     dependencies:
       vue: 3.2.45
 
+  vue-draggable-plus@0.6.0(@types/sortablejs@1.15.8):
+    dependencies:
+      '@types/sortablejs': 1.15.8
+
   vue-echarts@7.0.3(@vue/runtime-core@3.2.45)(echarts@5.6.0)(vue@3.2.45):
     dependencies:
       echarts: 5.6.0
@@ -6117,6 +6352,11 @@ snapshots:
       '@vue/server-renderer': 3.2.45(vue@3.2.45)
       '@vue/shared': 3.2.45
 
+  vuedraggable@4.1.0(vue@3.2.45):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.2.45
+
   webpack-sources@3.2.3: {}
 
   webpack-virtual-modules@0.5.0: {}

src/api/all/common.ts

@@ -0,0 +1,15 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 14:25:22
+ */
+import Http from '@/api';
+
+// 获取用户自定义列
+export const getCustomColumns = (params = {}) => {
+  return Http.get('/v1/user-custom-columns', params);
+};
+
+// 保存用户自定义列
+export const updateCustomColumns = (params = {}) => {
+  return Http.put('/v1/user-custom-columns', params);
+};

src/components/custom-table-column-modal/index.vue

@@ -0,0 +1,216 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 10:54:49
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="自定义列"
+    width="960px"
+    unmountOnClose
+    titleAlign="start"
+    class="custom-table-column-modal"
+    @close="close"
+  >
+    <div class="modal-body">
+      <!-- 左侧分组 -->
+      <div class="left">
+        <div v-for="group in dataSource" :key="group.label" class="group-item">
+          <div class="title-row">
+            <span class="text">{{ group.label }}</span>
+          </div>
+          <div class="fields">
+            <a-checkbox
+              v-for="option in group.columns"
+              :key="option.value"
+              :model-value="isCheck(option)"
+              :value="option.value"
+              :disabled="option.is_require === ENUM_STATUS.NO"
+              @change="(checked) => onCheckChange(checked, option)"
+            >
+              {{ option.label }}
+            </a-checkbox>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧已选 -->
+      <div class="right">
+        <span class="checked-title mb-16px">
+          已添加<span class="count">（{{ checkColumns.length }}）</span>
+        </span>
+        <div class="checked-list">
+          <div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item">
+            <div class="flex items-center">
+              <img :src="icon1" alt="icon" class="mr-8px" width="16" height="16" />
+              <span>{{ groupName }}</span>
+            </div>
+          </div>
+          <VueDraggable v-model="checkColumns">
+            <div
+              v-for="item in checkColumns"
+              :key="item"
+              class="checked-item justify-between"
+              :class="isRequiredColumn(item) ? '!display-none' : ''"
+            >
+              <div class="flex items-center">
+                <icon-menu size="16" class="mr-8px" />
+                <span>{{ getCheckColumnLabel(item) }}</span>
+              </div>
+              <icon-close size="16" class="color-#737478 cursor-pointer" @click="removeCheckedField(item)" />
+            </div>
+          </VueDraggable>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div style="text-align: right">
+        <a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
+        <a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
+
+import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
+
+import icon1 from './img/icon-lock.png';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+    required: true,
+  },
+});
+
+const emit = defineEmits(['success']);
+
+const ENUM_STATUS = {
+  YES: 0,
+  NO: 1,
+};
+
+const visible = ref(false);
+
+const dataSource = ref([]);
+const checkColumns = ref([]); // 选中字段
+const allColumns = ref([]); // 所有字段
+const requiredGroupNames = ref([]); // 必选分组名称
+
+const open = () => {
+  initData();
+  visible.value = true;
+};
+
+const close = () => {
+  visible.value = false;
+
+  dataSource.value = [];
+  checkColumns.value = [];
+  allColumns.value = [];
+  requiredGroupNames.value = [];
+};
+
+const initData = async () => {
+  const data = {
+    selected_columns: [],
+    groups: [
+      {
+        label: '基础信息',
+        is_require: 1,
+        columns: [
+          { label: '账号名称', value: 'account_name', is_require: 1 },
+          { label: '项目分组', value: 'project_group', is_require: 1 },
+          { label: '状态', value: 'status', is_require: 1 },
+          { label: '运营人员', value: 'operator', is_require: 1 },
+          { label: 'AI评价', value: 'ai_score', is_require: 1 },
+        ],
+      },
+      {
+        label: '分析数据',
+        is_require: 0,
+        columns: [
+          { label: '粉丝量', value: 'fans', is_require: 0 },
+          { label: '总赞藏数', value: 'total_likes', is_require: 0 },
+          { label: '观看量', value: 'views', is_require: 0 },
+          { label: '观看量环比', value: 'views_ratio', is_require: 0 },
+          { label: '点赞量', value: 'likes', is_require: 0 },
+          { label: '点赞量环比', value: 'likes_ratio', is_require: 0 },
+          { label: '最新内容标题/日期', value: 'latest_content', is_require: 0 },
+          { label: '最新作品观看数', value: 'latest_views', is_require: 0 },
+          { label: '最新作品日增长', value: 'latest_growth', is_require: 0 },
+          { label: '次新内容标题/日期', value: 'second_latest_content', is_require: 0 },
+          { label: '次新作品观看数', value: 'second_latest_views', is_require: 0 },
+          { label: '次新作品日增长', value: 'second_latest_growth', is_require: 0 },
+        ],
+      },
+    ],
+  };
+
+  // const { code, data } = await getCustomColumns({ type: props.type });
+  // if (code === 0) {
+  const { selected_columns, groups } = data;
+  dataSource.value = groups;
+  setDefaultCheckColumns(groups, selected_columns);
+  allColumns.value = groups.flatMap((group) => group.columns);
+  // }
+};
+
+const isCheck = (option) => {
+  return checkColumns.value.includes(option.value);
+};
+const getCheckColumnLabel = (value) => {
+  const column = allColumns.value.find((column) => column.value === value);
+  return column?.label;
+};
+const isRequiredColumn = (value) => {
+  const column = allColumns.value.find((column) => column.value === value);
+  return column?.is_require === 1;
+};
+
+const removeCheckedField = (value) => {
+  checkColumns.value = checkColumns.value.filter((column) => column !== value);
+};
+
+// 勾选/取消
+const onCheckChange = (checked, option) => {
+  if (checked) {
+    checkColumns.value.push(option.value);
+  } else {
+    checkColumns.value = checkColumns.value.filter((item) => item !== option.value);
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const { code } = await updateCustomColumns({ type: props.type, selected_columns: checkColumns.value });
+  if (code === 200) {
+    emit('success', checkColumns.value);
+    close();
+  }
+};
+
+function setDefaultCheckColumns(groups, selected_columns) {
+  const requiredGroups = groups.filter((group) => group.is_require === 1);
+  const requiredValues = requiredGroups
+    .flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
+    .map((col) => col.value);
+
+  const merged = union(requiredValues, selected_columns);
+
+  checkColumns.value = merged;
+  requiredGroupNames.value = requiredGroups.map((group) => group.label);
+}
+
+// 暴露方法
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

src/components/custom-table-column-modal/style.scss

@@ -0,0 +1,99 @@
+.custom-table-column-modal {
+  .arco-modal-body {
+    .modal-body {
+      height: 504px;
+      border-radius: 8px;
+      border: 1px solid var(--BG-300, #e6e6e8);
+      display: flex;
+      flex-direction: row;
+      .left {
+        flex: 1;
+        padding: 20px;
+        border-right: 1px solid #eee;
+        overflow-y: auto;
+        .group-item {
+          .title-row {
+            border-radius: 4px;
+            background: var(--BG-100, #f7f8fa);
+            display: flex;
+            height: 44px;
+            padding: 0px 12px;
+            align-items: center;
+            margin-bottom: 16px;
+            .text {
+              color: var(--Text-1, #211f24);
+              font-family: 'Alibaba PuHuiTi';
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px; /* 150% */
+            }
+          }
+          .fields {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+          }
+          &:not(:last-child) {
+            margin-bottom: 24px;
+          }
+        }
+      }
+      .right {
+        width: 280px;
+        padding: 16px 12px;
+        display: flex;
+        flex-direction: column;
+        .checked-title {
+          color: var(--Text-1, #211f24);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+          .count {
+            font-weight: 500;
+          }
+        }
+        .checked-list {
+          flex: 1;
+          overflow-y: auto;
+          .checked-item {
+            cursor: move;
+            border-radius: 4px;
+            background: var(--BG-100, #f7f8fa);
+            display: flex;
+            height: 32px;
+            padding: 0px 12px;
+            align-items: center;
+            .text {
+              color: var(--Text-1, #211f24);
+              font-family: 'Alibaba PuHuiTi';
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 22px; /* 157.143% */
+            }
+            &:not(:last-child) {
+              margin-bottom: 12px;
+            }
+          }
+          .draggable-list {
+            min-height: 40px;
+          }
+        }
+      }
+    }
+  }
+  .arco-modal-footer {
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      background: var(--BG-white, #fff);
+      &:hover {
+        border: 1px solid var(--BG-500, #b1b2b5);
+      }
+    }
+  }
+}

src/components/custom-table-column-modal/test.vue

@@ -0,0 +1,389 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 13:51:40
+-->
+<template>
+  <el-drawer v-model:visible="visible" direction="rtl" :wrapperClosable="false" class="com-custom-table-field">
+    <div slot="title" class="drawer-header flex align-items-center">
+      <span class="title">{{ title }}</span>
+      <span class="range">指标最少选择{{ min }}个字段，最多选择{{ max }}个，已选择{{ checkLength }}个</span>
+      <slot></slot>
+      <!-- <div
+          class="font-weight-400 font-size-12 color-primary cursor-pointer"
+          @click="onFieldDescClick"
+        >
+          <span>数据字段说明</span>
+          <i class="el-icon-arrow-right"></i>
+        </div> -->
+    </div>
+
+    <div class="panel-wrapper">
+      <div class="custom-panel left ui-card-block">
+        <!-- <div class="flex justify-content-space-between">
+            <div class="hd">
+              全部字段【{{ columnLength }}个】
+              <span>请至少选择{{ min }}个字段</span
+              ><span v-if="max">至多{{ max }}个字段</span>
+            </div>
+            <slot></slot>
+          </div> -->
+
+        <div class="bd">
+          <template v-for="column in columns">
+            <div v-if="column.children.length" :key="column.prop" class="bd-item">
+              <div class="flex">
+                <p class="title width-fit-content">{{ column.label }}</p>
+                <svg-icon v-if="column.icon" :icon-class="column.icon.name" :style="column.icon.style" class="icon" />
+              </div>
+              <el-checkbox
+                v-for="item in column.children"
+                :key="`${item.prop}${Math.random()}`"
+                :label="item"
+                :disabled="
+                  !column.editable ||
+                  !item.editable ||
+                  (isMax && !getItemChecked(item)) ||
+                  (isMin && getItemChecked(item))
+                "
+                :data-checked="getItemChecked(item)"
+                :checked="getItemChecked(item) || item.selectDisabled"
+                @change="onCheckColumns(item, column.prop, column)"
+              >
+                <div class="flex align-item-center">
+                  <FieldTooltip
+                    v-if="showNewTooltip"
+                    :openDelay="300"
+                    :fieldTooltip="item.fieldTooltip"
+                    :fieldTooltip2="item.fieldTooltip2"
+                    :title="item.label"
+                    :fieldCase="item.fieldCase"
+                  >
+                    <span>{{ item.label }}</span>
+                  </FieldTooltip>
+                  <el-tooltip
+                    v-else
+                    popper-class="ui-overflow-tooltip"
+                    effect="dark"
+                    :content="item.fieldTooltip"
+                    placement="top-start"
+                    :open-delay="300"
+                    :disabled="!item.fieldTooltip"
+                  >
+                    <div slot="content">
+                      <div v-html="item.fieldTooltip"></div>
+                    </div>
+                    <span>{{ item.label }}</span>
+                  </el-tooltip>
+
+                  <svg-icon v-if="item.icon" :icon-class="item.icon.name" :style="item.icon.style" class="icon" />
+                </div>
+              </el-checkbox>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="custom-panel right ui-card-block">
+        <div class="hd flex justify-content-space-between align-items-center mr14">
+          <span class="hd-check-num">已选({{ `${checkLength}` }})</span>
+
+          <span class="label">长按可拖动调整展示排序</span>
+        </div>
+        <div class="bd">
+          <div class="column-row">
+            <draggable v-model="checkColumns">
+              <transition-group>
+                <div v-for="checkColumn in checkColumns" :key="checkColumn.prop" class="column-item mb16">
+                  <p class="title">{{ checkColumn.label }}</p>
+                  <draggable v-model="checkColumn.children">
+                    <transition-group>
+                      <div v-for="item in checkColumn.children" :key="item.prop" class="column-children-item">
+                        <i class="el-icon-more"></i>
+                        <i class="el-icon-more"></i>
+                        <span class="label">{{ item.label }}</span>
+
+                        <i class="el-icon-close" @click="onDelete(item, checkColumn.prop)"></i>
+                      </div>
+                    </transition-group>
+                  </draggable>
+                </div>
+              </transition-group>
+            </draggable>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="submit-row">
+      <el-button @click="visible = false">&nbsp;&nbsp;取消&nbsp;&nbsp;</el-button>
+      <el-button type="primary" @click="onSubmit">&nbsp;&nbsp;确定&nbsp;&nbsp;</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash';
+import draggable from 'vuedraggable';
+import { setCustomTableFields } from '@/api/common';
+import { includes } from '@/utils/tools';
+import FieldTooltip from '@/components/CommonTooltip/FieldTooltip';
+
+export default {
+  components: {
+    draggable,
+    FieldTooltip,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '自定义表格字段',
+    },
+    // 表格类型
+    type: {
+      type: String,
+      default: '',
+    },
+    // 默认字段
+    defaultColumns: {
+      type: Array,
+      default: () => [],
+    },
+    // 至少字段
+    min: {
+      type: Number,
+      default: 3,
+    },
+    // 至多字段
+    max: {
+      type: Number,
+      default: null,
+    },
+    showNewTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    other_setting: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      checkColumns: [], // 选中字段
+      visible: false,
+    };
+  },
+  computed: {
+    // 选择区，显示字段
+    columns() {
+      const list = cloneDeep(this.defaultColumns);
+      list.forEach((item) => {
+        item.children = item.children.sort((a, b) => {
+          return a.order - b.order;
+        });
+      });
+      return list.sort((a, b) => {
+        return a.order - b.order;
+      });
+    },
+    columnLength() {
+      return this.columns.length || 0;
+    },
+    checkLength() {
+      return this.getFlatColumns().length || 0;
+    },
+    isMin() {
+      return this.min && this.checkLength - 1 < this.min;
+    },
+    // 勾选数量达到最大值
+    isMax() {
+      return this.max && this.checkLength + 1 > this.max;
+    },
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    includes,
+    init() {
+      this.initCheckColumns();
+    },
+    // 初始化选中字段
+    initCheckColumns() {
+      const list = cloneDeep(this.defaultColumns);
+      this.checkColumns = this.getCheckColumns(list);
+    },
+    getFlatColumns() {
+      const fields = cloneDeep(this.checkColumns);
+      let _flatColumns = [];
+      for (let i = 0; i < fields.length; i++) {
+        const { children, ...props } = fields[i];
+        _flatColumns = [..._flatColumns, ...children];
+      }
+      return _flatColumns;
+    },
+    getItemChecked(item) {
+      return !!this.getFlatColumns().some((column) => column.prop === item.prop);
+    },
+
+    onCheckColumns(data, parentProp, column) {
+      const _target = this.checkColumns.find((v) => v.prop === parentProp);
+      const isChecked = this.getItemChecked(data);
+      const fn = () => {
+        if (this.checkLength === this.max) {
+          this.$message.warning(`指标最多选择${this.max}个`);
+        }
+      };
+
+      // 新增一组
+      if (!_target) {
+        const { children, ...props } = column;
+        this.checkColumns.push({
+          ...props,
+          children: [
+            {
+              ...data,
+              is_show: true,
+            },
+          ],
+        });
+
+        fn();
+        return;
+      }
+      if (isChecked) {
+        if (_target.children.length === 1) {
+          const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
+          this.checkColumns.splice(_index, 1);
+          return;
+        }
+
+        _target.children.forEach((item, index) => {
+          if (item.prop == data.prop) {
+            _target.children.splice(index, 1);
+          }
+        });
+      } else {
+        _target.children.push({
+          ...data,
+          is_show: true,
+        });
+
+        fn();
+      }
+    },
+    onDelete(data, parentProp) {
+      if (this.isMin) {
+        return this.$message.warning(`最少选择${this.min}个指标`);
+      }
+
+      const _target = this.checkColumns.find((v) => v.prop === parentProp);
+      // 该组最后一项，直接删除整组
+      if (_target.children.length === 1) {
+        const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
+        this.checkColumns.splice(_index, 1);
+        return;
+      }
+
+      _target.children.forEach((item, index) => {
+        if (item.prop == data.prop) {
+          _target.children.splice(index, 1);
+        }
+      });
+
+      // this.$forceUpdate();
+    },
+    // 获取重新排序后数组
+    getSortedColumns() {
+      let columns = cloneDeep(this.columns); // 复制原数据列
+      const checkColumns = cloneDeep(this.checkColumns); // 复制已选数据列
+
+      // 全部置为false
+      columns.forEach((column) => {
+        if (column.editable) {
+          column.is_show = false;
+          column.children.forEach((item) => item.editable && (item.is_show = false));
+        }
+      });
+
+      // 对父级分组排序
+      checkColumns.forEach((checkColumn) => {
+        const _index = columns.findIndex((column) => column.prop === checkColumn.prop);
+        if (_index > -1) {
+          const item = columns.splice(_index, 1)[0];
+          columns.push(item);
+        }
+      });
+
+      // 对子级元素分组排序
+      for (let i = 0; i < checkColumns.length; i++) {
+        const { prop, children } = checkColumns[i];
+        const _target = columns.find((v) => v.prop === prop);
+        const _allIndex = children.map((item) => item.prop);
+
+        // if (_allIndex === 0) {
+        //   _target.is_show = false;
+        //   break;
+        // }
+
+        _target.is_show = true;
+        // 删除已勾选的数据，再把这些数据插入到数组最后面
+        _target.children = _target.children.filter((item) => !_allIndex.includes(item.prop));
+
+        _target.children = [..._target.children, ...children];
+      }
+      return columns;
+    },
+    async onSubmit() {
+      if (this.max && this.checkLength > this.max) {
+        this.$message.error(`你已经选择${this.checkLength}个,最多不能超过${this.max}个`);
+        return;
+      }
+      if (this.min && this.checkLength < this.min) {
+        this.$message.error(`你已经选择${this.checkLength}个,至少不能少于${this.min}个`);
+        return;
+      }
+      const fields = this.getSortedColumns();
+
+      try {
+        const { code } = await setCustomTableFields({
+          custom_type: this.type,
+          fields,
+          other_setting: this.other_setting,
+        });
+        if (code === 0) this.$message.success('保存成功');
+        this.visible = false;
+        this.$emit('submit', fields);
+      } catch (err) {
+        this.$message.error(err);
+      }
+    },
+    showDrawer() {
+      this.visible = true;
+      this.init();
+    },
+    onFieldDescClick() {
+      this.$emit('onFieldDescClick');
+    },
+    getCheckColumns(list) {
+      let arr = [];
+      for (let i = 0, j = list.length; i < j; i++) {
+        if (list[i].editable) {
+          let obj = { ...list[i], children: [] };
+          for (let l = 0, k = list[i].children.length; l < k; l++) {
+            if (list[i].children[l].is_show && list[i].children[l].editable) {
+              obj.children.push(list[i].children[l]);
+            }
+          }
+          if (obj.children.length) {
+            arr.push(obj);
+          }
+        }
+      }
+      return arr;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/styles/components/index.scss

@@ -2,4 +2,5 @@
 @import './table.scss';
 @import './checkbox.scss';
 @import './pagination.scss';
-@import './tabs.scss';
+@import './tabs.scss';
+@import './modal.scss';

src/styles/components/modal.scss

@@ -0,0 +1,23 @@
+.arco-modal {
+  .arco-modal-header {
+    border-bottom: 1px solid var(--Border-1, #d7d7d9);
+    height: 56px;
+    padding: 0 20px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+
+  .arco-modal-body {
+    padding: 24px 20px;
+  }
+
+  .arco-modal-footer {
+    display: flex;
+    height: 64px;
+    padding: 0px 20px;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid var(--Border-1, #d7d7d9);
+  }
+}

src/views/property-marketing/component.scss

@@ -20,17 +20,8 @@
       border: 1px solid var(--BG-500, #b1b2b5);
     }
   }
-  .arco-modal-header {
-    border-bottom: 1px solid var(--Border-1, #d7d7d9);
-    height: 56px;
-    padding: 0 20px;
-    .arco-modal-title {
-      justify-content: flex-start;
-    }
-  }
 
   .arco-modal-body {
-    padding: 24px 20px;
     .arco-form-item {
       margin-bottom: 16px;
       &:last-child {
@@ -46,13 +37,4 @@
       }
     }
   }
-
-  .arco-modal-footer {
-    display: flex;
-    height: 64px;
-    padding: 0px 20px;
-    justify-content: flex-end;
-    align-items: center;
-    border-top: 1px solid var(--Border-1, #d7d7d9);
-  }
 }

src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue

@@ -12,7 +12,7 @@
         <template #icon> <icon-download /> </template>
         <template #default>导出数据</template>
       </a-button>
-      <a-button class="w-110px search-btn" size="medium">
+      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
         <template #icon>
           <img :src="icon1" width="14" height="14" />
         </template>
@@ -106,14 +106,18 @@
       </a-table-column>
     </template>
   </a-table>
+
+  <CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
 import { STATUS_LIST } from '../../constants';
 import { formatTableField } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
-import { useRouter } from 'vue-router';
+import CustomTableColumnModal from '@/components/custom-table-column-modal';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
 import icon2 from '@/assets/img/media-account/icon-warn.png';
@@ -134,6 +138,7 @@ const router = useRouter();
 
 const selectedItems = ref([]);
 const tableRef = ref(null);
+const modalRef = ref(null);
 
 const checkedAll = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@@ -179,6 +184,14 @@ const resetTable = () => {
   tableRef.value?.clearSorters();
 };
 
+const openCustomColumn = () => {
+  modalRef.value.open();
+};
+
+const onCustomColumnSuccess = (selectedColumns) => {
+  console.log(selectedColumns);
+};
+
 defineExpose({
   resetTable,
 });

src/views/property-marketing/put-account/account-data/components/account-table/index.vue

@@ -12,7 +12,7 @@
         <template #icon> <icon-download /> </template>
         <template #default>导出数据</template>
       </a-button>
-      <a-button class="w-110px search-btn" size="medium">
+      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
         <template #icon>
           <img :src="icon1" width="14" height="14" />
         </template>
@@ -118,6 +118,8 @@
       </a-table-column>
     </template>
   </a-table>
+
+  <CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
 </template>
 
 <script setup>
@@ -126,6 +128,7 @@ import { STATUS_LIST } from '../../constants';
 import { formatTableField } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import { useRouter } from 'vue-router';
+import CustomTableColumnModal from '@/components/custom-table-column-modal';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
 import icon2 from '@/assets/img/media-account/icon-warn.png';
@@ -150,6 +153,7 @@ const router = useRouter();
 
 const selectedItems = ref([]);
 const tableRef = ref(null);
+const modalRef = ref(null);
 
 const checkedAll = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@@ -203,6 +207,14 @@ const resetTable = () => {
   tableRef.value?.clearSorters();
 };
 
+const openCustomColumn = () => {
+  modalRef.value.open();
+};
+
+const onCustomColumnSuccess = (selectedColumns) => {
+  console.log(selectedColumns);
+};
+
 defineExpose({
   resetTable,
 });