提交代码
This commit is contained in:
lq
@ -11,6 +11,7 @@
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@arco-design/web-vue": "^2.42.0",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
|
||||
99
pnpm-lock.yaml
generated
99
pnpm-lock.yaml
generated
@ -8,6 +8,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@ant-design/icons-vue':
|
||||
specifier: ^7.0.1
|
||||
version: 7.0.1(vue@3.5.18(typescript@4.9.5))
|
||||
'@arco-design/web-vue':
|
||||
specifier: ^2.42.0
|
||||
version: 2.42.0(vue@3.5.18(typescript@4.9.5))
|
||||
@ -450,133 +453,133 @@ packages:
|
||||
resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
|
||||
|
||||
'@esbuild/android-arm64@0.16.17':
|
||||
resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==, tarball: https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
|
||||
'@esbuild/android-arm@0.16.17':
|
||||
resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==, tarball: https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm]
|
||||
os: [android]
|
||||
|
||||
'@esbuild/android-x64@0.16.17':
|
||||
resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==, tarball: https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [android]
|
||||
|
||||
'@esbuild/darwin-arm64@0.16.17':
|
||||
resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==, tarball: https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@esbuild/darwin-x64@0.16.17':
|
||||
resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==, tarball: https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@esbuild/freebsd-arm64@0.16.17':
|
||||
resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [freebsd]
|
||||
|
||||
'@esbuild/freebsd-x64@0.16.17':
|
||||
resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
|
||||
'@esbuild/linux-arm64@0.16.17':
|
||||
resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-arm@0.16.17':
|
||||
resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-ia32@0.16.17':
|
||||
resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==, tarball: https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-loong64@0.16.17':
|
||||
resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==, tarball: https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [loong64]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-mips64el@0.16.17':
|
||||
resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==, tarball: https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [mips64el]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-ppc64@0.16.17':
|
||||
resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==, tarball: https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-riscv64@0.16.17':
|
||||
resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==, tarball: https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-s390x@0.16.17':
|
||||
resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==, tarball: https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/linux-x64@0.16.17':
|
||||
resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==, tarball: https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@esbuild/netbsd-x64@0.16.17':
|
||||
resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==, tarball: https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [netbsd]
|
||||
|
||||
'@esbuild/openbsd-x64@0.16.17':
|
||||
resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==, tarball: https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [openbsd]
|
||||
|
||||
'@esbuild/sunos-x64@0.16.17':
|
||||
resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==, tarball: https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [sunos]
|
||||
|
||||
'@esbuild/win32-arm64@0.16.17':
|
||||
resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==, tarball: https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@esbuild/win32-ia32@0.16.17':
|
||||
resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==, tarball: https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
|
||||
'@esbuild/win32-x64@0.16.17':
|
||||
resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==, tarball: https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz}
|
||||
resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
@ -657,91 +660,91 @@ packages:
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@parcel/watcher-linux-arm-musl@2.5.1':
|
||||
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@parcel/watcher-linux-arm64-glibc@2.5.1':
|
||||
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@parcel/watcher-linux-arm64-musl@2.5.1':
|
||||
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@parcel/watcher-linux-x64-glibc@2.5.1':
|
||||
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@parcel/watcher-linux-x64-musl@2.5.1':
|
||||
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==, tarball: https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@parcel/watcher-win32-arm64@2.5.1':
|
||||
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==, tarball: https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz}
|
||||
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==, tarball: https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.5.1.tgz}
|
||||
resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
|
||||
'@polka/url@1.0.0-next.21':
|
||||
@ -800,13 +803,13 @@ packages:
|
||||
resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
|
||||
|
||||
'@types/sortablejs@1.15.8':
|
||||
resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==, tarball: https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz}
|
||||
resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
|
||||
|
||||
'@types/svgo@2.6.4':
|
||||
resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
|
||||
|
||||
'@types/trusted-types@2.0.7':
|
||||
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==, tarball: https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz}
|
||||
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
|
||||
|
||||
'@types/web-bluetooth@0.0.16':
|
||||
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
|
||||
@ -1687,7 +1690,7 @@ packages:
|
||||
resolution: {integrity: sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==}
|
||||
|
||||
canvg@3.0.11:
|
||||
resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==, tarball: https://registry.npmmirror.com/canvg/-/canvg-3.0.11.tgz}
|
||||
resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
|
||||
chalk@1.1.3:
|
||||
@ -1877,7 +1880,7 @@ packages:
|
||||
resolution: {integrity: sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==}
|
||||
|
||||
core-js@3.45.0:
|
||||
resolution: {integrity: sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==, tarball: https://registry.npmmirror.com/core-js/-/core-js-3.45.0.tgz}
|
||||
resolution: {integrity: sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==}
|
||||
|
||||
core-util-is@1.0.3:
|
||||
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||
@ -2197,7 +2200,7 @@ packages:
|
||||
engines: {node: '>=0.12'}
|
||||
|
||||
errno@0.1.8:
|
||||
resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==, tarball: https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz}
|
||||
resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
|
||||
hasBin: true
|
||||
|
||||
error-ex@1.3.2:
|
||||
@ -2614,7 +2617,7 @@ packages:
|
||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||
|
||||
fsevents@2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz}
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
|
||||
@ -2778,7 +2781,7 @@ packages:
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
graceful-fs@4.2.10:
|
||||
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==, tarball: https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz}
|
||||
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
|
||||
|
||||
grapheme-splitter@1.0.4:
|
||||
resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
|
||||
@ -3716,7 +3719,7 @@ packages:
|
||||
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
|
||||
|
||||
make-dir@2.1.0:
|
||||
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==, tarball: https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz}
|
||||
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
make-iterator@1.0.1:
|
||||
@ -3837,7 +3840,7 @@ packages:
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
mime@1.6.0:
|
||||
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==, tarball: https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz}
|
||||
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
|
||||
@ -3966,7 +3969,7 @@ packages:
|
||||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
|
||||
needle@3.2.0:
|
||||
resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==, tarball: https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz}
|
||||
resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
|
||||
engines: {node: '>= 4.4.x'}
|
||||
hasBin: true
|
||||
|
||||
@ -4872,7 +4875,7 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
source-map@0.6.1:
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==, tarball: https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz}
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
source-map@0.7.4:
|
||||
@ -5557,7 +5560,7 @@ packages:
|
||||
eslint: '>=6.0.0'
|
||||
|
||||
vue-lazyload@3.0.0:
|
||||
resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==, tarball: https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-3.0.0.tgz}
|
||||
resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==}
|
||||
|
||||
vue-router@4.5.1:
|
||||
resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
|
||||
|
||||
@ -14,7 +14,7 @@ export const delTaskSchedules = (id: string) => {
|
||||
// 任务管理-修改
|
||||
export const editTaskSchedules = (id: string, params = {}) => {
|
||||
console.log('id', id);
|
||||
return Http.put(`/v1/task-schedules/${id}`,params);
|
||||
return Http.put(`/v1/task-schedules/${id}`, params);
|
||||
};
|
||||
|
||||
// 任务管理-详情
|
||||
@ -22,3 +22,18 @@ export const getTaskSchedulesDetail = (id: string) => {
|
||||
console.log('id', id);
|
||||
return Http.get(`/v1/task-schedules/${id}`);
|
||||
};
|
||||
//任务管理-手动添加
|
||||
export const createTask = (params = {}) => {
|
||||
return Http.post(`/v1/task-schedules/manual`, params);
|
||||
};
|
||||
|
||||
//任务管理-手动添加
|
||||
export const generateContent = (id: string) => {
|
||||
return Http.post(`/v1/task-schedules/${id}/generate-content`);
|
||||
};
|
||||
|
||||
// 任务管理-修改
|
||||
export const editTaskSchedulesTime = (id: string, params = {}) => {
|
||||
console.log('id', id);
|
||||
return Http.patch(`/v1/task-schedules/${id}/execution-time`, params);
|
||||
};
|
||||
|
||||
BIN
src/assets/img/media-account/icon-AI.png
Normal file
BIN
src/assets/img/media-account/icon-AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@ -11,23 +11,35 @@
|
||||
:allowClear="allClear"
|
||||
:showSearch="allowSearch"
|
||||
showArrow
|
||||
:maxTagCount="maxTagCount"
|
||||
:maxTagCount="maxTagCount !== undefined ? maxTagCount : multiple ? 3 : undefined"
|
||||
@change="handleChange"
|
||||
@dropdownVisibleChange="onDropdownVisibleChange"
|
||||
:filterOption="allowSearch ? filterOption : undefined"
|
||||
>
|
||||
<Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
<Option v-for="(item, index) in validOptions" :key="index" :value="item.value" :label="item.label">
|
||||
<div class="flex items-center">
|
||||
<img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
|
||||
{{ item.name }}
|
||||
<img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-4px rounded-4px" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</Option>
|
||||
<template #tag="{ label, icon }">
|
||||
<div class="flex items-center">
|
||||
<img v-if="icon" :src="icon" class="w-16px h-16px mr-4px rounded-4px" />
|
||||
<span>{{ label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!allowSearch" #empty>
|
||||
<div v-if="validOptions.length === 0" class="empty-placeholder">
|
||||
{{ placeholder || '暂无数据' }}
|
||||
</div>
|
||||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -48,7 +60,7 @@ const props = defineProps({
|
||||
},
|
||||
maxTagCount: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
default: undefined,
|
||||
},
|
||||
allClear: {
|
||||
type: Boolean,
|
||||
@ -64,6 +76,26 @@ const emits = defineEmits(['update:modelValue', 'change', 'dropdownVisibleChange
|
||||
|
||||
const selectedValues = ref(props.multiple ? [] : '');
|
||||
|
||||
// 计算有效选项，兼容不同的数据格式
|
||||
const validOptions = computed(() => {
|
||||
if (!props.options || !Array.isArray(props.options)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return props.options
|
||||
.filter(
|
||||
(item) =>
|
||||
item &&
|
||||
(item.id !== undefined || item.value !== undefined) &&
|
||||
(item.name !== undefined || item.label !== undefined),
|
||||
)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
value: item.id !== undefined ? item.id : item.value,
|
||||
label: item.name !== undefined ? item.name : item.label,
|
||||
}));
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
@ -84,3 +116,11 @@ const onDropdownVisibleChange = (visible) => {
|
||||
emits('dropdownVisibleChange', visible);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty-placeholder {
|
||||
padding: 8px 12px;
|
||||
color: #8f959e;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
115
src/components/filter-popup/index.vue
Normal file
115
src/components/filter-popup/index.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<!-- // 新增内容： -->
|
||||
<template>
|
||||
<a-popover trigger="click" :overlayStyle="{ width: '300px' }" overlayClassName="filter-popup-popover">
|
||||
<template #content>
|
||||
<div>
|
||||
<!-- 运营人员 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">运营人员</div>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect
|
||||
placeholder="请选择运营人员"
|
||||
:options="operators"
|
||||
v-model="localQuery.operator"
|
||||
@change="(val) => handleChange('operator_id', val)"
|
||||
class="!w-200px"
|
||||
:allowSearch="true"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 发布平台 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">发布平台</div>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect
|
||||
:options="platformOptions"
|
||||
v-model="localQuery.platform"
|
||||
@change="(val) => handleChange('platform', val)"
|
||||
class="!w-200px"
|
||||
placeholder="请选择发布平台"
|
||||
:allowSearch="true"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 账号名称 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-70px">账号名称</div>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect
|
||||
v-model="localQuery.accounts"
|
||||
:options="accountList"
|
||||
:multiple="true"
|
||||
@change="(val) => handleChange('account_id', val)"
|
||||
class="!w-200px"
|
||||
placeholder="请选择账号名称"
|
||||
:allowSearch="true"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button size="small">
|
||||
<template #icon>
|
||||
<FilterOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>筛选</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { FilterOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
triggerStyle: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['filter-change']);
|
||||
|
||||
// 初始化本地查询对象，只设置非空值
|
||||
const localQuery = ref({});
|
||||
|
||||
// 监听外部 query 变化并同步到本地状态
|
||||
watch(
|
||||
() => props.query,
|
||||
(newQuery) => {
|
||||
if (newQuery) {
|
||||
// 只有当值不为空时才设置到localQuery中
|
||||
const filteredQuery = {};
|
||||
if (newQuery.operator) {
|
||||
filteredQuery.operator = newQuery.operator;
|
||||
}
|
||||
if (newQuery.platform) {
|
||||
filteredQuery.platform = newQuery.platform;
|
||||
}
|
||||
if (newQuery.accounts && newQuery.accounts.length > 0) {
|
||||
filteredQuery.accounts = newQuery.accounts;
|
||||
}
|
||||
localQuery.value = { ...filteredQuery };
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
// 处理筛选变化
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
console.log(localQuery.value);
|
||||
emit('filter-change', { ...localQuery.value });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filter-popup-popover :deep(.ant-popover-inner-content) {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,10 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import { merge } from 'lodash-es';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
interface UseTableSelectionWithPaginationOptions {
|
||||
rowKey?: string; // 主键字段名，默认 'id'
|
||||
type?: 'checkbox' | 'radio'; // 选择类型，默认 'checkbox'
|
||||
pageInfo?: {
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
@ -20,6 +23,7 @@ const DEFAULT_PAGE_INFO = {
|
||||
|
||||
export function useTableSelectionWithPagination(options: UseTableSelectionWithPaginationOptions = {}) {
|
||||
const rowKey = options.rowKey || 'id';
|
||||
const type = options.type || 'checkbox'; // 默认为复选框
|
||||
|
||||
const selectedRowKeys = ref<Array<string | number>>([]);
|
||||
const selectedRows = ref<Array<any>>([]);
|
||||
@ -31,6 +35,17 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
// 单行选择
|
||||
const handleSelect = (record: any, select: boolean) => {
|
||||
const _targetKey = record[rowKey];
|
||||
if (type === 'radio') {
|
||||
// 单选模式
|
||||
if (select) {
|
||||
selectedRows.value = [record];
|
||||
selectedRowKeys.value = [_targetKey];
|
||||
} else {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
}
|
||||
} else {
|
||||
// 多选模式（默认）
|
||||
if (select) {
|
||||
selectedRows.value.push(record);
|
||||
selectedRowKeys.value.push(_targetKey);
|
||||
@ -38,12 +53,16 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
|
||||
selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
|
||||
}
|
||||
}
|
||||
|
||||
options.onSelectChange?.();
|
||||
};
|
||||
|
||||
// 全选/取消全选
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
// 单选模式下不支持全选
|
||||
if (type === 'radio') return;
|
||||
|
||||
const currentPageRows = dataSource.value;
|
||||
const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
|
||||
|
||||
@ -60,26 +79,44 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
options.onSelectChange?.();
|
||||
};
|
||||
|
||||
// 选择变更处理
|
||||
const handleSelectChange = (keys: Array<string | number>, rows: Array<any>) => {
|
||||
if (type === 'radio') {
|
||||
// 单选模式下只保留最后一个选择
|
||||
selectedRowKeys.value = keys.length > 0 ? [keys[keys.length - 1]] : [];
|
||||
selectedRows.value = rows.length > 0 ? [rows[rows.length - 1]] : [];
|
||||
} else {
|
||||
// 多选模式
|
||||
selectedRowKeys.value = keys;
|
||||
selectedRows.value = rows;
|
||||
}
|
||||
options.onSelectChange?.();
|
||||
};
|
||||
|
||||
const onPageChange = (page: number, pageSize: number) => {
|
||||
// console.log('onPageChange', page, pageSize);
|
||||
pageInfo.value.page = page;
|
||||
pageInfo.value.page_size = pageSize;
|
||||
options.onPageChange?.(page);
|
||||
};
|
||||
|
||||
const onPageSizeChange = (current: number, size: number) => {
|
||||
// console.log('onPageSizeChange', current, size);
|
||||
// pageInfo.value.page_size = size;
|
||||
// pageInfo.value.page = 1;
|
||||
// options.onPageSizeChange?.(size);
|
||||
};
|
||||
|
||||
const resetPageInfo = () => {
|
||||
pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
|
||||
};
|
||||
|
||||
const rowSelection = computed(() => ({
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
type: type,
|
||||
showCheckedAll: type === 'checkbox', // 只有复选框模式才显示全选
|
||||
width: 48,
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: handleSelectChange
|
||||
}));
|
||||
|
||||
return {
|
||||
@ -92,6 +129,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
handleSelectChange,
|
||||
resetPageInfo,
|
||||
DEFAULT_PAGE_INFO,
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ import SvgIcon from '@/components/svg-icon/index.vue';
|
||||
|
||||
import '@/api/index';
|
||||
import './core';
|
||||
import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
|
||||
// import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
|
||||
|
||||
import 'normalize.css';
|
||||
import 'uno.css';
|
||||
|
||||
@ -43,14 +43,6 @@ export const TABLE_COLUMNS = [
|
||||
dataIndex: 'origin',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '上传人员',
|
||||
dataIndex: 'uploader',
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-start cell-detail">
|
||||
<div class="flex items-center" @click="gotoDetail">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
|
||||
/>
|
||||
{{ record.name || '-' }}
|
||||
</div>
|
||||
<div class="size-12px color-#939499 mt-2px" @click="gotoDetail">
|
||||
{{ timestampToTime1(task.execution_time) }}
|
||||
</div>
|
||||
<div class="size-14px color-#211F24 mt-12px color-#6D4CFE" @click="gotoDetail">{{ task.name || '未命名' }}</div>
|
||||
<div class="flex items-center mt-12px">
|
||||
<div class="custom-time-picker">
|
||||
<a-time-picker
|
||||
format="HH:mm"
|
||||
size="small"
|
||||
:visible="isPanelVisible"
|
||||
@visible-change="handleVisibleChange"
|
||||
@change="handleTimeChange"
|
||||
placeholder="修改发布时间"
|
||||
class="hide-input-container opt-btn mr-12px"
|
||||
/>
|
||||
</div>
|
||||
<div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
task: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
record: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
getPlatformIcon: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const isPanelVisible = ref(false);
|
||||
const toggleTimePanel = () => {
|
||||
isPanelVisible.value = !isPanelVisible.value;
|
||||
};
|
||||
const handleVisibleChange = (visible: boolean) => {
|
||||
isPanelVisible.value = visible;
|
||||
};
|
||||
const handleTimeChange = (time: string) => {
|
||||
if (time) {
|
||||
emit('edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
|
||||
}
|
||||
};
|
||||
|
||||
const timestampToTime1 = (): string => {
|
||||
const timestamp = Date.now();
|
||||
const date = new Date(timestamp);
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 补零
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const emit = defineEmits(['edit-time', 'delete', 'gotoDetail']);
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.task);
|
||||
};
|
||||
|
||||
const gotoDetail = () => {
|
||||
console.log('跳转详情');
|
||||
emit('gotoDetail', props.task);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cell-detail {
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: #00000010 0px 2px 8px;
|
||||
padding: 8px 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
font-size: 12px;
|
||||
width: 138px;
|
||||
height: 28px;
|
||||
background-color: #f2f3f5;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<a-popover trigger="click" overlayClassName="color-tip-popover">
|
||||
<template #content>
|
||||
<div class="flex items-center mt-8px w-104px mr-8px">
|
||||
<div style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
|
||||
<div>待生成</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-8px w-104px mr-8px">
|
||||
<div style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
|
||||
<div>待发布</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-8px w-104px mr-8px">
|
||||
<div style="background-color: #939499; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
|
||||
<div>已发布</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-8px w-104px mr-8px">
|
||||
<div style="background-color: #f64b31; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
|
||||
<div>发布失败</div>
|
||||
</div>
|
||||
</template>
|
||||
<Button class="w-112px mr-8px" size="middle">
|
||||
<template #icon>
|
||||
<InfoCircleOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>颜色示意</template>
|
||||
</Button>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.color-tip-popover :deep(.ant-popover-inner-content) {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: #00000010 0px 2px 8px;
|
||||
padding: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.color-tip-popover :deep(.ant-popover-arrow) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<!-- 日选择器 -->
|
||||
<a-date-picker
|
||||
class="w-188px size-14px"
|
||||
v-if="choseType === '日'"
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
format="YYYY年MM月DD日周dd"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<!-- 周选择器 -->
|
||||
<a-week-picker
|
||||
class="w-188px size-14px"
|
||||
v-else-if="choseType === '周'"
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
format="YYYY年MM月DD日"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<!-- 月选择器 -->
|
||||
<a-month-picker
|
||||
class="w-188px size-14px"
|
||||
v-else
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
format="YYYY年MM月"
|
||||
value-format="YYYY-MM"
|
||||
/>
|
||||
|
||||
<!-- 日期导航按钮 -->
|
||||
<div class="flex items-center ml-12px">
|
||||
<a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
|
||||
<template #icon><icon-left /></template>
|
||||
</a-button>
|
||||
<a-button
|
||||
@click="navigateToToday"
|
||||
type="text"
|
||||
style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
|
||||
>今天</a-button
|
||||
>
|
||||
<a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
|
||||
<template #icon><icon-right /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 维度切换下拉框 -->
|
||||
<div class="flex items-center">
|
||||
<a-dropdown
|
||||
position="bottom"
|
||||
@select="handleTypeChange"
|
||||
class="w-80px"
|
||||
:popupVisible="dropdownVisible"
|
||||
@popupVisibleChange="handleDropdownVisibleChange"
|
||||
>
|
||||
<a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
|
||||
<template #content>
|
||||
<a-doption value="日" class="doption">日</a-doption>
|
||||
<a-doption value="周" class="doption">周</a-doption>
|
||||
<a-doption value="月" class="doption">月</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
|
||||
import DateUtils from '@/utils/DateUtils';
|
||||
|
||||
// 1. 定义Props：接收父组件初始日期配置
|
||||
interface Props {
|
||||
modelValue?: {
|
||||
choseType: '日' | '周' | '月';
|
||||
dayModel?: Date;
|
||||
weekModel?: Date;
|
||||
monthModel?: Date;
|
||||
};
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
|
||||
});
|
||||
|
||||
// 2. 定义Emits：向父组件传递事件
|
||||
const emit = defineEmits([
|
||||
'update:modelValue', // v-model双向绑定
|
||||
'date-change', // 日期/维度切换统一事件（父组件只需要监听这个）
|
||||
]);
|
||||
|
||||
// 3. 内部状态管理：根据当前维度同步日期
|
||||
const choseType = ref<Props['modelValue']['choseType']>(props.modelValue.choseType);
|
||||
const dayModel = ref(props.modelValue.dayModel || new Date());
|
||||
const weekModel = ref(props.modelValue.weekModel || new Date());
|
||||
const monthModel = ref(props.modelValue.monthModel || new Date());
|
||||
|
||||
// 下拉菜单显示状态
|
||||
const dropdownVisible = ref(false);
|
||||
|
||||
// 添加一个标志位，用于避免初始化时触发事件
|
||||
let isInitializing = true;
|
||||
|
||||
// 计算属性：根据当前维度返回对应日期（简化选择器v-model绑定）
|
||||
const currentDate = computed({
|
||||
get() {
|
||||
switch (choseType.value) {
|
||||
case '日':
|
||||
return dayModel.value;
|
||||
case '周':
|
||||
return weekModel.value;
|
||||
case '月':
|
||||
return monthModel.value;
|
||||
}
|
||||
},
|
||||
set(val: Date) {
|
||||
switch (choseType.value) {
|
||||
case '日':
|
||||
dayModel.value = val;
|
||||
break;
|
||||
case '周':
|
||||
weekModel.value = val;
|
||||
break;
|
||||
case '月':
|
||||
monthModel.value = val;
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 4. 核心工具函数：获取当前维度的日期范围（给父组件用）
|
||||
const getDateRange = (): { start: string; end: string } => {
|
||||
if (choseType.value === '周') {
|
||||
const range = DateUtils.getWeekRangeByDate(weekModel.value);
|
||||
return { start: range.startFormatted, end: range.endFormatted };
|
||||
}
|
||||
if (choseType.value === '月') {
|
||||
const date = monthModel.value;
|
||||
const range = DateUtils.getMonthRangeByYearMonth(date.getFullYear(), date.getMonth() + 1);
|
||||
return { start: range.startFormatted, end: range.endFormatted };
|
||||
}
|
||||
// 日维度
|
||||
const dateStr = DateUtils.formatDate(dayModel.value);
|
||||
return { start: dateStr, end: dateStr };
|
||||
};
|
||||
|
||||
// 5. 维度切换处理（日/周/月）
|
||||
const handleTypeChange = (val: '日' | '周' | '月') => {
|
||||
choseType.value = val;
|
||||
// 切换维度时默认选中当天对应的维度日期
|
||||
const today = new Date();
|
||||
currentDate.value = today;
|
||||
emitChange();
|
||||
|
||||
// 选择后隐藏下拉菜单
|
||||
setTimeout(() => {
|
||||
dropdownVisible.value = false;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 6. 日期选择器变更处理
|
||||
const handleDateChange = (val: Date | string | undefined) => {
|
||||
if (!val) return;
|
||||
|
||||
let selectedDate: Date;
|
||||
if (val instanceof Date) {
|
||||
selectedDate = val;
|
||||
} else {
|
||||
// 处理字符串格式的日期
|
||||
if (choseType.value === '月') {
|
||||
// 月份选择器返回 YYYY-MM 格式
|
||||
const [year, month] = val.split('-').map(Number);
|
||||
selectedDate = new Date(year, month - 1, 1);
|
||||
} else {
|
||||
// 日和周选择器返回 YYYY-MM-DD 格式
|
||||
selectedDate = new Date(val);
|
||||
}
|
||||
}
|
||||
|
||||
currentDate.value = selectedDate;
|
||||
emitChange();
|
||||
};
|
||||
|
||||
// 7. 日期导航（上一个/下一个维度）
|
||||
const navigate = (step: 1 | -1) => {
|
||||
const current = currentDate.value;
|
||||
const newDate = new Date(current);
|
||||
|
||||
switch (choseType.value) {
|
||||
case '日':
|
||||
newDate.setDate(current.getDate() + step);
|
||||
break;
|
||||
case '周':
|
||||
newDate.setDate(current.getDate() + step * 7);
|
||||
break;
|
||||
case '月':
|
||||
newDate.setMonth(current.getMonth() + step);
|
||||
break;
|
||||
}
|
||||
|
||||
currentDate.value = newDate;
|
||||
emitChange();
|
||||
};
|
||||
|
||||
// 8. 跳转今天
|
||||
const navigateToToday = () => {
|
||||
currentDate.value = new Date();
|
||||
emitChange();
|
||||
};
|
||||
|
||||
// 9. 下拉菜单显示状态变化处理
|
||||
const handleDropdownVisibleChange = (visible: boolean) => {
|
||||
dropdownVisible.value = visible;
|
||||
};
|
||||
|
||||
// 10. 统一事件发射：向父组件传递完整信息
|
||||
const emitChange = () => {
|
||||
const result = {
|
||||
choseType: choseType.value,
|
||||
dayModel: dayModel.value,
|
||||
weekModel: weekModel.value,
|
||||
monthModel: monthModel.value,
|
||||
dateRange: getDateRange(), // 父组件直接可用的日期范围
|
||||
};
|
||||
|
||||
// 只有在初始化完成后才触发 update:modelValue 和 date-change 事件
|
||||
if (!isInitializing) {
|
||||
emit('update:modelValue', result);
|
||||
console.log('emitChange', result);
|
||||
emit('date-change', result); // 父组件监听此事件做后续处理
|
||||
}
|
||||
};
|
||||
|
||||
// 11. 监听父组件Props变化（同步外部修改）
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (newVal && !isInitializing) {
|
||||
// 只有在初始化完成后才响应外部props变化
|
||||
choseType.value = newVal.choseType;
|
||||
dayModel.value = newVal.dayModel || new Date();
|
||||
weekModel.value = newVal.weekModel || new Date();
|
||||
monthModel.value = newVal.monthModel || new Date();
|
||||
emitChange();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 初始化完成，设置标志位，并在之后触发一次事件
|
||||
setTimeout(() => {
|
||||
isInitializing = false;
|
||||
emitChange();
|
||||
}, 0);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.prv-btn {
|
||||
background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
color: #211f24 !important;
|
||||
}
|
||||
.doption {
|
||||
width: 78px !important;
|
||||
}
|
||||
.prv-today {
|
||||
color: #211f24 !important;
|
||||
width: 80px !important;
|
||||
background-color: #f7f8fa !important;
|
||||
height: 28px;
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="创建任务"
|
||||
cancel-text="取消"
|
||||
ok-text="创建任务"
|
||||
placement="right"
|
||||
v-model:visible="showDriwer"
|
||||
@after-visible-change="showDriwerChange"
|
||||
@ok="handleCreateTask"
|
||||
width="480px"
|
||||
class="task-drawer"
|
||||
style="z-index: 999"
|
||||
>
|
||||
<div class="drawer-content" :style="isActive == 'ai' ? 'height: 376px;' : 'height:216px;'">
|
||||
<div class="flex flex-col justify-center">
|
||||
<CommonSelect
|
||||
v-model="localQuery.accounts"
|
||||
:options="accountList || []"
|
||||
:multiple="false"
|
||||
@change="(val) => handleChange('accounts', val)"
|
||||
class="!w-432px select-with-tags"
|
||||
placeholder="请选择账号名称"
|
||||
:allowSearch="true"
|
||||
:maxTagCount="999"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
|
||||
<div class="ai-content-generator">
|
||||
<div class="flex mt-16px">
|
||||
<Button
|
||||
class="w-194px h-38px mr-8px"
|
||||
:class="isActive == 'ai' ? 'active-chose' : ''"
|
||||
@click="handleSelect('ai')"
|
||||
>
|
||||
<template #icon>
|
||||
<img :src="aiIcon" class="w-16 h-16 mr-8px" />
|
||||
</template>
|
||||
AI生成
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
class="w-194px h-38px"
|
||||
:class="isActive == 'chose' ? 'active-chose' : ''"
|
||||
@click="handleSelect('chose')"
|
||||
>
|
||||
从成品库选择</Button
|
||||
>
|
||||
</div>
|
||||
<div v-show="isActive == 'ai'">
|
||||
<!-- 任务描述区域 -->
|
||||
<div class="form-section">
|
||||
<div class="flex items-center w-400px mt-16px mb-8px">
|
||||
<div class="section-title">任务描述</div>
|
||||
<div class="font-size-12px text-[#999999]">（非必填）</div>
|
||||
</div>
|
||||
<div class="w-400px h-126px border-rounded-8px mb-8px" style="background: #fff">
|
||||
<a-textarea
|
||||
placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
|
||||
class="task-description font-size-12px"
|
||||
:rows="5"
|
||||
v-model="taskDescription"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 素材添加区域 -->
|
||||
<div class="form-section material-section">
|
||||
<div class="flex items-center"></div>
|
||||
|
||||
<Button class="add-material-btn" @click="handleAddMaterial">
|
||||
<template #icon>
|
||||
<icon-plus size="16" class="mr-8px" />
|
||||
</template>
|
||||
从原料库添加
|
||||
</Button>
|
||||
<div v-if="hasChoseMaterial" class="flex flex-col items-center w-full">
|
||||
<div
|
||||
v-for="item in selectedMaterials.texts"
|
||||
:key="item.id"
|
||||
class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="flex items-center w-full">
|
||||
<img
|
||||
v-for="item in selectedMaterials.images"
|
||||
:key="item.id"
|
||||
:src="item.cover"
|
||||
class="w-88 h-88 mr-8px border-rounded-8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center">
|
||||
<p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="isActive == 'chose'">
|
||||
<!-- 任务描述区域 -->
|
||||
<div class="form-section">
|
||||
<div class="flex items-center w-400px mt-16px mb-8px">
|
||||
<div class="section-title">发布内容</div>
|
||||
<div class="font-size-12px text-[#999999]">（必填）</div>
|
||||
</div>
|
||||
<div class="form-section material-section" v-if="hasChoseFinishedProducts == false">
|
||||
<Button @click="handleAddContent" class="add-material-btn">
|
||||
<template #icon>
|
||||
<icon-plus size="16" class="mr-8px" />
|
||||
</template>
|
||||
添加内容
|
||||
</Button>
|
||||
|
||||
<p class="material-hint">前往成品库，选择要发布的内容</p>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-start w-full content-center">
|
||||
<div class="opt-btn">
|
||||
<SwapOutlined class="bg-#00000060 p-4px rounded-4px cursor-pointer" @click="handleAddContent" />
|
||||
<DeleteOutlined
|
||||
style="margin-left: 16px"
|
||||
class="bg-#00000060 p-4px rounded-4px cursor-pointer"
|
||||
@click="handleDelte"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-12px">{{ selectedProducts.data[0].title }}</div>
|
||||
<div v-for="item in selectedProducts.images" :key="item.id">
|
||||
<img v-if="item.cover" :src="item.cover" class="w-88 h-88 mr-8px border-rounded-8px mb-12px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 发布计划区域 -->
|
||||
<div class="publish-section">
|
||||
<div class="flex items-center justify-between w-384px">
|
||||
<div class="section-title">发布计划</div>
|
||||
<CommonSelect
|
||||
v-model="publishType"
|
||||
:options="publishOptions"
|
||||
@change="handlePublishTypeChange"
|
||||
class="w-180px background-#fff publish-type-select"
|
||||
:allowSearch="false"
|
||||
:multiple="false"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="publishType === 'timing'">
|
||||
<div class="line"></div>
|
||||
<div class="flex items-center justify-between mt-16px w-384px">
|
||||
<div class="section-title">日期</div>
|
||||
<a-date-picker
|
||||
class="w-180px h-40px background-#fff"
|
||||
@change="handleDateChange"
|
||||
v-model="currentDate"
|
||||
format="YYYY年MM月DD日周dd"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="flex items-center justify-between mt-16px w-384px">
|
||||
<div class="section-title">时间</div>
|
||||
<a-time-picker v-model="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
|
||||
<RawMaterialDrawer
|
||||
:visible="showDrawer2"
|
||||
:query="materialQuery"
|
||||
@after-visible-change="handleMaterialDrawerVisibleChange"
|
||||
@confirm="handleMaterialConfirm"
|
||||
@cancel="handleMaterialCancel"
|
||||
/>
|
||||
|
||||
<!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
|
||||
<FinishedProductDrawer
|
||||
:visible="showDrawer3"
|
||||
@update:visible="(val) => (showDrawer3 = val)"
|
||||
:query="productQuery"
|
||||
@after-visible-change="handleProductDrawerVisibleChange"
|
||||
@confirm="handleProductConfirm"
|
||||
@cancel="handleProductCancel"
|
||||
/>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getWorksPage } from '@/api/all/generationWorkshop.ts';
|
||||
import { ref, reactive, watch, nextTick } from 'vue';
|
||||
import aiIcon from '@/assets/img/media-account/icon-AI.png';
|
||||
import { SwapOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, DatePicker, TimePicker } from 'ant-design-vue';
|
||||
import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
||||
import dayjs from 'dayjs';
|
||||
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
|
||||
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||
import icon4 from '@/assets/img/error-img.png';
|
||||
// 引入子组件
|
||||
import RawMaterialDrawer from './raw-material-drawer.vue';
|
||||
import FinishedProductDrawer from './finished-product-drawer.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getMediaAccountList } from '@/api/all/propertyMarketing';
|
||||
// 平台图标
|
||||
import iconDy from '@/assets/img/platform/icon-dy.png';
|
||||
import iconXhs from '@/assets/img/platform/icon-xhs.png';
|
||||
import iconBilibili from '@/assets/img/platform/icon-bilibili.png';
|
||||
import iconKs from '@/assets/img/platform/icon-ks.png';
|
||||
import iconSph from '@/assets/img/platform/icon-sph.png';
|
||||
import iconWb from '@/assets/img/platform/icon-wb.png';
|
||||
import iconGzh from '@/assets/img/platform/icon-gzh.png';
|
||||
import iconWarn from '@/assets/img/media-account/icon-warn.png';
|
||||
|
||||
// 状态管理
|
||||
const choseText = ref('');
|
||||
const taskDescription = ref('');
|
||||
const hasChoseMaterial = ref(false);
|
||||
const hasChoseFinishedProducts = ref(false);
|
||||
const isActive = ref('ai');
|
||||
const showDriwer = ref(false);
|
||||
const showDrawer2 = ref(false);
|
||||
const showDrawer3 = ref(false);
|
||||
const accountList = ref([]);
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
// 平台配置
|
||||
const platformConfig = {
|
||||
icons: { 0: iconDy, 1: iconXhs, 2: iconBilibili, 3: iconKs, 4: iconSph, 5: iconWb, 6: iconGzh },
|
||||
names: { 0: '抖音', 1: '小红书', 2: 'B站', 3: '快手', 4: '视频号', 5: '微博', 6: '公众号' },
|
||||
options: [
|
||||
{ id: 0, name: '抖音', icon: iconDy },
|
||||
{ id: 1, name: '小红书', icon: iconXhs },
|
||||
{ id: 2, name: 'B站', icon: iconBilibili },
|
||||
{ id: 3, name: '快手', icon: iconKs },
|
||||
{ id: 4, name: '视频号', icon: iconSph },
|
||||
{ id: 5, name: '微博', icon: iconWb },
|
||||
{ id: 6, name: '公众号', icon: iconGzh },
|
||||
],
|
||||
};
|
||||
const platformOptions = ref(platformConfig.options);
|
||||
|
||||
// 工具函数
|
||||
const getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
|
||||
const getPlatformName = (platform: number) => platformConfig.names[platform] || '未知平台';
|
||||
const getData = async () => {
|
||||
try {
|
||||
const { code, data: accountData } = await getMediaAccountList();
|
||||
if (code === 200) {
|
||||
accountList.value = accountData.map((account: any) => ({
|
||||
value: account.id,
|
||||
name: `${account.name}(${getPlatformName(account.platform)})`,
|
||||
platform: account.platform,
|
||||
icon: getPlatformIcon(account.platform),
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取账号列表失败:', error);
|
||||
}
|
||||
};
|
||||
// 发布类型选项
|
||||
const publishOptions = ref([
|
||||
{ value: 'immediate', label: '立即发布' },
|
||||
{ value: 'timing', label: '定时发布' },
|
||||
]);
|
||||
|
||||
// 发布类型，默认为立即发布
|
||||
const publishType = ref('immediate');
|
||||
|
||||
// 时间选择相关
|
||||
const currentDate = ref(new Date());
|
||||
const strValue = ref();
|
||||
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
|
||||
// 本地筛选状态（保持上次选择）
|
||||
const localQuery = ref({
|
||||
accounts: props.query?.name || [],
|
||||
ids: props.query?.ids || [],
|
||||
});
|
||||
|
||||
// 原料库查询参数
|
||||
const materialQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
top_execution_time: undefined,
|
||||
});
|
||||
|
||||
// 成品库查询参数
|
||||
const productQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
});
|
||||
|
||||
// 选中的素材数据
|
||||
const selectedMaterials = ref({
|
||||
keys: [],
|
||||
data: [],
|
||||
text: '',
|
||||
images: [],
|
||||
texts: [],
|
||||
});
|
||||
|
||||
const selectedProducts = ref({
|
||||
keys: [],
|
||||
data: [],
|
||||
text: '',
|
||||
images: [],
|
||||
});
|
||||
|
||||
// 处理AI/成品库选择切换
|
||||
const handleSelect = (value) => {
|
||||
isActive.value = value;
|
||||
if (value === 'ai') {
|
||||
showDrawer3.value = false;
|
||||
} else {
|
||||
showDrawer2.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 打开原料库抽屉
|
||||
const handleAddMaterial = () => {
|
||||
materialQuery.page = 1;
|
||||
materialQuery.page_size = 10;
|
||||
showDrawer2.value = true;
|
||||
};
|
||||
|
||||
// 打开成品库抽屉
|
||||
const handleAddContent = () => {
|
||||
productQuery.page = 1;
|
||||
productQuery.page_size = 10;
|
||||
showDrawer3.value = true;
|
||||
};
|
||||
const handleDelte = () => {
|
||||
hasChoseFinishedProducts.value = false;
|
||||
selectedProducts.value = {
|
||||
keys: [],
|
||||
data: [],
|
||||
text: '',
|
||||
images: [],
|
||||
};
|
||||
};
|
||||
// 处理原料库选择确认
|
||||
const handleMaterialConfirm = (result) => {
|
||||
console.log('handleMaterialConfirm', result);
|
||||
selectedMaterials.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray,
|
||||
texts: result.selectedTexts || [],
|
||||
};
|
||||
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
||||
};
|
||||
|
||||
// 处理原料库取消
|
||||
const handleMaterialCancel = () => {
|
||||
// 取消逻辑
|
||||
showDrawer2.value = false;
|
||||
};
|
||||
|
||||
// 处理成品库选择确认
|
||||
const handleProductConfirm = (result) => {
|
||||
selectedProducts.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray,
|
||||
};
|
||||
|
||||
// 如果是单选模式，确保只选择一个项目
|
||||
if (result.selectedRows && result.selectedRows.length > 0) {
|
||||
hasChoseFinishedProducts.value = true;
|
||||
// 取第一个选中的项目
|
||||
const selectedProduct = result.selectedRows[0];
|
||||
selectedProducts.value = {
|
||||
keys: [selectedProduct.id],
|
||||
data: [selectedProduct],
|
||||
text: '1个稿件',
|
||||
images: [selectedProduct],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 处理成品库取消
|
||||
const handleProductCancel = () => {
|
||||
// 取消逻辑
|
||||
showDrawer3.value = false;
|
||||
};
|
||||
|
||||
// 处理发布类型变化
|
||||
const handlePublishTypeChange = (value) => {
|
||||
publishType.value = value;
|
||||
};
|
||||
|
||||
// 处理日期变化
|
||||
const handleDateChange = (date) => {
|
||||
// 日期处理逻辑
|
||||
};
|
||||
|
||||
// 抽屉显示状态变化
|
||||
const showDriwerChange = (visible: boolean) => {
|
||||
console.log('Main Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 原料库抽屉显示状态变化
|
||||
const handleMaterialDrawerVisibleChange = (visible: boolean) => {
|
||||
console.log('Raw Material Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 成品库抽屉显示状态变化
|
||||
const handleProductDrawerVisibleChange = (visible: boolean) => {
|
||||
console.log('Finished Product Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 处理筛选条件变化
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
localQuery.value.ids = [value];
|
||||
emit('filter-change', {
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
};
|
||||
|
||||
// 点击创建任务按钮时触发
|
||||
const handleCreateTask = () => {
|
||||
// 验证表单
|
||||
if (localQuery.value.ids.length == 0) {
|
||||
// 可以添加错误提示：请选择发布内容
|
||||
message.error('请选择发布账号');
|
||||
return;
|
||||
}
|
||||
if (isActive.value === 'chose' && selectedProducts.value.keys.length === 0) {
|
||||
// 可以添加错误提示：请选择发布内容
|
||||
message.error('请选择发布内容');
|
||||
return;
|
||||
}
|
||||
if (isActive.value === 'ai' && selectedMaterials.value.keys.length === 0) {
|
||||
// 可以添加错误提示：请选择发布内容
|
||||
message.error('请选择发布内容');
|
||||
return;
|
||||
}
|
||||
console.log('有问题已返回');
|
||||
// 准备提交的数据
|
||||
const taskData = {
|
||||
media_account_id: localQuery.value.ids[0],
|
||||
is_ai_generate: isActive.value == 'chose' ? 0 : 1,
|
||||
ai_prompt: taskDescription.value,
|
||||
raw_material_ids: selectedMaterials.value.keys,
|
||||
products: selectedProducts.value.keys,
|
||||
publish_type: publishType.value == 'immediate' ? 0 : 1,
|
||||
execution_time:
|
||||
publishType.value === 'timing' ? `${dayjs(currentDate.value).format('YYYY-MM-DD')} ${strValue.value}` : undefined,
|
||||
work_id: selectedProducts.value.keys[0],
|
||||
};
|
||||
// 发射创建任务事件
|
||||
emit('create-task', taskData);
|
||||
|
||||
// 关闭抽屉
|
||||
showDriwer.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
const showDrawer = (accountInfo = null, selectedDate = null) => {
|
||||
showDriwer.value = true;
|
||||
if (accountInfo && accountInfo.id) {
|
||||
nextTick(() => {
|
||||
localQuery.value.accounts = [accountInfo.name];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
});
|
||||
}
|
||||
// 如果传入了日期，则设置为默认日期
|
||||
if (selectedDate) {
|
||||
currentDate.value = selectedDate;
|
||||
console.log('currentDate', currentDate.value);
|
||||
publishType.value = 'timing';
|
||||
}
|
||||
};
|
||||
|
||||
// 定义事件发射器
|
||||
const emit = defineEmits(['filter-change', 'create-task']);
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
showDrawer,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.arco-drawer {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
}
|
||||
|
||||
.ai-content-generator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin-top: 24px;
|
||||
width: 432px;
|
||||
background: linear-gradient(to right, #f0f5ff, #fff6f5) !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.active-chose {
|
||||
border: #722ed1 1px solid !important;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 400px;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.publish-section {
|
||||
width: 432px;
|
||||
padding: 16px 24px;
|
||||
background-color: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.task-description {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
height: 126px;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.task-description::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.material-section {
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.add-material-btn {
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px dashed #e0e0e0 !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.material-hint {
|
||||
color: #939499;
|
||||
font-size: 14px;
|
||||
margin: 0 40px;
|
||||
}
|
||||
.content-center {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
display: flex;
|
||||
position: absolute; /* 设置为绝对定位 */
|
||||
top: 0; /* 紧贴顶部 */
|
||||
right: 0; /* 紧贴右侧 */
|
||||
}
|
||||
|
||||
.publish-type-select :deep(.ant-select-selection-item) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.select-with-tags :deep(.ant-select-selection-item) {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.line {
|
||||
background-color: #e6e6e8;
|
||||
width: 382px;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="filter-popup-wrapper">
|
||||
<!-- 关键修复：添加手动控制弹窗显示/隐藏的逻辑 -->
|
||||
<a-popover
|
||||
trigger="click"
|
||||
:visible="visible"
|
||||
:overlayStyle="{ width: '360px' }"
|
||||
overlayClassName="filter-popup-popover"
|
||||
@clickoutside="handleClickOutside"
|
||||
>
|
||||
<template #content>
|
||||
<div class="filter-popup-content">
|
||||
<!-- 运营人员 -->
|
||||
<div class="flex items-center mb-3 select-container">
|
||||
<div class="w-70px pt-6px">运营人员</div>
|
||||
<a-space class="flex-1">
|
||||
<CommonSelect
|
||||
placeholder="请选择运营人员"
|
||||
:options="operators || []"
|
||||
v-model="localQuery.operator"
|
||||
@change="(val) => handleChange('operator', val)"
|
||||
class="!w-240px select-with-tags"
|
||||
:allowSearch="true"
|
||||
:maxTagCount="999"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 发布平台 -->
|
||||
<div class="flex items-center mb-3 select-container">
|
||||
<div class="w-70px pt-6px">发布平台</div>
|
||||
<a-space class="flex-1">
|
||||
<CommonSelect
|
||||
:options="platformOptions || []"
|
||||
v-model="localQuery.platform"
|
||||
@change="(val) => handleChange('platform', val)"
|
||||
class="!w-240px select-with-tags"
|
||||
placeholder="请选择发布平台"
|
||||
:allowSearch="true"
|
||||
:maxTagCount="999"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 账号名称 -->
|
||||
<div class="flex items-center mb-3 select-container">
|
||||
<div class="w-70px pt-6px">账号名称</div>
|
||||
<a-space class="flex-1">
|
||||
<CommonSelect
|
||||
v-model="localQuery.accounts"
|
||||
:options="accountList || []"
|
||||
:multiple="true"
|
||||
@change="(val) => handleChange('accounts', val)"
|
||||
class="!w-240px select-with-tags"
|
||||
placeholder="请选择账号名称"
|
||||
:allowSearch="true"
|
||||
:maxTagCount="999"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 触发按钮：添加点击事件控制弹窗显示 -->
|
||||
<Button class="w-112px mr-8px" size="middle" @click="visible = !visible">
|
||||
<template #icon>
|
||||
<FilterOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>筛选</template>
|
||||
</Button>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { FilterOutlined } from '@ant-design/icons-vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['filter-change']);
|
||||
|
||||
// 弹窗显示状态（关键：控制弹窗显示的核心变量）
|
||||
const visible = ref(false);
|
||||
|
||||
// 本地筛选状态（保持上次选择）
|
||||
const localQuery = ref({
|
||||
operator: props.query?.operator_ids,
|
||||
platform: props.query?.platforms,
|
||||
accounts: props.query?.ids || [],
|
||||
});
|
||||
|
||||
// 监听父组件query变化，同步到本地
|
||||
watch(
|
||||
() => props.query,
|
||||
(newQuery) => {
|
||||
if (newQuery) {
|
||||
localQuery.value = {
|
||||
operator: newQuery.operator_ids,
|
||||
platform: newQuery.platforms,
|
||||
accounts: newQuery.ids || [],
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
// 直接触发筛选变更，不需要确认按钮
|
||||
emit('filter-change', {
|
||||
operator: localQuery.value.operator,
|
||||
platform: localQuery.value.platform,
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
|
||||
// 选择后自动隐藏下拉菜单
|
||||
setTimeout(() => {
|
||||
visible.value = false;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 点击外部关闭弹窗
|
||||
const handleClickOutside = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filter-popup-popover :deep(.ant-popover-inner-content) {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 24px;
|
||||
margin-top: 8px;
|
||||
margin-right: 50px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.select-with-tags :deep(.ant-select-selector) {
|
||||
height: auto !important;
|
||||
min-height: 32px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.select-with-tags :deep(.ant-select-selection-item) {
|
||||
max-width: none !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: unset !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 确保选择器容器能够适应内容高度 */
|
||||
.select-with-tags :deep(.ant-select) {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.select-with-tags :deep(.ant-select-multiple .ant-select-selection-item) {
|
||||
height: auto !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.select-with-tags :deep(.ant-select-selection-overflow) {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="成品库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
:visible="visible"
|
||||
@after-visible-change="onAfterVisibleChange"
|
||||
@cancel="handleCancel"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<!-- 成品库表格 -->
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #cover="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.cover ? record.cover : icon4"
|
||||
alt="内容预览"
|
||||
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center">{{ record.title }}</div>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #uploader="{ record }">
|
||||
<div class="flex items-center">{{ record.last_modifier?.mobile || '-' }}</div>
|
||||
</template>
|
||||
<template #audit_status="{ record }">
|
||||
<div
|
||||
class="flex items-center justify-center font-size-14px p-4px border-rounded-4px"
|
||||
:style="getAuditStatusStyle(record.audit_status)"
|
||||
>
|
||||
{{ getStatus(record.audit_status) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #last_modified_at="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.last_modified_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="color-#737478 font-size-14px">已选择：</div>
|
||||
<div class="color-#737478 font-size-14px">{{ choseText }}</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button @click="handleCancel">取消</Button>
|
||||
<Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
|
||||
import { Table, Button, Pagination } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import { getWorksPage } from '@/api/all/generationWorkshop.ts';
|
||||
// 引入图片资源
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
|
||||
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||
import icon4 from '@/assets/img/error-img.png';
|
||||
|
||||
// 定义Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
keyword: '',
|
||||
audit_status: undefined,
|
||||
type: undefined,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// 定义Emits
|
||||
const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
|
||||
|
||||
// 内部状态管理
|
||||
const materialData = ref([]);
|
||||
const choseText = ref('');
|
||||
const choseImgArray = ref([]);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref([
|
||||
{ title: '图片/视频', dataIndex: 'cover', width: 200, slots: { customRender: 'cover' } },
|
||||
{ title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
|
||||
{ title: '稿件类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
|
||||
{ title: '审核状态', dataIndex: 'audit_status', width: 100, slots: { customRender: 'audit_status' } },
|
||||
{ title: '最后修改时间', dataIndex: 'last_modified_at', width: 200, slots: { customRender: 'last_modified_at' } },
|
||||
{ title: '上传人员', dataIndex: 'uploader', width: 200, slots: { customRender: 'uploader' } },
|
||||
]);
|
||||
|
||||
// 1. 先定义数据获取函数，确保使用最新的query参数
|
||||
const fetchProductData = async () => {
|
||||
try {
|
||||
// 使用主组件传递的最新查询参数
|
||||
const params = { ...props.query };
|
||||
console.log('成品库请求参数:', params); // 调试用
|
||||
|
||||
const res = await getWorksPage(params);
|
||||
materialData.value = [];
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page === 1) {
|
||||
materialData.value = res.data.data;
|
||||
} else {
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取成品库数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 2. 初始化表格选择逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys, selectedRows } =
|
||||
useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
type: 'radio', // 改为单选模式
|
||||
onPageChange: fetchProductData,
|
||||
onPageSizeChange: fetchProductData,
|
||||
});
|
||||
|
||||
// 监听query参数变化，当主组件传递的参数变化时重新请求数据
|
||||
watchEffect(() => {
|
||||
if (props.visible) {
|
||||
console.log('成品库查询参数变化，重新加载数据');
|
||||
fetchProductData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听选中项变化
|
||||
watch(selectedRows, (newRows) => {
|
||||
if (rowSelection.value.type === 'radio') {
|
||||
// 单选模式
|
||||
choseText.value = newRows.length > 0 ? '1个稿件' : '0个稿件';
|
||||
// 如果类型是文本，则choseImgArray为空数组
|
||||
if (newRows.length > 0 && newRows[0].type !== 'text') {
|
||||
choseImgArray.value = [newRows[0]];
|
||||
} else {
|
||||
choseImgArray.value = [];
|
||||
}
|
||||
} else {
|
||||
// 多选模式
|
||||
choseText.value = newRows.length + '个稿件';
|
||||
// 过滤掉文本类型，只保留非文本类型的项目
|
||||
choseImgArray.value = newRows.filter((item) => item.type !== 'text');
|
||||
}
|
||||
});
|
||||
|
||||
// 格式化审核状态显示
|
||||
const getStatus = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return '待审核';
|
||||
case 2:
|
||||
return '审核中';
|
||||
case 3:
|
||||
return '已通过';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const getAuditStatusStyle = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return { backgroundColor: '#f0f0f0', color: '#666' };
|
||||
case 2:
|
||||
return { backgroundColor: '#fff7ed', color: '#ff9c00' };
|
||||
case 3:
|
||||
return { backgroundColor: '#e6ffe6', color: '#008000' };
|
||||
default:
|
||||
return { backgroundColor: '#f0f0f0', color: '#666' };
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉显示状态变化处理
|
||||
const onAfterVisibleChange = (visible: boolean) => {
|
||||
emit('after-visible-change', visible);
|
||||
|
||||
if (visible) {
|
||||
// 当抽屉显示时，使用最新参数请求数据
|
||||
fetchProductData();
|
||||
} else {
|
||||
// 关闭时清空数据
|
||||
materialData.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
choseText.value = '';
|
||||
choseImgArray.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 取消按钮处理
|
||||
const handleCancel = () => {
|
||||
emit('cancel');
|
||||
};
|
||||
|
||||
// 确定按钮处理
|
||||
const handleOk = () => {
|
||||
emit('confirm', {
|
||||
selectedKeys: selectedRowKeys.value,
|
||||
selectedData: selectedRows.value,
|
||||
selectedRows: selectedRows.value,
|
||||
choseText: choseText.value,
|
||||
choseImgArray: choseImgArray.value,
|
||||
});
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="原料库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
:visible="visible"
|
||||
@after-visible-change="onAfterVisibleChange"
|
||||
@cancel="handleCancel"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<!-- 成品库表格 -->
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #name="{ record }">
|
||||
<div class="name-cell flex items-center">
|
||||
<img
|
||||
:src="record.type == 2 ? icon5 : record.cover"
|
||||
alt="类型图标"
|
||||
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
||||
/>
|
||||
<div class="flex flex-col ml-8px">
|
||||
<span class="material-name">{{ record.name }}</span>
|
||||
<span class="material-type">{{ record.uid }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<div class="flex items-center">
|
||||
<span>{{ getType(record.type) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #origin="{ record }">
|
||||
<span>{{ getOrigin(record.origin) }}</span>
|
||||
</template>
|
||||
<template #created_at="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.created_at ? dayjs(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="color-#737478 font-size-14px">已选择：</div>
|
||||
<div class="color-#737478 font-size-14px">{{ choseText }}</div>
|
||||
<div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
|
||||
<img
|
||||
:src="item.cover ? item.cover : icon4"
|
||||
alt="选中的内容"
|
||||
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in choseTextArray"
|
||||
:key="item.id"
|
||||
class="ml-16px bg-#F7F8FA h-44px overflow-hidden w-75px border-rounded-8px flex items-center"
|
||||
>
|
||||
<div class="whitespace-nowrap overflow-hidden text-ellipsis w-full px-2" :title="item.name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button @click="handleCancel">取消</Button>
|
||||
<Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
|
||||
import { Table, Button, Pagination } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
|
||||
// 引入图片资源
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
|
||||
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||
import icon4 from '@/assets/img/error-img.png';
|
||||
import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
||||
import icon5 from '../../../../views/material-center/components/raw-material/img/icon-no-text.png';
|
||||
// 定义Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
keyword: '',
|
||||
audit_status: undefined,
|
||||
type: undefined,
|
||||
}),
|
||||
},
|
||||
});
|
||||
// 辅助函数
|
||||
const getType = (type: number): string => {
|
||||
const typeMap = {
|
||||
[RawMaterialType.Image]: '图片',
|
||||
[RawMaterialType.Video]: '视频',
|
||||
[RawMaterialType.Text]: '文本',
|
||||
};
|
||||
return typeMap[type] || '未知';
|
||||
};
|
||||
|
||||
const getOrigin = (origin: number): string => {
|
||||
const fromMap = {
|
||||
0: '本地上传',
|
||||
1: 'AI生成',
|
||||
};
|
||||
return fromMap[origin] || '未知';
|
||||
};
|
||||
// 定义Emits类型
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(
|
||||
e: 'confirm',
|
||||
data: {
|
||||
selectedKeys: string[];
|
||||
selectedData: any[];
|
||||
choseText: string;
|
||||
choseImgArray: any[];
|
||||
selectedTexts: string[];
|
||||
},
|
||||
): void;
|
||||
(e: 'cancel'): void;
|
||||
}>();
|
||||
// 内部状态管理
|
||||
const materialData = ref([]);
|
||||
const choseText = ref('');
|
||||
const choseImgArray = ref([]);
|
||||
const choseTextArray = ref([]);
|
||||
// 表格列配置
|
||||
const columns = ref([
|
||||
{ title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
|
||||
{ title: '类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
|
||||
{ title: '来源', dataIndex: 'origin', width: 100, slots: { customRender: 'origin' } },
|
||||
{ title: '上传时间', dataIndex: 'created_at', width: 200, slots: { customRender: 'created_at' } },
|
||||
]);
|
||||
|
||||
// 1. 先定义数据获取函数，确保使用最新的query参数
|
||||
const fetchProductData = async () => {
|
||||
try {
|
||||
// 使用主组件传递的最新查询参数
|
||||
const params = { ...props.query };
|
||||
console.log('成品库请求参数:', params); // 调试用
|
||||
|
||||
const res = await getRawMaterialsPage(params);
|
||||
materialData.value = [];
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page === 1) {
|
||||
materialData.value = res.data.data;
|
||||
} else {
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取成品库数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 2. 初始化表格选择逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
onPageChange: fetchProductData,
|
||||
onPageSizeChange: fetchProductData,
|
||||
});
|
||||
|
||||
// 监听query参数变化，当主组件传递的参数变化时重新请求数据
|
||||
watchEffect(() => {
|
||||
if (props.visible) {
|
||||
console.log('成品库查询参数变化，重新加载数据');
|
||||
fetchProductData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听选中项变化
|
||||
watch(selectedRowKeys, (newKeys) => {
|
||||
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
||||
|
||||
const typeCount: Record<string, number> = {};
|
||||
filteredData.forEach((item) => {
|
||||
typeCount[item.type] = (typeCount[item.type] || 0) + 1;
|
||||
});
|
||||
|
||||
choseText.value = Object.entries(typeCount)
|
||||
.map(([type, count]) => {
|
||||
const typeName = getType(Number(type));
|
||||
return `${typeName}: ${count}个`;
|
||||
})
|
||||
.join(' ');
|
||||
|
||||
choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
|
||||
choseTextArray.value = filteredData.filter((item) => [2].includes(item.type));
|
||||
});
|
||||
|
||||
// 格式化审核状态显示
|
||||
const getStatus = (status: number) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '待审核';
|
||||
case 1:
|
||||
return '审核中';
|
||||
case 2:
|
||||
return '已通过';
|
||||
case 3:
|
||||
return '已拒绝';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉显示状态变化处理
|
||||
const onAfterVisibleChange = (visible: boolean) => {
|
||||
emit('after-visible-change', visible);
|
||||
if (visible) {
|
||||
// 当抽屉显示时，使用最新参数请求数据
|
||||
fetchProductData();
|
||||
} else {
|
||||
// 关闭时清空数据
|
||||
materialData.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
choseText.value = '';
|
||||
choseImgArray.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 取消按钮处理
|
||||
const handleCancel = () => {
|
||||
console.log('取消');
|
||||
emit('cancel');
|
||||
};
|
||||
|
||||
// 确定按钮处理
|
||||
const handleOk = () => {
|
||||
const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
|
||||
const selectedTexts = selectedData
|
||||
.filter((item) => item.type === RawMaterialType.Text)
|
||||
.map((item) => item.content || item.name);
|
||||
emit('confirm', {
|
||||
selectedKeys: selectedRowKeys.value,
|
||||
selectedData,
|
||||
choseText: choseText.value,
|
||||
choseImgArray: choseImgArray.value,
|
||||
selectedTexts: selectedTexts,
|
||||
});
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<a-trigger trigger="click" position="br" @click.stop @popup-visible-change="onPopupVisibleChange">
|
||||
<div class="task-item">
|
||||
<div class="color-indicator" :style="{ background: getTaskColor() }"></div>
|
||||
<div>{{ timestampToTime(task.execution_time) }}</div>
|
||||
<div class="task-name" :title="task?.name || '-'">{{ task?.name || 'AI生成内容' }}</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="flex flex-col items-start popup-content" @click="gotoDetail">
|
||||
<div class="flex flex-col items-start p-16px w-full" @click="gotoDetail">
|
||||
<div class="flex justify-between w-full items-center">
|
||||
<div class="flex items-center title-container">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
|
||||
/>
|
||||
<div class="task-title" :title="record.name || 'AI生成内容'">{{ record.name || 'AI生成内容' }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="status-tag"
|
||||
:style="{
|
||||
color: getTaskColor(),
|
||||
backgroundColor: getTaskColor() + '50',
|
||||
}"
|
||||
>
|
||||
{{ getTaskStatusText(task.status) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-12px color-#939499 mt-4px h-22px" @click="gotoDetail">
|
||||
{{ timestampToTime1(task.execution_time) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-size-14px color-#211F24 color-#211F24 task-description" :title="task.name || 'AI生成内容'">
|
||||
{{ task.name || 'AI生成内容' }}
|
||||
</div>
|
||||
<div v-if="task.ai_generate_status == 0" class="AILoding">
|
||||
<ASpin />
|
||||
<div style="color: #9a56ba">内容生成中...</div>
|
||||
<div style="color: #9a56ba">完成后将自动展示，您可先返回其他操作</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="task.ai_generate_status == 1 && taskDetail" class="w-full pl-16px">
|
||||
<div
|
||||
v-for="item in choseTextArray"
|
||||
:key="item.id"
|
||||
class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="flex items-center w-full">
|
||||
<img
|
||||
v-for="item in choseImgArray"
|
||||
:key="item.id"
|
||||
:src="item.cover || item.url"
|
||||
class="w-88 h-88 mr-8px border-rounded-8px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center w-full">
|
||||
<video
|
||||
v-for="item in choseVideoArray"
|
||||
:key="item.id"
|
||||
:src="item.cover || item.url"
|
||||
class="w-44 h-44 mr-8px border-rounded-8px object-fit-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-12px w-full h-1px bg-#E6E6E8"></div>
|
||||
<div class="flex items-center mt-12px mb-16px action-buttons w-full px-16px">
|
||||
<div class="flex items-center mr-12px" @click.stop="handleDelete" v-if="task.status != 1">
|
||||
<icon-delete style="font-size: 20px; margin-left: 0" />
|
||||
</div>
|
||||
<div class="flex w-full" :class="{ 'justify-between': task.ai_generate_status == 0 }">
|
||||
<a-date-picker
|
||||
v-model="datePickerValue"
|
||||
placeholder="修改发布时间"
|
||||
:show-time="{ format: 'HH:mm' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
@change="onChange"
|
||||
@ok="onOk"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<button v-if="task.ai_generate_status == 0" class="opt-btn ml-12px opt-right" @click.stop="handleAICreate">
|
||||
AI立即生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { Spin as ASpin } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import iconDy from '@/assets/img/platform/icon-dy.png';
|
||||
import iconXhs from '@/assets/img/platform/icon-xhs.png';
|
||||
import iconBilibili from '@/assets/img/platform/icon-bilibili.png';
|
||||
import iconKs from '@/assets/img/platform/icon-ks.png';
|
||||
import iconSph from '@/assets/img/platform/icon-sph.png';
|
||||
import iconWb from '@/assets/img/platform/icon-wb.png';
|
||||
import iconGzh from '@/assets/img/platform/icon-gzh.png';
|
||||
import iconWarn from '@/assets/img/media-account/icon-warn.png';
|
||||
import { getTaskSchedulesDetail } from '@/api/all/assignment-management';
|
||||
import { DatePicker } from '@arco-design/web-vue';
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
task: Object,
|
||||
record: Object,
|
||||
});
|
||||
|
||||
const taskDetail = ref(null);
|
||||
const choseImgArray = ref([]);
|
||||
const choseTextArray = ref([]);
|
||||
const choseVideoArray = ref([]);
|
||||
const getTaskDetail = async () => {
|
||||
if (!props.task || !props.task.id) return;
|
||||
|
||||
try {
|
||||
const res = await getTaskSchedulesDetail(props.task.id);
|
||||
|
||||
if (res && res.data) {
|
||||
datePickerValue.value = dayjs(res.data.execution_time * 1000);
|
||||
console.log('任务详情:', datePickerValue.value);
|
||||
if ('work' in res.data && res.data.work) {
|
||||
taskDetail.value = res.data.work;
|
||||
choseImgArray.value = res.data.work.files.filter((item) => [0].includes(item.type));
|
||||
choseTextArray.value = res.data.work.files.filter((item) => [2].includes(item.type));
|
||||
choseVideoArray.value = res.data.work.files.filter((item) => [1].includes(item.type));
|
||||
} else {
|
||||
taskDetail.value = res.data.raw_materials;
|
||||
choseImgArray.value = taskDetail.value.filter((item) => [0].includes(item.type));
|
||||
choseTextArray.value = taskDetail.value.filter((item) => [2].includes(item.type));
|
||||
choseVideoArray.value = taskDetail.value.filter((item) => [1].includes(item.type));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取任务详情失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (date, dateString) => {
|
||||
console.log('Selected Date: ', date, dateString);
|
||||
};
|
||||
|
||||
const onOk = (value) => {
|
||||
console.log('DatePicker OK: ', value);
|
||||
if (value) {
|
||||
emit('handle-task', 'edit-time', props.task, value);
|
||||
}
|
||||
};
|
||||
|
||||
const onPopupVisibleChange = (visible) => {
|
||||
if (visible) {
|
||||
getTaskDetail();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('handle-task', 'delete', props.task, props.record);
|
||||
};
|
||||
const gotoDetail = () => {
|
||||
console.log('跳转详情');
|
||||
emit('handle-task', 'goto-detail', props.task, props.record);
|
||||
};
|
||||
const handleTimeChange = (time: string) => {
|
||||
// if (time) {
|
||||
// emit('handle-task', 'edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
|
||||
// }
|
||||
};
|
||||
const handleAICreate = () => {
|
||||
emit('handle-task', 'ai-create', props.task, props.record);
|
||||
};
|
||||
const timestampToTime = (timestamp: number): string => {
|
||||
// 如果没有传入时间戳，则返回空字符串
|
||||
if (!timestamp) return '';
|
||||
|
||||
// 将时间戳转换为毫秒（如果时间戳是秒单位的话）
|
||||
const date = new Date(timestamp * 1000);
|
||||
|
||||
// 格式化为 HH:mm 格式
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
const timestampToTime1 = (timestamp: number): string => {
|
||||
// 如果没有传入时间戳，则使用当前时间
|
||||
if (!timestamp) {
|
||||
timestamp = Date.now() / 1000; // 使用秒级时间戳保持一致性
|
||||
}
|
||||
|
||||
const date = new Date(timestamp * 1000);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 补零
|
||||
|
||||
return `${month}月${day}日`;
|
||||
};
|
||||
|
||||
const emit = defineEmits(['filter-change', 'handle-task']);
|
||||
|
||||
// 日期选择器的值
|
||||
const datePickerValue = ref(null);
|
||||
|
||||
// 平台配置
|
||||
const platformConfig = {
|
||||
icons: {
|
||||
0: iconDy,
|
||||
1: iconXhs,
|
||||
2: iconBilibili,
|
||||
3: iconKs,
|
||||
4: iconSph,
|
||||
5: iconWb,
|
||||
6: iconGzh,
|
||||
},
|
||||
};
|
||||
|
||||
// 获取平台图标
|
||||
const getPlatformIcon = (platform: number) => platformConfig.icons[platform] || iconWarn;
|
||||
|
||||
// 根据任务类型获取颜色
|
||||
const getTaskColor = () => {
|
||||
if (!props.task) return '#000';
|
||||
|
||||
// 根据colorTip.vue中的颜色定义设置不同状态的颜色
|
||||
switch (props.task.status) {
|
||||
case 0: // 待生成
|
||||
return '#ffae00';
|
||||
case 1: // 待发布
|
||||
return '#6d4cfe';
|
||||
case 2: // 已发布
|
||||
return '#939499';
|
||||
case 3: // 发布失败
|
||||
return '#f64b31';
|
||||
default:
|
||||
return props.task.color || '#939499';
|
||||
}
|
||||
};
|
||||
|
||||
const getTaskStatusText = (status) => {
|
||||
console.log('任务状态:', status);
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '待生成';
|
||||
case 1:
|
||||
return '待发布';
|
||||
case 2:
|
||||
return '已发布';
|
||||
case 3:
|
||||
return '发布失败';
|
||||
default:
|
||||
return '未知状态';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.task-item {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-indicator {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
width: 388px;
|
||||
background-color: #fff;
|
||||
box-shadow: #e6e6e8 0px 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.task-description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 365px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
width: 154px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
background: #f2f3f5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.opt-right {
|
||||
background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
|
||||
color: #9a56ba;
|
||||
}
|
||||
|
||||
.AILoding {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 356px;
|
||||
height: 108px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #fbf9ff 0%, #f3fafe 100%);
|
||||
color: linear-gradient(90deg, #9a56ba 0%, #576fd1 100%);
|
||||
margin-left: 16px;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 12px;
|
||||
leading-trim: NONE;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -8936,6 +8936,11 @@ vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1, vue-eslint-parser@^9.1.0, vu
|
||||
lodash "^4.17.21"
|
||||
semver "^7.3.6"
|
||||
|
||||
vue-lazyload@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-3.0.0.tgz"
|
||||
integrity sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==
|
||||
|
||||
vue-router@^4.4.0:
|
||||
version "4.5.1"
|
||||
resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz"
|
||||
|
||||
Reference in New Issue
Block a user