feat: 自定义列
This commit is contained in:
rd
@ -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'],
|
||||
},
|
||||
],
|
||||
|
||||
@ -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",
|
||||
|
||||
284
pnpm-lock.yaml
generated
284
pnpm-lock.yaml
generated
@ -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: {}
|
||||
|
||||
15
src/api/all/common.ts
Normal file
15
src/api/all/common.ts
Normal file
@ -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);
|
||||
};
|
||||
BIN
src/components/custom-table-column-modal/img/icon-lock.png
Normal file
BIN
src/components/custom-table-column-modal/img/icon-lock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
216
src/components/custom-table-column-modal/index.vue
Normal file
216
src/components/custom-table-column-modal/index.vue
Normal file
@ -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>
|
||||
99
src/components/custom-table-column-modal/style.scss
Normal file
99
src/components/custom-table-column-modal/style.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
389
src/components/custom-table-column-modal/test.vue
Normal file
389
src/components/custom-table-column-modal/test.vue
Normal file
@ -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"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmit"> 确定 </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>
|
||||
@ -3,3 +3,4 @@
|
||||
@import './checkbox.scss';
|
||||
@import './pagination.scss';
|
||||
@import './tabs.scss';
|
||||
@import './modal.scss';
|
||||
23
src/styles/components/modal.scss
Normal file
23
src/styles/components/modal.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user