Compare commits
48 Commits
main
...
f7979b4e9b
| Author | SHA1 | Date | |
|---|---|---|---|
| f7979b4e9b | |||
| 9110df9711 | |||
| 1090351df7 | |||
| 0dab4cc524 | |||
| 29d6ba59c9 | |||
| 1566a72cb6 | |||
| 4e8f3e6564 | |||
| 5da9c11771 | |||
| 41da6b1914 | |||
| 1a97f75546 | |||
| b3bffac35e | |||
| da149760cb | |||
| d79c3f8191 | |||
| 2347bc6f0c | |||
| f867f50114 | |||
| fd0aaee998 | |||
| e2261c5fc4 | |||
| cc894333bf | |||
| e24a4adec6 | |||
| ebef3963f8 | |||
| 0ecb7691da | |||
| 9c2253a91e | |||
| b302b3af2b | |||
| 38b57adb5e | |||
| 776de99441 | |||
| 8524d2112e | |||
| fd35dc532b | |||
| cc5d380551 | |||
| 6f8a3e72a5 | |||
| f2ee833412 | |||
| ab003714bf | |||
| 4bd5797772 | |||
| 927e2ebc4c | |||
| b020976ace | |||
| 3d9a5f399e | |||
| 186bfcdcd7 | |||
| bbf953f47a | |||
| 473aa04ea4 | |||
| 2698e2c2cf | |||
| f8d73b1ddb | |||
| af5894dd5a | |||
| 716b383a87 | |||
| aeaf68307f | |||
| 2d7470c133 | |||
| e0f8d6c574 | |||
| 2694a0c905 | |||
| a66092dea0 | |||
| 5ccdeaff58 |
@@ -1,11 +1,10 @@
|
||||
ENV = 'production'
|
||||
VITE_APP_API_BASEURL = https://opsscmapi.f2b211.com/api/ #请求地址
|
||||
|
||||
|
||||
VITE_APP_API_BASEURL =https://orico.com.cn/admapi/v1
|
||||
#前端回显图片之类的地址
|
||||
# 线上环境
|
||||
VITE_USER_NODE_ENV = production
|
||||
#前端回显图片之类的地址
|
||||
VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com/
|
||||
VITE_APP_API_BASE_UPLOAD_URL =https://orico.com.cn/
|
||||
|
||||
# 是否启用 gzip 或 brotli 压缩打包,如果需要多个压缩规则,可以使用 “,” 分隔
|
||||
# Optional: gzip | brotli | none
|
||||
|
||||
47
index.html
47
index.html
@@ -103,51 +103,6 @@
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script>
|
||||
// let gwUser = JSON.parse(localStorage.getItem("gw-user"));
|
||||
|
||||
// if (gwUser) {
|
||||
// const { phpToken, refreshToken } = gwUser;
|
||||
// function offline() {
|
||||
// const pathurl = localStorage.getItem("baseUrl") + `uc/offline`;
|
||||
// fetch(pathurl, {
|
||||
// method: "POST",
|
||||
// credentials: "include",
|
||||
// keepalive: true,
|
||||
// headers: {
|
||||
// Authorization: phpToken,
|
||||
// "Refresh-Authorization": refreshToken
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// window.onbeforeunload = function (e) {
|
||||
// offline();
|
||||
// };
|
||||
// var ua = window.navigator.userAgent.toLowerCase();
|
||||
// var rkn =
|
||||
// /\b(opera|chrome|webkit|safari|msie|firefox|gecko|qqbrowser|edg)\b(\s*(version|rv:|\/)*(\d+(\.\d+)*))?/g;
|
||||
// window.addEventListener("mouseover", function () {
|
||||
// window.removeEventListener("beforeunload", offline, true);
|
||||
// ua.replace(rkn, function (match, type, all, rv, version) {
|
||||
// if (type == "chrome" && parseInt(version) <= 86) {
|
||||
// window.removeEventListener("unload", offline, true);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// window.addEventListener("mouseout", function () {
|
||||
// window.addEventListener("beforeunload", offline, true);
|
||||
// ua.replace(rkn, function (match, type, all, rv, version) {
|
||||
// if (type == "qqbrowser" || type == "edg" || (type == "chrome" && parseInt(version) <= 86)) {
|
||||
// window.addEventListener("unload", offline, true);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// if (window.location.pathnam !== "/login") {
|
||||
// window.removeEventListener("beforeunload", offline);
|
||||
// window.removeEventListener("unload", offline);
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
<script></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
600
package-lock.json
generated
600
package-lock.json
generated
@@ -10,9 +10,11 @@
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@types/decimal.js": "^7.4.0",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
@@ -27,12 +29,14 @@
|
||||
"jsbarcode": "^3.11.6",
|
||||
"jsonpack": "^1.1.5",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mavon-editor": "^3.0.2",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.3",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"print-js": "^1.6.0",
|
||||
"qs": "^6.13.1",
|
||||
"quill": "^2.0.3",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
@@ -3607,6 +3611,74 @@
|
||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
|
||||
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueup/vue-quill/-/vue-quill-1.2.0.tgz",
|
||||
"integrity": "sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==",
|
||||
"dependencies": {
|
||||
"quill": "^1.3.7",
|
||||
"quill-delta": "^4.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.41"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/eventemitter3": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||
"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/parchment": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
|
||||
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/quill": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz",
|
||||
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
|
||||
"dependencies": {
|
||||
"clone": "^2.1.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"eventemitter3": "^2.0.3",
|
||||
"extend": "^3.0.2",
|
||||
"parchment": "^1.1.4",
|
||||
"quill-delta": "^3.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/quill-delta": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-4.2.2.tgz",
|
||||
"integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
|
||||
"dependencies": {
|
||||
"fast-diff": "1.2.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/quill/node_modules/fast-diff": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||
},
|
||||
"node_modules/@vueup/vue-quill/node_modules/quill/node_modules/quill-delta": {
|
||||
"version": "3.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz",
|
||||
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
||||
"dependencies": {
|
||||
"deep-equal": "^1.0.1",
|
||||
"extend": "^3.0.2",
|
||||
"fast-diff": "1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "10.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.1.2.tgz",
|
||||
@@ -3825,6 +3897,11 @@
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
@@ -4323,13 +4400,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"dev": true,
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
|
||||
"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
"call-bind-apply-helpers": "^1.0.0",
|
||||
"es-define-property": "^1.0.0",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
@@ -4683,7 +4767,6 @@
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
|
||||
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
@@ -5448,6 +5531,11 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/cssfilter": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmmirror.com/cssfilter/-/cssfilter-0.0.10.tgz",
|
||||
"integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
|
||||
},
|
||||
"node_modules/csso": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/csso/-/csso-4.2.0.tgz",
|
||||
@@ -5617,6 +5705,25 @@
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-equal": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.2.tgz",
|
||||
"integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
|
||||
"dependencies": {
|
||||
"is-arguments": "^1.1.1",
|
||||
"is-date-object": "^1.0.5",
|
||||
"is-regex": "^1.1.4",
|
||||
"object-is": "^1.1.5",
|
||||
"object-keys": "^1.1.1",
|
||||
"regexp.prototype.flags": "^1.5.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@@ -5637,6 +5744,22 @@
|
||||
"resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
|
||||
"integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
||||
"dependencies": {
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/define-lazy-prop": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||
@@ -5647,16 +5770,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/define-properties": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
|
||||
"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
|
||||
"dev": true,
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
|
||||
"integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.0",
|
||||
"object-keys": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/define-property": {
|
||||
@@ -6566,6 +6692,11 @@
|
||||
"es5-ext": "~0.10.14"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
|
||||
},
|
||||
"node_modules/execa": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
|
||||
@@ -6715,6 +6846,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/type/-/type-2.7.2.tgz",
|
||||
"integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
|
||||
},
|
||||
"node_modules/extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"node_modules/extend-shallow": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
@@ -6755,8 +6891,7 @@
|
||||
"node_modules/fast-diff": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.3.0.tgz",
|
||||
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.12",
|
||||
@@ -7061,8 +7196,7 @@
|
||||
"node_modules/functions-have-names": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
|
||||
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
@@ -7576,12 +7710,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/has-property-descriptors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
|
||||
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
|
||||
"dev": true,
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.1.1"
|
||||
"es-define-property": "^1.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-proto": {
|
||||
@@ -7605,15 +7741,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
|
||||
"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
|
||||
"dev": true,
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.2"
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-value": {
|
||||
@@ -7958,6 +8096,21 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arguments": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.2.0.tgz",
|
||||
"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-array-buffer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
|
||||
@@ -8049,7 +8202,6 @@
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
|
||||
"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-tostringtag": "^1.0.0"
|
||||
},
|
||||
@@ -8202,7 +8354,6 @@
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
|
||||
"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.0"
|
||||
@@ -9161,6 +9312,14 @@
|
||||
"integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/mavon-editor": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.2.tgz",
|
||||
"integrity": "sha512-QmmsypznEkru3Gj9u/i3OLs7uWOwrAUDyLAiQnl7bj2lvZZ++J7MPA+Al0G26cQZ8GwzyC69T5l6NQjZ2z1Nuw==",
|
||||
"dependencies": {
|
||||
"xss": "^1.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
@@ -9725,11 +9884,25 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/object-is": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.6.tgz",
|
||||
"integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.7",
|
||||
"define-properties": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/object-keys": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
@@ -9898,6 +10071,11 @@
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/parchment": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-3.0.0.tgz",
|
||||
"integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A=="
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@@ -10653,6 +10831,33 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/quill": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/quill/-/quill-2.0.3.tgz",
|
||||
"integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
|
||||
"dependencies": {
|
||||
"eventemitter3": "^5.0.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"parchment": "^3.0.0",
|
||||
"quill-delta": "^5.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"npm": ">=8.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-delta": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-5.1.0.tgz",
|
||||
"integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
|
||||
"dependencies": {
|
||||
"fast-diff": "^1.3.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@@ -10925,17 +11130,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/regexp.prototype.flags": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
|
||||
"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
|
||||
"dev": true,
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
|
||||
"integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.2",
|
||||
"define-properties": "^1.2.0",
|
||||
"functions-have-names": "^1.2.3"
|
||||
"call-bind": "^1.0.8",
|
||||
"define-properties": "^1.2.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"set-function-name": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/regexpu-core": {
|
||||
@@ -11284,6 +11494,36 @@
|
||||
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-name": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.2.tgz",
|
||||
"integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"functions-have-names": "^1.2.3",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/set-value": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/set-value/-/set-value-2.0.1.tgz",
|
||||
@@ -14839,6 +15079,26 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/xss": {
|
||||
"version": "1.0.15",
|
||||
"resolved": "https://registry.npmmirror.com/xss/-/xss-1.0.15.tgz",
|
||||
"integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
|
||||
"dependencies": {
|
||||
"commander": "^2.20.3",
|
||||
"cssfilter": "0.0.10"
|
||||
},
|
||||
"bin": {
|
||||
"xss": "bin/xss"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/xss/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
},
|
||||
"node_modules/xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
|
||||
@@ -17502,6 +17762,72 @@
|
||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
|
||||
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
|
||||
},
|
||||
"@vueup/vue-quill": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueup/vue-quill/-/vue-quill-1.2.0.tgz",
|
||||
"integrity": "sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==",
|
||||
"requires": {
|
||||
"quill": "^1.3.7",
|
||||
"quill-delta": "^4.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"eventemitter3": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||
"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
|
||||
},
|
||||
"fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
|
||||
},
|
||||
"parchment": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
|
||||
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
|
||||
},
|
||||
"quill": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz",
|
||||
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
|
||||
"requires": {
|
||||
"clone": "^2.1.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"eventemitter3": "^2.0.3",
|
||||
"extend": "^3.0.2",
|
||||
"parchment": "^1.1.4",
|
||||
"quill-delta": "^3.6.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"fast-diff": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||
},
|
||||
"quill-delta": {
|
||||
"version": "3.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz",
|
||||
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
||||
"requires": {
|
||||
"deep-equal": "^1.0.1",
|
||||
"extend": "^3.0.2",
|
||||
"fast-diff": "1.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"quill-delta": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-4.2.2.tgz",
|
||||
"integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
|
||||
"requires": {
|
||||
"fast-diff": "1.2.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vueuse/core": {
|
||||
"version": "10.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.1.2.tgz",
|
||||
@@ -17629,6 +17955,11 @@
|
||||
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
@@ -18014,13 +18345,14 @@
|
||||
}
|
||||
},
|
||||
"call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"dev": true,
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
|
||||
"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
"call-bind-apply-helpers": "^1.0.0",
|
||||
"es-define-property": "^1.0.0",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"call-bind-apply-helpers": {
|
||||
@@ -18301,8 +18633,7 @@
|
||||
"clone": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
|
||||
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
|
||||
"dev": true
|
||||
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
|
||||
},
|
||||
"codepage": {
|
||||
"version": "1.15.0",
|
||||
@@ -18909,6 +19240,11 @@
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true
|
||||
},
|
||||
"cssfilter": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmmirror.com/cssfilter/-/cssfilter-0.0.10.tgz",
|
||||
"integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
|
||||
},
|
||||
"csso": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/csso/-/csso-4.2.0.tgz",
|
||||
@@ -19040,6 +19376,19 @@
|
||||
"integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
|
||||
"dev": true
|
||||
},
|
||||
"deep-equal": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.2.tgz",
|
||||
"integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
|
||||
"requires": {
|
||||
"is-arguments": "^1.1.1",
|
||||
"is-date-object": "^1.0.5",
|
||||
"is-regex": "^1.1.4",
|
||||
"object-is": "^1.1.5",
|
||||
"object-keys": "^1.1.1",
|
||||
"regexp.prototype.flags": "^1.5.1"
|
||||
}
|
||||
},
|
||||
"deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@@ -19057,6 +19406,16 @@
|
||||
"resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
|
||||
"integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
|
||||
},
|
||||
"define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
||||
"requires": {
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"define-lazy-prop": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||
@@ -19064,11 +19423,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"define-properties": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
|
||||
"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
|
||||
"dev": true,
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
|
||||
"integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
|
||||
"requires": {
|
||||
"define-data-property": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.0",
|
||||
"object-keys": "^1.1.1"
|
||||
}
|
||||
@@ -19784,6 +20143,11 @@
|
||||
"es5-ext": "~0.10.14"
|
||||
}
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
|
||||
},
|
||||
"execa": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
|
||||
@@ -19914,6 +20278,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"extend-shallow": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
@@ -19948,8 +20317,7 @@
|
||||
"fast-diff": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.3.0.tgz",
|
||||
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.12",
|
||||
@@ -20191,8 +20559,7 @@
|
||||
"functions-have-names": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
|
||||
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
|
||||
},
|
||||
"gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
@@ -20600,12 +20967,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"has-property-descriptors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
|
||||
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
|
||||
"dev": true,
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
||||
"requires": {
|
||||
"get-intrinsic": "^1.1.1"
|
||||
"es-define-property": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"has-proto": {
|
||||
@@ -20620,12 +20986,11 @@
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
|
||||
},
|
||||
"has-tostringtag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
|
||||
"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
|
||||
"dev": true,
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"requires": {
|
||||
"has-symbols": "^1.0.2"
|
||||
"has-symbols": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"has-value": {
|
||||
@@ -20901,6 +21266,15 @@
|
||||
"kind-of": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"is-arguments": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.2.0.tgz",
|
||||
"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
|
||||
"requires": {
|
||||
"call-bound": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"is-array-buffer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
|
||||
@@ -20980,7 +21354,6 @@
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
|
||||
"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-tostringtag": "^1.0.0"
|
||||
}
|
||||
@@ -21088,7 +21461,6 @@
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
|
||||
"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"call-bind": "^1.0.2",
|
||||
"has-tostringtag": "^1.0.0"
|
||||
@@ -21866,6 +22238,14 @@
|
||||
"integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
|
||||
"dev": true
|
||||
},
|
||||
"mavon-editor": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.2.tgz",
|
||||
"integrity": "sha512-QmmsypznEkru3Gj9u/i3OLs7uWOwrAUDyLAiQnl7bj2lvZZ++J7MPA+Al0G26cQZ8GwzyC69T5l6NQjZ2z1Nuw==",
|
||||
"requires": {
|
||||
"xss": "^1.0.10"
|
||||
}
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
@@ -22328,11 +22708,19 @@
|
||||
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.3.tgz",
|
||||
"integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA=="
|
||||
},
|
||||
"object-is": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.6.tgz",
|
||||
"integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
|
||||
"requires": {
|
||||
"call-bind": "^1.0.7",
|
||||
"define-properties": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"object-keys": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
|
||||
},
|
||||
"object-visit": {
|
||||
"version": "1.0.1",
|
||||
@@ -22466,6 +22854,11 @@
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"parchment": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-3.0.0.tgz",
|
||||
"integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A=="
|
||||
},
|
||||
"parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@@ -23059,6 +23452,27 @@
|
||||
"integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
|
||||
"dev": true
|
||||
},
|
||||
"quill": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/quill/-/quill-2.0.3.tgz",
|
||||
"integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
|
||||
"requires": {
|
||||
"eventemitter3": "^5.0.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"parchment": "^3.0.0",
|
||||
"quill-delta": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"quill-delta": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-5.1.0.tgz",
|
||||
"integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
|
||||
"requires": {
|
||||
"fast-diff": "^1.3.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@@ -23280,14 +23694,16 @@
|
||||
}
|
||||
},
|
||||
"regexp.prototype.flags": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
|
||||
"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
|
||||
"dev": true,
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
|
||||
"integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
|
||||
"requires": {
|
||||
"call-bind": "^1.0.2",
|
||||
"define-properties": "^1.2.0",
|
||||
"functions-have-names": "^1.2.3"
|
||||
"call-bind": "^1.0.8",
|
||||
"define-properties": "^1.2.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"set-function-name": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"regexpu-core": {
|
||||
@@ -23557,6 +23973,30 @@
|
||||
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
|
||||
"dev": true
|
||||
},
|
||||
"set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
||||
"requires": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"set-function-name": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.2.tgz",
|
||||
"integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
|
||||
"requires": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"functions-have-names": "^1.2.3",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"set-value": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/set-value/-/set-value-2.0.1.tgz",
|
||||
@@ -26355,6 +26795,22 @@
|
||||
"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
|
||||
"dev": true
|
||||
},
|
||||
"xss": {
|
||||
"version": "1.0.15",
|
||||
"resolved": "https://registry.npmmirror.com/xss/-/xss-1.0.15.tgz",
|
||||
"integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
|
||||
"requires": {
|
||||
"commander": "^2.20.3",
|
||||
"cssfilter": "0.0.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
|
||||
|
||||
@@ -22,9 +22,11 @@
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@types/decimal.js": "^7.4.0",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
@@ -39,12 +41,14 @@
|
||||
"jsbarcode": "^3.11.6",
|
||||
"jsonpack": "^1.1.5",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mavon-editor": "^3.0.2",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.3",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"print-js": "^1.6.0",
|
||||
"qs": "^6.13.1",
|
||||
"quill": "^2.0.3",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { useUserStore } from "@/stores/modules/user";
|
||||
// const userStore: any = useUserStore();
|
||||
import { reactive, ref, computed } from "vue";
|
||||
|
||||
import { useTheme } from "@/hooks/useTheme";
|
||||
@@ -26,4 +28,11 @@ const assemblySize = computed(() => globalStore.assemblySize);
|
||||
|
||||
// element button config
|
||||
const buttonConfig = reactive({ autoInsertSpace: false });
|
||||
// watch(
|
||||
// () => userStore.languageType,
|
||||
// (newVal: any) => {
|
||||
// console.log(newVal, "=======newVal=======");
|
||||
// window.location.reload();
|
||||
// }
|
||||
// );
|
||||
</script>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/servic
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ResultData } from "@/api/interface";
|
||||
import { ResultEnum } from "@/enums/httpEnum";
|
||||
import { checkStatus } from "./helper/checkStatus";
|
||||
// import { checkStatus } from "./helper/checkStatus";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
import router from "@/routers";
|
||||
//获取导出表格name
|
||||
@@ -14,8 +14,10 @@ const getDispositionName = (response: any) => {
|
||||
//导出表格,从content-disposition获取表格的名称 只有导出服务端才会返回该字段
|
||||
const contentDisposition = response.headers["content-disposition"];
|
||||
if (contentDisposition) {
|
||||
let contentDispositionClone = decodeURIComponent(contentDisposition);
|
||||
console.log(contentDispositionClone);
|
||||
// 解析 Content-Disposition 以提取文件名
|
||||
const filenameMatch = contentDisposition.match(/filename=(.*)/i);
|
||||
const filenameMatch = contentDispositionClone.match(/filename=(.*)/i);
|
||||
if (filenameMatch && filenameMatch[1]) {
|
||||
let filename = filenameMatch[1].trim();
|
||||
localStorage.setItem("filename", filename);
|
||||
@@ -54,7 +56,7 @@ class RequestHttp {
|
||||
// 当前请求不需要显示 loading,在 api 服务中通过指定的第三个参数: { noLoading: true } 来控制
|
||||
config.noLoading || showFullScreenLoading();
|
||||
if (config.headers && typeof config.headers.set === "function") {
|
||||
config.headers.set("Authorization", "Bearer" + " " + userStore.token);
|
||||
config.headers.set("Authorization", userStore.token);
|
||||
}
|
||||
return config;
|
||||
},
|
||||
@@ -69,10 +71,27 @@ class RequestHttp {
|
||||
*/
|
||||
this.service.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { data } = response;
|
||||
const { data, request } = response;
|
||||
|
||||
tryHideFullScreenLoading();
|
||||
const imgId = request?.responseURL?.split("imgId=")[1];
|
||||
//获取导出表格名称
|
||||
getDispositionName(response);
|
||||
// 获取响应头中的 Authorization 信息
|
||||
const authorization = response.headers["authorization"];
|
||||
if (imgId) {
|
||||
return {
|
||||
imgId,
|
||||
data
|
||||
};
|
||||
}
|
||||
if (authorization) {
|
||||
// 可以在这里更新用户的 token 信息
|
||||
const userStore = useUserStore();
|
||||
userStore.setToken(authorization);
|
||||
return data;
|
||||
}
|
||||
|
||||
//0正常,1非正常
|
||||
if (data.code == 1) {
|
||||
ElMessage.error(data.msg);
|
||||
@@ -94,7 +113,7 @@ class RequestHttp {
|
||||
// 根据服务器响应的错误状态码,做不同的处理
|
||||
if (response) {
|
||||
console.log("error-走到了这里", response.status);
|
||||
checkStatus(response.status, response.data);
|
||||
// checkStatus(response.status, response.data);
|
||||
}
|
||||
// 服务器结果都没有返回(可能服务器错误可能客户端断网),断网处理:可以跳转到断网页面
|
||||
if (!window.navigator.onLine) router.replace("/500");
|
||||
|
||||
@@ -5,6 +5,10 @@ const ARTICLE_CATEGORY = `/article/category`;
|
||||
export const getArticleClassListApi = (params: any) => {
|
||||
return http.get<any>(`${ARTICLE_CATEGORY}/index`, params);
|
||||
};
|
||||
//文章分类下拉框
|
||||
export const getArticleClassApi = () => {
|
||||
return http.get<any>(`/article/categorys`);
|
||||
};
|
||||
//文章分类新增
|
||||
export const getArticleClassAddSaveApi = (params: any) => {
|
||||
return http.post<any>(`${ARTICLE_CATEGORY}/save`, params);
|
||||
@@ -15,18 +19,24 @@ export const getArticleClassDelApi = (params: any) => {
|
||||
};
|
||||
//文章分类更新(用于编辑后)
|
||||
export const getArticleClassEditUpApi = (params: any) => {
|
||||
const { id, name, sort, is_show, seo_title, seo_keywords, seo_desc } = params;
|
||||
const { id, name, sort, is_show, pid, seo_title, seo_keywords, seo_desc, icon } = params;
|
||||
|
||||
return http.put<any>(`/article/category/update/${id}`, {
|
||||
name,
|
||||
sort,
|
||||
is_show,
|
||||
pid,
|
||||
seo_title,
|
||||
seo_keywords,
|
||||
seo_desc
|
||||
seo_desc,
|
||||
icon
|
||||
});
|
||||
};
|
||||
//文章分类详情(用于编辑)
|
||||
export const getArticleClassDetailsApi = (params: any) => {
|
||||
return http.get<any>(`${ARTICLE_CATEGORY}/read/${params}`);
|
||||
};
|
||||
export const getArticleClassSortApi = (params: any) => {
|
||||
const { id, sort } = params;
|
||||
return http.post<any>(`${ARTICLE_CATEGORY}/sort/${id}`, { sort });
|
||||
};
|
||||
|
||||
@@ -6,7 +6,6 @@ export const getBannerListApi = (params: any) => {
|
||||
};
|
||||
//新增
|
||||
export const getBannerListSaveApi = (params: any) => {
|
||||
console.log("1232323");
|
||||
return http.post<any>(`${B}/save`, params, {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
@@ -37,3 +36,7 @@ export const getBannerListExportApi = (params: any) => {
|
||||
responseType: "arraybuffer"
|
||||
});
|
||||
};
|
||||
//分类
|
||||
export const getBannerClassListApi = (params?: any) => {
|
||||
return http.get<any>(`/banner/list`, params); //v1/banner/list
|
||||
};
|
||||
|
||||
@@ -26,6 +26,6 @@ export const getCategorySortApi = (params: any) => {
|
||||
return http.post<any>(`${ATT_C}/sort/${params.id}`, { sort: params.sort });
|
||||
};
|
||||
//下载分类下拉列表
|
||||
export const getCategorysApi = () => {
|
||||
return http.get<any>(`/attachment/categorys`);
|
||||
export const getCategorysApi = (params?: any) => {
|
||||
return http.get<any>(`/attachment/tree`, params);
|
||||
};
|
||||
|
||||
@@ -16,7 +16,6 @@ export const getProductAttrDelApi = (params: any) => {
|
||||
// 产品属性更新
|
||||
export const getProductAttrUpApi = (params: any) => {
|
||||
const { id } = params;
|
||||
|
||||
return http.put<any>(`${PRODUCT_ATTR}/update/${id}`, params);
|
||||
};
|
||||
//产品属性新增
|
||||
|
||||
@@ -23,3 +23,12 @@ export const getProductBuypassUpdateApi = (params: any) => {
|
||||
const { id, param } = params;
|
||||
return http.put<any>(`${PRODUCT_BUYPASS}/update/${id}`, param);
|
||||
};
|
||||
|
||||
//新增
|
||||
export const getProductBuypassListSaveApi = (params: any) => {
|
||||
return http.post<any>(`${PRODUCT_BUYPASS}/save`, params, {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -36,3 +36,7 @@ export const getProductListSortApi = (params: any) => {
|
||||
const { id, sort } = params;
|
||||
return http.post<any>(`${PRODUCT}/sort/${id}`, { sort });
|
||||
};
|
||||
// 产品分类
|
||||
export const getProductCategoryListApi = (params?: any) => {
|
||||
return http.get<any>(`/product/categorys`, params);
|
||||
};
|
||||
|
||||
@@ -11,8 +11,8 @@ import http from "@/api";
|
||||
* @name 文件上传模块
|
||||
*/
|
||||
// 图片上传
|
||||
export const uploadImg = (params: any, name?: any) => {
|
||||
return http.post<any>(`/images/${name}/upload`, params);
|
||||
export const uploadImg = (params: any, name?: any, id?: any) => {
|
||||
return http.post<any>(`/images/${name}/upload?imgId=${id}`, params);
|
||||
};
|
||||
|
||||
// 视频上传
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import http from "@/api";
|
||||
const VIDEO_CATEGORY = `video/category`;
|
||||
// 视频分类分页列表
|
||||
export const getVideoClassListApi = (params: any) => {
|
||||
export const getVideoClassListApi = (params?: any) => {
|
||||
return http.get<any>(`${VIDEO_CATEGORY}/index`, params);
|
||||
};
|
||||
//视频分类详情
|
||||
|
||||
@@ -26,3 +26,7 @@ export const getVideoListExportApi = (params: any) => {
|
||||
responseType: "arraybuffer"
|
||||
});
|
||||
};
|
||||
//视频分类
|
||||
export const getVideoClassListApi = (params?: any) => {
|
||||
return http.get<any>(`/video/categorys`, params);
|
||||
};
|
||||
|
||||
117
src/auto-import.d.ts
vendored
117
src/auto-import.d.ts
vendored
@@ -4,67 +4,66 @@
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const ElNotification: typeof import('element-plus/es')['ElNotification']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const EffectScope: typeof import("vue")["EffectScope"];
|
||||
const computed: typeof import("vue")["computed"];
|
||||
const createApp: typeof import("vue")["createApp"];
|
||||
const customRef: typeof import("vue")["customRef"];
|
||||
const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
|
||||
const defineComponent: typeof import("vue")["defineComponent"];
|
||||
const effectScope: typeof import("vue")["effectScope"];
|
||||
const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
|
||||
const getCurrentScope: typeof import("vue")["getCurrentScope"];
|
||||
const h: typeof import("vue")["h"];
|
||||
const inject: typeof import("vue")["inject"];
|
||||
const isProxy: typeof import("vue")["isProxy"];
|
||||
const isReactive: typeof import("vue")["isReactive"];
|
||||
const isReadonly: typeof import("vue")["isReadonly"];
|
||||
const isRef: typeof import("vue")["isRef"];
|
||||
const markRaw: typeof import("vue")["markRaw"];
|
||||
const nextTick: typeof import("vue")["nextTick"];
|
||||
const onActivated: typeof import("vue")["onActivated"];
|
||||
const onBeforeMount: typeof import("vue")["onBeforeMount"];
|
||||
const onBeforeRouteLeave: typeof import("vue-router")["onBeforeRouteLeave"];
|
||||
const onBeforeRouteUpdate: typeof import("vue-router")["onBeforeRouteUpdate"];
|
||||
const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
|
||||
const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
|
||||
const onDeactivated: typeof import("vue")["onDeactivated"];
|
||||
const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
|
||||
const onMounted: typeof import("vue")["onMounted"];
|
||||
const onRenderTracked: typeof import("vue")["onRenderTracked"];
|
||||
const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
|
||||
const onScopeDispose: typeof import("vue")["onScopeDispose"];
|
||||
const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
|
||||
const onUnmounted: typeof import("vue")["onUnmounted"];
|
||||
const onUpdated: typeof import("vue")["onUpdated"];
|
||||
const provide: typeof import("vue")["provide"];
|
||||
const reactive: typeof import("vue")["reactive"];
|
||||
const readonly: typeof import("vue")["readonly"];
|
||||
const ref: typeof import("vue")["ref"];
|
||||
const resolveComponent: typeof import("vue")["resolveComponent"];
|
||||
const shallowReactive: typeof import("vue")["shallowReactive"];
|
||||
const shallowReadonly: typeof import("vue")["shallowReadonly"];
|
||||
const shallowRef: typeof import("vue")["shallowRef"];
|
||||
const toRaw: typeof import("vue")["toRaw"];
|
||||
const toRef: typeof import("vue")["toRef"];
|
||||
const toRefs: typeof import("vue")["toRefs"];
|
||||
const toValue: typeof import("vue")["toValue"];
|
||||
const triggerRef: typeof import("vue")["triggerRef"];
|
||||
const unref: typeof import("vue")["unref"];
|
||||
const useAttrs: typeof import("vue")["useAttrs"];
|
||||
const useCssModule: typeof import("vue")["useCssModule"];
|
||||
const useCssVars: typeof import("vue")["useCssVars"];
|
||||
const useLink: typeof import("vue-router")["useLink"];
|
||||
const useRoute: typeof import("vue-router")["useRoute"];
|
||||
const useRouter: typeof import("vue-router")["useRouter"];
|
||||
const useSlots: typeof import("vue")["useSlots"];
|
||||
const watch: typeof import("vue")["watch"];
|
||||
const watchEffect: typeof import("vue")["watchEffect"];
|
||||
const watchPostEffect: typeof import("vue")["watchPostEffect"];
|
||||
const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from "vue";
|
||||
}
|
||||
|
||||
20
src/components.d.ts
vendored
20
src/components.d.ts
vendored
@@ -7,10 +7,6 @@ export {}
|
||||
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
403: typeof import("./components/ErrorMessage/403.vue")["default"];
|
||||
404: typeof import("./components/ErrorMessage/404.vue")["default"];
|
||||
500: typeof import("./components/ErrorMessage/500.vue")["default"];
|
||||
ColSetting: typeof import("./components/ProTable/components/ColSetting.vue")["default"];
|
||||
ElAside: typeof import("element-plus/es")["ElAside"];
|
||||
ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"];
|
||||
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
|
||||
@@ -57,10 +53,6 @@ declare module "vue" {
|
||||
ElTree: typeof import("element-plus/es")["ElTree"];
|
||||
ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
|
||||
ElUpload: typeof import("element-plus/es")["ElUpload"];
|
||||
Empty: typeof import("./components/ProTable/components/Empty.vue")["default"];
|
||||
FormTable: typeof import("./components/FormTable/index.vue")["default"];
|
||||
Grid: typeof import("./components/Grid/index.vue")["default"];
|
||||
GridItem: typeof import("./components/Grid/components/GridItem.vue")["default"];
|
||||
IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
|
||||
IEpCircleClose: typeof import("~icons/ep/circle-close")["default"];
|
||||
IEpFolderDelete: typeof import("~icons/ep/folder-delete")["default"];
|
||||
@@ -68,19 +60,7 @@ declare module "vue" {
|
||||
IEpRemove: typeof import("~icons/ep/remove")["default"];
|
||||
IEpSearch: typeof import("~icons/ep/search")["default"];
|
||||
IEpSwitchButton: typeof import("~icons/ep/switch-button")["default"];
|
||||
ImportExcel: typeof import("./components/ImportExcel/index.vue")["default"];
|
||||
Loading: typeof import("./components/Loading/index.vue")["default"];
|
||||
Pagination: typeof import("./components/ProTable/components/Pagination.vue")["default"];
|
||||
ProTable: typeof import("./components/ProTable/index.vue")["default"];
|
||||
RouterLink: typeof import("vue-router")["RouterLink"];
|
||||
RouterView: typeof import("vue-router")["RouterView"];
|
||||
RulesForm: typeof import("./components/rulesForm/index.vue")["default"];
|
||||
SearchForm: typeof import("./components/SearchForm/index.vue")["default"];
|
||||
SearchFormItem: typeof import("./components/SearchForm/components/SearchFormItem.vue")["default"];
|
||||
TableColumn: typeof import("./components/ProTable/components/TableColumn.vue")["default"];
|
||||
UploadImg: typeof import("./components/Upload/UploadImg.vue")["default"];
|
||||
UploadImgs: typeof import("./components/Upload/UploadImgs.vue")["default"];
|
||||
UploadVideo: typeof import("./components/Upload/UploadVideo.vue")["default"];
|
||||
WangEditor: typeof import("./components/WangEditor/index.vue")["default"];
|
||||
}
|
||||
}
|
||||
|
||||
227
src/components/Editor/index.scss
Normal file
227
src/components/Editor/index.scss
Normal file
@@ -0,0 +1,227 @@
|
||||
.editor,
|
||||
.ql-toolbar {
|
||||
line-height: normal !important;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
.editor-img-uploader {
|
||||
display: none;
|
||||
}
|
||||
.ql-editor {
|
||||
min-height: 600px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||
content: "请输入链接地址:";
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||
padding-right: 0;
|
||||
content: "保存";
|
||||
border-right: 0;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||
content: "请输入视频地址:";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
content: "10px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||
content: "文本";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
content: "标题1";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
content: "标题2";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
content: "标题3";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
content: "标题4";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
content: "标题5";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
content: "标题6";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||
content: "标准字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||
content: "衬线字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
|
||||
font-family: SimSun, sans-serif;
|
||||
content: "宋体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
|
||||
font-family: SimHei, sans-serif;
|
||||
content: "黑体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
content: "微软雅黑";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
|
||||
font-family: KaiTi, sans-serif;
|
||||
content: "楷体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
|
||||
font-family: FangSong, sans-serif;
|
||||
content: "仿宋";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
|
||||
font-family: Arial, sans-serif;
|
||||
content: "Arial";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
content: "Times New Roman";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
|
||||
font-family: sans-serif;
|
||||
content: "sans-serif";
|
||||
}
|
||||
.ql-font-SimSun {
|
||||
font-family: SimSun, sans-serif;
|
||||
}
|
||||
.ql-font-SimHei {
|
||||
font-family: SimHei, sans-serif;
|
||||
}
|
||||
.ql-font-Microsoft-YaHei {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.ql-font-KaiTi {
|
||||
font-family: KaiTi, sans-serif;
|
||||
}
|
||||
.ql-font-FangSong {
|
||||
font-family: FangSong, sans-serif;
|
||||
}
|
||||
.ql-font-Arial {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.ql-font-Times-New-Roman {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
}
|
||||
.ql-font-sans-serif {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
|
||||
// content: "10px";
|
||||
// }
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
||||
content: "14px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
||||
content: "16px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
||||
content: "20px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
||||
content: "22px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
||||
content: "24px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
||||
content: "26px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
|
||||
content: "28px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
|
||||
content: "30px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
// content: "32px";
|
||||
// }
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
|
||||
content: "36px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
|
||||
content: "38px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
|
||||
content: "40px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
|
||||
content: "44px";
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
|
||||
// content: "44px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
|
||||
// content: "45px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
|
||||
// content: "50px";
|
||||
// }
|
||||
941
src/components/Editor/index.vue
Normal file
941
src/components/Editor/index.vue
Normal file
@@ -0,0 +1,941 @@
|
||||
<template>
|
||||
<!-- 图片上传组件 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 视频上传组件 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
|
||||
<!-- 主富文本编辑器 -->
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="mainEditor"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 标签页配置弹窗 -->
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="outerVisible"
|
||||
title="标签页配置"
|
||||
style="width: 1200px; height: 900px"
|
||||
close-on-click-modal
|
||||
close-on-press-escape
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<el-tab-pane
|
||||
:label="item.title"
|
||||
:name="item.key"
|
||||
v-for="(item, index) in tabsData"
|
||||
:key="item.key"
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
>
|
||||
<template #label>
|
||||
<div class="tab-title-edit">
|
||||
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<el-input
|
||||
@click.stop
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
v-else
|
||||
v-model="item.title"
|
||||
max-length=""
|
||||
:ref="el => (editInputRefs[index] = el)"
|
||||
size="small"
|
||||
class="title-input"
|
||||
@blur="finishEditTitle(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<QuillEditor
|
||||
:id="`tabEditor_${item.key}`"
|
||||
:ref="
|
||||
el => {
|
||||
if (el) tabEditors[index] = el;
|
||||
}
|
||||
"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleQX">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 图片顺序调整弹窗 -->
|
||||
<el-dialog v-model="showImageSortDialog" title="调整图片顺序" width="800px" :before-close="handleImageDialogClose">
|
||||
<div class="image-sort-container">
|
||||
<draggable
|
||||
v-model="sortedImageList"
|
||||
:animation="200"
|
||||
class="image-grid"
|
||||
ghost-class="ghost"
|
||||
item-key="customUid"
|
||||
@update:modelValue="updateSortOrder"
|
||||
>
|
||||
<template #item="{ element: img }">
|
||||
<div class="image-item">
|
||||
<div class="image-preview-container">
|
||||
<div class="image-order-badge">{{ img.sortOrder + 1 }}</div>
|
||||
<img :src="img.tempUrl" :alt="`图片 ${img.sortOrder + 1}`" class="preview-img" />
|
||||
<div style="display: flex; justify-content: flex-end; padding: 6px">
|
||||
<el-button size="small" type="default" @click.stop="removeImage(img.customUid)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-info">
|
||||
<span class="image-name">{{ img.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div v-if="sortedImageList.length === 0" class="empty-state">暂无图片,请先上传</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showImageSortDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmInsertImages" :disabled="sortedImageList.length === 0">
|
||||
确认插入
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
// import { Delete } from "@element-plus/icons-vue";
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import draggable from "vuedraggable";
|
||||
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = [
|
||||
"12px",
|
||||
"14px",
|
||||
"16px",
|
||||
"18px",
|
||||
"20px",
|
||||
"22px",
|
||||
"24px",
|
||||
"26px",
|
||||
"28px",
|
||||
"30px",
|
||||
"32px",
|
||||
"34px",
|
||||
"36px",
|
||||
"38px",
|
||||
"40px",
|
||||
"42px"
|
||||
];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
import DynamicDivBlot from "./quill-detail-div";
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
Quill.register(TabsBlot);
|
||||
Quill.register(DynamicDivBlot);
|
||||
|
||||
// 基础变量
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const activeName = ref(null);
|
||||
const activeEditor = ref("main");
|
||||
|
||||
// 标签页数据
|
||||
const tabsData = ref([]);
|
||||
const tabEditors = ref([]);
|
||||
const editInputRefs = ref([]);
|
||||
const currentEditingTabsRef = ref(null);
|
||||
|
||||
// 图片排序相关变量
|
||||
const showImageSortDialog = ref(false);
|
||||
const sortedImageList = ref([]);
|
||||
const uploadingCount = ref(0);
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 5 }
|
||||
});
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => {
|
||||
if (!props.content) return "";
|
||||
return props.content;
|
||||
},
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null);
|
||||
|
||||
// 主编辑器配置
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
sortedImageList.value = [];
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 标签页编辑器配置
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
sortedImageList.value = [];
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 上传前校验
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
|
||||
const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
|
||||
if (!validTypes.includes(fileType)) {
|
||||
ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 生成临时URL用于预览
|
||||
const tempUrl = URL.createObjectURL(file);
|
||||
imageListDb.value.push({
|
||||
...file,
|
||||
tempUrl,
|
||||
sortOrder: imageListDb.value.length, // 初始化排序索引
|
||||
serverImgId: "",
|
||||
path: ""
|
||||
});
|
||||
|
||||
uploadingCount.value++;
|
||||
return true;
|
||||
};
|
||||
|
||||
// 图片上传处理
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === options.file.customUid);
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
}
|
||||
|
||||
uploadingCount.value--;
|
||||
|
||||
// 所有图片上传完成后显示排序弹窗
|
||||
if (uploadingCount.value === 0) {
|
||||
sortedImageList.value = [...imageListDb.value];
|
||||
updateSortOrder(); // 确保排序索引正确
|
||||
nextTick(() => {
|
||||
showImageSortDialog.value = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
const failUid = options.file.customUid;
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== failUid);
|
||||
uploadingCount.value = Math.max(0, uploadingCount.value - 1);
|
||||
|
||||
ElNotification({
|
||||
title: "上传失败",
|
||||
message: `图片 ${options.file.name} 上传失败`,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新排序索引
|
||||
const updateSortOrder = () => {
|
||||
sortedImageList.value.forEach((item, index) => {
|
||||
item.sortOrder = index;
|
||||
});
|
||||
};
|
||||
|
||||
// 从排序列表移除图片
|
||||
const removeImage = customUid => {
|
||||
// 释放临时URL
|
||||
const removedImg = sortedImageList.value.find(img => img.customUid === customUid);
|
||||
if (removedImg?.tempUrl) {
|
||||
URL.revokeObjectURL(removedImg.tempUrl);
|
||||
}
|
||||
|
||||
// 从列表中移除
|
||||
sortedImageList.value = sortedImageList.value.filter(img => img.customUid !== customUid);
|
||||
|
||||
// 重新计算排序索引
|
||||
updateSortOrder();
|
||||
};
|
||||
|
||||
// 确认插入图片到编辑器
|
||||
const confirmInsertImages = () => {
|
||||
let quill;
|
||||
if (activeEditor.value === "main") {
|
||||
const rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
const rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
|
||||
if (!quill) {
|
||||
ElNotification({ title: "错误", message: "编辑器未加载完成", type: "error" });
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取光标位置
|
||||
const range = quill.getSelection() || { index: 0 };
|
||||
let currentInsertIndex = range.index;
|
||||
|
||||
// 按排序索引升序插入
|
||||
const sortedByOrder = [...sortedImageList.value].sort((a, b) => a.sortOrder - b.sortOrder);
|
||||
//
|
||||
sortedByOrder.forEach(item => {
|
||||
quill.insertEmbed(currentInsertIndex, "customImage", {
|
||||
url: item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
currentInsertIndex++;
|
||||
});
|
||||
|
||||
// 调整光标位置
|
||||
quill.setSelection(currentInsertIndex);
|
||||
|
||||
// 清理资源
|
||||
sortedImageList.value.forEach(img => {
|
||||
if (img.tempUrl) {
|
||||
URL.revokeObjectURL(img.tempUrl);
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭弹窗并重置
|
||||
showImageSortDialog.value = false;
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
sortedImageList.value = [];
|
||||
};
|
||||
|
||||
// 关闭图片排序弹窗时清理资源
|
||||
const handleImageDialogClose = () => {
|
||||
// 释放所有临时URL
|
||||
sortedImageList.value.forEach(img => {
|
||||
if (img.tempUrl) {
|
||||
URL.revokeObjectURL(img.tempUrl);
|
||||
}
|
||||
});
|
||||
|
||||
// 重置状态
|
||||
showImageSortDialog.value = false;
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
sortedImageList.value = [];
|
||||
};
|
||||
|
||||
// 视频上传
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) return;
|
||||
const file = evt.target.files[0];
|
||||
|
||||
// 校验视频文件
|
||||
const maxSize = 150 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
ElNotification({
|
||||
title: "文件过大",
|
||||
message: `视频大小不能超过 ${150}MB`,
|
||||
type: "warning"
|
||||
});
|
||||
evt.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// 生成视频本地URL
|
||||
const localVideoUrl = URL.createObjectURL(file);
|
||||
|
||||
try {
|
||||
// 上传视频
|
||||
const videoFormData = new FormData();
|
||||
videoFormData.append("video", file);
|
||||
const videoRes = await uploadVideo(videoFormData);
|
||||
|
||||
if (videoRes?.code !== 0) {
|
||||
throw new Error(`视频上传失败: ${videoRes?.message || "未知错误"}`);
|
||||
}
|
||||
const videoUrl = videoRes.data.path;
|
||||
|
||||
// 生成封面图并上传
|
||||
const frameBlob = await Video.captureVideoFrame(localVideoUrl);
|
||||
let coverUrl = "";
|
||||
if (frameBlob) {
|
||||
const coverFormData = new FormData();
|
||||
const coverUid = generateUUID();
|
||||
coverFormData.append("image", frameBlob, `cover-${coverUid}.jpg`);
|
||||
const coverRes = await uploadImg(coverFormData, routerName.value, coverUid);
|
||||
|
||||
if (coverRes?.data?.code === 0) {
|
||||
coverUrl = coverRes.data.data.path;
|
||||
}
|
||||
}
|
||||
|
||||
// 插入视频到编辑器
|
||||
insertVideoToEditor(videoUrl, coverUrl);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
URL.revokeObjectURL(localVideoUrl);
|
||||
evt.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
// 插入视频到编辑器
|
||||
const insertVideoToEditor = (videoUrl, coverUrl) => {
|
||||
let quill;
|
||||
if (activeEditor.value === "main") {
|
||||
quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
quill = toRaw(tabEditors.value[tabIndex])?.getQuill();
|
||||
}
|
||||
|
||||
if (quill) {
|
||||
const range = quill.getSelection() || { index: 0 };
|
||||
quill.insertEmbed(range.index, "customVideo", {
|
||||
url: videoUrl,
|
||||
poster: coverUrl
|
||||
});
|
||||
quill.setSelection(range.index + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 标签页切换事件
|
||||
const handleTabChange = key => {
|
||||
const tabIndex = tabsData.value.findIndex(item => item.key === key);
|
||||
activeName.value = key;
|
||||
activeEditor.value = `tab-${tabIndex}`;
|
||||
};
|
||||
|
||||
// 标签页增删事件
|
||||
const handleTabsEdit = (targetKey, action) => {
|
||||
if (action === "add") {
|
||||
if (tabsData.value.length > 5) {
|
||||
return useMsg("error", "标签页已达上限 !");
|
||||
}
|
||||
const newKey = `tab_${generateUUID()}`;
|
||||
const newIndex = tabsData.value.length;
|
||||
tabsData.value.push({
|
||||
key: newKey,
|
||||
title: `标签${newIndex + 1}`,
|
||||
content: "",
|
||||
isEditing: false
|
||||
});
|
||||
nextTick(() => {
|
||||
activeName.value = newKey;
|
||||
activeEditor.value = `tab-${newIndex}`;
|
||||
setTimeout(() => {
|
||||
startEditTitle(newIndex);
|
||||
}, 100);
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
const index = tabsData.value.findIndex(item => item.key === targetKey);
|
||||
tabsData.value.splice(index, 1);
|
||||
tabEditors.value.splice(index, 1);
|
||||
editInputRefs.value.splice(index, 1);
|
||||
|
||||
if (activeEditor.value.startsWith("tab-")) {
|
||||
const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
if (currentTabIndex > index) {
|
||||
activeEditor.value = `tab-${currentTabIndex - 1}`;
|
||||
} else if (currentTabIndex === index) {
|
||||
activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
|
||||
activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 开始编辑标签页标题
|
||||
const startEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
tab.originalTitle = tab.title;
|
||||
tab.isEditing = true;
|
||||
nextTick(() => {
|
||||
editInputRefs.value[index]?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 完成编辑标签页标题
|
||||
const finishEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
if (!tab.title.trim()) {
|
||||
tab.title = tab.originalTitle || `标签${index + 1}`;
|
||||
ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
|
||||
}
|
||||
tab.isEditing = false;
|
||||
if (tab.key === activeName.value) {
|
||||
activeName.value = tab.key;
|
||||
}
|
||||
};
|
||||
|
||||
// 其他方法
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
};
|
||||
const setTabsInfo = () => {
|
||||
outerVisible.value = false;
|
||||
tabsData.value = [];
|
||||
activeName.value = null;
|
||||
activeEditor.value = "main";
|
||||
};
|
||||
const handleBeforeClose = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
const handleQR = () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (!quill) return;
|
||||
if (!tabsData.value.length) {
|
||||
return useMsg("error", "标签页内容为空 !");
|
||||
}
|
||||
const range = quill.getSelection(true);
|
||||
|
||||
if (currentEditingTabsRef.value) {
|
||||
currentEditingTabsRef.value.updateContents(tabsData.value);
|
||||
currentEditingTabsRef.value = null;
|
||||
} else {
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
quill.setSelection(range.index + 1);
|
||||
quill.insertText(range.index, "\n");
|
||||
}
|
||||
setTabsInfo();
|
||||
};
|
||||
const handleQX = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
const initTitle = () => {
|
||||
const editor = document.querySelector(".ql-editor");
|
||||
if (editor) editor.dataset.placeholder = "";
|
||||
titleConfig.value.forEach(item => {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
});
|
||||
};
|
||||
const loadTabsDataToEditor = tabs => {
|
||||
tabsData.value = [];
|
||||
tabs.forEach((tab, index) => {
|
||||
tabsData.value.push({
|
||||
key: `tab_${generateUUID()}`,
|
||||
title: tab.title || `标签${index + 1}`,
|
||||
content: tab.content || "",
|
||||
isEditing: false
|
||||
});
|
||||
});
|
||||
nextTick(() => {
|
||||
if (tabsData.value.length > 0) {
|
||||
activeName.value = tabsData.value[0].key;
|
||||
activeEditor.value = "tab-0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
const editorEl = document.querySelector(".ql-editor");
|
||||
if (editorEl) {
|
||||
editorEl.addEventListener("edit-tabs", e => {
|
||||
const tabsData = TabsBlot.value(e.detail.blot.domNode);
|
||||
if (tabsData.length > 0) {
|
||||
currentEditingTabsRef.value = e.detail.blot;
|
||||
loadTabsDataToEditor(tabsData);
|
||||
outerVisible.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
clearEditor: () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 编辑器基础样式
|
||||
.ql-editor {
|
||||
min-height: 600px;
|
||||
cursor: text !important;
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
// 图片排序弹窗样式
|
||||
.image-sort-container {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.image-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.image-item {
|
||||
width: 150px;
|
||||
padding: 8px;
|
||||
cursor: move;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// 图片预览容器
|
||||
.image-preview-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
}
|
||||
.preview-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// 排序序号徽章
|
||||
.image-order-badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 圆形删除按钮
|
||||
// .circle-delete-btn {
|
||||
// position: absolute;
|
||||
// top: -8px;
|
||||
// right: -8px;
|
||||
// z-index: 500;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// color: white;
|
||||
// background-color: #ff4d4f;
|
||||
// border: none;
|
||||
// border-radius: 50%;
|
||||
// box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
||||
// transition: all 0.2s;
|
||||
// &:hover {
|
||||
// color: white;
|
||||
// background-color: #d93025;
|
||||
// transform: scale(1.1);
|
||||
// }
|
||||
// .el-icon {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
.image-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.image-name {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.empty-state {
|
||||
padding: 30px 0;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
.ghost {
|
||||
background-color: #e9ecef;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// 标签页样式
|
||||
.quill-tabs {
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ql-tabs::before {
|
||||
font-size: 16px;
|
||||
content: "T";
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
// 图片样式
|
||||
.ql-editor .quill-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 5px 0;
|
||||
&:focus {
|
||||
outline: 2px solid #4285f4;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 详情样式
|
||||
.o_detail_all {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.o_detail_title {
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 1.25vw;
|
||||
overflow: hidden;
|
||||
font-size: 2.25em;
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
color: #101010;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.o_detail_small {
|
||||
margin-bottom: 0.7vw;
|
||||
font-size: 1.5em;
|
||||
color: #333333;
|
||||
}
|
||||
.o_detail_text {
|
||||
width: 80%;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0.7vw;
|
||||
margin-left: auto;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #737373;
|
||||
}
|
||||
.products_des {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.products_des img {
|
||||
width: 100%;
|
||||
}
|
||||
.de_t_n {
|
||||
font-size: 1.5em;
|
||||
color: #333333;
|
||||
}
|
||||
.detail_title {
|
||||
padding: 2% 0;
|
||||
text-align: center;
|
||||
}
|
||||
.detail_title p {
|
||||
line-height: 2em;
|
||||
}
|
||||
.detail_con_a {
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj_detail_text,
|
||||
.lj_detail_texts {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.lj_detail_text p {
|
||||
padding: 0.5% 0;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* seo-pro */
|
||||
.seo-pro h3 {
|
||||
margin: 2% 0 1%;
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
.seo-pro p {
|
||||
margin: 0 0 11px;
|
||||
text-align: center;
|
||||
}
|
||||
.seo-pro a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sa_blue,
|
||||
.sa_blue a,
|
||||
.seo-pro a:hover {
|
||||
color: #009fdf;
|
||||
}
|
||||
</style>
|
||||
960
src/components/Editor/index2.vue
Normal file
960
src/components/Editor/index2.vue
Normal file
@@ -0,0 +1,960 @@
|
||||
<template>
|
||||
<!-- 图片上传组件 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 视频上传组件 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
|
||||
<!-- 主富文本编辑器 -->
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="mainEditor"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 标签页配置弹窗 -->
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="outerVisible"
|
||||
title="标签页配置"
|
||||
style="width: 1200px; height: 900px"
|
||||
close-on-click-modal
|
||||
close-on-press-escape
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<!-- 标签页:标题支持编辑 -->
|
||||
<el-tab-pane
|
||||
:label="item.title"
|
||||
:name="item.key"
|
||||
v-for="(item, index) in tabsData"
|
||||
:key="item.key"
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
>
|
||||
<template #label>
|
||||
<div class="tab-title-edit">
|
||||
<!-- 文字显示状态 -->
|
||||
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<!-- 输入框编辑状态 -->
|
||||
<el-input
|
||||
@click.stop
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
v-else
|
||||
v-model="item.title"
|
||||
max-length=""
|
||||
:ref="el => (editInputRefs[index] = el)"
|
||||
size="small"
|
||||
class="title-input"
|
||||
@blur="finishEditTitle(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 标签页编辑器内容 -->
|
||||
<QuillEditor
|
||||
:id="`tabEditor_${item.key}`"
|
||||
:ref="
|
||||
el => {
|
||||
if (el) tabEditors[index] = el;
|
||||
}
|
||||
"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleQX">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
// import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = [
|
||||
"12px",
|
||||
"14px",
|
||||
"16px",
|
||||
"18px",
|
||||
"20px",
|
||||
"22px",
|
||||
"24px",
|
||||
"26px",
|
||||
"28px",
|
||||
"30px",
|
||||
"32px",
|
||||
"34px",
|
||||
"36px",
|
||||
"38px",
|
||||
"40px",
|
||||
"42px"
|
||||
];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
import DynamicDivBlot from "./quill-detail-div";
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
Quill.register(TabsBlot);
|
||||
Quill.register(DynamicDivBlot);
|
||||
// 基础变量
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const activeName = ref(null); // 跟踪当前激活的标签页key
|
||||
const activeEditor = ref("main"); // 跟踪当前活跃编辑器:main/tab-索引
|
||||
|
||||
// 标签页数据(新增key作为唯一标识,isEditing控制编辑状态)
|
||||
const tabsData = ref([]);
|
||||
// 标签页编辑器ref数组
|
||||
const tabEditors = ref([]);
|
||||
// 标题编辑输入框的ref
|
||||
const editInputRefs = ref([]);
|
||||
const currentEditingTabsRef = ref(null);
|
||||
// Props
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 5 }
|
||||
});
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => {
|
||||
if (!props.content) return "";
|
||||
return props.content;
|
||||
},
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null); // 主编辑器ref
|
||||
|
||||
// 主编辑器配置(保持不变)
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 标签页编辑器配置(保持不变)
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 上传前校验(保持不变)
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
|
||||
const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
|
||||
if (!validTypes.includes(fileType)) {
|
||||
ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
imageListDb.value.push({
|
||||
...file,
|
||||
order: imageListDb.value.length
|
||||
});
|
||||
|
||||
imageListDb.value = [...imageListDb.value].sort((a, b) => a.order - b.order);
|
||||
|
||||
console.log(imageListDb.value, "=================value==================");
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
console.log(fileItem, "=fileItem=");
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
// 记录完成时间,用于排序
|
||||
fileItem.completeTime = Date.now();
|
||||
}
|
||||
|
||||
const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
console.log(allFilesUploaded, "=allFilesUploaded=");
|
||||
|
||||
if (allFilesUploaded) {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
// 获取当前光标位置
|
||||
const selection = quill.getSelection();
|
||||
const insertPosition = selection ? selection.index : quill.getLength();
|
||||
|
||||
// 关键修改:按照原始上传顺序排序
|
||||
// 假设imageListDb中的顺序就是上传顺序
|
||||
// 或者如果有order属性,可以按照order排序
|
||||
const sortedImages = [...imageListDb.value];
|
||||
|
||||
// 按顺序插入图片
|
||||
sortedImages.forEach((item, index) => {
|
||||
quill.insertEmbed(insertPosition + index, "customImage", {
|
||||
url: "https://dev.ow.f2b211.com" + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
});
|
||||
|
||||
// 最终光标定位到最后一张图片后面
|
||||
const finalPosition = insertPosition + sortedImages.length;
|
||||
quill.setSelection(finalPosition);
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
}
|
||||
};
|
||||
|
||||
// // 图片上传(保持不变)
|
||||
// const handleHttpUpload = async options => {
|
||||
// let formData = new FormData();
|
||||
// formData.append("image", options.file);
|
||||
// imageList.value.push(options.file);
|
||||
|
||||
// try {
|
||||
// const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
// if (result?.data?.code === 0) {
|
||||
// const { data } = result.data;
|
||||
// const { imgId } = result;
|
||||
|
||||
// const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
// if (fileItem) {
|
||||
// fileItem.serverImgId = imgId;
|
||||
// fileItem.path = data.path;
|
||||
// }
|
||||
|
||||
// const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
// if (allFilesUploaded) {
|
||||
// let rawQuillEditor = "";
|
||||
// let quill = "";
|
||||
// if (activeEditor.value === "main") {
|
||||
// rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// } else {
|
||||
// const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
// rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// }
|
||||
|
||||
// imageListDb.value.forEach(item => {
|
||||
// const length = quill.getLength() - 1;
|
||||
// quill.insertEmbed(length, "customImage", {
|
||||
// url: item.path,
|
||||
// id: item.serverImgId || generateUUID()
|
||||
// });
|
||||
// quill.setSelection(length + 1);
|
||||
// });
|
||||
|
||||
// const finalLength = quill.getLength();
|
||||
// quill.setSelection(finalLength);
|
||||
|
||||
// imageList.value = [];
|
||||
// imageListDb.value = [];
|
||||
// }
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("图片上传失败:", error);
|
||||
// imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// }
|
||||
// };
|
||||
|
||||
// // // 图片上传(修改插入位置逻辑)
|
||||
// const handleHttpUpload = async options => {
|
||||
// let formData = new FormData();
|
||||
// formData.append("image", options.file);
|
||||
// // imageList.value.push(options.file);
|
||||
|
||||
// try {
|
||||
// const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
// if (result?.data?.code === 0) {
|
||||
// const { data } = result.data;
|
||||
// const { imgId } = result;
|
||||
// // imageListDb.value.forEach(item => {
|
||||
// // if (item.customUid === imgId) {
|
||||
// // item.serverImgId = imgId;
|
||||
// // item.path = data.path;
|
||||
// // console.log(item.path, "================>");
|
||||
// // }
|
||||
// // });
|
||||
// const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
// console.log(fileItem, "=fileItem=");
|
||||
// if (fileItem) {
|
||||
// fileItem.serverImgId = imgId;
|
||||
// fileItem.path = data.path;
|
||||
// }
|
||||
// const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
// console.log(allFilesUploaded, "=allFilesUploaded=");
|
||||
// if (allFilesUploaded) {
|
||||
// let rawQuillEditor = "";
|
||||
// let quill = "";
|
||||
// if (activeEditor.value === "main") {
|
||||
// rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// } else {
|
||||
// const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
// rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// }
|
||||
|
||||
// // 关键修改:获取当前光标位置(选区起始索引)
|
||||
// const selection = quill.getSelection();
|
||||
// // 如果没有选区(光标未激活),默认插入到末尾
|
||||
// const insertPosition = selection ? selection.index : quill.getLength();
|
||||
// console.log(imageListDb, "=imageListDb=");
|
||||
// imageListDb?.value?.forEach(item => {
|
||||
// // 使用光标位置插入图片
|
||||
// setTimeout(() => {
|
||||
// quill.insertEmbed(insertPosition, "customImage", {
|
||||
// url: "https://dev.ow.f2b211.com" + item.path,
|
||||
// id: item.serverImgId || generateUUID()
|
||||
// });
|
||||
// }, 100);
|
||||
|
||||
// // 插入后光标后移一位(避免多张图片重叠插入)
|
||||
// quill.setSelection(insertPosition + 1);
|
||||
// });
|
||||
|
||||
// // 最终光标定位到最后一张图片后面
|
||||
// const finalPosition = insertPosition + imageListDb.value.length;
|
||||
// quill.setSelection(finalPosition);
|
||||
|
||||
// imageList.value = [];
|
||||
// imageListDb.value = [];
|
||||
// }
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("图片上传失败:", error);
|
||||
// imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 视频上传(保持不变)
|
||||
// const handleVideoUpload = async evt => {
|
||||
// if (evt.target.files.length === 0) return;
|
||||
// const formData = new FormData();
|
||||
// formData.append("video", evt.target.files[0]);
|
||||
// try {
|
||||
// let rawQuillEditor = "";
|
||||
// let quill = "";
|
||||
// if (activeEditor.value === "main") {
|
||||
// rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// } else {
|
||||
// const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
// rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
// quill = rawQuillEditor.getQuill();
|
||||
// }
|
||||
// let length = quill.selection.savedRange.index;
|
||||
// const { data } = await uploadVideo(formData);
|
||||
// quill.insertEmbed(length, "customVideo", {
|
||||
// url: data.path,
|
||||
// id: generateUUID()
|
||||
// });
|
||||
// uploadFileVideo.value.value = "";
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
// };
|
||||
// 在<script setup>中替换handleVideoUpload方法
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) return;
|
||||
const file = evt.target.files[0];
|
||||
|
||||
// 1. 校验视频文件
|
||||
const maxSize = 150 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
ElNotification({
|
||||
title: "文件过大",
|
||||
message: `视频大小不能超过 ${150}MB`,
|
||||
type: "warning"
|
||||
});
|
||||
evt.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 生成视频本地URL(用于生成封面,不上传)
|
||||
const localVideoUrl = URL.createObjectURL(file);
|
||||
|
||||
try {
|
||||
// 4. 并行处理:上传视频 + 生成并上传封面
|
||||
// 4.1 上传视频到视频服务器
|
||||
const videoFormData = new FormData();
|
||||
videoFormData.append("video", file);
|
||||
const videoRes = await uploadVideo(videoFormData); // 视频上传接口
|
||||
|
||||
// 校验视频上传结果(根据你的接口返回格式调整)
|
||||
if (videoRes?.code !== 0) {
|
||||
throw new Error(`视频上传失败: ${videoRes?.message || "未知错误"}`);
|
||||
}
|
||||
const videoUrl = videoRes.data.path; // 服务器返回的视频URL
|
||||
console.log(localVideoUrl, "=localVideoUrl=");
|
||||
// 4.2 生成封面图并上传到图片服务器
|
||||
const frameBlob = await Video.captureVideoFrame(localVideoUrl);
|
||||
console.log(frameBlob, "============frameBlob===========");
|
||||
let coverUrl = "";
|
||||
if (!frameBlob) return;
|
||||
|
||||
// 复用图片上传接口(与图片上传逻辑一致)
|
||||
const coverFormData = new FormData();
|
||||
const coverUid = generateUUID(); // 生成唯一ID
|
||||
// formData.append("image", options.file);
|
||||
coverFormData.append("image", frameBlob, `cover-${coverUid}.jpg`);
|
||||
console.log(coverFormData, "=coverFormData=");
|
||||
// 调用图片上传接口(和普通图片上传用同一个接口)
|
||||
const coverRes = await uploadImg(coverFormData, routerName.value, coverUid);
|
||||
|
||||
// 校验封面上传结果
|
||||
if (coverRes?.data?.code === 0) {
|
||||
coverUrl = coverRes.data.data.path; // 服务器返回的封面URL
|
||||
} else {
|
||||
console.warn("封面上传失败,使用默认封面");
|
||||
}
|
||||
|
||||
// 5. 将带封面的视频插入编辑器
|
||||
insertVideoToEditor(videoUrl, coverUrl);
|
||||
|
||||
// 6. 上传成功提示
|
||||
// loading.close();
|
||||
// ElNotification({
|
||||
// title: "上传成功",
|
||||
// message: "视频已添加到编辑器",
|
||||
// type: "success"
|
||||
// });
|
||||
} catch (error) {
|
||||
console.log(error, "==============");
|
||||
} finally {
|
||||
console.log("======12323232========");
|
||||
// 清理资源
|
||||
URL.revokeObjectURL(localVideoUrl); // 释放本地视频URL
|
||||
evt.target.value = ""; // 重置文件输入框
|
||||
}
|
||||
};
|
||||
|
||||
// 辅助方法:插入视频到编辑器
|
||||
const insertVideoToEditor = (videoUrl, coverUrl) => {
|
||||
// 获取当前活跃的编辑器(主编辑器或标签页编辑器)
|
||||
let quill;
|
||||
if (activeEditor.value === "main") {
|
||||
quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
quill = toRaw(tabEditors.value[tabIndex])?.getQuill();
|
||||
}
|
||||
|
||||
if (quill) {
|
||||
const range = quill.getSelection() || { index: 0 };
|
||||
// 插入自定义视频组件,携带服务器返回的视频URL和封面URL
|
||||
quill.insertEmbed(range.index, "customVideo", {
|
||||
url: videoUrl,
|
||||
poster: coverUrl // 这里使用图片服务器返回的封面URL
|
||||
});
|
||||
quill.setSelection(range.index + 1); // 移动光标到视频后
|
||||
}
|
||||
};
|
||||
// 标签页切换事件(基于key切换)
|
||||
const handleTabChange = key => {
|
||||
const tabIndex = tabsData.value.findIndex(item => item.key === key);
|
||||
activeName.value = key;
|
||||
activeEditor.value = `tab-${tabIndex}`;
|
||||
};
|
||||
|
||||
// 标签页增删事件
|
||||
const handleTabsEdit = (targetKey, action) => {
|
||||
if (action === "add") {
|
||||
if (tabsData.value.length > 5) {
|
||||
return useMsg("error", "标签页已达上限 !");
|
||||
}
|
||||
// 新增标签页:生成唯一key,默认标题,初始不处于编辑状态
|
||||
const newKey = `tab_${generateUUID()}`;
|
||||
const newIndex = tabsData.value.length;
|
||||
tabsData.value.push({
|
||||
key: newKey,
|
||||
title: `标签${newIndex + 1}`,
|
||||
content: "",
|
||||
isEditing: false // 新增时默认不编辑
|
||||
});
|
||||
nextTick(() => {
|
||||
activeName.value = newKey;
|
||||
activeEditor.value = `tab-${newIndex}`;
|
||||
// 新增后自动进入编辑状态
|
||||
setTimeout(() => {
|
||||
startEditTitle(newIndex);
|
||||
}, 100);
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
// 删除标签页
|
||||
const index = tabsData.value.findIndex(item => item.key === targetKey);
|
||||
tabsData.value.splice(index, 1);
|
||||
tabEditors.value.splice(index, 1);
|
||||
editInputRefs.value.splice(index, 1);
|
||||
|
||||
// 调整活跃编辑器索引
|
||||
if (activeEditor.value.startsWith("tab-")) {
|
||||
const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
if (currentTabIndex > index) {
|
||||
activeEditor.value = `tab-${currentTabIndex - 1}`;
|
||||
} else if (currentTabIndex === index) {
|
||||
// 若删除当前活跃标签,切换到第一个或主编辑器
|
||||
activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
|
||||
activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 开始编辑标签页标题
|
||||
const startEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 记录原始标题(用于取消编辑时恢复)
|
||||
tab.originalTitle = tab.title;
|
||||
tab.isEditing = true;
|
||||
// 延迟获取焦点,确保输入框已渲染
|
||||
nextTick(() => {
|
||||
editInputRefs.value[index]?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 完成编辑(失去焦点或回车)
|
||||
const finishEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 校验标题(不能为空)
|
||||
if (!tab.title.trim()) {
|
||||
tab.title = tab.originalTitle || `标签${index + 1}`;
|
||||
ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
|
||||
}
|
||||
tab.isEditing = false;
|
||||
// 更新activeName(如果当前编辑的是活跃标签)
|
||||
if (tab.key === activeName.value) {
|
||||
activeName.value = tab.key; // 触发重绘
|
||||
}
|
||||
};
|
||||
|
||||
// 其他方法(保持不变)
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
};
|
||||
const setTabsInfo = () => {
|
||||
outerVisible.value = false;
|
||||
//清空
|
||||
tabsData.value = [];
|
||||
activeName.value = null;
|
||||
activeEditor.value = "main";
|
||||
};
|
||||
//弹窗关闭前的钩子
|
||||
const handleBeforeClose = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
// 确认按钮点击事件(修改后)
|
||||
const handleQR = () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (!quill) return;
|
||||
if (!tabsData.value.length) {
|
||||
return useMsg("error", "标签页内容为空 !");
|
||||
}
|
||||
const range = quill.getSelection(true);
|
||||
|
||||
// 判断是否是编辑已有标签页(通过 currentEditingTabsRef 是否有值)
|
||||
if (currentEditingTabsRef.value) {
|
||||
// 1. 编辑模式:更新原有标签页组件
|
||||
const blot = currentEditingTabsRef.value;
|
||||
// 更新 blot 的数据(触发 DOM 更新)
|
||||
blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
|
||||
// 清除编辑状态标记
|
||||
currentEditingTabsRef.value = null;
|
||||
} else {
|
||||
// 2. 新增模式:插入新的标签页组件
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
// 关键:在标签页前方插入一个空段落(确保顶部有空间)
|
||||
// quill.insertText(range.index, "\n"); // 插入换行
|
||||
quill.setSelection(range.index + 1);
|
||||
quill.insertText(range.index, "\n"); // 插入换行
|
||||
}
|
||||
// 关闭弹窗并清空临时数据
|
||||
setTabsInfo();
|
||||
};
|
||||
//取消
|
||||
const handleQX = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
const initTitle = () => {
|
||||
const editor = document.querySelector(".ql-editor");
|
||||
if (editor) editor.dataset.placeholder = "";
|
||||
titleConfig.value.forEach(item => {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
});
|
||||
};
|
||||
// 定义 loadTabsDataToEditor 函数
|
||||
const loadTabsDataToEditor = tabs => {
|
||||
// 清空现有数据
|
||||
tabsData.value = [];
|
||||
// 转换原始标签数据为编辑所需格式(添加key和编辑状态)
|
||||
tabs.forEach((tab, index) => {
|
||||
tabsData.value.push({
|
||||
key: `tab_${generateUUID()}`, // 生成唯一key
|
||||
title: tab.title || `标签${index + 1}`, // 避免空标题
|
||||
content: tab.content || "", // 标签页内容
|
||||
isEditing: false // 编辑状态标记
|
||||
});
|
||||
});
|
||||
// 激活第一个标签页(如果有数据)
|
||||
nextTick(() => {
|
||||
if (tabsData.value.length > 0) {
|
||||
activeName.value = tabsData.value[0].key;
|
||||
activeEditor.value = "tab-0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// const cleanEmptyTags = container => {
|
||||
// if (!container) return;
|
||||
|
||||
// // 获取所有 <p> 标签
|
||||
// const pTags = container.querySelectorAll("p");
|
||||
|
||||
// // 只清理真正的空标签(不含任何内容,包括<br>)
|
||||
// Array.from(pTags).forEach(pTag => {
|
||||
// // 判断标准:
|
||||
// // 1. 完全没有子节点
|
||||
// // 2. 或innerHTML为空字符串
|
||||
// const isCompletelyEmpty = pTag.childNodes.length === 0 || pTag.innerHTML.trim() === "";
|
||||
|
||||
// if (isCompletelyEmpty) {
|
||||
// // 特殊处理:保留首尾空标签,避免编辑器异常
|
||||
// const isFirstOrLast = pTag === container.firstElementChild || pTag === container.lastElementChild;
|
||||
|
||||
// if (isFirstOrLast) {
|
||||
// pTag.innerHTML = ""; // 清空内容
|
||||
// } else {
|
||||
// pTag.remove(); // 移除中间的纯空标签
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // 触发清理的函数(针对所有编辑器)
|
||||
// const handleCleanEmptyTags = () => {
|
||||
// // 处理主编辑器
|
||||
// const mainEditor = document.querySelector("#mainEditor .ql-editor");
|
||||
// console.log(mainEditor, "=mainEditor=");
|
||||
// if (mainEditor) cleanEmptyTags(mainEditor);
|
||||
// };
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
// 监听编辑按钮点击事件
|
||||
const editorEl = document.querySelector(".ql-editor");
|
||||
if (editorEl) {
|
||||
editorEl.addEventListener("edit-tabs", e => {
|
||||
const tabsData = TabsBlot.value(e.detail.blot.domNode);
|
||||
if (tabsData.length > 0) {
|
||||
// 保存当前编辑的标签页引用
|
||||
currentEditingTabsRef.value = e.detail.blot;
|
||||
// 加载数据到弹窗
|
||||
loadTabsDataToEditor(tabsData);
|
||||
// 显示弹窗
|
||||
outerVisible.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 等待编辑器首次渲染完成
|
||||
// setTimeout(handleCleanEmptyTags, 300);
|
||||
});
|
||||
// 监听内容变化,重新清理空标签
|
||||
// watch(editorContent, () => {
|
||||
// nextTick(() => {
|
||||
// setTimeout(handleCleanEmptyTags, 100); // 延迟确保 Quill 已重新渲染
|
||||
// });
|
||||
// });
|
||||
defineExpose({
|
||||
clearEditor: () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
// /* 标签页样式 */
|
||||
.quill-tabs {
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// /* 用伪元素添加图标(可替换为自己的图标) */
|
||||
.ql-tabs::before {
|
||||
font-size: 16px;
|
||||
content: "T"; /* 用 emoji 或字体图标 */
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
|
||||
/* 详情样式 */
|
||||
.o_detail_all {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.o_detail_title {
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 1.25vw;
|
||||
overflow: hidden;
|
||||
font-size: 2.25em;
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
color: #101010;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.o_detail_small {
|
||||
margin-bottom: 0.7vw;
|
||||
font-size: 1.5em;
|
||||
color: #333333;
|
||||
}
|
||||
.o_detail_text {
|
||||
width: 80%;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0.7vw;
|
||||
margin-left: auto;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #737373;
|
||||
}
|
||||
.products_des {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.products_des img {
|
||||
width: 100%;
|
||||
}
|
||||
.de_t_n {
|
||||
font-size: 1.5em;
|
||||
color: #333333;
|
||||
}
|
||||
.detail_title {
|
||||
padding: 2% 0;
|
||||
text-align: center;
|
||||
}
|
||||
.detail_title p {
|
||||
line-height: 2em;
|
||||
}
|
||||
.detail_con_a {
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj_detail_text,
|
||||
.lj_detail_texts {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.lj_detail_text p {
|
||||
padding: 0.5% 0;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* seo-pro */
|
||||
.seo-pro h3 {
|
||||
margin: 2% 0 1%;
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
.seo-pro p {
|
||||
margin: 0 0 11px;
|
||||
text-align: center;
|
||||
}
|
||||
.seo-pro a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sa_blue,
|
||||
.sa_blue a,
|
||||
.seo-pro a:hover {
|
||||
color: #009fdf;
|
||||
}
|
||||
</style>
|
||||
49
src/components/Editor/quill-detail-div.js
Normal file
49
src/components/Editor/quill-detail-div.js
Normal file
@@ -0,0 +1,49 @@
|
||||
// quill-dynamic-div.js
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
const Block = Quill.import("blots/block");
|
||||
|
||||
class DynamicDivBlot extends Block {
|
||||
// 从 DOM 节点创建 Blot 时,保留所有属性和类名
|
||||
static create(value) {
|
||||
const node = super.create();
|
||||
// 如果是从数据恢复(value 存在),还原类名
|
||||
if (value?.className) {
|
||||
node.className = value.className; // 直接设置完整类名字符串(支持多类名)
|
||||
}
|
||||
// 保留其他属性(如 id、data-* 等,按需添加)
|
||||
if (value?.attrs) {
|
||||
Object.keys(value.attrs).forEach(key => {
|
||||
node.setAttribute(key, value.attrs[key]);
|
||||
});
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
// 从 Blot 提取值(序列化时用),保留所有类名和属性
|
||||
static value(node) {
|
||||
return {
|
||||
className: node.className, // 保留完整类名(如 "o_detail_all big")
|
||||
attrs: Array.from(node.attributes).reduce((attrs, attr) => {
|
||||
attrs[attr.name] = attr.value;
|
||||
return attrs;
|
||||
}, {}) // 保留所有属性
|
||||
};
|
||||
}
|
||||
|
||||
// 格式化时识别所有 div 标签
|
||||
static formats(domNode) {
|
||||
// 只要是 div 标签,就返回其类名和属性(确保 Quill 不清理)
|
||||
return {
|
||||
className: domNode.className,
|
||||
attrs: Array.from(domNode.attributes).reduce((attrs, attr) => {
|
||||
attrs[attr.name] = attr.value;
|
||||
return attrs;
|
||||
}, {})
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
DynamicDivBlot.blotName = "dynamicDiv"; // 唯一标识
|
||||
DynamicDivBlot.tagName = "div"; // 处理所有 div 标签
|
||||
|
||||
export default DynamicDivBlot;
|
||||
25
src/components/Editor/quill-image.js
Normal file
25
src/components/Editor/quill-image.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
let BlockEmbed = Quill.import("blots/block/embed");
|
||||
class ImageBlot extends BlockEmbed {
|
||||
static create(value) {
|
||||
let node = super.create();
|
||||
node.setAttribute("src", value.url);
|
||||
node.setAttribute("id", value.id);
|
||||
|
||||
console.log("图片信息", node);
|
||||
return node;
|
||||
}
|
||||
// 允许通过键盘删除
|
||||
deleteAt(index, length) {
|
||||
super.deleteAt(index, length);
|
||||
}
|
||||
static value(node) {
|
||||
return {
|
||||
url: node.getAttribute("src"),
|
||||
id: node.getAttribute("id")
|
||||
};
|
||||
}
|
||||
}
|
||||
ImageBlot.blotName = "customImage";
|
||||
ImageBlot.tagName = "img";
|
||||
export default ImageBlot;
|
||||
25
src/components/Editor/quill-image1111.js
Normal file
25
src/components/Editor/quill-image1111.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
let BlockEmbed = Quill.import("blots/block/embed");
|
||||
class ImageBlot extends BlockEmbed {
|
||||
static create(value) {
|
||||
let node = super.create();
|
||||
node.setAttribute("src", value.url);
|
||||
node.setAttribute("id", value.id);
|
||||
|
||||
console.log("图片信息", node);
|
||||
return node;
|
||||
}
|
||||
// 允许通过键盘删除
|
||||
deleteAt(index, length) {
|
||||
super.deleteAt(index, length);
|
||||
}
|
||||
static value(node) {
|
||||
return {
|
||||
url: node.getAttribute("src"),
|
||||
id: node.getAttribute("id")
|
||||
};
|
||||
}
|
||||
}
|
||||
ImageBlot.blotName = "customImage";
|
||||
ImageBlot.tagName = "img";
|
||||
export default ImageBlot;
|
||||
407
src/components/Editor/quill-tabs.js
Normal file
407
src/components/Editor/quill-tabs.js
Normal file
@@ -0,0 +1,407 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "m-quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏滚动容器 - 优化高度计算
|
||||
const tabScrollContainer = document.createElement("div");
|
||||
tabScrollContainer.className = "m-quill-tab-scroll-container";
|
||||
tabScrollContainer.setAttribute(
|
||||
"style",
|
||||
`
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
height: auto;
|
||||
`
|
||||
);
|
||||
|
||||
// height: auto; /* 自动高度 */
|
||||
|
||||
// Chrome, Safari 隐藏滚动条
|
||||
tabScrollContainer.style.overflow = "auto";
|
||||
tabScrollContainer.style.webkitOverflowScrolling = "touch";
|
||||
tabScrollContainer.style.scrollbarWidth = "none";
|
||||
tabScrollContainer.style.msOverflowStyle = "none";
|
||||
|
||||
// 标签栏 - 保持原有样式不变
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "m-quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
border-bottom: 2px solid #dddddd;
|
||||
min-width: max-content; /* 确保内容撑开容器 */
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮 - 优化内边距计算
|
||||
tabs.forEach((tab, index) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `m-quill-tab-button`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-bottom:14px;
|
||||
margin-right:3%; /* 增大间距 */
|
||||
cursor: pointer;
|
||||
white-space:nowrap;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
});
|
||||
|
||||
// 编辑按钮 - 保持原有样式不变
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "m-quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
width:60px;
|
||||
padding-left:20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display:block;
|
||||
`
|
||||
);
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 内容区 - 保持原有样式不变
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "m-quill-tab-content-list";
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成内容面板 - 保持原有样式不变
|
||||
tabs.forEach((tab, index) => {
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `m-quill-tab-content`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 组装结构
|
||||
tabScrollContainer.appendChild(tabList);
|
||||
node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
|
||||
node.appendChild(contentList); // 内容区
|
||||
|
||||
// 标签页切换逻辑 - 保持原有逻辑不变
|
||||
const scriptTag = document.createElement("script");
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const isAdmin = window.location.pathname.includes('/admin');
|
||||
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
|
||||
// 仅在非管理系统(文章网站)隐藏编辑按钮,管理系统保持显示
|
||||
if (!isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
|
||||
} else if (isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
|
||||
editBtn1.style.width='60px';
|
||||
editBtn1.style.minWidth='60px';
|
||||
}
|
||||
|
||||
// 非管理系统才执行标签切换逻辑(管理系统不执行)
|
||||
if (!isAdmin) {
|
||||
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
font-size:16px;
|
||||
white-space:nowrap;
|
||||
padding-bottom:14px;
|
||||
margin-right:3%;
|
||||
color: #8f9099;
|
||||
border: none;
|
||||
\${i === index ?
|
||||
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
// 添加滚动逻辑到自执行函数中
|
||||
const scrollContainer = container.querySelector(".m-quill-tab-scroll-container");
|
||||
const activeBtn = tabButtons[index];
|
||||
if (scrollContainer && activeBtn) {
|
||||
activeBtn.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "center"
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
`;
|
||||
|
||||
node.appendChild(scriptTag);
|
||||
node.setAttribute("contenteditable", "false");
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件 - 保持原有逻辑不变
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
if (editBtn) {
|
||||
editBtn.removeEventListener("click", this.handleEditClick);
|
||||
this.handleEditClick = e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
};
|
||||
editBtn.addEventListener("click", this.handleEditClick);
|
||||
}
|
||||
|
||||
// 标签切换事件 - 保持原有逻辑不变
|
||||
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 增强版删除键处理 - 保持原有逻辑不变
|
||||
bindDeleteKeyEvent() {
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
// 保持原有样式逻辑不变
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size:16px;
|
||||
padding-bottom:14px;
|
||||
margin-right:3%;
|
||||
white-space:nowrap;
|
||||
color: #8f9099;
|
||||
border-bottom: 3px solid transparent;
|
||||
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
|
||||
// 滚动到当前选中的标签
|
||||
const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
|
||||
const activeBtn = buttons[index];
|
||||
if (scrollContainer && activeBtn) {
|
||||
activeBtn.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "center"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent();
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return TabsBlot.value(this.domNode);
|
||||
}
|
||||
|
||||
// 更新标签页数据 - 保持原有逻辑不变
|
||||
updateContents(tabs) {
|
||||
const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
|
||||
Array.from(tabList.children).forEach(child => {
|
||||
if (!child.classList.contains("m-quill-tab-edit-btn")) {
|
||||
child.remove();
|
||||
}
|
||||
});
|
||||
contentList.innerHTML = "";
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "m-quill-tab-button";
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-bottom:14px;
|
||||
margin-right:3%;
|
||||
white-space:nowrap;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.insertBefore(btn, editBtn);
|
||||
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "m-quill-tab-content";
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
398
src/components/Editor/quill-tabs1.js
Normal file
398
src/components/Editor/quill-tabs1.js
Normal file
@@ -0,0 +1,398 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "m-quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏滚动容器 - 添加隐藏滚动条样式
|
||||
const tabScrollContainer = document.createElement("div");
|
||||
tabScrollContainer.className = "m-quill-tab-scroll-container";
|
||||
tabScrollContainer.setAttribute(
|
||||
"style",
|
||||
`
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
-webkit-overflow-scrolling: touch; /* 增强移动端滚动体验 */
|
||||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||||
-ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
|
||||
`
|
||||
);
|
||||
|
||||
// Chrome, Safari 隐藏滚动条
|
||||
tabScrollContainer.style.overflow = "auto";
|
||||
tabScrollContainer.style.webkitOverflowScrolling = "touch";
|
||||
tabScrollContainer.style.scrollbarWidth = "none";
|
||||
tabScrollContainer.style.msOverflowStyle = "none";
|
||||
|
||||
// 关键:隐藏滚动条但保留功能
|
||||
tabScrollContainer.innerHTML = `
|
||||
<style>
|
||||
.m-quill-tab-scroll-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari 隐藏滚动条 */
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
// 标签栏 - 保持原有样式不变
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "m-quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
min-width: max-content; /* 确保内容撑开容器 */
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮 - 保持原有样式不变
|
||||
tabs.forEach((tab, index) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `m-quill-tab-button`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 1%;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 1%;
|
||||
cursor: pointer;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
});
|
||||
|
||||
// 编辑按钮 - 保持原有样式不变
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "m-quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
width:50px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display:block;
|
||||
`
|
||||
);
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 内容区 - 保持原有样式不变
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "m-quill-tab-content-list";
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成内容面板 - 保持原有样式不变
|
||||
tabs.forEach((tab, index) => {
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `m-quill-tab-content`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 组装结构
|
||||
tabScrollContainer.appendChild(tabList);
|
||||
node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
|
||||
node.appendChild(contentList); // 内容区
|
||||
|
||||
// 标签页切换逻辑 - 保持原有逻辑不变
|
||||
const scriptTag = document.createElement("script");
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const isAdmin = window.location.pathname.includes('/admin');
|
||||
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
|
||||
|
||||
// 仅在非管理系统(文章网站)隐藏编辑按钮,管理系统保持显示
|
||||
if (!isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
|
||||
} else if (isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
|
||||
}
|
||||
|
||||
// 非管理系统才执行标签切换逻辑(管理系统不执行)
|
||||
if (!isAdmin) {
|
||||
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
padding: 1%;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
font-size:16px;
|
||||
margin-right: 1%;
|
||||
color: #8f9099;
|
||||
border: none;
|
||||
\${i === index ?
|
||||
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
`;
|
||||
|
||||
node.appendChild(scriptTag);
|
||||
node.setAttribute("contenteditable", "false");
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件 - 保持原有逻辑不变
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
if (editBtn) {
|
||||
editBtn.removeEventListener("click", this.handleEditClick);
|
||||
this.handleEditClick = e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
};
|
||||
editBtn.addEventListener("click", this.handleEditClick);
|
||||
}
|
||||
|
||||
// 标签切换事件 - 保持原有逻辑不变
|
||||
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 增强版删除键处理 - 保持原有逻辑不变
|
||||
bindDeleteKeyEvent() {
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
// 保持原有样式逻辑不变
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 1%;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size:16px;
|
||||
margin-right: 1%;
|
||||
color: #8f9099;
|
||||
border-bottom: 3px solid transparent;
|
||||
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
|
||||
// 滚动到当前选中的标签
|
||||
const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
|
||||
const activeBtn = buttons[index];
|
||||
if (scrollContainer && activeBtn) {
|
||||
activeBtn.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "center"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent();
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return TabsBlot.value(this.domNode);
|
||||
}
|
||||
|
||||
// 更新标签页数据 - 保持原有逻辑不变
|
||||
updateContents(tabs) {
|
||||
const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
|
||||
Array.from(tabList.children).forEach(child => {
|
||||
if (!child.classList.contains("m-quill-tab-edit-btn")) {
|
||||
child.remove();
|
||||
}
|
||||
});
|
||||
contentList.innerHTML = "";
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "m-quill-tab-button";
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 1%;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 1%;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.insertBefore(btn, editBtn);
|
||||
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "m-quill-tab-content";
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
139
src/components/Editor/quill-video.js
Normal file
139
src/components/Editor/quill-video.js
Normal file
@@ -0,0 +1,139 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
const Link = Quill.import("formats/link");
|
||||
|
||||
const ATTRIBUTES = ["height", "width", "poster"];
|
||||
|
||||
class Video extends BlockEmbed {
|
||||
static create(value) {
|
||||
let node = super.create();
|
||||
|
||||
// 基础视频属性
|
||||
node.setAttribute("controls", "controls");
|
||||
node.setAttribute("playsinline", "true");
|
||||
node.setAttribute("webkit-playsinline", "true");
|
||||
node.setAttribute("type", "video/mp4");
|
||||
|
||||
// 处理视频URL,添加时间片段定位到0.001秒(避开黑屏)
|
||||
const baseUrl = this.sanitize(value.url);
|
||||
const videoUrl = baseUrl.includes("#") ? `${baseUrl}&t=0.001` : `${baseUrl}#t=0.001`;
|
||||
node.setAttribute("src", videoUrl);
|
||||
|
||||
// 临时封面(加载中显示)
|
||||
node.setAttribute(
|
||||
"poster",
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ccircle cx='300' cy='150' r='40' fill='%23ccc'/%3E%3Cpolygon points='300,130 330,160 270,160' fill='white'/%3E%3C/svg%3E"
|
||||
);
|
||||
|
||||
// 自动截取封面(未提供poster时)
|
||||
if (!value.poster) {
|
||||
this.captureFrameAsBlob(videoUrl, node);
|
||||
} else {
|
||||
node.setAttribute("poster", this.sanitize(value.poster));
|
||||
}
|
||||
// width: 600px;
|
||||
// height: 300px;
|
||||
// object-fit: contain;
|
||||
// 视频样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
`
|
||||
);
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成视频帧Blob(核心方法,返回Promise)
|
||||
* @param {string} videoUrl - 视频的本地Blob URL
|
||||
* @returns {Promise<Blob|null>} - 视频帧Blob或null
|
||||
*/
|
||||
/**
|
||||
* 将视频Blob URL转换为JPG图片Blob
|
||||
* @param {string} videoBlobUrl - 本地视频Blob URL(blob:xxx)
|
||||
* @returns {Promise<Blob|null>} - JPG格式图片Blob,失败返回null
|
||||
*/
|
||||
static async captureVideoFrame(videoBlobUrl) {
|
||||
return new Promise(resolve => {
|
||||
// 1. 创建视频元素加载Blob
|
||||
const video = document.createElement("video");
|
||||
video.src = videoBlobUrl;
|
||||
video.muted = true;
|
||||
video.playsInline = true;
|
||||
video.preload = "auto";
|
||||
|
||||
// 2. 视频可播放时开始转换
|
||||
video.oncanplay = () => {
|
||||
// 3. 创建Canvas绘制视频帧
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = video.videoWidth || 640; // 使用视频实际宽度
|
||||
canvas.height = video.videoHeight || 360; // 使用视频实际高度
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// 绘制视频当前帧到Canvas
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 4. 将Canvas转换为JPG Blob
|
||||
canvas.toBlob(
|
||||
blob => {
|
||||
console.log(blob, "================>");
|
||||
video.remove(); // 清理视频元素
|
||||
resolve(blob || null); // 返回JPG Blob
|
||||
},
|
||||
"image/jpeg", // 强制JPG格式
|
||||
0.8 // 图片质量(0-1)
|
||||
);
|
||||
};
|
||||
|
||||
// 错误处理
|
||||
video.onerror = () => {
|
||||
video.remove();
|
||||
resolve(null);
|
||||
};
|
||||
});
|
||||
}
|
||||
// 以下方法保持不变
|
||||
static formats(domNode) {
|
||||
return ATTRIBUTES.reduce((formats, attribute) => {
|
||||
if (domNode.hasAttribute(attribute)) {
|
||||
formats[attribute] = domNode.getAttribute(attribute);
|
||||
}
|
||||
return formats;
|
||||
}, {});
|
||||
}
|
||||
|
||||
static sanitize(url) {
|
||||
return Link.sanitize(url);
|
||||
}
|
||||
|
||||
static value(domNode) {
|
||||
return {
|
||||
url: domNode.getAttribute("src").split("#")[0],
|
||||
poster: domNode.getAttribute("poster") || ""
|
||||
};
|
||||
}
|
||||
|
||||
format(name, value) {
|
||||
if (ATTRIBUTES.includes(name)) {
|
||||
if (value) {
|
||||
this.domNode.setAttribute(name, value);
|
||||
} else {
|
||||
this.domNode.removeAttribute(name);
|
||||
}
|
||||
} else {
|
||||
super.format(name, value);
|
||||
}
|
||||
}
|
||||
|
||||
html() {
|
||||
const { url, poster } = this.value();
|
||||
return `<video src="${url}" ${poster ? `poster="${poster}"` : ""} controls playsinline webkit-playsinline ></video>`;
|
||||
}
|
||||
}
|
||||
//style="width:600px;height:300px;"
|
||||
Video.blotName = "customVideo";
|
||||
// Video.className = "ql-video";
|
||||
Video.tagName = "video";
|
||||
|
||||
export default Video;
|
||||
72
src/components/Editor/quill-video11.js
Normal file
72
src/components/Editor/quill-video11.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
// 源码中是import直接倒入,这里要用Quill.import引入
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
const Link = Quill.import("formats/link");
|
||||
|
||||
const ATTRIBUTES = ["height", "width"];
|
||||
|
||||
class Video extends BlockEmbed {
|
||||
static create(value) {
|
||||
let node = super.create();
|
||||
// 添加video标签所需的属性
|
||||
node.setAttribute("controls", "controls");
|
||||
node.setAttribute("playsinline", "true");
|
||||
node.setAttribute("webkit-playsinline", "true");
|
||||
node.setAttribute("type", "video/mp4");
|
||||
// poster 属性指定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
|
||||
// console.log(value.url, "= value.poster=");
|
||||
// node.setAttribute("poster", this.sanitize(value.url));
|
||||
node.setAttribute("src", this.sanitize(value.url));
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
`
|
||||
);
|
||||
return node;
|
||||
}
|
||||
|
||||
static formats(domNode) {
|
||||
return ATTRIBUTES.reduce((formats, attribute) => {
|
||||
if (domNode.hasAttribute(attribute)) {
|
||||
formats[attribute] = domNode.getAttribute(attribute);
|
||||
}
|
||||
return formats;
|
||||
}, {});
|
||||
}
|
||||
|
||||
static sanitize(url) {
|
||||
return Link.sanitize(url);
|
||||
}
|
||||
|
||||
static value(domNode) {
|
||||
// 设置自定义的属性值
|
||||
return {
|
||||
url: domNode.getAttribute("src")
|
||||
// poster: domNode.getAttribute("src")
|
||||
};
|
||||
}
|
||||
|
||||
format(name, value) {
|
||||
if (ATTRIBUTES.indexOf(name) > -1) {
|
||||
if (value) {
|
||||
this.domNode.setAttribute(name, value);
|
||||
} else {
|
||||
this.domNode.removeAttribute(name);
|
||||
}
|
||||
} else {
|
||||
super.format(name, value);
|
||||
}
|
||||
}
|
||||
|
||||
html() {
|
||||
const { video } = this.value();
|
||||
return `<a href="${video}">${video}</a>`;
|
||||
}
|
||||
}
|
||||
Video.blotName = "customVideo"; // 这里不用改,不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
|
||||
Video.className = "ql-video"; // 可添加样式,看实际使用需要
|
||||
Video.tagName = "video"; // 用video标签替换iframe
|
||||
|
||||
export default Video;
|
||||
47
src/components/Editor/titleConfig.js
Normal file
47
src/components/Editor/titleConfig.js
Normal file
@@ -0,0 +1,47 @@
|
||||
// toolbar标题(此项是用来增加hover标题)
|
||||
export const titleConfig = ref([
|
||||
{ Choice: ".ql-insertMetric", title: "跳转配置" },
|
||||
{ Choice: ".ql-bold", title: "加粗" },
|
||||
{ Choice: ".ql-italic", title: "斜体" },
|
||||
{ Choice: ".ql-underline", title: "下划线" },
|
||||
{ Choice: ".ql-header", title: "段落格式" },
|
||||
{ Choice: ".ql-strike", title: "删除线" },
|
||||
{ Choice: ".ql-blockquote", title: "块引用" },
|
||||
{ Choice: ".ql-code", title: "插入代码" },
|
||||
{ Choice: ".ql-code-block", title: "插入代码段" },
|
||||
{ Choice: ".ql-font", title: "字体" },
|
||||
{ Choice: ".ql-size", title: "字体大小" },
|
||||
{ Choice: '.ql-list[value="ordered"]', title: "编号列表" },
|
||||
{ Choice: '.ql-list[value="bullet"]', title: "项目列表" },
|
||||
{ Choice: ".ql-direction", title: "文本方向" },
|
||||
{ Choice: '.ql-header[value="1"]', title: "h1" },
|
||||
{ Choice: '.ql-header[value="2"]', title: "h2" },
|
||||
{ Choice: ".ql-align", title: "对齐方式" },
|
||||
{ Choice: ".ql-color", title: "字体颜色" },
|
||||
{ Choice: ".ql-background", title: "背景颜色" },
|
||||
{ Choice: ".ql-image", title: "图像" },
|
||||
{ Choice: ".ql-video", title: "视频" },
|
||||
{ Choice: ".ql-link", title: "添加链接" },
|
||||
{ Choice: ".ql-formula", title: "插入公式" },
|
||||
{ Choice: ".ql-clean", title: "清除字体格式" },
|
||||
{ Choice: '.ql-script[value="sub"]', title: "下标" },
|
||||
{ Choice: '.ql-script[value="super"]', title: "上标" },
|
||||
{ Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
|
||||
{ Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
|
||||
{ Choice: ".ql-header .ql-picker-label", title: "标题大小" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
|
||||
{ Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
|
||||
{ Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
|
||||
{ Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: "居中对齐" },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: "居右对齐" },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: "两端对齐" }
|
||||
]);
|
||||
8
src/components/Editor/utils.js
Normal file
8
src/components/Editor/utils.js
Normal file
@@ -0,0 +1,8 @@
|
||||
export const routerObj = {
|
||||
articleEditIndex: "article",
|
||||
productEditIndex: "product",
|
||||
bannerListIndex: "banner",
|
||||
downloadListIndex: "download",
|
||||
videoListIndex: "video",
|
||||
QAListIndex: "QA"
|
||||
};
|
||||
@@ -28,11 +28,11 @@
|
||||
</template>
|
||||
<template #default="scope" v-if="item.formType === 'inputNumber'">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:controls="true"
|
||||
style="width: 125px"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
v-model="scope.row[item.prop]"
|
||||
:disabled="tableData[scope.$index].disabled"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxLength"
|
||||
@@ -46,7 +46,7 @@
|
||||
<template #default="scope" v-if="item.formType === 'input'">
|
||||
<el-input
|
||||
:style="item.width ? item.width : 'width:200px'"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
v-model="scope.row[item.prop]"
|
||||
:disabled="tableData[scope.$index].disabled"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxLength"
|
||||
@@ -58,7 +58,7 @@
|
||||
<template #default="scope" v-if="item.formType === 'selectRemote'">
|
||||
<el-select
|
||||
:style="item.width ? item.width : 'width:200px'"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
v-model="scope.row[item.prop]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
remote
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
<script setup lang="ts" name="ProTable">
|
||||
// /watch
|
||||
import { ref, provide, onMounted, watch } from "vue";
|
||||
import { ref, provide, onMounted } from "vue";
|
||||
import { ElTable } from "element-plus";
|
||||
import { useTable } from "@/hooks/useTable";
|
||||
import { useSelection } from "@/hooks/useSelection";
|
||||
@@ -93,6 +93,8 @@ import SearchForm from "@/components/SearchForm/index.vue";
|
||||
import Pagination from "./components/Pagination.vue";
|
||||
import ColSetting from "./components/ColSetting.vue";
|
||||
import TableColumn from "./components/TableColumn.vue";
|
||||
// import { useUserStore } from "@/stores/modules/user";
|
||||
// const userStore = useUserStore();
|
||||
const $router = useRouter();
|
||||
const routeName: any = ref($router.currentRoute.value.name);
|
||||
export interface ProTableProps {
|
||||
@@ -157,7 +159,7 @@ onMounted(() => props.requestAuto && getTableList());
|
||||
// 监听页面 initParam 改化,重新获取表格数据
|
||||
// watch(() => props.initParam, getTableList, { deep: true });
|
||||
// 监听页面 orgCode 改化,重新获取表格数据
|
||||
watch(() => props.orgCode, getTableList, { deep: true });
|
||||
// watch(() => userStore.languageType, getTableList, { deep: true });
|
||||
// 接收 columns 并设置为响应式
|
||||
const tableColumns = ref<ColumnProps[]>(props.columns);
|
||||
|
||||
@@ -195,7 +197,12 @@ const colRef = ref();
|
||||
const colSetting = tableColumns.value!.filter(
|
||||
item => !["selection", "index", "expand"].includes(item.type!) && item.prop !== "operation" && item.isShow
|
||||
);
|
||||
|
||||
// watch(
|
||||
// () => userStore.languageType,
|
||||
// (newVal: any) => {
|
||||
// console.log(newVal, "=newVal=");
|
||||
// }
|
||||
// );
|
||||
// 暴露给父组件的参数和方法(外部需要什么,都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
element: tableRef,
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<el-input
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxlength || 255"
|
||||
v-model.trim="_searchParam[`${item.prop}`]"
|
||||
v-model="_searchParam[`${item.prop}`]"
|
||||
style="width: 224px"
|
||||
@input="handleInput(item)"
|
||||
@keyup.enter="search"
|
||||
@@ -72,16 +72,20 @@
|
||||
v-model="_searchParam[`${item.prop}`]"
|
||||
:data="item.options"
|
||||
:placeholder="item.placeholder"
|
||||
multiple
|
||||
:render-after-expand="false"
|
||||
:check-strictly="false"
|
||||
show-checkbox
|
||||
style="width: 224px"
|
||||
clearable
|
||||
:collapse-tags="true"
|
||||
@change="handleTreeSelectChange(item)"
|
||||
/>
|
||||
</template>
|
||||
<!-- 双 -->
|
||||
<template v-if="item.type === 'inputs'">
|
||||
<el-input
|
||||
v-model.trim="_searchParam[`${item.startProp}`]"
|
||||
v-model="_searchParam[`${item.startProp}`]"
|
||||
:placeholder="item.startPlaceholder"
|
||||
:disabled="item.disabled"
|
||||
maxlength="255"
|
||||
@@ -91,7 +95,7 @@
|
||||
</el-input>
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input
|
||||
v-model.trim="_searchParam[`${item.endProp}`]"
|
||||
v-model="_searchParam[`${item.endProp}`]"
|
||||
:placeholder="item.endPlaceholder"
|
||||
:disabled="item.disabled"
|
||||
maxlength="255"
|
||||
@@ -130,7 +134,7 @@
|
||||
</el-select>
|
||||
|
||||
<el-input
|
||||
v-model.trim="_searchParam[`${item.startProp}`]"
|
||||
v-model="_searchParam[`${item.startProp}`]"
|
||||
:placeholder="item.startPlaceholder"
|
||||
:disabled="item.disabled"
|
||||
maxlength="255"
|
||||
@@ -140,7 +144,7 @@
|
||||
</el-input>
|
||||
<span style="margin: 0 3px">-</span>
|
||||
<el-input
|
||||
v-model.trim="_searchParam[`${item.endProp}`]"
|
||||
v-model="_searchParam[`${item.endProp}`]"
|
||||
:placeholder="item.endPlaceholder"
|
||||
:disabled="item.disabled"
|
||||
maxlength="255"
|
||||
@@ -178,7 +182,7 @@ const options = [
|
||||
label: "数字序列号"
|
||||
}
|
||||
];
|
||||
|
||||
// const treeSelectValue = ref(null);
|
||||
const props = defineProps<SearchFormItem>();
|
||||
const _searchParam = computed(() => props.searchParam);
|
||||
|
||||
@@ -189,7 +193,7 @@ const handlePicker = (item: any) => {
|
||||
if (Array.isArray(_searchParam.value[prop]) && _searchParam.value[prop].length > 0) {
|
||||
let _date: any = cloneDeep(_searchParam.value[prop]);
|
||||
_date[0] = _date[0] + " " + "00:00:00";
|
||||
_date[1] = _date[1] + " " + "00:00:00";
|
||||
_date[1] = _date[1] + " " + "23:59:59";
|
||||
_searchParam.value[item.startDate] = _date.join(",");
|
||||
} else {
|
||||
_searchParam.value[item.startDate] = "";
|
||||
@@ -216,7 +220,14 @@ const remoteMethod = async (query: any, item: any) => {
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const handleTreeSelectChange = (item: any) => {
|
||||
if (_searchParam.value[item.prop].length) {
|
||||
let values = cloneDeep(_searchParam.value[item.prop]);
|
||||
_searchParam.value[item.prop1] = values.join(",");
|
||||
} else {
|
||||
_searchParam.value[item.prop1] = "";
|
||||
}
|
||||
};
|
||||
const handleClear = (item: any) => {
|
||||
item.options = [];
|
||||
};
|
||||
|
||||
@@ -12,19 +12,19 @@ export const verificationInput = (item: any, _searchParam: any, selectInputValue
|
||||
//序列号区间值开始 限制只能输入正整数
|
||||
if (startProp === "startNumber") {
|
||||
_searchParam.value[startProp] = integerNumber(_searchParam.value[startProp]);
|
||||
if (selectInputValue === 1) {
|
||||
if (selectInputValue == 1) {
|
||||
_searchParam.value["serialNumberBegin"] = _searchParam.value[startProp];
|
||||
}
|
||||
if (selectInputValue === 2) {
|
||||
if (selectInputValue == 2) {
|
||||
_searchParam.value["numberCodeBegin"] = _searchParam.value[startProp];
|
||||
}
|
||||
}
|
||||
if (endProp === "endNumber") {
|
||||
_searchParam.value[endProp] = integerNumber(_searchParam.value[endProp]);
|
||||
if (selectInputValue === 1) {
|
||||
if (selectInputValue == 1) {
|
||||
_searchParam.value["serialNumberEnd"] = _searchParam.value[endProp];
|
||||
}
|
||||
if (selectInputValue === 2) {
|
||||
if (selectInputValue == 2) {
|
||||
_searchParam.value["numberCodeEnd"] = _searchParam.value[endProp];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.el-form-item--default {
|
||||
height: auto !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-item {
|
||||
@@ -6,7 +7,7 @@
|
||||
height: 32px;
|
||||
margin-right: 12px !important;
|
||||
.form-item-select {
|
||||
width: 224px !important;
|
||||
width: 254px !important;
|
||||
}
|
||||
}
|
||||
.form-box1 {
|
||||
|
||||
@@ -56,7 +56,7 @@ import { ElNotification, formContextKey, formItemContextKey } from "element-plus
|
||||
import type { UploadProps, UploadRequestOptions } from "element-plus";
|
||||
|
||||
interface UploadFileProps {
|
||||
imageUrl: string; // 图片地址 ==> 必传
|
||||
imageUrl: any; // 图片地址 ==> 必传
|
||||
api?: (params: any) => Promise<any>; // 上传图片的 api 方法,一般项目上传都是同一个 api 方法,在组件里直接引入即可 ==> 非必传
|
||||
drag?: boolean; // 是否支持拖拽上传 ==> 非必传(默认为 true)
|
||||
disabled?: boolean; // 是否禁用上传组件 ==> 非必传(默认为 false)
|
||||
@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
|
||||
drag: true,
|
||||
disabled: false,
|
||||
fileSize: 5,
|
||||
fileType: () => ["image/jpeg", "image/png", "image/gif"],
|
||||
fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
||||
height: "150px",
|
||||
width: "150px",
|
||||
borderRadius: "8px"
|
||||
@@ -102,7 +102,7 @@ const formItemContext = inject(formItemContextKey, void 0);
|
||||
const self_disabled = computed(() => {
|
||||
return props.disabled || formContext?.disabled;
|
||||
});
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
/**
|
||||
* @description 图片上传
|
||||
* @param options upload 所有配置项
|
||||
@@ -119,9 +119,9 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
const api = props.api ?? uploadImg;
|
||||
|
||||
const result = await api(formData, routerName.value);
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
emit("update:imageUrl", data.path);
|
||||
console.log(result, "============>>>");
|
||||
if (result?.data?.code === 0) {
|
||||
emit("update:imageUrl", result?.data?.data.path);
|
||||
}
|
||||
|
||||
// 调用 el-form 内部的校验方法(可自动校验)
|
||||
@@ -151,7 +151,9 @@ const editImg = () => {
|
||||
* @param rawFile 选择的文件
|
||||
* */
|
||||
const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
|
||||
// console.log(rowFile.type, "=============1111111111");
|
||||
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
|
||||
|
||||
const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
|
||||
|
||||
if (!imgType)
|
||||
|
||||
@@ -43,10 +43,9 @@ import { ref, computed, inject, watch } from "vue";
|
||||
import { Plus, Delete } from "@element-plus/icons-vue";
|
||||
import { uploadImg } from "@/api/modules/upload";
|
||||
import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from "element-plus";
|
||||
import { generateUUID } from "@/utils";
|
||||
// import { generateUUID } from "@/utils";
|
||||
import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
|
||||
let uid = generateUUID();
|
||||
console.log("uid:", uid);
|
||||
// let uid = generateUUID();
|
||||
interface UploadFileProps {
|
||||
fileList: UploadUserFile[];
|
||||
api?: (params: any) => Promise<any>; // 上传图片的 api 方法,一般项目上传都是同一个 api 方法,在组件里直接引入即可 ==> 非必传
|
||||
@@ -66,7 +65,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
|
||||
disabled: false,
|
||||
limit: 9,
|
||||
fileSize: 5,
|
||||
fileType: () => ["image/jpeg", "image/png", "image/gif"],
|
||||
fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
||||
height: "150px",
|
||||
width: "150px",
|
||||
borderRadius: "8px"
|
||||
@@ -75,7 +74,11 @@ const $router = useRouter();
|
||||
const routerValueName: string = $router.currentRoute.value.name as string;
|
||||
const routerObj: any = {
|
||||
articleEditIndex: "article",
|
||||
productEditIndex: "product"
|
||||
productEditIndex: "product",
|
||||
bannerListIndex: "banner",
|
||||
downloadListIndex: "download",
|
||||
videoListIndex: "video",
|
||||
QAListIndex: "QA"
|
||||
};
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
// 获取 el-form 组件上下文
|
||||
@@ -88,7 +91,7 @@ const self_disabled = computed(() => {
|
||||
});
|
||||
|
||||
const _fileList = ref<UploadUserFile[]>(props.fileList);
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
// 监听 props.fileList 列表默认值改变
|
||||
watch(
|
||||
() => props.fileList,
|
||||
@@ -130,9 +133,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
formData.append("image", options.file);
|
||||
try {
|
||||
const api = props.api ?? uploadImg;
|
||||
|
||||
const { data } = await api(formData, routerName.value);
|
||||
console.log(data.path, "========data==========");
|
||||
options.onSuccess(data.path);
|
||||
console.log(data.data.path, "========data==========");
|
||||
options.onSuccess(data.data.path);
|
||||
} catch (error) {
|
||||
options.onError(error as any);
|
||||
}
|
||||
|
||||
@@ -9,13 +9,15 @@
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:limit="1"
|
||||
:accept="fileType.join(',')"
|
||||
ref="upload"
|
||||
>
|
||||
<!-- :on-success="uploadSuccess" -->
|
||||
<!-- disabled -->
|
||||
<el-input v-model="videoShowUrl" style="width: 414px" @click.stop @input="handleInput" disabled>
|
||||
<el-input v-model="videoShowUrl" style="width: 414px" @click.stop @input="handleInput">
|
||||
<template #prepend
|
||||
><el-icon :size="20" style="cursor: pointer"><FolderAdd /></el-icon
|
||||
></template>
|
||||
@@ -33,11 +35,12 @@ import { FolderAdd } from "@element-plus/icons-vue";
|
||||
import { ref, computed, inject } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { uploadVideo } from "@/api/modules/upload";
|
||||
import { genFileId } from "element-plus";
|
||||
import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
|
||||
import type { UploadProps, UploadRequestOptions } from "element-plus";
|
||||
|
||||
import type { UploadProps, UploadRawFile, UploadInstance } from "element-plus";
|
||||
//UploadRequestOptions
|
||||
interface UploadFileProps {
|
||||
videoUrl: string; // 图片地址 ==> 必传
|
||||
videoUrl: any; // 图片地址 ==> 必传
|
||||
api?: (params: any) => Promise<any>; // 上传图片的 api 方法,一般项目上传都是同一个 api 方法,在组件里直接引入即可 ==> 非必传
|
||||
width?: string;
|
||||
disabled?: boolean; // 是否禁用上传组件 ==> 非必传(默认为 false)
|
||||
@@ -45,12 +48,12 @@ interface UploadFileProps {
|
||||
fileType?: any[]; //视频类型限制 ==> 非必传(默认为[".mp4", ".avi", ".mov"])
|
||||
borderRadius?: string; // 组件边框圆角 ==> 非必传(默认为 8px)
|
||||
}
|
||||
const videoShowUrl = ref(null);
|
||||
const videoShowUrl = ref<any>(null);
|
||||
// 接受父组件参数
|
||||
const props = withDefaults(defineProps<UploadFileProps>(), {
|
||||
videoUrl: "",
|
||||
disabled: false,
|
||||
fileSize: 200,
|
||||
fileSize: 150,
|
||||
width: "400px",
|
||||
fileType: () => [".mp4", ".avi", ".mov", "video/mp4", "video/mov", "video/avi"],
|
||||
borderRadius: "8px"
|
||||
@@ -60,13 +63,16 @@ const routerValueName: string = $router.currentRoute.value.name as string;
|
||||
const routerObj: any = {
|
||||
articleEditIndex: "article",
|
||||
productEditIndex: "product",
|
||||
videoListIndex: "video"
|
||||
bannerListIndex: "banner",
|
||||
downloadListIndex: "download",
|
||||
videoListIndex: "video",
|
||||
QAListIndex: "QA"
|
||||
};
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
|
||||
// 生成组件唯一id
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
|
||||
const upload = ref<UploadInstance>();
|
||||
// 获取 el-form 组件上下文
|
||||
const formContext = inject(formContextKey, void 0);
|
||||
// 获取 el-form-item 组件上下文
|
||||
@@ -83,22 +89,45 @@ interface UploadEmits {
|
||||
(e: "update:videoUrl", value: string): void;
|
||||
}
|
||||
const emit = defineEmits<UploadEmits>();
|
||||
const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
const handleHttpUpload = async (options: any) => {
|
||||
let formData = new FormData();
|
||||
formData.append("video", options.file);
|
||||
try {
|
||||
const api = props.api ?? uploadVideo;
|
||||
const { data } = await api(formData, routerName.value);
|
||||
if (data.path) {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "视频上传成功!",
|
||||
type: "success"
|
||||
});
|
||||
emit("update:videoUrl", data.path);
|
||||
// 调用 el-form 内部的校验方法(可自动校验)
|
||||
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
|
||||
} else {
|
||||
videoShowUrl.value = "";
|
||||
emit("update:videoUrl", "");
|
||||
}
|
||||
} catch (error) {
|
||||
videoShowUrl.value = "";
|
||||
emit("update:videoUrl", "");
|
||||
if (!error) {
|
||||
return;
|
||||
}
|
||||
options.onError(error as any);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExceed: UploadProps["onExceed"] = files => {
|
||||
upload.value!.clearFiles();
|
||||
const file = files[0] as UploadRawFile;
|
||||
file.uid = genFileId();
|
||||
let options: any = {
|
||||
file
|
||||
};
|
||||
handleHttpUpload(options);
|
||||
};
|
||||
const handleInput = () => {
|
||||
console.log("会触发吗");
|
||||
emit("update:videoUrl", videoShowUrl.value);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -128,13 +157,13 @@ const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
|
||||
/**
|
||||
* @description 视频上传成功
|
||||
* */
|
||||
const uploadSuccess = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "视频上传成功!",
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
// const uploadSuccess = () => {
|
||||
// ElNotification({
|
||||
// title: "温馨提示",
|
||||
// message: "视频上传成功!",
|
||||
// type: "success"
|
||||
// });
|
||||
// };
|
||||
|
||||
/**
|
||||
* @description 视频上传错误
|
||||
@@ -149,8 +178,10 @@ const uploadError = () => {
|
||||
watch(
|
||||
() => props.videoUrl,
|
||||
(newVal: any) => {
|
||||
if (newVal) {
|
||||
videoShowUrl.value = newVal;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -26,3 +26,6 @@
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
span img {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<Toolbar v-if="!hideToolBar" class="editor-toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
|
||||
<Editor
|
||||
v-model="valueHtml"
|
||||
class="editor-content'"
|
||||
class="editor-content"
|
||||
:style="{ height }"
|
||||
:mode="mode"
|
||||
:default-config="editorConfig"
|
||||
@@ -20,7 +20,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import { uploadImg, uploadVideo } from "@/api/modules/upload";
|
||||
import "@wangeditor/editor/dist/css/style.css";
|
||||
import { formContextKey, formItemContextKey } from "element-plus";
|
||||
|
||||
// import { cloneDeep } from "lodash-es";
|
||||
// 富文本 DOM 元素
|
||||
const editorRef = shallowRef();
|
||||
|
||||
@@ -28,11 +28,16 @@ const editorRef = shallowRef();
|
||||
const handleCreated = (editor: any) => {
|
||||
editorRef.value = editor;
|
||||
};
|
||||
|
||||
const $router = useRouter();
|
||||
const routerValueName: string = $router.currentRoute.value.name as string;
|
||||
const routerObj: any = {
|
||||
articleEditIndex: "article",
|
||||
productEditIndex: "product"
|
||||
productEditIndex: "product",
|
||||
bannerListIndex: "banner",
|
||||
downloadListIndex: "download",
|
||||
videoListIndex: "video",
|
||||
QAListIndex: "QA"
|
||||
};
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
// 接收父组件参数,并设置默认值
|
||||
@@ -51,12 +56,23 @@ const props = withDefaults(defineProps<RichEditorProps>(), {
|
||||
excludeKeys: []
|
||||
};
|
||||
},
|
||||
|
||||
editorConfig: () => {
|
||||
return {
|
||||
placeholder: "请输入内容...",
|
||||
MENU_CONF: {}
|
||||
// parseElemHtml: (elemHtml: string, elem: HTMLElement, editor: any) => {
|
||||
// console.log(editor, "========editor=========");
|
||||
// console.log(elem.tagName, "=elem.tagName=");
|
||||
// if (elem.tagName === "SPAN" && elem.querySelector("img")) {
|
||||
// // 确保 span 元素可以正确显示 img
|
||||
// elem.style.display = "inline-block";
|
||||
// }
|
||||
// return elemHtml;
|
||||
// }
|
||||
};
|
||||
},
|
||||
|
||||
height: "500px",
|
||||
mode: "default",
|
||||
hideToolBar: false,
|
||||
@@ -80,7 +96,9 @@ type EmitProps = {
|
||||
(e: "update:value", val: string): void;
|
||||
(e: "check-validate"): void;
|
||||
};
|
||||
|
||||
const emit = defineEmits<EmitProps>();
|
||||
|
||||
const valueHtml = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
@@ -108,7 +126,7 @@ props.editorConfig.MENU_CONF!["uploadImage"] = {
|
||||
const result = await uploadImg(formData, routerName.value);
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.url);
|
||||
insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.path);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
1
src/components/WangEditor/text.txt
Normal file
1
src/components/WangEditor/text.txt
Normal file
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<el-input
|
||||
style="width: 440px"
|
||||
:placeholder="item.placeholder"
|
||||
v-model.trim="_ruleForm[`${item.prop}`]"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
clearable
|
||||
:disabled="item.disabled"
|
||||
@blur="handleInputBlur"
|
||||
@@ -22,7 +22,7 @@
|
||||
<template v-if="item.type === 'inputSelect'">
|
||||
<el-input
|
||||
:placeholder="item.placeholder"
|
||||
v-model.trim="_ruleForm[`${item.prop}`]"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
clearable
|
||||
:disabled="item.disabled"
|
||||
@blur="handleInputBlur"
|
||||
@@ -42,7 +42,7 @@
|
||||
<template v-if="item.type === 'inputButton'">
|
||||
<el-input
|
||||
:placeholder="item.placeholder"
|
||||
v-model.trim="_ruleForm[`${item.prop}`]"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
clearable
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
@@ -53,10 +53,10 @@
|
||||
</template>
|
||||
<template v-if="item.type === 'inputNumber'">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:controls="true"
|
||||
v-model.trim="_ruleForm[`${item.prop}`]"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
:disabled="item.disabled"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxLength"
|
||||
@@ -92,8 +92,9 @@
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
:disabled="item.disabled"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
date-format="MMM DD, YYYY"
|
||||
time-format="HH:mm"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="item.type === 'radio'">
|
||||
@@ -107,7 +108,17 @@
|
||||
>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<!-- <template v-if="item.type === 'radio1'">
|
||||
<el-radio-group v-model="_ruleForm[`${item.prop}`]">
|
||||
<el-radio
|
||||
:value="option.value"
|
||||
:label="option.value"
|
||||
v-for="(option, optionIndex) in item.options"
|
||||
:key="optionIndex"
|
||||
>{{ option.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</template> -->
|
||||
<template v-if="item.type === 'upImg'">
|
||||
<UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
|
||||
<template #tip>
|
||||
@@ -123,7 +134,13 @@
|
||||
<UploadVideo width="440px" v-model:video-url="_ruleForm[`${item.prop}`]"> </UploadVideo>
|
||||
</template>
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-select style="width: 240px" v-model="_ruleForm[`${item.prop}`]" :placeholder="item.placeholder" clearable>
|
||||
<el-select
|
||||
style="width: 240px"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
@change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
|
||||
>
|
||||
<el-option
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
@@ -141,7 +158,8 @@
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
check-strictly
|
||||
@change="handleSelectChange(_ruleForm[`${item.prop}`])"
|
||||
@change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
|
||||
style="max-width: 340px"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="item.type === 'treeSelects'">
|
||||
@@ -153,12 +171,15 @@
|
||||
show-checkbox
|
||||
check-strictly
|
||||
check-on-click-node
|
||||
style="width: 240px"
|
||||
style="width: 340px"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="item.type === 'treeSelectInput'">
|
||||
<slot />
|
||||
</template>
|
||||
<template v-if="item.type === 'WangEditor'">
|
||||
<Editor v-model:content="_ruleForm[`${item.prop}`]" ref="editorRef"></Editor>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
@@ -168,6 +189,7 @@
|
||||
import type { FormInstance, FormRules } from "element-plus";
|
||||
import UploadVideo from "@/components/Upload/UploadVideo.vue";
|
||||
import UploadImg from "@/components/Upload/UploadImg.vue";
|
||||
import Editor from "@/components/Editor/index.vue";
|
||||
interface IProps {
|
||||
ruleForm: { [key: string]: any };
|
||||
formData: any[];
|
||||
@@ -187,7 +209,7 @@ const emits = defineEmits<{
|
||||
(e: "handleRadioGroupEmits", result?: any): void;
|
||||
(e: "handleTreesSelectChangeEmits", result?: any): void;
|
||||
}>();
|
||||
|
||||
const editorRef = ref<any>(null);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const props = defineProps<IProps>();
|
||||
//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
|
||||
@@ -201,8 +223,8 @@ const handleInputButtonClick = () => {
|
||||
const handleInputBlur = () => {
|
||||
emits("handleInputBlurEmits");
|
||||
};
|
||||
const handleSelectChange = (params: any) => {
|
||||
emits("handleSelectChangeEmits", { id: params });
|
||||
const handleSelectChange = (params: any, prop: any) => {
|
||||
emits("handleSelectChangeEmits", { id: params, prop });
|
||||
};
|
||||
// const handleTreesSelectChange = (params: any) => {
|
||||
// emits("handleTreesSelectChangeEmits", params);
|
||||
@@ -213,7 +235,8 @@ const handleRadioGroup = (value: any) => {
|
||||
// 暴露给父组件的参数和方法(外部需要什么,都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
ruleForm: _ruleForm,
|
||||
ruleFormRef: ruleFormRef
|
||||
ruleFormRef: ruleFormRef,
|
||||
editorRef: editorRef
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -87,9 +87,10 @@ export const useTable = (
|
||||
// 处理查询参数,可以给查询参数加自定义前缀操作
|
||||
let nowSearchParam: Table.StateProps["searchParam"] = {};
|
||||
// 防止手动清空输入框携带参数(这里可以自定义查询参数前缀)
|
||||
console.log(state.searchParam, "=state.searchParam=");
|
||||
for (let key in state.searchParam) {
|
||||
//剔除日期参数
|
||||
if (key !== "Time" && key !== "Time1") {
|
||||
if (key !== "Time" && key !== "Time1" && key !== "treeIds") {
|
||||
// * 某些情况下参数为 false/0 也应该携带参数
|
||||
if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
|
||||
nowSearchParam[key] = state.searchParam[key];
|
||||
|
||||
@@ -42,28 +42,36 @@ import { ref } from "vue";
|
||||
import { logoutApi } from "@/api/modules/login";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { outLogin } from "@/utils/outLogin";
|
||||
//getLanguageCutoverApi
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import { getLanguageListApi, getLanguageCutoverApi } from "@/api/modules/global";
|
||||
const userStore: any = useUserStore();
|
||||
import { HOME_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { useTabsStore } from "@/stores/modules/tabs";
|
||||
const tabStore = useTabsStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const keepAliveStore = useKeepAliveStore();
|
||||
document.cookie = `lang=zh_cn`;
|
||||
const langs = ref<any>([]);
|
||||
const name = ref("");
|
||||
|
||||
// 站点列表
|
||||
const getLanguageList = async () => {
|
||||
const result = await getLanguageListApi();
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
langs.value = data;
|
||||
getLanguageCutover(data[0]?.id);
|
||||
let id = userStore?.languageType ? userStore?.languageType : data[0]?.id;
|
||||
getLanguageCutover(id, "noCLick");
|
||||
}
|
||||
};
|
||||
getLanguageList();
|
||||
|
||||
// 站点切换接口
|
||||
const getLanguageCutover = async (id: any) => {
|
||||
const getLanguageCutover = async (id: any, type: any) => {
|
||||
const result = await getLanguageCutoverApi(id);
|
||||
if (result?.code === 0) {
|
||||
userStore.setLanguageType(id);
|
||||
@@ -71,12 +79,37 @@ const getLanguageCutover = async (id: any) => {
|
||||
return item.id === id;
|
||||
});
|
||||
name.value = names[0]?.country_name;
|
||||
if (type === "click") {
|
||||
tabStore.setTabs([
|
||||
{
|
||||
icon: "",
|
||||
title: "首页",
|
||||
path: "/admin/index",
|
||||
name: "home",
|
||||
close: true
|
||||
}
|
||||
]);
|
||||
keepAliveStore.setKeepAliveName();
|
||||
setTimeout(() => {
|
||||
router.push(HOME_URL);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 站点切换事件
|
||||
const handleCommand = (val: string) => {
|
||||
getLanguageCutover(val);
|
||||
//切换语言将清空所有标签页面
|
||||
|
||||
ElMessageBox.confirm("切换语言将清空所有标签页面?", "温馨提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
await getLanguageCutover(val, "click");
|
||||
});
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const logout = () => {
|
||||
ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
|
||||
|
||||
@@ -32,6 +32,7 @@ const { keepAliveName } = storeToRefs(keepAliveStore);
|
||||
const isRouterShow = ref(true);
|
||||
const refreshCurrentPage = (val: boolean) => {
|
||||
isRouterShow.value = val;
|
||||
keepAliveStore.setKeepAliveName([]);
|
||||
};
|
||||
|
||||
provide("refresh", refreshCurrentPage);
|
||||
|
||||
@@ -34,30 +34,38 @@ import { useTabsStore } from "@/stores/modules/tabs";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
// import { initCache } from "./init/init";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
const userStore = useUserStore();
|
||||
|
||||
// import { useMsg } from "@/hooks/useMsg";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const tabStore = useTabsStore();
|
||||
const globalStore = useGlobalStore();
|
||||
const keepAliveStore = useKeepAliveStore();
|
||||
|
||||
// // refresh current page
|
||||
// const refreshCurrentPage: Function = inject("refresh") as Function;
|
||||
|
||||
// const refresh = async () => {
|
||||
// // initCache(data);
|
||||
// setTimeout(() => {
|
||||
// keepAliveStore.removeKeepAliveName(route.name as string);
|
||||
// refreshCurrentPage(false);
|
||||
// nextTick(() => {
|
||||
// keepAliveStore.addKeepAliveName(route.name as string);
|
||||
// refreshCurrentPage(true);
|
||||
// });
|
||||
// }, 300);
|
||||
// };
|
||||
// refresh current page
|
||||
const refreshCurrentPage: Function = inject("refresh") as Function;
|
||||
|
||||
const refresh = async () => {
|
||||
// initCache(data);
|
||||
setTimeout(() => {
|
||||
keepAliveStore.removeKeepAliveName(route.name as string);
|
||||
refreshCurrentPage(false);
|
||||
nextTick(() => {
|
||||
keepAliveStore.addKeepAliveName(route.name as string);
|
||||
refreshCurrentPage(true);
|
||||
});
|
||||
}, 300);
|
||||
};
|
||||
watch(
|
||||
() => userStore.languageType,
|
||||
(newVal: any) => {
|
||||
if (!newVal) {
|
||||
return;
|
||||
}
|
||||
refresh();
|
||||
}
|
||||
);
|
||||
// maximize current page
|
||||
const maximize = () => {
|
||||
globalStore.setGlobalState("maximize", true);
|
||||
@@ -78,9 +86,23 @@ const closeOtherTab = () => {
|
||||
|
||||
// Close All
|
||||
const closeAllTab = () => {
|
||||
tabStore.closeMultipleTab();
|
||||
tabStore.setTabs([
|
||||
{
|
||||
icon: "",
|
||||
title: "首页",
|
||||
path: "/admin/index",
|
||||
name: "home",
|
||||
close: true
|
||||
}
|
||||
]);
|
||||
keepAliveStore.setKeepAliveName();
|
||||
setTimeout(() => {
|
||||
router.push(HOME_URL);
|
||||
}, 500);
|
||||
|
||||
// tabStore.closeMultipleTab();
|
||||
// keepAliveStore.setKeepAliveName();
|
||||
// router.push(HOME_URL);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -31,10 +31,12 @@ import { useTabsStore } from "@/stores/modules/tabs";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import { TabsPaneContext, TabPaneName } from "element-plus";
|
||||
|
||||
import MoreButton from "./components/MoreButton.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tabStore = useTabsStore();
|
||||
const authStore = useAuthStore();
|
||||
// const globalStore = useGlobalStore();
|
||||
@@ -43,7 +45,7 @@ const keepAliveStore = useKeepAliveStore();
|
||||
const tabsMenuValue = ref(route.fullPath);
|
||||
|
||||
const tabsMenuList = computed(() => tabStore.tabsMenuList);
|
||||
|
||||
console.log(tabStore.tabsMenuList, "===============value================");
|
||||
onMounted(() => {
|
||||
tabsDrop();
|
||||
initTabs();
|
||||
@@ -55,9 +57,6 @@ watch(
|
||||
() => {
|
||||
if (route.meta.isFull) return;
|
||||
tabsMenuValue.value = route.fullPath;
|
||||
// const TITLES_OBJ = {
|
||||
// "/articleManagement/list/edit?type=add": "添加文章"
|
||||
// };
|
||||
let title: any = route.query.title ? route.query.title : route.meta.title;
|
||||
const tabsParams = {
|
||||
icon: route.meta.icon as string,
|
||||
|
||||
@@ -33,8 +33,10 @@ import errorHandler from "@/utils/errorHandler";
|
||||
import VXETable from "vxe-table";
|
||||
import "vxe-table/lib/style.css";
|
||||
|
||||
import mavonEditor from "mavon-editor";
|
||||
import "mavon-editor/dist/css/index.css";
|
||||
const app = createApp(App);
|
||||
|
||||
app.config.errorHandler = errorHandler;
|
||||
|
||||
app.use(directives).use(router).use(pinia).use(VXETable).mount("#app");
|
||||
app.use(directives).use(router).use(pinia).use(VXETable).use(mavonEditor).mount("#app");
|
||||
|
||||
@@ -30,12 +30,13 @@ export const useTabsStore = defineStore({
|
||||
},
|
||||
// Close MultipleTab
|
||||
async closeMultipleTab(tabsMenuValue?: string) {
|
||||
this.tabsMenuList = this.tabsMenuList.filter(item => {
|
||||
return item.path === tabsMenuValue || !item.close;
|
||||
this.tabsMenuList = this.tabsMenuList.filter((item: any) => {
|
||||
return item.path === tabsMenuValue || !item.hidden;
|
||||
});
|
||||
},
|
||||
// Set Tabs
|
||||
async setTabs(tabsMenuList: any[]) {
|
||||
console.log(tabsMenuList, "=tabsMenuList=");
|
||||
this.tabsMenuList = tabsMenuList;
|
||||
},
|
||||
// Set Tabs Title
|
||||
|
||||
@@ -97,6 +97,8 @@
|
||||
|
||||
// table-search 表格搜索样式
|
||||
.table-search {
|
||||
// height: auto;
|
||||
// max-height: 80px;
|
||||
margin-bottom: 10px;
|
||||
.el-form {
|
||||
.el-form-item__content > * {
|
||||
@@ -268,3 +270,6 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-message__wrapper {
|
||||
z-index: 3000 !important; /* 一个较大的值,确保在抽屉之上 */
|
||||
}
|
||||
|
||||
15
src/utils/convertSpanToDiv.ts
Normal file
15
src/utils/convertSpanToDiv.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export const convertSpanToDiv = (html: any) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, "text/html");
|
||||
const spans = doc.querySelectorAll("span");
|
||||
if (!spans.length) {
|
||||
return;
|
||||
}
|
||||
spans.forEach((span: any) => {
|
||||
if (span.querySelector("img")) {
|
||||
const img = span.querySelector("img");
|
||||
span.parentNode.replaceChild(img, span);
|
||||
}
|
||||
});
|
||||
return doc.body.innerHTML;
|
||||
};
|
||||
@@ -4,8 +4,8 @@ import { useUserStore } from "@/stores/modules/user";
|
||||
//不同环境的login地址
|
||||
const LOGIN_OBJ: any = {
|
||||
development: "http://localhost:8080/admin/login", //开发环境
|
||||
test: "https://dev.ow.admin.f2b211.com/", //测试环境
|
||||
production: "http://localhost:8080/login" //生产环境
|
||||
test: "https://dev.orico.com.cn/admin/login", //测试环境
|
||||
production: "https://orico.com.cn/admin/login" //生产环境
|
||||
};
|
||||
/**
|
||||
/**
|
||||
|
||||
13
src/utils/recursiveCompare.ts
Normal file
13
src/utils/recursiveCompare.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export const recursiveCompare = (item: any, targetId: any) => {
|
||||
if (typeof item === "object" && item !== null) {
|
||||
if (item.value !== undefined && item.value === targetId) {
|
||||
return true;
|
||||
}
|
||||
for (const key in item) {
|
||||
if (recursiveCompare(item[key], targetId)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
1
src/utils/url.ts
Normal file
1
src/utils/url.ts
Normal file
@@ -0,0 +1 @@
|
||||
export const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<el-tab-pane label="问答详细" name="third">
|
||||
<div style="width: 1280px; margin: 0 auto">
|
||||
<WangEditor v-model:value="dataStore.value" />
|
||||
<Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -32,7 +32,8 @@
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import { getQAListDetailsApi, getQAListEditUpApi, getQAListSaveApi } from "@/api/modules/QAList";
|
||||
import { ref, reactive } from "vue";
|
||||
import WangEditor from "@/components/WangEditor/index.vue";
|
||||
// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
|
||||
import Editor from "@/components/Editor/index.vue";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
@@ -40,16 +41,16 @@ const $route = useRoute();
|
||||
const activeName = ref("basicInfo");
|
||||
//数据集合
|
||||
const dataStore = reactive<any>({
|
||||
value: "",
|
||||
// value: "",
|
||||
editRuleForm: cloneDeep(EDIT_RULE_FORM),
|
||||
editFormData: cloneDeep(EDIT_FORM_DATA),
|
||||
rules: RULES
|
||||
});
|
||||
const formRef: any = ref(null);
|
||||
const editorRef = ref<any>(null);
|
||||
//详情
|
||||
const getQAListDetails = async () => {
|
||||
let id = $route.query.id;
|
||||
console.log(id, "=========id========");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
@@ -58,12 +59,19 @@ const getQAListDetails = async () => {
|
||||
const { data } = result;
|
||||
//这里是传给基本信息组件的表单数据
|
||||
dataStore.editRuleForm = cloneDeep(data);
|
||||
if (!data.answer) {
|
||||
editorRef?.value?.clearEditor();
|
||||
}
|
||||
// dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
|
||||
|
||||
dataStore.value = data.answer;
|
||||
}
|
||||
};
|
||||
getQAListDetails();
|
||||
|
||||
//更新
|
||||
const getQAListEditUp = async () => {
|
||||
// dataStore.editRuleForm.answer = dataStore.value;
|
||||
const result: any = await getQAListEditUpApi(dataStore.editRuleForm);
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
@@ -72,6 +80,7 @@ const getQAListEditUp = async () => {
|
||||
};
|
||||
//新增 getQAListSaveApi
|
||||
const getQAListSave = async () => {
|
||||
// dataStore.editRuleForm.answer = dataStore.value;
|
||||
const result: any = await getQAListSaveApi(dataStore.editRuleForm);
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
@@ -88,6 +97,12 @@ const handleReset = () => {
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
editorRef?.value?.clearEditor();
|
||||
for (let key in dataStore.editRuleForm) {
|
||||
dataStore.editRuleForm[key] = "";
|
||||
}
|
||||
dataStore.editRuleForm.sort = 0;
|
||||
// dataStore.value = "";
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
|
||||
</template>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
|
||||
<template #operation="scope">
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<script setup lang="ts" name="QAListIndex">
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
|
||||
@@ -46,34 +46,26 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "pid",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
label: "所属分类: ",
|
||||
options: []
|
||||
},
|
||||
{
|
||||
prop: "icon",
|
||||
type: "upImg",
|
||||
label: "图片: "
|
||||
}
|
||||
|
||||
// {
|
||||
// prop: "seo_title",
|
||||
// placeholder: "请输入",
|
||||
// type: "input",
|
||||
// label: "SEO标题: "
|
||||
// },
|
||||
// {
|
||||
// prop: "seo_keywords",
|
||||
// placeholder: "请输入",
|
||||
// type: "input",
|
||||
// label: "SEO关键词: "
|
||||
// },
|
||||
// {
|
||||
// prop: "seo_desc",
|
||||
// placeholder: "请输入",
|
||||
// type: "input",
|
||||
// label: "SEO描述: "
|
||||
// }
|
||||
];
|
||||
export const EDIT_RULE_FORM = {
|
||||
is_show: 1,
|
||||
seo_desc: "",
|
||||
seo_keywords: "",
|
||||
seo_title: "",
|
||||
sort: 1,
|
||||
name: ""
|
||||
sort: 0,
|
||||
name: "",
|
||||
pid: 0,
|
||||
icon: ""
|
||||
};
|
||||
// editRuleForm: {},
|
||||
//editFormData: [],
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export const RULES = {
|
||||
name: [{ required: true, message: "文章分类名称不能为空 ! ", trigger: "blur" }],
|
||||
sort: [{ required: true, message: "文章分类排序不能为空 ! ", trigger: "blur" }]
|
||||
sort: [{ required: true, message: "文章分类排序不能为空 ! ", trigger: "blur" }],
|
||||
pid: [{ required: true, message: "所属分类不能为空 ! ", trigger: "blur" }]
|
||||
};
|
||||
|
||||
@@ -26,6 +26,6 @@ export const FORM_DATA: FormItem[] = [
|
||||
];
|
||||
|
||||
export const RULE_FORM = {
|
||||
page: 1,
|
||||
size: 50
|
||||
// page: 1,
|
||||
// size: 50
|
||||
};
|
||||
|
||||
@@ -32,7 +32,5 @@ export const COLUMNS = [
|
||||
render: (scope: RenderScope<any>): VNode | string | any => {
|
||||
return YES_OR_NO[scope.row.is_show];
|
||||
}
|
||||
},
|
||||
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 300 }
|
||||
}
|
||||
];
|
||||
|
||||
@@ -4,14 +4,32 @@
|
||||
<div style="padding-bottom: 16px">
|
||||
<el-button type="primary" @click="handleAdd"> 添加 </el-button>
|
||||
</div>
|
||||
<ProTable
|
||||
ref="proTableRef"
|
||||
:formData="dataStore.formData"
|
||||
:columns="dataStore.columns"
|
||||
:request-api="getArticleClassListApi"
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #operation="scope">
|
||||
<div class="card table-main">
|
||||
<SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
|
||||
<el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
|
||||
<el-table-column prop="id" label="id" />
|
||||
<el-table-column prop="name" label="分类名称" />
|
||||
<el-table-column prop="sort" label="分类排序">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop="">
|
||||
<el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="is_show" label="是否显示">
|
||||
<template #default="{ row }">
|
||||
{{ row.is_show == 1 ? "✔️" : "❌" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="icon" label="图片">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.icon ? h + row.icon : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <template #default="scope"> -->
|
||||
<el-table-column label="操作" :width="240">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
v-for="(item, index) in dataStore.btns"
|
||||
@@ -21,7 +39,10 @@
|
||||
>{{ item.name }}</el-button
|
||||
>
|
||||
</template>
|
||||
</ProTable>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
v-model="dataStore.visible"
|
||||
:show-close="true"
|
||||
@@ -40,6 +61,7 @@
|
||||
:formData="dataStore.editFormData"
|
||||
:rules="dataStore.rules"
|
||||
ref="formRef"
|
||||
@handleSelectChangeEmits="handleSelectChangeEmits"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
@@ -54,7 +76,11 @@
|
||||
|
||||
<script setup lang="ts" name="articleClassListIndex">
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import SearchForm from "@/components/SearchForm/index.vue";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
import { h } from "@/utils/url";
|
||||
// import ProTable from "@/components/ProTable/index.vue";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
//列表接口
|
||||
@@ -63,14 +89,15 @@ import {
|
||||
getArticleClassAddSaveApi,
|
||||
getArticleClassDelApi,
|
||||
getArticleClassEditUpApi,
|
||||
getArticleClassDetailsApi
|
||||
getArticleClassDetailsApi,
|
||||
getArticleClassApi,
|
||||
getArticleClassSortApi
|
||||
} from "@/api/modules/articleClass";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//表格和搜索條件
|
||||
import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES, BTNS } from "./constant/index";
|
||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
|
||||
const proTableRef = ref<any>(null);
|
||||
|
||||
const formRef: any = ref(null);
|
||||
const $router = useRouter();
|
||||
// 数据源
|
||||
@@ -85,9 +112,56 @@ const dataStore = reactive<any>({
|
||||
formData: FORM_DATA, //搜索配置项
|
||||
visible: false,
|
||||
btns: BTNS,
|
||||
tableData: [],
|
||||
selectRow: {} //当前选择的row
|
||||
});
|
||||
const getArticleClassSort = async (row: any) => {
|
||||
const result = await getArticleClassSortApi(row);
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
getArticleClassList();
|
||||
}
|
||||
};
|
||||
//排序input框失焦
|
||||
const handleBlur = (row: any) => {
|
||||
getArticleClassSort(row);
|
||||
};
|
||||
//
|
||||
const handleInput = (row: any) => {
|
||||
row.sort = integerRexg(row.sort);
|
||||
};
|
||||
|
||||
const search = () => {
|
||||
getArticleClassList();
|
||||
};
|
||||
const reset = () => {
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
getArticleClassList();
|
||||
};
|
||||
|
||||
const handleSelectChangeEmits = (params: any) => {
|
||||
const { id } = params;
|
||||
dataStore.editRuleForm.pid = id;
|
||||
};
|
||||
|
||||
const getArticleClass = async () => {
|
||||
const result = await getArticleClassApi();
|
||||
if (result?.code === 0) {
|
||||
dataStore.editFormData[3].options = addLabelValue(result?.data);
|
||||
dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
|
||||
console.log(result?.data);
|
||||
}
|
||||
};
|
||||
getArticleClass();
|
||||
const getArticleClassList = async () => {
|
||||
const result = await getArticleClassListApi(dataStore.ruleForm);
|
||||
if (result?.code === 0) {
|
||||
dataStore.tableData = result?.data;
|
||||
}
|
||||
};
|
||||
getArticleClassList();
|
||||
//新增文章接口
|
||||
const getArticleClassAddSave = async () => {
|
||||
const result = await getArticleClassAddSaveApi(dataStore.editRuleForm);
|
||||
@@ -96,7 +170,7 @@ const getArticleClassAddSave = async () => {
|
||||
useMsg("success", msg);
|
||||
dataStore.visible = false;
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
proTableRef?.value?.getTableList();
|
||||
getArticleClassList();
|
||||
}
|
||||
};
|
||||
//文章编辑
|
||||
@@ -107,7 +181,8 @@ const getArticleClassUpEdit = async () => {
|
||||
if (code === 0) {
|
||||
useMsg("success", msg);
|
||||
dataStore.visible = false;
|
||||
proTableRef?.value?.getTableList();
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
getArticleClassList();
|
||||
}
|
||||
};
|
||||
//删除文章
|
||||
@@ -117,7 +192,7 @@ const getArticleClassDel = (row: any) => {
|
||||
const { msg, code } = result;
|
||||
if (code === 0) {
|
||||
useMsg("success", msg);
|
||||
proTableRef?.value?.getTableList();
|
||||
getArticleClassList();
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -141,12 +216,16 @@ const resetFields = () => {
|
||||
};
|
||||
//抽屉重置
|
||||
const handleResetClick = () => {
|
||||
if (dataStore.title == "添加文章分类") {
|
||||
resetFields();
|
||||
} else {
|
||||
getArticleClassDetails(dataStore.selectRow);
|
||||
}
|
||||
};
|
||||
|
||||
//添加
|
||||
const handleAdd = () => {
|
||||
dataStore.title = "添加文章分类";
|
||||
dataStore.visible = true;
|
||||
};
|
||||
//弹窗关闭钩子
|
||||
|
||||
@@ -27,7 +27,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
},
|
||||
|
||||
{
|
||||
prop: "category_id",
|
||||
prop: "category_id1",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
label: "文章分类: ",
|
||||
@@ -55,6 +55,22 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// prop: "is_show1",
|
||||
// placeholder: "",
|
||||
// type: "radio",
|
||||
// label: "是否启用: ",
|
||||
// options: [
|
||||
// {
|
||||
// label: "是",
|
||||
// value: 1
|
||||
// },
|
||||
// {
|
||||
// label: "否",
|
||||
// value: 0
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
prop: "link",
|
||||
placeholder: "请输入",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const RULES = {
|
||||
title: [{ required: true, message: "文章名称不能为空 ! ", trigger: "blur" }],
|
||||
category_id: [{ required: true, message: "文章分类不能为空 ! ", trigger: "change" }],
|
||||
category_id1: [{ required: true, message: "文章分类不能为空 ! ", trigger: "change" }],
|
||||
sort: [{ required: true, message: "文章排序不能为空 ! ", trigger: "blur" }]
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
interface FormItem {
|
||||
prop: string;
|
||||
prop1?: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type: string;
|
||||
@@ -25,7 +26,8 @@ export const FORM_DATA: FormItem[] = [
|
||||
},
|
||||
|
||||
{
|
||||
prop: "category_id",
|
||||
prop: "treeIds",
|
||||
prop1: "category_id",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
isArray: true,
|
||||
@@ -38,7 +40,7 @@ export const FORM_DATA: FormItem[] = [
|
||||
options: [],
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
startDate: "created_at",
|
||||
startDate: "release_time",
|
||||
// endDate: "createEndDate",
|
||||
label: "发布时间: "
|
||||
}
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
//import { RenderScope } from "@/components/ProTable/interface";
|
||||
import { RenderScope } from "@/components/ProTable/interface";
|
||||
const YES_OR_NO: any = {
|
||||
1: "✔️",
|
||||
0: "❌"
|
||||
};
|
||||
export const COLUMNS = [
|
||||
{
|
||||
align: "center",
|
||||
@@ -32,7 +36,10 @@ export const COLUMNS = [
|
||||
{
|
||||
align: "left",
|
||||
label: "首页推荐",
|
||||
prop: "recommend"
|
||||
prop: "recommend",
|
||||
render: (scope: RenderScope<any>): VNode | string | any => {
|
||||
return YES_OR_NO[scope.row.recommend];
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
@@ -42,12 +49,12 @@ export const COLUMNS = [
|
||||
width: 160
|
||||
},
|
||||
|
||||
{
|
||||
align: "center",
|
||||
label: "状态",
|
||||
prop: "enabled",
|
||||
width: 80
|
||||
},
|
||||
// {
|
||||
// align: "center",
|
||||
// label: "状态",
|
||||
// prop: "enabled",
|
||||
// width: 80
|
||||
// },
|
||||
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 200 }
|
||||
];
|
||||
|
||||
@@ -14,12 +14,13 @@
|
||||
:formData="dataStore.editFormData"
|
||||
:rules="dataStore.rules"
|
||||
ref="formRef"
|
||||
@handleSelectChangeEmits="handleSelectChangeEmits"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="详细内容" name="third">
|
||||
<div style="width: 1280px; margin: 0 auto">
|
||||
<WangEditor v-model:value="dataStore.editRuleForm.content" />
|
||||
<Editor v-model:content="dataStore.editRuleForm.content" ref="editorRef"></Editor>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -29,45 +30,37 @@
|
||||
|
||||
<script setup lang="ts" name="articleEditIndex">
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import Editor from "@/components/Editor/index.vue";
|
||||
import {
|
||||
getArticleClassDataApi,
|
||||
getArticleListAddSaveApi,
|
||||
getArticleListDetailsApi,
|
||||
getArticleListUpApi
|
||||
} from "@/api/modules/articleList";
|
||||
// /handleSubmit,
|
||||
import { recursiveCompare } from "@/utils/recursiveCompare";
|
||||
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
|
||||
import { useSearchInfoArray } from "@/hooks/useSearch";
|
||||
import { ref, reactive } from "vue";
|
||||
import WangEditor from "@/components/WangEditor/index.vue";
|
||||
// import rulesForm from "@/components/rulesForm/index.vue";
|
||||
|
||||
import { ref, reactive } from "vue";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
const formRef = ref<any>(null);
|
||||
const activeName = ref("basicInfo");
|
||||
const $route = useRoute();
|
||||
|
||||
const editorRef = ref<any>(null);
|
||||
//数据集合
|
||||
const dataStore = reactive<any>({
|
||||
rules: cloneDeep(RULES), //抽屉表单验证
|
||||
editRuleForm: cloneDeep(EDIT_RULE_FORM),
|
||||
editFormData: cloneDeep(EDIT_FORM_DATA) //抽屉表单配置项
|
||||
});
|
||||
//新增
|
||||
const getArticleListAddSave = async () => {
|
||||
const result = await getArticleListAddSaveApi(dataStore.editRuleForm);
|
||||
if (result.code === 0) {
|
||||
const { msg } = result;
|
||||
useMsg("success", msg);
|
||||
}
|
||||
};
|
||||
|
||||
//文章分类
|
||||
const getArticleClassData = async () => {
|
||||
const result = await getArticleClassDataApi();
|
||||
const result = await getArticleClassDataApi({ is_show: 1 });
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
dataStore.editFormData[1].options = useSearchInfoArray(data);
|
||||
dataStore.editFormData[1].options = addLabelValue(data);
|
||||
//如果有category_id就代表是从文章分类跳转过来的
|
||||
if ($route.query.category_id) {
|
||||
dataStore.editRuleForm.category_id = Number($route.query.category_id);
|
||||
@@ -86,11 +79,52 @@ const getArticleListDetails = async () => {
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
dataStore.editRuleForm = data;
|
||||
console.log(data);
|
||||
if (!data.content) {
|
||||
editorRef?.value?.clearEditor(); // 调用子组件的清空方法
|
||||
}
|
||||
// dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content);
|
||||
let is = dataStore.editFormData[1].options.some((item: any) =>
|
||||
recursiveCompare(item, dataStore.editRuleForm.category_id)
|
||||
);
|
||||
dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
|
||||
}
|
||||
};
|
||||
const handleSelectChangeEmits = (value: any) => {
|
||||
if (value?.prop === "category_id1") {
|
||||
dataStore.editRuleForm.category_id = value.id;
|
||||
}
|
||||
};
|
||||
const convertDateFormat = (dateString: any) => {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
//新增
|
||||
const getArticleListAddSave = async () => {
|
||||
if (dataStore.editRuleForm.release_time) {
|
||||
dataStore.editRuleForm.release_time = convertDateFormat(dataStore.editRuleForm.release_time);
|
||||
} else {
|
||||
dataStore.editRuleForm.release_time = null;
|
||||
}
|
||||
const result = await getArticleListAddSaveApi(dataStore.editRuleForm);
|
||||
if (result.code === 0) {
|
||||
const { msg } = result;
|
||||
useMsg("success", msg);
|
||||
}
|
||||
};
|
||||
//更新
|
||||
const getArticleListUp = async () => {
|
||||
if (dataStore.editRuleForm.release_time) {
|
||||
dataStore.editRuleForm.release_time = convertDateFormat(dataStore.editRuleForm.release_time);
|
||||
} else {
|
||||
dataStore.editRuleForm.release_time = null;
|
||||
}
|
||||
const result = await getArticleListUpApi({ id: $route.query.id, ...dataStore.editRuleForm });
|
||||
|
||||
if (result?.code === 0) {
|
||||
@@ -117,6 +151,13 @@ const handleConfirmClick = () => {
|
||||
const handleReset = () => {
|
||||
if ($route.query.type === "add") {
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
editorRef?.value?.clearEditor(); // 调用子组件的清空方法
|
||||
// if (!data.detail) {
|
||||
// dataStore.detail = "";
|
||||
// editorRef.value.clearEditor(); // 调用子组件的清空方法
|
||||
// } else {
|
||||
// dataStore.detail = cloneDeep(data.detail);
|
||||
// }
|
||||
} else {
|
||||
getArticleListDetails();
|
||||
}
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #enabled="scope">
|
||||
<el-tag type="success" effect="dark">{{ scope.row.enabled === 1 ? "启用" : "禁用" }}</el-tag>
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : '--'" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<!-- <template #enabled="scope">
|
||||
<el-tag type="success" effect="dark">{{ scope.row.enabled == 1 ? "启用" : "禁用" }}</el-tag>
|
||||
</template> -->
|
||||
<template #operation="scope">
|
||||
<el-button size="small" type="primary" @click="handleBtnClick('edit', scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleBtnClick('del', scope.row)">删除</el-button>
|
||||
@@ -38,13 +38,16 @@ import {
|
||||
getArticleListExportApi,
|
||||
getArticleListDelApi
|
||||
} from "@/api/modules/articleList";
|
||||
import { useSearchInfoArray } from "@/hooks/useSearch";
|
||||
// import { useSearchInfoArray } from "@/hooks/useSearch";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//表格和搜索條件
|
||||
import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/index";
|
||||
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
//图片地址
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
|
||||
const proTableRef = ref<any>(null);
|
||||
const $router = useRouter();
|
||||
@@ -63,7 +66,8 @@ const getArticleClassData = async () => {
|
||||
const result = await getArticleClassDataApi();
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
dataStore.formData[1].options = useSearchInfoArray(data);
|
||||
console.log(data, "============>>>>>");
|
||||
dataStore.formData[1].options = addLabelValue(data);
|
||||
}
|
||||
};
|
||||
getArticleClassData();
|
||||
@@ -80,7 +84,10 @@ const handleAdd = (type: any) => {
|
||||
|
||||
//导出接口
|
||||
const getArticleListExport = async () => {
|
||||
const result = await getArticleListExportApi(dataStore.ruleForm);
|
||||
const result = await getArticleListExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
//导出
|
||||
|
||||
@@ -27,7 +27,7 @@ export const FORM_DATA: FormItem[] = [
|
||||
{
|
||||
prop: "category_id",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
isArray: true,
|
||||
label: "文章分类: ",
|
||||
options: []
|
||||
|
||||
@@ -50,12 +50,12 @@ export const COLUMNS = [
|
||||
width: 160
|
||||
},
|
||||
|
||||
{
|
||||
align: "center",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80
|
||||
},
|
||||
// {
|
||||
// align: "center",
|
||||
// label: "状态",
|
||||
// prop: "status",
|
||||
// width: 80
|
||||
// },
|
||||
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 200 }
|
||||
];
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
|
||||
<template #status="scope">
|
||||
@@ -27,8 +27,8 @@
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { useSearchInfoArray } from "@/hooks/useSearch";
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
import { h } from "@/utils/url";
|
||||
//列表接口
|
||||
import { getArticleTrashListApi, getArticleTrashDelApi, getArticleTrashRestoreApi } from "@/api/modules/articleRecycle";
|
||||
import { getArticleClassDataApi } from "@/api/modules/articleList";
|
||||
@@ -66,12 +66,13 @@ const getArticleTrashDel = (id: any) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//文章分类(搜索条件)
|
||||
const getArticleClassData = async () => {
|
||||
const result = await getArticleClassDataApi();
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
dataStore.formData[1].options = useSearchInfoArray(data);
|
||||
dataStore.formData[1].options = addLabelValue(data);
|
||||
}
|
||||
};
|
||||
getArticleClassData();
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
interface FormItem {
|
||||
prop: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type: string;
|
||||
isCopy?: boolean;
|
||||
optionProps?: any;
|
||||
startPlaceholder?: string;
|
||||
endPlaceholder?: string;
|
||||
options?: any;
|
||||
isArray?: boolean;
|
||||
startDate?: string; //开始时间(传入后台需要的参数)
|
||||
endDate?: string; //结束时间(传入后台需要的参数)
|
||||
startProp?: string;
|
||||
endProp?: string;
|
||||
isInteger?: boolean;
|
||||
disabled?: boolean;
|
||||
fileList?: any;
|
||||
prompt?: any;
|
||||
}
|
||||
export const EDIT_FORM_DATA: FormItem[] = [
|
||||
{
|
||||
prop: "videoName",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "下载名称: "
|
||||
},
|
||||
|
||||
{
|
||||
prop: "videoType",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
label: "下载分类: ",
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "Level one 1",
|
||||
children: [
|
||||
{
|
||||
value: "1-1",
|
||||
label: "Level two 1-1",
|
||||
children: [
|
||||
{
|
||||
value: "1-1-1",
|
||||
label: "Level three 1-1-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "videoSort",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "下载排序: "
|
||||
},
|
||||
{
|
||||
prop: "recommend",
|
||||
placeholder: "请输入",
|
||||
type: "radio",
|
||||
label: "首页推荐: ",
|
||||
options: [
|
||||
{
|
||||
label: "是",
|
||||
value: "是"
|
||||
},
|
||||
{
|
||||
label: "否",
|
||||
value: "否"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "imgUrl",
|
||||
type: "upImg",
|
||||
label: "下载图片: ",
|
||||
prompt: "图片尺寸320x320"
|
||||
},
|
||||
{
|
||||
prop: "table",
|
||||
type: "table",
|
||||
label: "下载文件: "
|
||||
},
|
||||
{
|
||||
prop: "videoDescribe",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "适合型号: "
|
||||
},
|
||||
{
|
||||
prop: "videoDescribe",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "支持系统: "
|
||||
},
|
||||
{
|
||||
prop: "videoDescribe",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "文件格式: "
|
||||
},
|
||||
|
||||
{
|
||||
prop: "SEOTitle",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "SEO标题: "
|
||||
},
|
||||
{
|
||||
prop: "SEOKeywords",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "SEO关键词: "
|
||||
},
|
||||
{
|
||||
prop: "SEODescribe",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "SEO描述: "
|
||||
}
|
||||
];
|
||||
export const EDIT_RULE_FORM = {
|
||||
videoName: "",
|
||||
videoType: "",
|
||||
videoSort: 1,
|
||||
recommend: "",
|
||||
videoDescribe: "",
|
||||
link: "",
|
||||
SEOTitle: "",
|
||||
SEOKeywords: "",
|
||||
SEODescribe: ""
|
||||
};
|
||||
// editRuleForm: {},
|
||||
//editFormData: [],
|
||||
@@ -1,5 +1,4 @@
|
||||
import { FORM_DATA, RULE_FORM } from "./search";
|
||||
import { COLUMNS } from "./table";
|
||||
import { RULES } from "./rules";
|
||||
import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
|
||||
export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES };
|
||||
export { FORM_DATA, RULE_FORM, COLUMNS, RULES };
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
:request-api="getArticleRemarkListApi"
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<!-- <template #image="scope">
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template> -->
|
||||
<template #is_audited="scope">
|
||||
<el-tag :type="scope.row.is_audited ? 'success' : 'danger'" effect="dark">{{
|
||||
scope.row.is_audited ? "已审核" : "待审核"
|
||||
@@ -34,7 +34,7 @@ import ProTable from "@/components/ProTable/index.vue";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { useExport } from "@/hooks/useExport";
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
// import { h } from "@/utils/url";
|
||||
//列表接口
|
||||
|
||||
import {
|
||||
@@ -61,7 +61,10 @@ const dataStore = reactive<any>({
|
||||
});
|
||||
//导出
|
||||
const getArticleRemarkExport = async () => {
|
||||
const result = await getArticleRemarkExportApi(dataStore.ruleForm);
|
||||
const result = await getArticleRemarkExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag type="success" effect="dark">{{ scope.row.status }}</el-tag>
|
||||
@@ -42,6 +42,7 @@
|
||||
ref="formRef"
|
||||
/>
|
||||
</div>
|
||||
<!-- @handleRadioGroupEmits="handleRadioGroupEmits" -->
|
||||
<template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button @click="handleResetClick">重置</el-button>
|
||||
@@ -57,7 +58,7 @@ import ProTable from "@/components/ProTable/index.vue";
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
//列表接口
|
||||
import {
|
||||
getBannerClassListApi,
|
||||
@@ -99,6 +100,18 @@ const handleConfirmClick = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// const handleRadioGroupEmits = (value: any) => {
|
||||
// // if (value === "image") {
|
||||
// // dataStore.editFormData = EDIT_FORM_DATA;
|
||||
// // dataStore.rules = RULES;
|
||||
// // } else {
|
||||
// // dataStore.editFormData = EDIT_FORM_DATA1;
|
||||
// // dataStore.rules = RULES1;
|
||||
// // }
|
||||
// console.log(value, "=========value============");
|
||||
// };
|
||||
|
||||
//重置验证状态
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
|
||||
@@ -49,24 +49,47 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
placeholder: "",
|
||||
type: "radio",
|
||||
label: "是否启用: ",
|
||||
options: [
|
||||
{
|
||||
label: "是",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "否",
|
||||
value: -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "image",
|
||||
type: "upImg",
|
||||
label: "Banner图片: "
|
||||
},
|
||||
|
||||
{
|
||||
prop: "extra_image",
|
||||
type: "upImg",
|
||||
label: "悬浮图: "
|
||||
},
|
||||
{
|
||||
prop: "banner_id",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
label: "Banner分类: ",
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "Level one 1"
|
||||
}
|
||||
]
|
||||
options: []
|
||||
},
|
||||
{
|
||||
prop: "rel_prod_cate_id",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
label: "相关分类: ",
|
||||
options: []
|
||||
},
|
||||
|
||||
{
|
||||
prop: "sort",
|
||||
placeholder: "请输入",
|
||||
@@ -86,7 +109,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
{
|
||||
prop: "desc",
|
||||
placeholder: "请输入",
|
||||
type: "textarea",
|
||||
type: "WangEditor",
|
||||
label: "Banner描述: "
|
||||
},
|
||||
{
|
||||
@@ -126,23 +149,38 @@ export const EDIT_FORM_DATA1: FormItem[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
placeholder: "",
|
||||
type: "radio",
|
||||
label: "是否启用: ",
|
||||
options: [
|
||||
{
|
||||
label: "是",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "否",
|
||||
value: -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "image",
|
||||
type: "upImg",
|
||||
label: "Banner图片: "
|
||||
},
|
||||
|
||||
// {
|
||||
// prop: "image1",
|
||||
// type: "upImg",
|
||||
// label: "Banner图片1: "
|
||||
// },
|
||||
{
|
||||
prop: "banner_id",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
label: "Banner分类: ",
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "Level one 1"
|
||||
}
|
||||
]
|
||||
options: []
|
||||
},
|
||||
{
|
||||
prop: "sort",
|
||||
@@ -150,15 +188,15 @@ export const EDIT_FORM_DATA1: FormItem[] = [
|
||||
type: "inputNumber",
|
||||
label: "Banner排序: "
|
||||
},
|
||||
{
|
||||
prop: "link",
|
||||
placeholder: "请输入",
|
||||
type: "inputSelect",
|
||||
label: "链接地址: ",
|
||||
placeholder1: "请选择",
|
||||
prop1: "link_type",
|
||||
options: []
|
||||
},
|
||||
// {
|
||||
// prop: "link",
|
||||
// placeholder: "请输入",
|
||||
// type: "inputSelect",
|
||||
// label: "链接地址: ",
|
||||
// placeholder1: "请选择",
|
||||
// prop1: "link_type",
|
||||
// options: []
|
||||
// },
|
||||
{
|
||||
prop: "video",
|
||||
type: "video",
|
||||
@@ -181,7 +219,8 @@ export const EDIT_FORM_DATA1: FormItem[] = [
|
||||
|
||||
export const EDIT_RULE_FORM = {
|
||||
type: "image",
|
||||
sort: 1
|
||||
sort: 1,
|
||||
status: 1
|
||||
};
|
||||
// editRuleForm: {},
|
||||
//editFormData: [],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export const RULES = {
|
||||
title: [{ required: true, message: "Banner名称不能为空 ! ", trigger: "blur" }],
|
||||
type: [{ required: true, message: "前台显示不能为空 ! ", trigger: "change" }],
|
||||
image: [{ required: true, message: "Banner图片不能为空 ! ", trigger: "change" }],
|
||||
// image: [{ required: true, message: "Banner图片不能为空 ! ", trigger: "change" }],
|
||||
banner_id: [{ required: true, message: "Banner分类不能为空 ! ", trigger: "change" }],
|
||||
sort: [{ required: true, message: "排序不能为空 ! ", trigger: "change" }]
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
interface FormItem {
|
||||
prop: string;
|
||||
prop1?: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type: string;
|
||||
@@ -25,9 +26,10 @@ export const FORM_DATA: FormItem[] = [
|
||||
},
|
||||
|
||||
{
|
||||
prop: "banner_id",
|
||||
prop: "treeIds",
|
||||
prop1: "banner_id",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
isArray: true,
|
||||
label: "Banner分类: ",
|
||||
options: []
|
||||
|
||||
@@ -33,6 +33,11 @@ export const COLUMNS = [
|
||||
label: "添加时间",
|
||||
prop: "created_at"
|
||||
},
|
||||
|
||||
{
|
||||
align: "center",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80
|
||||
},
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 200 }
|
||||
];
|
||||
|
||||
@@ -12,11 +12,16 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #sort="scope">
|
||||
<el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" effect="dark">{{
|
||||
scope.row.status == 1 ? "启用" : "禁用"
|
||||
}}</el-tag>
|
||||
</template>
|
||||
<template #operation="scope">
|
||||
<el-button size="small" type="primary" @click="getBannerRead(scope.row.id)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="getBannerDel(scope.row.id)">删除</el-button>
|
||||
@@ -25,7 +30,7 @@
|
||||
<el-drawer
|
||||
v-model="dataStore.visible"
|
||||
:show-close="true"
|
||||
:size="640"
|
||||
:size="980"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:before-close="handleBeforeClone"
|
||||
@@ -42,7 +47,7 @@
|
||||
ref="formRef"
|
||||
@handleRadioGroupEmits="handleRadioGroupEmits"
|
||||
>
|
||||
<el-input v-model.trim="dataStore.editRuleForm.link" clearable style="width: 440px">
|
||||
<el-input v-model="dataStore.editRuleForm.link" clearable style="width: 440px">
|
||||
<template #append>
|
||||
<el-tree-select
|
||||
lazy
|
||||
@@ -57,7 +62,6 @@
|
||||
@check="handleCheck"
|
||||
placeholder="请选择"
|
||||
style="padding: 0"
|
||||
@visible-change="visibleChange"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
@@ -80,8 +84,10 @@ import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { useExport } from "@/hooks/useExport";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
import { getProductCategoryListApi } from "@/api/modules/productList";
|
||||
// import { addLabelValue } from "@/utils/addLabelValue";
|
||||
// 图片地址
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
// 列表接口
|
||||
import {
|
||||
getBannerListApi,
|
||||
@@ -90,9 +96,11 @@ import {
|
||||
getBannerListSortApi,
|
||||
getBannerUpApi,
|
||||
getBannerListSaveApi,
|
||||
getBannerListExportApi
|
||||
getBannerListExportApi,
|
||||
getBannerClassListApi
|
||||
} from "@/api/modules/banner";
|
||||
import { getBannerClassListApi } from "@/api/modules/bannerClass";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
import { getSystemUrlsApi } from "@/api/modules/home";
|
||||
// 深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
@@ -113,10 +121,11 @@ const dataStore = reactive<any>({
|
||||
formData: FORM_DATA, // 搜索配置项 dataStore.formData
|
||||
visible: false,
|
||||
data: [],
|
||||
is: false
|
||||
type: "image",
|
||||
isFirstRequest: true
|
||||
});
|
||||
|
||||
const selectedNodes = ref(null);
|
||||
const selectedNodes = ref<any>(null);
|
||||
|
||||
const treeRef = ref(null);
|
||||
|
||||
@@ -126,11 +135,17 @@ const treeProps = {
|
||||
label: "label",
|
||||
value: "value"
|
||||
};
|
||||
const visibleChange = (is: any) => {
|
||||
dataStore.is = is;
|
||||
if (dataStore.is) {
|
||||
|
||||
//产品分类(后端大佬说直接掉列表接口)
|
||||
const getProductCategoryList = async () => {
|
||||
const result = await getProductCategoryListApi();
|
||||
if (result?.code === 0) {
|
||||
let dataClone: any = cloneDeep(result?.data);
|
||||
console.log(dataClone, "=dataClone=");
|
||||
dataStore.editFormData[7].options = addLabelValue(dataClone);
|
||||
}
|
||||
};
|
||||
|
||||
const buildTree = (data: any, outerLinkTo: any = "") => {
|
||||
return data.map((item: any) => {
|
||||
const { name, id, url, data: childData = [], children: nestedChildren = [] } = item;
|
||||
@@ -149,22 +164,38 @@ const buildTree = (data: any, outerLinkTo: any = "") => {
|
||||
};
|
||||
});
|
||||
};
|
||||
let isFirstRequest = true;
|
||||
// let isFirstRequest = true;
|
||||
const handleRadioGroupEmits = (value: any) => {
|
||||
dataStore.type = value;
|
||||
if (value === "video") {
|
||||
dataStore.editFormData = EDIT_FORM_DATA1;
|
||||
dataStore.rules = RULES1;
|
||||
getBannerClassEditList();
|
||||
}
|
||||
|
||||
if (value === "image") {
|
||||
dataStore.isFirstRequest = true;
|
||||
dataStore.editFormData = EDIT_FORM_DATA;
|
||||
dataStore.rules = RULES;
|
||||
getBannerClassEditList();
|
||||
}
|
||||
};
|
||||
|
||||
const getSystemUrls = async (node: any, resolve: any) => {
|
||||
//第一次请求
|
||||
if (isFirstRequest) {
|
||||
if (dataStore.isFirstRequest) {
|
||||
const result = await getSystemUrlsApi();
|
||||
if (result?.code === 0) {
|
||||
const children = buildTree(result?.data);
|
||||
resolve(children);
|
||||
isFirstRequest = false;
|
||||
dataStore.isFirstRequest = false;
|
||||
}
|
||||
} else {
|
||||
//第二次请求
|
||||
if (node.data.children) {
|
||||
resolve(node.data.children);
|
||||
if (node?.data?.children) {
|
||||
resolve(node?.data?.children);
|
||||
}
|
||||
if (!node.data.children.length && !node.data.url && node.level > 1) {
|
||||
if (!node?.data?.children?.length && !node?.data?.url && node?.level > 1) {
|
||||
const [link_to, id] = node?.data?.value?.split("/");
|
||||
const result = await getSystemUrlsApi({ link_to, id });
|
||||
if (result?.code === 0) {
|
||||
@@ -176,15 +207,37 @@ const getSystemUrls = async (node: any, resolve: any) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const setImgOrVideo = (result: any) => {
|
||||
dataStore.type = result?.data?.type;
|
||||
if (result?.data?.type === "image") {
|
||||
dataStore.editFormData = cloneDeep(EDIT_FORM_DATA);
|
||||
}
|
||||
if (result?.data?.type === "video") {
|
||||
dataStore.editFormData = cloneDeep(EDIT_FORM_DATA1);
|
||||
}
|
||||
|
||||
getBannerClassEditList();
|
||||
};
|
||||
// 详情
|
||||
const getBannerRead = async (id: any) => {
|
||||
selectedNodes.value = "";
|
||||
dataStore.data = [];
|
||||
dataStore.title = "编辑Banner";
|
||||
dataStore.visible = true;
|
||||
const result = await getBannerReadApi(id);
|
||||
if (result?.code === 0) {
|
||||
setImgOrVideo(result);
|
||||
getProductCategoryList();
|
||||
if (result?.data?.type === "image" && !result?.data?.desc) {
|
||||
formRef?.value?.editorRef[0]?.clearEditor();
|
||||
}
|
||||
nextTick(() => {
|
||||
dataStore.editRuleForm = result?.data;
|
||||
if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
|
||||
let { id, name, link } = dataStore.editRuleForm.link_echo_data;
|
||||
if (!id || !name || !link) {
|
||||
return;
|
||||
}
|
||||
let obj: any = {
|
||||
label: name, // 确保这里的name是你想要显示的文本
|
||||
value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
|
||||
@@ -197,10 +250,12 @@ const getBannerRead = async (id: any) => {
|
||||
selectedNodes.value = obj.value;
|
||||
dataStore.data = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleCheck = (checkedNodes: any, values: any) => {
|
||||
const { checkedKeys } = values;
|
||||
console.log(checkedKeys, "=checkedKeys=");
|
||||
if (checkedKeys.length) {
|
||||
dataStore.editRuleForm.link = checkedNodes.url;
|
||||
dataStore.editRuleForm.link_to = checkedNodes.link_to;
|
||||
@@ -212,42 +267,54 @@ const handleCheck = (checkedNodes: any, values: any) => {
|
||||
|
||||
// 更新
|
||||
const getBannerUp = async () => {
|
||||
if (dataStore.editRuleForm.type === "video") {
|
||||
dataStore.editRuleForm.link_to = "";
|
||||
dataStore.editRuleForm.link = "";
|
||||
}
|
||||
if (dataStore.editRuleForm.type === "image") {
|
||||
dataStore.editRuleForm.video = "";
|
||||
}
|
||||
const result = await getBannerUpApi(dataStore.editRuleForm);
|
||||
if (result?.code === 0) {
|
||||
dataStore.visible = false;
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
proTableRef?.value?.getTableList();
|
||||
dataStore.isFirstRequest = true;
|
||||
useMsg("success", result?.msg);
|
||||
}
|
||||
};
|
||||
|
||||
// 分类
|
||||
const getBannerClassList = async () => {
|
||||
const result = await getBannerClassListApi({ page: 1, size: 500 });
|
||||
//详情里的分类
|
||||
const getBannerClassEditList = async () => {
|
||||
const result = await getBannerClassListApi();
|
||||
if (result?.code === 0) {
|
||||
let arr: any = [];
|
||||
result?.data?.data?.forEach((item: any) => {
|
||||
arr.push({ value: item.id, label: item.name });
|
||||
dataStore.formData[1].options = addLabelValue(result?.data);
|
||||
dataStore.editFormData.forEach((item: any) => {
|
||||
if (item.prop === "banner_id") {
|
||||
item.options = addLabelValue(result?.data);
|
||||
}
|
||||
});
|
||||
dataStore.formData[1].options = arr;
|
||||
dataStore.editFormData[4].options = arr;
|
||||
}
|
||||
};
|
||||
getBannerClassList();
|
||||
// 新增 getBannerListSave
|
||||
getBannerClassEditList();
|
||||
// 新增
|
||||
const getBannerListSave = async () => {
|
||||
const result = await getBannerListSaveApi(dataStore.editRuleForm);
|
||||
if (result?.code === 0) {
|
||||
dataStore.visible = false;
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
useMsg("success", result?.msg);
|
||||
dataStore.isFirstRequest = true;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
proTableRef?.value?.getTableList();
|
||||
}
|
||||
};
|
||||
// 导出接口
|
||||
const getArticleListExport = async () => {
|
||||
const result = await getBannerListExportApi(dataStore.ruleForm);
|
||||
const result = await getBannerListExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
// 导出
|
||||
@@ -271,6 +338,9 @@ const handleConfirmClick = () => {
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
if (dataStore.type === "image") {
|
||||
formRef?.value?.editorRef[0]?.clearEditor();
|
||||
}
|
||||
};
|
||||
// 抽屉重置
|
||||
const handleResetClick = () => {
|
||||
@@ -284,23 +354,22 @@ const handleResetClick = () => {
|
||||
const handleAdd = () => {
|
||||
dataStore.title = "添加Banner";
|
||||
dataStore.visible = true;
|
||||
selectedNodes.value = "";
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
(dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
|
||||
getBannerClassEditList();
|
||||
// getBannerClassList();
|
||||
getProductCategoryList();
|
||||
};
|
||||
// 抽屉关闭前的钩子
|
||||
const handleBeforeClone = () => {
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
(dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
|
||||
resetFields();
|
||||
dataStore.visible = false;
|
||||
dataStore.isFirstRequest = true;
|
||||
};
|
||||
|
||||
const handleRadioGroupEmits = (value: any) => {
|
||||
if (value === "image") {
|
||||
dataStore.editFormData = EDIT_FORM_DATA;
|
||||
dataStore.rules = RULES;
|
||||
} else {
|
||||
dataStore.editFormData = EDIT_FORM_DATA1;
|
||||
dataStore.rules = RULES1;
|
||||
}
|
||||
};
|
||||
// 删除
|
||||
const getBannerDel = async (id: any) => {
|
||||
messageBox("你确定要删除?", async () => {
|
||||
|
||||
@@ -22,7 +22,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
prop: "name",
|
||||
placeholder: "请输入",
|
||||
type: "input",
|
||||
label: "文章分类名称: "
|
||||
label: "下载分类名称: "
|
||||
},
|
||||
|
||||
{
|
||||
@@ -46,6 +46,13 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: "pid",
|
||||
placeholder: "请选择",
|
||||
type: "treeSelect",
|
||||
label: "所属分类: ",
|
||||
options: []
|
||||
}
|
||||
];
|
||||
export const EDIT_RULE_FORM = {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export const RULES = {
|
||||
name: [{ required: true, message: "文章分类名称不能为空 ! ", trigger: "blur" }],
|
||||
sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }]
|
||||
sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }],
|
||||
pid: [{ required: true, message: "所属分类不能为空 ! ", trigger: "change" }]
|
||||
};
|
||||
|
||||
@@ -4,28 +4,33 @@
|
||||
<div style="padding-bottom: 16px">
|
||||
<el-button type="primary" @click="handleAdd"> 添加分类 </el-button>
|
||||
</div>
|
||||
<ProTable
|
||||
ref="proTableRef"
|
||||
:formData="dataStore.formData"
|
||||
:columns="dataStore.columns"
|
||||
:request-api="getCategoryListApi"
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
|
||||
<div class="card table-main">
|
||||
<SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
|
||||
<el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
|
||||
<el-table-column prop="id" label="id" />
|
||||
<el-table-column prop="name" label="下载分类名称" />
|
||||
<el-table-column prop="sort" label="下载分类排序">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop="">
|
||||
<el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag type="success" effect="dark">{{ scope.row.status }}</el-tag>
|
||||
</el-table-column>
|
||||
<el-table-column prop="is_show" label="是否显示">
|
||||
<template #default="{ row }">
|
||||
{{ row.is_show == 1 ? "✔️" : "❌" }}
|
||||
</template>
|
||||
<template #sort="scope">
|
||||
<el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
|
||||
</template>
|
||||
<template #operation="scope">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" :width="350">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" @click="handleBtnClick('添加', scope.row)">添加下载</el-button>
|
||||
<el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-drawer
|
||||
v-model="dataStore.visible"
|
||||
:show-close="true"
|
||||
@@ -44,6 +49,7 @@
|
||||
:formData="dataStore.editFormData"
|
||||
:rules="dataStore.rules"
|
||||
ref="formRef"
|
||||
@handleSelectChangeEmits="handleSelectChangeEmits"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
@@ -54,15 +60,16 @@
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="downloadClassListIndex">
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
// import ProTable from "@/components/ProTable/index.vue";
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
// import { h } from "@/utils/url";
|
||||
//列表接口
|
||||
import {
|
||||
getCategoryListApi,
|
||||
@@ -70,14 +77,16 @@ import {
|
||||
getCategorySortApi,
|
||||
getCategorySaveApi,
|
||||
getCategoryReadApi,
|
||||
getCategoryUpdateApi
|
||||
getCategoryUpdateApi,
|
||||
getCategorysApi
|
||||
} from "@/api/modules/downloadClass";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
//表格和搜索條件
|
||||
import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
|
||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
|
||||
const proTableRef = ref<any>(null);
|
||||
|
||||
const formRef: any = ref(null);
|
||||
const $router = useRouter();
|
||||
// 数据源
|
||||
@@ -89,11 +98,43 @@ const dataStore = reactive<any>({
|
||||
editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
|
||||
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
|
||||
ruleForm: cloneDeep(RULE_FORM), // 搜索參數
|
||||
formData: FORM_DATA, //搜索配置项
|
||||
formData: FORM_DATA, //搜索配置项 ruleForm formData
|
||||
visible: false,
|
||||
tableData: [],
|
||||
selectRow: {} //当前选择的row
|
||||
});
|
||||
const getCategoryList = async () => {
|
||||
const result = await getCategoryListApi(dataStore.ruleForm);
|
||||
if (result?.code === 0) {
|
||||
dataStore.tableData = result?.data;
|
||||
}
|
||||
};
|
||||
getCategoryList();
|
||||
//search reset
|
||||
const search = () => {
|
||||
getCategoryList();
|
||||
};
|
||||
const reset = () => {
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
getCategoryList();
|
||||
};
|
||||
|
||||
const handleSelectChangeEmits = (params: any) => {
|
||||
const { id } = params;
|
||||
dataStore.editRuleForm.pid = id;
|
||||
};
|
||||
|
||||
//分类下拉
|
||||
const getCategorys = async () => {
|
||||
const result = await getCategorysApi();
|
||||
if (result?.code === 0) {
|
||||
dataStore.editFormData[3].options = addLabelValue(result?.data);
|
||||
dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
|
||||
}
|
||||
};
|
||||
getCategorys();
|
||||
//抽屉确认
|
||||
const handleConfirmClick = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
@@ -156,7 +197,7 @@ const getCategoryUpdate = async () => {
|
||||
useMsg("success", result?.msg);
|
||||
dataStore.visible = false;
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
proTableRef?.value?.getTableList();
|
||||
getCategoryList();
|
||||
}
|
||||
};
|
||||
//详情
|
||||
@@ -173,7 +214,7 @@ const getCategorySave = async () => {
|
||||
useMsg("success", result?.msg);
|
||||
dataStore.visible = false;
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
proTableRef?.value?.getTableList();
|
||||
getCategoryList();
|
||||
}
|
||||
};
|
||||
//删除
|
||||
@@ -183,7 +224,7 @@ const getCategoryDel = (id: any) => {
|
||||
if (result?.code === 0) {
|
||||
const { msg } = result;
|
||||
useMsg("success", msg);
|
||||
proTableRef?.value?.getTableList();
|
||||
getCategoryList();
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -200,7 +241,7 @@ const getCategorySort = async (row: any) => {
|
||||
const result = await getCategorySortApi({ id: row.id, sort: row.sort });
|
||||
useMsg("success", result?.msg);
|
||||
if (result?.code === 0) {
|
||||
proTableRef?.value?.getTableList();
|
||||
getCategoryList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -27,9 +27,9 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
},
|
||||
|
||||
{
|
||||
prop: "category_id",
|
||||
prop: "category_id1",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
label: "下载分类: ",
|
||||
options: []
|
||||
},
|
||||
@@ -55,6 +55,22 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// prop: "is_show1",
|
||||
// placeholder: "",
|
||||
// type: "radio",
|
||||
// label: "是否启动: ",
|
||||
// options: [
|
||||
// {
|
||||
// label: "是",
|
||||
// value: 1
|
||||
// },
|
||||
// {
|
||||
// label: "否",
|
||||
// value: 0
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
prop: "image",
|
||||
type: "upImg",
|
||||
@@ -106,6 +122,8 @@ export const EDIT_TABLE_DATA = [
|
||||
file_ext: "" //文件格式
|
||||
}
|
||||
];
|
||||
export const EDIT_RULE_FORM = {};
|
||||
export const EDIT_RULE_FORM = {
|
||||
sort: 1
|
||||
};
|
||||
// editRuleForm: {},
|
||||
//editFormData: [],
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const RULES = {
|
||||
name: [{ required: true, message: "下载名称不能为空 ! ", trigger: "blur" }],
|
||||
category_id: [{ required: true, message: "下载分类不能为空 ! ", trigger: "blur" }],
|
||||
category_id1: [{ required: true, message: "下载分类不能为空 ! ", trigger: "blur" }],
|
||||
sort: [{ required: true, message: "下载排序不能为空 ! ", trigger: "blur" }]
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
interface FormItem {
|
||||
prop: string;
|
||||
prop1?: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type: string;
|
||||
@@ -25,9 +26,10 @@ export const FORM_DATA: FormItem[] = [
|
||||
},
|
||||
|
||||
{
|
||||
prop: "category_id",
|
||||
prop: "treeIds",
|
||||
prop1: "category_id",
|
||||
placeholder: "请选择",
|
||||
type: "select",
|
||||
type: "treeSelect",
|
||||
isArray: true,
|
||||
label: "下载分类: ",
|
||||
options: []
|
||||
|
||||
@@ -48,12 +48,12 @@ export const COLUMNS = [
|
||||
prop: "created_at"
|
||||
},
|
||||
|
||||
{
|
||||
align: "center",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80
|
||||
},
|
||||
// {
|
||||
// align: "center",
|
||||
// label: "状态",
|
||||
// prop: "status",
|
||||
// width: 80
|
||||
// },
|
||||
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 200 }
|
||||
];
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
:formData="dataStore.editFormData"
|
||||
:rules="dataStore.rules"
|
||||
ref="formRef"
|
||||
@handleSelectChangeEmits="handleSelectChangeEmits"
|
||||
>
|
||||
<el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleEditAdd">添加行</el-button>
|
||||
<FormTable :columns="dataStore.editColumns" :tableData="dataStore.editTableData" :height="200">
|
||||
@@ -58,6 +59,9 @@ import { useMsg } from "@/hooks/useMsg";
|
||||
import { Delete } from "@element-plus/icons-vue";
|
||||
const $route = useRoute();
|
||||
import { getCategorysApi } from "@/api/modules/downloadClass";
|
||||
import { recursiveCompare } from "@/utils/recursiveCompare";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
import { ElNotification } from "element-plus";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import {
|
||||
@@ -152,7 +156,6 @@ const excelUploadSuccess = (response: any, row: any) => {
|
||||
if (response?.code === 0) {
|
||||
row.file_path = response.data.path; // 假设后端返回的文件路径在 data.path 中
|
||||
}
|
||||
console.log(row, "====row========");
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件上传成功!`,
|
||||
@@ -218,6 +221,7 @@ const handleEditAdd = () => {
|
||||
file_ext: "" //文件格式
|
||||
});
|
||||
};
|
||||
|
||||
//详情
|
||||
const getAttachmentRead = async () => {
|
||||
let id = $route.query.id;
|
||||
@@ -228,24 +232,32 @@ const getAttachmentRead = async () => {
|
||||
if (result?.code === 0) {
|
||||
dataStore.editRuleForm = result?.data;
|
||||
dataStore.editTableData = result?.data.attach;
|
||||
//recursiveCompare
|
||||
let is = dataStore.editFormData[1].options.some((item: any) =>
|
||||
recursiveCompare(item, dataStore.editRuleForm.category_id)
|
||||
);
|
||||
console.log(is, "========is==========");
|
||||
// let is = dataStore.editFormData[1].options.some((item: any) => {
|
||||
// console.log(item.id);
|
||||
// console.log(dataStore.editRuleForm.category_id);
|
||||
// return item.value == dataStore.editRuleForm.category_id;
|
||||
// });
|
||||
dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
|
||||
}
|
||||
};
|
||||
getAttachmentRead();
|
||||
const handleSelectChangeEmits = (value: any) => {
|
||||
if (value.prop === "category_id1") {
|
||||
dataStore.editRuleForm.category_id = value.id;
|
||||
}
|
||||
};
|
||||
|
||||
//分类
|
||||
const getCategorys = async () => {
|
||||
const result = await getCategorysApi();
|
||||
const result = await getCategorysApi({ is_show: 1 });
|
||||
|
||||
if (result?.code === 0) {
|
||||
let arr: any[] = [];
|
||||
result?.data?.forEach((item: any) => {
|
||||
let obj = {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
};
|
||||
arr.push(obj);
|
||||
});
|
||||
dataStore.editFormData[1].options = arr;
|
||||
dataStore.editFormData[1].options = addLabelValue(result?.data);
|
||||
}
|
||||
};
|
||||
getCategorys();
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" effect="dark">{{
|
||||
scope.row.status === 1 ? "启用" : "禁用"
|
||||
<el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" effect="dark">{{
|
||||
scope.row.status == 1 ? "启用" : "禁用"
|
||||
}}</el-tag>
|
||||
</template>
|
||||
<template #sort="scope">
|
||||
@@ -40,6 +40,8 @@ import { getCategorysApi } from "@/api/modules/downloadClass";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
import { messageBox } from "@/utils/messageBox";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//表格和搜索條件 FORM_DATA
|
||||
@@ -49,7 +51,7 @@ const proTableRef = ref<any>(null);
|
||||
const $router = useRouter();
|
||||
|
||||
//图片地址
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
// 数据源
|
||||
const dataStore = reactive<any>({
|
||||
editTableData: cloneDeep(EDIT_TABLE_DATA), //添加|编辑里的表格数据
|
||||
@@ -150,20 +152,21 @@ const handleBlur = (row: any) => {
|
||||
const handleInput = (row: any) => {
|
||||
row.sort = integerRexg(row.sort);
|
||||
};
|
||||
|
||||
const getCategorys = async () => {
|
||||
const result = await getCategorysApi();
|
||||
|
||||
if (result?.code === 0) {
|
||||
let arr: any[] = [];
|
||||
result?.data?.forEach((item: any) => {
|
||||
let obj = {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
};
|
||||
arr.push(obj);
|
||||
});
|
||||
// let arr: any[] = [];
|
||||
// result?.data?.forEach((item: any) => {
|
||||
// let obj = {
|
||||
// value: item.id,
|
||||
// label: item.name
|
||||
// };
|
||||
// arr.push(obj);
|
||||
// });
|
||||
|
||||
dataStore.formData[1].options = arr;
|
||||
dataStore.formData[1].options = addLabelValue(result?.data);
|
||||
}
|
||||
};
|
||||
getCategorys();
|
||||
|
||||
@@ -49,12 +49,12 @@ export const COLUMNS = [
|
||||
prop: "created_at"
|
||||
},
|
||||
|
||||
{
|
||||
align: "center",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80
|
||||
},
|
||||
// {
|
||||
// align: "center",
|
||||
// label: "状态",
|
||||
// prop: "status",
|
||||
// width: 80
|
||||
// },
|
||||
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 200 }
|
||||
];
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:init-param="dataStore.initParam"
|
||||
>
|
||||
<template #image="scope">
|
||||
<el-image :src="h + scope.row.image" style="width: 60px; height: 60px" />
|
||||
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag type="danger" effect="dark">{{ scope.row.status ? "删除" : "删除" }}</el-tag>
|
||||
@@ -37,7 +37,7 @@ import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/index";
|
||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
|
||||
const proTableRef = ref<any>(null);
|
||||
//图片地址
|
||||
const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
|
||||
import { h } from "@/utils/url";
|
||||
// 数据源
|
||||
const dataStore = reactive<any>({
|
||||
columns: COLUMNS, //列表配置项
|
||||
@@ -47,7 +47,7 @@ const dataStore = reactive<any>({
|
||||
});
|
||||
//分类列表
|
||||
const getCategorys = async () => {
|
||||
const result = await getCategorysApi();
|
||||
const result = await getCategorysApi({ is_show: 0 });
|
||||
|
||||
if (result?.code === 0) {
|
||||
let arr: any[] = [];
|
||||
|
||||
@@ -40,7 +40,10 @@ const handleExport = () => {
|
||||
};
|
||||
//导出
|
||||
const getMenusLisExport = async () => {
|
||||
const result = await getAgentListExportApi(dataStore.ruleForm);
|
||||
const result = await getAgentListExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
const getAgentTypesList = async () => {
|
||||
|
||||
@@ -40,7 +40,10 @@ const handleExport = () => {
|
||||
};
|
||||
//导出
|
||||
const getMenusLisExport = async () => {
|
||||
const result = await getLeaveMsgListExportApi(dataStore.ruleForm);
|
||||
const result = await getLeaveMsgListExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
|
||||
<script setup lang="ts" name="feedbackProductIndex">
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
|
||||
// const $router = useRouter();
|
||||
//列表接口
|
||||
import { getProductListApi } from "@/api/modules/product";
|
||||
// import { getCountryListApi } from "@/api/modules/global";
|
||||
|
||||
// import { useUserStore } from "@/stores/modules/user";
|
||||
// const userStore: any = useUserStore();
|
||||
//深拷贝方法
|
||||
@@ -32,36 +32,15 @@ const dataStore = reactive<any>({
|
||||
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
|
||||
ruleForm: cloneDeep(RULE_FORM), // 搜索參數
|
||||
formData: FORM_DATA //搜索配置项
|
||||
// ZH: [],
|
||||
// EN: []
|
||||
});
|
||||
|
||||
// const getCountryList = async () => {
|
||||
// const result = await getCountryListApi();
|
||||
|
||||
// if (result?.code === 0) {
|
||||
// dataStore.ZH = [];
|
||||
// dataStore.EN = [];
|
||||
// result?.data.forEach((item: any) => {
|
||||
// dataStore.ZH.push({
|
||||
// label: item.name,
|
||||
// value: item.id
|
||||
// });
|
||||
// dataStore.EN.push({
|
||||
// label: item.name,
|
||||
// value: item.id
|
||||
// });
|
||||
// });
|
||||
// dataStore.formData[1].options = userStore.languageType === 1 ? dataStore.ZH : dataStore.EN;
|
||||
// }
|
||||
// };
|
||||
// getCountryList();
|
||||
// watch(
|
||||
// () => userStore.languageType,
|
||||
// (newVal: any) => {
|
||||
// dataStore.formData[1].options = newVal === 1 ? dataStore.ZH : dataStore.EN;
|
||||
// },
|
||||
// { deep: true, immediate: true }
|
||||
// console.log(newVal, "=======newVal=======");
|
||||
// // window.location.reload();
|
||||
// $router.go(0);
|
||||
// }
|
||||
// );
|
||||
</script>
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@
|
||||
<script setup lang="ts" name="feedbackContactIndex">
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { useExport } from "@/hooks/useExport";
|
||||
// import { useUserStore } from "@/stores/modules/user";
|
||||
// const userStore: any = useUserStore();
|
||||
//列表接口
|
||||
import { getBPListExportApi, getBPListApi, getBPInterestedListApi } from "@/api/modules/purchase";
|
||||
//深拷贝方法
|
||||
@@ -40,7 +42,10 @@ const handleExport = () => {
|
||||
};
|
||||
//导出
|
||||
const getBPListExport = async () => {
|
||||
const result = await getBPListExportApi(dataStore.ruleForm);
|
||||
const result = await getBPListExportApi({
|
||||
...proTableRef?.value?.searchParam,
|
||||
...proTableRef?.value?.pageable
|
||||
});
|
||||
await useExport(result);
|
||||
};
|
||||
//
|
||||
@@ -55,10 +60,18 @@ const getBPInterestedList = async () => {
|
||||
});
|
||||
});
|
||||
dataStore.formData[1].options = arr;
|
||||
console.log(result?.data, "=======data========");
|
||||
}
|
||||
};
|
||||
getBPInterestedList();
|
||||
// watch(
|
||||
// () => userStore.languageType,
|
||||
// (newVal: any) => {
|
||||
// console.log(newVal);
|
||||
|
||||
// getBPInterestedList();
|
||||
// },
|
||||
// { deep: true, immediate: true }
|
||||
// );
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -268,7 +268,7 @@ const setUserData = (data: any) => {
|
||||
const { username, uid, token, avatar } = data;
|
||||
console.log();
|
||||
// 设置token
|
||||
userStore.setToken(token);
|
||||
userStore.setToken("Bearer" + " " + token);
|
||||
userStore.setUid(uid);
|
||||
userStore.setNickname(username);
|
||||
userStore.setAvatar(avatar);
|
||||
|
||||
291
src/views/login/index2.vue
Normal file
291
src/views/login/index2.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="left-logo-box"></div>
|
||||
</div>
|
||||
<!-- 登录 -->
|
||||
<div class="right" v-if="dataStore.type === 1">
|
||||
<div class="right-logo-box">
|
||||
<div>
|
||||
<div class="right-logo-font">登录</div>
|
||||
<div class="sign-in">Sign in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 100px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="width: 300px"
|
||||
:model="dataStore.ruleForm"
|
||||
:rules="dataStore.rules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="dataStore.ruleForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 350px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #4178d5;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="handleTabClick(2)"
|
||||
>
|
||||
忘记密码?
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="captcha">
|
||||
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="submitForm"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--忘记密码 -->
|
||||
<div class="right" v-if="dataStore.type === 2">
|
||||
<div style="margin-left: 100px">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="ArrowLeftBold"
|
||||
circle
|
||||
style="margin: 60px 0 20px"
|
||||
@click="handleTabClick(1)"
|
||||
/>
|
||||
<el-form
|
||||
ref="resetRuleFormRef"
|
||||
:model="dataStore.resetRuleForm"
|
||||
:rules="dataStore.resetRules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="手机号" prop="iphone">
|
||||
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码">
|
||||
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
||||
<template #append>
|
||||
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
||||
{{ dataStore.codeFont }}
|
||||
</div>
|
||||
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
||||
{{ dataStore.timeCount }}s
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.confirmPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="resetConfirmForm"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import CryptoJS from "crypto-js";
|
||||
//loginCodeImgApi
|
||||
import { loginApi } from "@/api/modules/login";
|
||||
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
||||
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//用户信息存储
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const $router = useRouter();
|
||||
//登录表单Ref
|
||||
const ruleFormRef: any = ref(null);
|
||||
//修改密码表单Ref
|
||||
const resetRuleFormRef: any = ref(null);
|
||||
//数据源
|
||||
const dataStore = reactive<any>({
|
||||
timeCount: 120, //修改密码里验证码倒计时
|
||||
isShowTime: false,
|
||||
|
||||
base64: "", //验证码图片
|
||||
type: 1, //1:登录,2:修改密码
|
||||
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
||||
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
||||
rules: cloneDeep(RULES), //登录表单验证
|
||||
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
||||
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
||||
});
|
||||
//计时器
|
||||
let intervalId: any = null;
|
||||
|
||||
//登录
|
||||
const submitForm = () => {
|
||||
console.log(ruleFormRef);
|
||||
if (!ruleFormRef) return;
|
||||
ruleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
login();
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//忘记密码提交事件
|
||||
const resetConfirmForm = () => {
|
||||
if (!resetRuleFormRef) return;
|
||||
resetRuleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
||||
console.log(password, "==== dataStore.ruleForm.password====");
|
||||
console.log("submit!");
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//登录接口
|
||||
const login = async () => {
|
||||
const result: any = await loginApi({
|
||||
...dataStore.ruleForm,
|
||||
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
||||
});
|
||||
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
setUserData(data);
|
||||
}
|
||||
// else {
|
||||
// getLoginCodeImg();
|
||||
// }
|
||||
};
|
||||
//获取验证码图片接口
|
||||
// const getLoginCodeImg = async () => {
|
||||
// const result: any = await loginCodeImgApi();
|
||||
// if (result?.code === 0) {
|
||||
// const { data } = result;
|
||||
// const { captcha, token } = data;
|
||||
// dataStore.base64 = captcha;
|
||||
// dataStore.ruleForm.token = token;
|
||||
// }
|
||||
// };
|
||||
// getLoginCodeImg();
|
||||
//登录和密码重置切换
|
||||
const handleTabClick = (type: any) => {
|
||||
dataStore.type = type;
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
for (let key in dataStore.resetRuleForm) {
|
||||
dataStore.resetRuleForm[key] = "";
|
||||
}
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
};
|
||||
//120秒验证时间
|
||||
const updateCountdown = () => {
|
||||
intervalId = setInterval(() => {
|
||||
if (dataStore.timeCount > 0) {
|
||||
dataStore.isShowTime = true;
|
||||
dataStore.timeCount--;
|
||||
} else {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
//获取验证码
|
||||
const handleGetCode = () => {
|
||||
//如果计时器已经启动了,就不要再去触发了
|
||||
if (intervalId) {
|
||||
return;
|
||||
}
|
||||
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
||||
if (valid) {
|
||||
updateCountdown();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
//清理定时器
|
||||
const handleClearInterval = () => {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
};
|
||||
|
||||
// 设置用户数据
|
||||
const setUserData = (data: any) => {
|
||||
const { username, uid, token, avatar } = data;
|
||||
console.log();
|
||||
// 设置token
|
||||
userStore.setToken("Bearer" + " " + token);
|
||||
userStore.setUid(uid);
|
||||
userStore.setNickname(username);
|
||||
userStore.setAvatar(avatar);
|
||||
// await userStore.getAuthMenuList();
|
||||
//跳转到首页
|
||||
setTimeout(() => {
|
||||
$router.push("/admin/index");
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
//页面卸载的时候清空定时器
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -105,6 +105,10 @@ const getProductAttrUp = async () => {
|
||||
if (obj.prop_name) {
|
||||
dataStore.editRuleForm.props.push(obj);
|
||||
}
|
||||
|
||||
let dataClone = cloneDeep(dataStore.editRuleForm.props);
|
||||
let props = JSON.stringify([...dataClone]);
|
||||
dataStore.editRuleForm.props = props;
|
||||
const result = await getProductAttrUpApi(dataStore.editRuleForm);
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
|
||||
@@ -8,13 +8,8 @@
|
||||
:formData="dataStore.searchFormData"
|
||||
:search-param="dataStore.searchParam"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataStore.tableData"
|
||||
style="width: 100%; margin-bottom: 20px; font-size: 14px"
|
||||
row-key="id"
|
||||
border
|
||||
default-expand-all
|
||||
>
|
||||
<!-- default-expand-all -->
|
||||
<el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
|
||||
<el-table-column prop="id" label="id" />
|
||||
<el-table-column prop="name" label="分类名称" />
|
||||
<el-table-column prop="sort" label="分类排序">
|
||||
@@ -26,7 +21,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="is_show" label="是否显示">
|
||||
<template #default="{ row }">
|
||||
{{ row.is_show === 1 ? "✔️" : "❌" }}
|
||||
{{ row.is_show == 1 ? "✔️" : "❌" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" :width="350">
|
||||
@@ -100,7 +95,7 @@ import {
|
||||
getArticleCategorySortApi,
|
||||
getProductClassTcoTreeApi
|
||||
} from "@/api/modules/productClass";
|
||||
import { addLabelValue } from "../list/utils/common/addLabelValue";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
|
||||
@@ -154,7 +149,9 @@ const getArticleCategorySave = async (params: any) => {
|
||||
};
|
||||
|
||||
const handleSelectChangeEmits = (value: any) => {
|
||||
if (value.prop === "pid") {
|
||||
dataStore.ruleForm.pid = value.id;
|
||||
}
|
||||
};
|
||||
const handleTreesSelectChangeEmits = (value: any) => {
|
||||
console.log(value, "=========value=========");
|
||||
@@ -204,12 +201,12 @@ const reset = () => {
|
||||
};
|
||||
//重置表单配置
|
||||
const resetFrom = () => {
|
||||
if (dataStore.selectLevel === 1 || dataStore.selectLevel === 2) {
|
||||
if (dataStore.selectLevel == 1 || dataStore.selectLevel == 2) {
|
||||
dataStore.ruleForm = cloneDeep(RULE_FORM_LV1);
|
||||
dataStore.formData = cloneDeep(FORM_DATA_LV1);
|
||||
dataStore.rules = RULES_LV1;
|
||||
}
|
||||
if (dataStore.selectLevel === 3) {
|
||||
if (dataStore.selectLevel == 3) {
|
||||
dataStore.ruleForm = cloneDeep(RULE_FORM_LV2);
|
||||
dataStore.formData = cloneDeep(FORM_DATA_LV2);
|
||||
dataStore.rules = RULES_LV2;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user