提交 2649e5ad 作者: 龚洪江

Merge branch 'master' into develop

......@@ -30,7 +30,7 @@ pnpm-debug.log*
pnpm-lock.yaml*
yarn-lock.yaml*
package-lock.yaml*
#package-lock.json
#yarn.lock
#package-lock.json*
#yarn.lock*
tsconfig.tsbuildinfo*
......@@ -26,11 +26,11 @@
"query-string": "^8.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.10.0",
"react-viewer": "^3.2.2",
"sort-by": "^1.2.0",
"wangeditor": "^4.7.15",
"xlsx": "^0.18.5"
},
"devDependencies": {
......@@ -611,7 +611,6 @@
"version": "7.18.3",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
"integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"core-js-pure": "^3.20.2",
......@@ -625,7 +624,6 @@
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true,
"license": "MIT"
},
"node_modules/@babel/template": {
......@@ -1075,14 +1073,6 @@
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"license": "MIT"
},
"node_modules/@types/quill": {
"version": "1.3.10",
"resolved": "https://registry.npmmirror.com/@types/quill/-/quill-1.3.10.tgz",
"integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
"dependencies": {
"parchment": "^1.1.2"
}
},
"node_modules/@types/react": {
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
......@@ -1886,14 +1876,6 @@
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
"license": "MIT"
},
"node_modules/clone": {
"version": "2.1.2",
"resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
"engines": {
"node": ">=0.8"
}
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
......@@ -1971,7 +1953,6 @@
"version": "3.22.7",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.7.tgz",
"integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"funding": {
......@@ -2052,19 +2033,6 @@
"node": ">=14.16"
}
},
"node_modules/deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"dependencies": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
"is-regex": "^1.0.4",
"object-is": "^1.0.1",
"object-keys": "^1.1.1",
"regexp.prototype.flags": "^1.2.0"
}
},
"node_modules/deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
......@@ -2076,6 +2044,7 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-property-descriptors": "^1.0.0",
......@@ -2712,11 +2681,6 @@
"node": ">=0.10.0"
}
},
"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/events": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
......@@ -2725,11 +2689,6 @@
"node": ">=0.8.x"
}
},
"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/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
......@@ -2949,6 +2908,7 @@
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
......@@ -3115,6 +3075,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"get-intrinsic": "^1.1.1"
......@@ -3139,6 +3100,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-symbols": "^1.0.2"
......@@ -3252,18 +3214,6 @@
"node": ">= 0.4"
}
},
"node_modules/is-arguments": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
"dependencies": {
"call-bind": "^1.0.2",
"has-tostringtag": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/is-bigint": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
......@@ -3337,6 +3287,7 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-tostringtag": "^1.0.0"
......@@ -3414,6 +3365,7 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind": "^1.0.2",
......@@ -3842,22 +3794,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/object-is": {
"version": "1.1.5",
"resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.5.tgz",
"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
"dependencies": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
......@@ -4020,11 +3961,6 @@
"node": ">=4"
}
},
"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/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
......@@ -4269,37 +4205,6 @@
],
"license": "MIT"
},
"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/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/quill-delta/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/rc-align": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.15.tgz",
......@@ -4968,20 +4873,6 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/react-quill": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/react-quill/-/react-quill-2.0.0.tgz",
"integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
"dependencies": {
"@types/quill": "^1.3.10",
"lodash": "^4.17.4",
"quill": "^1.3.7"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/react-redux": {
"version": "8.0.7",
"resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.7.tgz",
......@@ -5159,6 +5050,7 @@
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind": "^1.0.2",
......@@ -5819,6 +5711,21 @@
"strip-bom": "^3.0.0"
}
},
"node_modules/wangeditor": {
"version": "4.7.15",
"resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
"integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
"dependencies": {
"@babel/runtime": "^7.11.2",
"@babel/runtime-corejs3": "^7.11.2",
"tslib": "^2.1.0"
}
},
"node_modules/wangeditor/node_modules/tslib": {
"version": "2.5.3",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz",
"integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
......@@ -6301,7 +6208,6 @@
"version": "7.18.3",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
"integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
"dev": true,
"requires": {
"core-js-pure": "^3.20.2",
"regenerator-runtime": "^0.13.4"
......@@ -6310,8 +6216,7 @@
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
}
}
},
......@@ -6627,14 +6532,6 @@
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/quill": {
"version": "1.3.10",
"resolved": "https://registry.npmmirror.com/@types/quill/-/quill-1.3.10.tgz",
"integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
"requires": {
"parchment": "^1.1.2"
}
},
"@types/react": {
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
......@@ -7160,11 +7057,6 @@
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
},
"codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
......@@ -7224,8 +7116,7 @@
"core-js-pure": {
"version": "3.22.7",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.7.tgz",
"integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w==",
"dev": true
"integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w=="
},
"crc-32": {
"version": "1.2.2",
......@@ -7273,19 +7164,6 @@
"resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
"integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="
},
"deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
"is-regex": "^1.0.4",
"object-is": "^1.0.1",
"object-keys": "^1.1.1",
"regexp.prototype.flags": "^1.2.0"
}
},
"deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
......@@ -7296,6 +7174,7 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
"dev": true,
"requires": {
"has-property-descriptors": "^1.0.0",
"object-keys": "^1.1.1"
......@@ -7763,21 +7642,11 @@
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
"dev": true
},
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
},
"events": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
},
"extend": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
......@@ -7929,7 +7798,8 @@
"functions-have-names": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
"dev": true
},
"gensync": {
"version": "1.0.0-beta.2",
......@@ -8039,6 +7909,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
"dev": true,
"requires": {
"get-intrinsic": "^1.1.1"
}
......@@ -8052,6 +7923,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
"dev": true,
"requires": {
"has-symbols": "^1.0.2"
}
......@@ -8129,15 +8001,6 @@
"side-channel": "^1.0.4"
}
},
"is-arguments": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
"requires": {
"call-bind": "^1.0.2",
"has-tostringtag": "^1.0.0"
}
},
"is-bigint": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
......@@ -8185,6 +8048,7 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
"dev": true,
"requires": {
"has-tostringtag": "^1.0.0"
}
......@@ -8229,6 +8093,7 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/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"
......@@ -8520,19 +8385,11 @@
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
},
"object-is": {
"version": "1.1.5",
"resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.5.tgz",
"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
"requires": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
}
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true
},
"object-path": {
"version": "0.6.0",
......@@ -8641,11 +8498,6 @@
"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
"dev": true
},
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
......@@ -8786,36 +8638,6 @@
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true
},
"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"
}
},
"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"
},
"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=="
}
}
},
"rc-align": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.15.tgz",
......@@ -9242,16 +9064,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-quill": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/react-quill/-/react-quill-2.0.0.tgz",
"integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
"requires": {
"@types/quill": "^1.3.10",
"lodash": "^4.17.4",
"quill": "^1.3.7"
}
},
"react-redux": {
"version": "8.0.7",
"resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.7.tgz",
......@@ -9365,6 +9177,7 @@
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
"dev": true,
"requires": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3",
......@@ -9783,6 +9596,23 @@
}
}
},
"wangeditor": {
"version": "4.7.15",
"resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
"integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
"requires": {
"@babel/runtime": "^7.11.2",
"@babel/runtime-corejs3": "^7.11.2",
"tslib": "^2.1.0"
},
"dependencies": {
"tslib": {
"version": "2.5.3",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz",
"integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
}
}
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
......
......@@ -32,11 +32,11 @@
"query-string": "^8.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.10.0",
"react-viewer": "^3.2.2",
"sort-by": "^1.2.0",
"wangeditor": "^4.7.15",
"xlsx": "^0.18.5"
},
"devDependencies": {
......
......@@ -9,6 +9,7 @@ import { MakeManageAPI } from './modules/makeManage';
import { CategoryManageAPI } from './modules/categoryManage';
import { SystemManageAPI } from './modules/systemManage';
import { CustomManageAPI } from './modules/customManage';
import { MallManageAPI } from './modules/mallManage';
export {
CommonAPI,
......@@ -22,4 +23,5 @@ export {
CategoryManageAPI,
SystemManageAPI,
CustomManageAPI,
MallManageAPI,
};
......@@ -48,6 +48,15 @@ export type categoryListType = InterItemFunction<
{ directoryId?: number; type?: number },
categoryReposeType[]
>;
//目录列表类型-分页
export type directoryPageListType = InterItemFunction<
{ type?: number },
{
id: number;
directoryName: string;
type: number;
}[]
>;
//目录列表类型-不分页
export type directoryListType = InterFunction<
{ type: number },
......
......@@ -14,4 +14,4 @@ export type BackEndLoginType = InterFunction<
}
>;
// 上传图片
export type uploadOssType = InterFunction<any, NonNullable<unknown>>;
export type uploadOssType = InterFunction<any, { filePath: string }>;
import { InterListFunction } from '~/api/interface';
import { InterFunction, InterListFunction } from '~/api/interface';
// 客户列表
export type listAppUserType = InterListFunction<
......@@ -26,8 +26,52 @@ export type listAppUserType = InterListFunction<
portType: number;
createTime: string;
companyAuthStatus: number;
cooperationTagId: null;
cooperationTagId: number;
companyName: null;
tagName: null;
}
>;
// 加盟标签列表
export type CompanyListTag = InterFunction<
NonNullable<unknown>,
{
id: number;
tagName: string;
tagImg: null;
tagDescription: string;
createTime: string;
}[]
>;
// 修改用户信息
export type userAccountUpdateType = InterFunction<
{
accountNo?: string;
accountStatus?: number;
accountType?: number;
companyAuthStatus?: number;
companyName?: string;
cooperationTagId?: number;
createTime?: string;
email?: string;
id: number;
nickName?: string;
phoneNum?: string;
portType?: number;
remark?: string;
source?: number;
tagName?: string;
uid?: string;
userImg?: string;
userName?: string;
userSex?: number;
},
NonNullable<unknown>
>;
// 后台设置小程序用户标签
export type changeUserTagType = InterFunction<
{
cooperationTagId: number;
userAccountId: number;
},
NonNullable<unknown>
>;
import { UploadFile } from 'antd/es/upload/interface';
// 商城-新增商品
import { InterFunction, InterItemFunction } from '~/api/interface';
//商品列表
export type listGoodsType = InterItemFunction<
{
directoryId?: number;
goodsName?: string;
goodsType: number;
status?: number;
startTime?: string;
endTime?: string;
},
{
createTime: string;
directoryId: number;
directoryName: string;
goodsDesc: string;
goodsName: string;
imgUrl: string;
isCoupons: number;
status: number;
}[]
>;
//商品-新增
export type BaseInfoType = {
goodsName: string;
goodsDesc: string;
directoryId: number;
tag: string;
shelfStatus: number;
categoryByOne: number;
categoryByTwo: number;
images: { id: number; imgType: number; imgUrl: string }[];
goodsVideo: string;
};
// 库存规格
export interface specEntity {
id: number;
categoryId: number | string;
goodsSpecName: string;
skuId: number;
specIds: any;
chooseType: number;
must: number;
skuUnitId: number;
customizeInfo?: customizeEntity[];
productSpecList?: customizeEntity[];
industrySpecList?: any;
isCustomProd: boolean;
skuName?: string;
flag: number;
productName?: string;
}
// 自定义规格
export interface customizeEntity {
id: number;
partNo: string;
specName: string;
specImage?: string;
fileList?: UploadFile[];
productSpecCPQVO?: any;
productSpec?: number;
}
export type addGoodsType = InterFunction<
BaseInfoType & {
productSpec: specEntity[];
goodsDetailVO: { goodsDesc: string; productDesc?: string };
otherService: number[];
},
any
>;
//商品-编辑
export type editGoodsType = InterFunction<
BaseInfoType & {
productSpec: specEntity[];
goodsDetailVO: { goodsDesc: string; productDesc?: string };
otherService: number[];
id: number;
},
any
>;
//商品-详情
export type detailGoodsType = InterFunction<
{ goodsInfoId: number; type: number; leaseTerm?: number },
BaseInfoType & {
goodsSpec: specEntity[];
goodsDetail: { goodsDesc: string; productDesc: string; content: string };
otherService: { id: number; saleServiceName: string; saleServiceId: number }[];
goodsVideoId: number;
id: number;
}
>;
//商品-其它服务列表
export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
//商品-规格单位
export type skuUnitType = InterFunction<any, { id: number; unitName: string }[]>;
//商品-批量上下架
export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; status: number }, any>;
//商品批量删除
export type batchRemoveWareInfoType = InterFunction<number[], any>;
import { InterFunction, InterListFunction } from '~/api/interface';
// V1.0.1课程视频列表
export type queryCurriculumInfoListType = InterListFunction<
{
curriculumName?: string;
flightSkillsId?: number;
licenseId?: number;
regionId?: number;
},
{
curriculumDesc: string;
curriculumName: string;
detailContent: null;
flightSkills: number;
flightSkillsName1: string;
flightSkillsName2: string;
free: number;
id: number;
price: null;
supplierName: string;
surfaceUrl: null;
videoUrl: string;
}
>;
// V1.0.1新增课程
export type addCurriculumType = InterFunction<
{
curriculumDesc?: string;
curriculumName?: string;
detailContent?: string;
flightSkills?: number;
flightSkillsName1?: string;
flightSkillsName2?: string;
free?: number;
id?: number | null;
price?: number;
supplierName?: string;
surfaceUrl?: string;
videoUrl?: string;
},
NonNullable<unknown>
>;
// V1.0.1修改课程
export type updateCurriculumType = InterFunction<
{
curriculumDesc?: string;
curriculumName?: string;
detailContent?: string;
flightSkills?: number;
flightSkillsName1?: string;
flightSkillsName2?: string;
free?: number;
id: number | null;
price?: number;
supplierName?: string;
surfaceUrl?: string;
videoUrl?: string;
},
NonNullable<unknown>
>;
// V1.0.1课程技能列表
export type treeCurriculumSkillType = InterFunction<
NonNullable<unknown>,
{
id: number;
skillsName: string;
flightSkills: Array<{
id: number;
skillsName: string;
flightSkills: null;
}>;
}[]
>;
// V1.0.1删除课程
export type removeCurriculumType = InterFunction<{ id: number }, NonNullable<unknown>>;
......@@ -361,19 +361,19 @@ export type renterTakeOrderType = InterFunction<
// 后台管理——平台确认归还
export type pfConfirmOrderWareType = InterFunction<
{
authPwd: string;
imgs: Array<string>;
orderInfoId: number;
orderRefundId: number;
remark: string;
renAddress: string;
renName: string;
renPhone: string;
sendAddress: string;
sendExCode: string;
sendExNo: string;
vcuSatus: number;
videoUrl: string;
authPwd?: string;
imgs?: Array<string>;
orderInfoId?: number;
orderRefundId?: number;
remark?: string;
renAddress?: string;
renName?: string;
renPhone?: string;
sendAddress?: string;
sendExCode?: string;
sendExNo?: string;
vcuSatus?: number;
videoUrl?: string;
},
NonNullable<unknown>
>;
......
import axios from '../request';
import { categoryListType, directoryListType, GoodsInfo } from '~/api/interface/categoryManage';
import {
categoryListType,
directoryListType,
directoryPageListType,
GoodsInfo,
} from '~/api/interface/categoryManage';
export class CategoryManageAPI {
// 分类目录
......@@ -9,17 +14,15 @@ export class CategoryManageAPI {
});
};
// 分类目录(类型)
static getDirectoryListClone: directoryListType = (params) => {
return axios.get('/pms/classify/getDirectoryList', { params });
};
//目录列表不含分页
static getDirectoryList = (params: { type: number }) => {
return axios.get('pms/classify/getDirectoryList', {
static directoryListClone: directoryPageListType = (params) => {
return axios.get('pms/classify/directoryList', {
params,
});
};
// 分类目录-不分页(类型)
static getDirectoryListClone: directoryListType = (params) => {
return axios.get('/pms/classify/getDirectoryList', { params });
};
// 新增或编辑目录
static addOrEditDirectory = (
data: { id?: number; directoryName: string; type: number; relevance: number }[],
......
import axios from '../request';
import { listAppUserType } from '~/api/interface/customManageType';
import {
changeUserTagType,
CompanyListTag,
listAppUserType,
userAccountUpdateType,
} from '~/api/interface/customManageType';
export class CustomManageAPI {
// 客户列表
static listAppUser: listAppUserType = (params) =>
axios.post('/userapp/user-account/listAppUser', params);
// 加盟列表
static CompanyListTag: CompanyListTag = (params) =>
axios.get('/userapp/cooperation/listTag', { params });
// 客户列表
static userAccountUpdate: userAccountUpdateType = (params) =>
axios.post('/userapp/user-account/update', params);
// 后台设置小程序用户标签
static changeUserTag: changeUserTagType = (params) =>
axios.get('/userapp/cooperation/changeUserTag', { params });
}
import {
addGoodsType,
batchOnShelfOrTakeDownType,
batchRemoveWareInfoType,
detailGoodsType,
editGoodsType,
listGoodsType,
otherServiceType,
skuUnitType,
} from '~/api/interface/goodsType';
import axios from '../request';
class GoodsAPI {
//商品-列表
static getGoodsList: listGoodsType = (data) => {
return axios.post('/pms/goods/listPageGoodsInfo', data);
};
//商品-新增
static addGoods: addGoodsType = (data) => {
return axios.post('/pms/goods/addGoodsInfo', data);
};
//商品-编辑
static editGoods: editGoodsType = (data) => {
return axios.post('/pms/goods/editGoodsInfo', data);
};
//商品-详情
static getGoodsDetail: detailGoodsType = (params) => {
return axios.get('/pms/goods/getGoodsInfoDetail', { params });
};
// 商品-单位
static getSkuUnit: skuUnitType = () => {
return axios.get('/pms/goods/getSkuUnit');
};
// 商品-其它服务列表
static getOtherServiceList: otherServiceType = () => {
return axios.get('/pms/goods/listOtherService');
};
// 商品-批量上下架
static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) => {
return axios.post('/pms/goods/batchOnShelfOrTakeDown', data);
};
// 商品-批量删除
static batchRemoveWareInfo: batchRemoveWareInfoType = (data) => {
return axios.post('/pms/goods/batchRemoveWareInfo', data);
};
}
export default GoodsAPI;
import axios from '~/api/request';
import {
addCurriculumType,
queryCurriculumInfoListType,
removeCurriculumType,
treeCurriculumSkillType,
updateCurriculumType,
} from '~/api/interface/mallManageType';
export class MallManageAPI {
// V1.0.1课程视频列表
static queryCurriculumInfoList: queryCurriculumInfoListType = (params) =>
axios.post('/release/curriculum/queryCurriculumInfoList', params);
// V1.0.1新增课程
static addCurriculum: addCurriculumType = (params) =>
axios.post('/release/curriculum/addCurriculum', params);
// V1.0.1修改课程
static updateCurriculum: updateCurriculumType = (params) =>
axios.post('/release/curriculum/updateCurriculum', params);
// V1.0.1课程技能列表
static treeCurriculumSkill: treeCurriculumSkillType = (params) =>
axios.get('/release/curriculum/treeCurriculumSkill', { params });
// V1.0.1删除课程
static removeCurriculum: removeCurriculumType = (params) =>
axios.get('/release/curriculum/removeCurriculum', { params });
}
......@@ -14,7 +14,6 @@ import {
ProductSpecListType,
productSpecPriceType,
} from '~/api/interface/produceManageType';
import dayjs from 'dayjs';
export class ProduceManageAPI {
// 产品管理-分页列表
......
......@@ -18,7 +18,7 @@ export class SystemManageAPI {
// 账号-删除
static removeBAccount: removeBAccountType = (params) =>
axios.post('/userapp/back-user/removeBAccount', params);
axios.get('/userapp/back-user/removeBAccount', { params });
// 账号-修改
static updateBAccount: updateBAccountType = (params) =>
......
......@@ -35,7 +35,7 @@ service.interceptors.response.use(
return Promise.resolve(data);
}
// 重新登录?
if (['605', '603', '602', '4004', '607', '2014', '2013'].includes(data.code)) {
if (['605', '603', '602', '4004', '607', '2014', '2013', '5008'].includes(data.code)) {
message.error(data.message).then();
Cookies.remove('SHAREFLY-TOKEN');
setTimeout(() => {
......
import { Form, InputNumber, Input } from 'antd';
import React from 'react';
// 表格可编辑单元格
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text';
record: any;
index: number;
children: React.ReactNode;
}
const EditableCell: React.FC<EditableCellProps> = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
const inputNode =
inputType === 'number' ? <InputNumber /> : <Input placeholder={`请输入${title}`} />;
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex + record.id}
style={{ margin: 0 }}
rules={[
{
required: true,
message: `请输入${title}`,
},
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
export default EditableCell;
import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, Radio, Button, Table, message, ModalProps } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import EditableCell from '~/components/EditableCell';
import { InterDataType } from '~/api/interface';
import { categoryListType } from '~/api/interface/categoryManage';
import { ProduceManageAPI } from '~/api';
import {
cooperationTagType,
productListType,
ProductSpecListType,
} from '~/api/interface/produceManageType';
import { customizeEntity, skuUnitType, specEntity } from '~/api/interface/goodsType';
import { Uploader } from '~/components/uploader';
import ConfigurePriceModal from '../configurePriceModal';
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//产品返回类型
type productType = InterDataType<productListType>['list'];
//产品-规格返回类型
type productSpecType = InterDataType<ProductSpecListType>['list'];
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
//加盟标签返回类型
type cooperationTagResponseType = InterDataType<cooperationTagType>;
interface selfProps {
handleCancel: () => void;
handleOk: (data: specEntity) => void;
currentDesc: number;
categoryList: categoryType;
curtRowData: Partial<specEntity>;
skuUnitList: unitType;
goodsType: number;
}
// interface tableRowEntity {
// goodsTypeId: number;
// prodOrScheme: any;
// selectSource: any;
// skuUnit: any;
// }
const AddOrEditSkuModal: React.FC<ModalProps & selfProps> = ({
open,
handleCancel,
handleOk,
currentDesc,
categoryList,
curtRowData,
skuUnitList,
goodsType,
}) => {
// 弹窗标题
const [dialogTitle, setDialogTitle] = useState<string>('添加');
// 规格表单
const [skuForm] = Form.useForm<any>();
// 自定义产品表单
const [selfProduct] = Form.useForm<any>();
// 是否自定义产品类型
const [isCustomProd, setIsCustomProd] = useState<boolean>(false);
//产品列表
const [productList, setProductList] = useState<productType>([]);
//产品规格列表
const [productSpecList, setProductSpecList] = useState<productSpecType>([]);
// 配置价格弹窗
const [configurePriceModalShow, setConfigurePriceModalShow] = useState<boolean>(false);
const [customRowData, setCustomRowData] = useState<Partial<customizeEntity>>({
id: -1,
productSpecCPQVO: {},
});
const [selfProductData, setSelfProductData] = useState<customizeEntity[]>([
{
id: 1,
specName: '',
partNo: '',
specImage: '',
fileList: [],
productSpecCPQVO: {},
},
]);
// 等级标签列表
const [tagInfoList, setTagInfoList] = useState<cooperationTagResponseType>([]);
// 自定义id数组
const [selfIds, setSelfIds] = useState<number[]>([]);
// 自定义选项表格
const selfSelectColumns = [
{
title: '选项名称',
align: 'center',
dataIndex: 'specName',
editable: true,
},
{
title: '料号',
align: 'center',
dataIndex: 'partNo',
editable: true,
},
{
title: '操作',
align: 'center',
width: '220px',
ellipsis: true,
render: (_text: string, record: any, i: number) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Uploader
fileUpload
listType='picture-card'
onChange={(fileList) => selfUploadSuccess(fileList, record, i)}
defaultFileList={record.fileList}
>
<UploadOutlined />
</Uploader>
<Button size='small' type='link' onClick={() => configurePriceEvent(record)}>
配置价格
</Button>
{i != 0 ? (
<Button
className='delete'
size='small'
type='link'
onClick={() => deleteSelfProduct(record)}
>
删除
</Button>
) : (
''
)}
</div>
);
},
},
];
const mergedColumns = selfSelectColumns.map((col: any) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: any) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: true,
}),
};
});
// // 根据产品类型获取产品列表
const handleProdTypeSelect = (id: number) => {
getProductList(id);
// skuForm.setFieldsValue({
// skuId: undefined,
// specIds: undefined,
// });
// getProduct(id);
};
//
// // 根据所属行业获取方案列表
// const handleIndeTypeSelect = async (id: number) => {
// getIndustrySku(id);
// skuForm.setFieldsValue({
// skuId: undefined,
// specIds: undefined,
// });
// };
//
// 根据选择产品或行业获取选项来源列表
const handleProdOrInduSelected = (id: number) => {
getProductSpecList(id);
};
// // 选项来源选中
// const handleSourceSelect = (id: number | string) => {
// const values: any[] = skuForm.getFieldValue('specIds');
// const obj = optionSource.find((v: sourceEntity) => v.id === id);
// if (!obj?.priceList) {
// message.warning('所选规格来源未配置好价格,请配置好SKU价格后重新选择!');
// const index: number = values.findIndex((i: number) => i === id);
// values.splice(index, 1);
// }
// skuForm.setFieldValue('specIds', values);
// };
// // 规格来源切换
const skuSourceRadioChange = (e: RadioChangeEvent) => {
setIsCustomProd(e.target.value === 1);
};
// // 清除表单
// const onCancel = () => {
// // 关闭前恢复初始值
// skuForm.resetFields();
// selfProduct.resetFields();
// setSelfProductData([
// {
// id: 1,
// specName: '',
// partNo: '',
// specImage: '',
// fileList: [],
// productSpecCPQVO: {},
// },
// ]);
// setCustomRowData({
// id: -1,
// productSpecCPQVO: {},
// });
// setIsCustomProd(false);
// handleCancel();
// };
//获取产品列表
const getProductList = (categoryId: number) => {
ProduceManageAPI.listPageProductSku({ pageNo: 1, pageSize: 9999, categoryId }).then(
({ result }) => {
setProductList(result.list || []);
},
);
};
//产品-规格
const getProductSpecList = (productSkuId: number) => {
ProduceManageAPI.listPageProductSpec({ pageNo: 1, pageSize: 9999, productSkuId }).then(
({ result }) => {
setProductSpecList(result.list || []);
if (result.list) {
const ids: number[] = result.list.reduce((pre: number[], cur) => {
// return cur.priceList ? [...pre, cur.id] : pre;
return [...pre, cur.id];
}, []);
skuForm.setFieldValue('specIds', ids);
}
},
);
};
// 添加自定义产品项
const addSelfSelectItem = () => {
setSelfProductData([
...selfProductData,
{
id: selfProductData.length + 1,
specName: '',
partNo: '',
specImage: '',
fileList: [],
productSpecCPQVO: {},
},
]);
};
// 删除自定义产品
const deleteSelfProduct = (record: customizeEntity) => {
const cusObj: customizeEntity | undefined =
curtRowData.customizeInfo &&
curtRowData.customizeInfo.find((i: customizeEntity) => i.id === record.id);
if (cusObj) {
setSelfIds([...selfIds, cusObj.id]);
}
const index: number = selfProductData.findIndex((item: any) => item.id === record.id);
selfProductData.splice(index, 1);
setSelfProductData([...selfProductData]);
};
//自定义商品上传成功
const selfUploadSuccess = (
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
record: any,
index: number,
) => {
record.fileList = [
{
uid: `${Math.random()}`,
status: 'done',
url: fileList[0].url,
name: fileList[0].name,
},
];
record.specImage = fileList[0].url;
selfProductData.splice(index, 1, record);
setSelfProductData([...selfProductData]);
};
// 配置价格操作
const configurePriceEvent = (record: customizeEntity) => {
getTagNameList();
setConfigurePriceModalShow(true);
setCustomRowData({ ...record });
};
const configurePriceHandleOk = (specPrice: any, leaseTerm?: number) => {
setConfigurePriceModalShow(false);
const index: number = selfProductData.findIndex(
(i: customizeEntity) => i.id === customRowData.id,
);
selfProductData[index].productSpecCPQVO = {
productSpecId: selfProductData[index].productSpecCPQVO.productSpecId || undefined,
specPrice,
type: goodsType,
leaseTerm,
};
selfProductData.splice(index, 1, selfProductData[index]);
setSelfProductData([...selfProductData]);
};
const configurePriceHandleCancel = () => {
setConfigurePriceModalShow(false);
};
// 获取等级标签
const getTagNameList = () => {
ProduceManageAPI.getCooperationListTag().then(({ result }) => {
setTagInfoList(result || []);
});
};
// 点击确定,触发表单验证
const submitSku = () => {
skuForm
.validateFields()
.then(async (values) => {
if (!isCustomProd) {
let productObj: productType[0] | undefined = undefined;
switch (currentDesc) {
case 2:
// const schemeObj = schemeList.find((i) => i.id === values.skuId);
// values.skuName = schemeObj?.solutionName;
break;
default:
productObj = productList.find((i) => i.id === values.skuId);
values.skuName = productObj?.productName;
}
values.specIds = values.specIds.reduce((pre: any, cur: number | string) => {
const sourceObj = productSpecList.find((i) => i.id === cur);
const specObj: any =
curtRowData?.specIds && curtRowData?.specIds.find((i: any) => i.mallSpecId === cur);
pre.push({
mallSpecId: cur,
specName: sourceObj?.specName,
partNo: sourceObj?.partNo,
id: specObj ? specObj.id : undefined,
});
return pre;
}, []);
handleOk({ ...values, id: curtRowData?.id || Math.random() });
} else {
const res: any = await Promise.all([validateCustomForm()]);
handleOk({
...values,
customizeInfo: res[0],
id: curtRowData?.id || Math.random(),
skuId: curtRowData?.skuId,
skuName: values.productName,
delProductSpecId: selfIds,
});
}
// onCancel();
})
.catch(() => {});
// 验证自定义表单
const validateCustomForm: any = () => {
return new Promise((resolve, reject) => {
selfProduct
.validateFields()
.then(async (values) => {
for (let i = 0; i < selfProductData.length; i++) {
const v = selfProductData[i];
if (!v.specImage) {
return message.warning(`自定义选项第${i + 1}行未上传图片`);
}
}
for (let i = 0; i < selfProductData.length; i++) {
const v = selfProductData[i];
if (!(Object.keys(v.productSpecCPQVO).length != 0 && v.productSpecCPQVO.specPrice)) {
return message.warning(`自定义选项第${i + 1}行未配置价格`);
}
}
const arr: customizeEntity[] = selfProductData.map((i: customizeEntity) => {
return {
specName: values[`specName${i.id}`],
partNo: values[`partNo${i.id}`],
specImage: i.specImage,
productSpecCPQVO: i.productSpecCPQVO,
fileList: i.fileList,
id: i.id,
productSkuId: curtRowData && curtRowData.skuId,
};
});
resolve([...arr]);
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
reject([]);
});
});
};
};
useEffect(() => {
if (Object.keys(curtRowData).length !== 0) {
setDialogTitle('编辑');
getProductList(curtRowData.categoryId as number);
if (!curtRowData.flag) {
getProductSpecList(curtRowData.skuId as number);
}
const specIds: number[] =
curtRowData.specIds && curtRowData.specIds.map((i: any) => i.mallSpecId);
skuForm.setFieldsValue({
goodsSpecName: curtRowData.goodsSpecName,
chooseType: curtRowData.chooseType,
skuUnitId: curtRowData.skuUnitId,
categoryId: curtRowData.categoryId, // 产品类型或所属行业ID
skuId: curtRowData.skuId, // 产品或方案ID
must: curtRowData.must,
specIds, // 选项来源ID数组
productName: curtRowData.flag === 1 ? curtRowData.skuName : undefined,
flag: curtRowData.flag,
});
setIsCustomProd(curtRowData.flag === 1);
if (curtRowData.flag === 1) {
setSelfProductData([...(curtRowData.customizeInfo as customizeEntity[])]);
const objForm: any = curtRowData.customizeInfo?.reduce((pre: any, cur: customizeEntity) => {
pre[`partNo${cur.id}`] = cur.partNo;
pre[`specName${cur.id}`] = cur.specName;
return pre;
}, {});
selfProduct.setFieldsValue(objForm);
}
} else {
setDialogTitle('添加');
}
}, [curtRowData]);
return (
<div>
<Modal
open={open}
title={`${dialogTitle}规格`}
onOk={() => submitSku()}
onCancel={() => handleCancel()}
width={820}
destroyOnClose
>
<Form
preserve={false}
labelCol={{ span: 5 }}
wrapperCol={{ span: 16 }}
form={skuForm}
initialValues={{ chooseType: 0, skuUnitId: 1, must: 0, flag: 0 }}
>
<Form.Item
label='规格名称'
name='goodsSpecName'
rules={[{ required: true, message: '请输入规格名称' }]}
>
<Input placeholder='请输入规格名称' />
</Form.Item>
{currentDesc != 2 && (
<Form.Item label='规格来源' name='flag'>
<Radio.Group onChange={skuSourceRadioChange}>
<Radio value={0}>获取</Radio>
<Radio value={1} disabled={goodsType === 1}>
自定义
</Radio>
</Radio.Group>
</Form.Item>
)}
{currentDesc != 2 ? (
<>
<Form.Item
name='categoryId'
label='产品类型'
rules={[{ required: true, message: '请选择产品类型' }]}
>
<Select
placeholder='请选择产品类型'
onSelect={handleProdTypeSelect}
showSearch
filterOption={(input, option: any) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}
>
{categoryList.map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.classifyName}
</Select.Option>
))}
</Select>
</Form.Item>
{!isCustomProd ? (
<Form.Item
name='skuId'
label='产品'
rules={[{ required: true, message: '请选择产品' }]}
>
<Select
placeholder='请选择产品'
onSelect={handleProdOrInduSelected}
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
showSearch
>
{productList.map((item: any) => (
<Select.Option value={item.id} key={item.id}>
{item.productName}
</Select.Option>
))}
</Select>
</Form.Item>
) : (
<Form.Item
name='productName'
label='产品'
rules={[{ required: true, message: '请选择产品' }]}
>
<Input placeholder='请输入产品名称' maxLength={50} />
</Form.Item>
)}
</>
) : (
<>
<Form.Item
label='所属行业'
name='goodsTypeId'
rules={[{ required: true, message: '请选择所属行业' }]}
>
<Select
placeholder='请选择所属行业'
// onSelect={handleIndeTypeSelect}
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
showSearch
>
{/*{categoryList.map((item: categoryEntity) => (*/}
{/* <Select.Option value={item.goodsMasterTypeId} key={item.goodsMasterTypeId}>*/}
{/* {item.goodsMasterType}*/}
{/* </Select.Option>*/}
{/*))}*/}
</Select>
</Form.Item>
<Form.Item
label='方案'
name='skuId'
rules={[{ required: true, message: '请选择方案' }]}
>
<Select
showSearch
placeholder='请选择方案'
// onSelect={handleProdOrInduSelected}
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
{/*{schemeList.map((item: any) => (*/}
{/* <Select.Option value={item.id} key={item.id}>*/}
{/* {item.solutionName}*/}
{/* </Select.Option>*/}
{/*))}*/}
</Select>
</Form.Item>
</>
)}
{isCustomProd ? (
<Form.Item label='自定义选项'>
<div style={{ marginBottom: '10px' }}>
<Button icon={<PlusOutlined />} type='primary' onClick={addSelfSelectItem} />
</div>
<Form form={selfProduct} component={false}>
<Table
size='small'
rowKey='id'
bordered
columns={mergedColumns}
dataSource={selfProductData}
pagination={false}
components={{
body: {
cell: EditableCell,
},
}}
/>
</Form>
</Form.Item>
) : (
<Form.Item
name='specIds'
label='选项来源'
rules={[{ required: true, message: '请选择选项来源' }]}
>
<Select
placeholder='请选择选项来源'
allowClear
mode='multiple'
// onSelect={handleSourceSelect}
>
{productSpecList.map((item: any) => (
<Select.Option value={item.id} key={item.id} disabled={item.disabled}>
{item.specName}&nbsp;{item.partNo && `(${item.partNo})`}
</Select.Option>
))}
</Select>
</Form.Item>
)}
<Form.Item label='选择方式' name='chooseType'>
<Radio.Group>
<Radio value={0}>单选</Radio>
<Radio value={1} disabled={goodsType === 1}>
多选
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='是否必选' name='must'>
<Radio.Group>
<Radio value={0}>非必选</Radio>
<Radio value={1}>必选</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label='规格单位'
name='skuUnitId'
rules={[{ required: true, message: '请选择规格单位' }]}
>
<Select placeholder='请选择规格单位'>
{skuUnitList.map((item: any) => {
return (
<Select.Option value={item.id} key={item.id}>
{item.unitName}
</Select.Option>
);
})}
</Select>
</Form.Item>
</Form>
</Modal>
{/*配置价格*/}
<ConfigurePriceModal
open={configurePriceModalShow}
handleOk={configurePriceHandleOk}
handleCancel={configurePriceHandleCancel}
customRowData={customRowData}
tagInfoList={tagInfoList}
goodsType={goodsType}
/>
</div>
);
};
export default AddOrEditSkuModal;
......@@ -8,4 +8,14 @@
color: red;
}
}
.goods-video-wrap{
position: relative;
width: 200px;
img{
position: absolute;
right: 0;
top: 0;
transform: translate(50%,-25%);
}
}
}
import React, { forwardRef, useEffect, useState, useImperativeHandle } from 'react';
import { Button, Form, Input, Radio, Select, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import './index.scss';
import { BaseInfoType, detailGoodsType } from '~/api/interface/goodsType';
import { CategoryManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { categoryListType, directoryPageListType } from '~/api/interface/categoryManage';
import deletePng from '~/assets/image/delete.png';
//目录返回类型
type directoryType = InterDataType<directoryPageListType>['list'];
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
interface selfProps {
getCategoryList: (id: number) => void;
categoryList: categoryType;
ref: any;
goodsDetail: goodsDetailType | undefined;
isDetail: boolean; //是否详情
goodsType: number; //0:销售,1:租赁
}
const BaseInfo: React.FC<selfProps> = forwardRef(
({ getCategoryList, categoryList, goodsDetail, isDetail, goodsType }: selfProps, ref) => {
const [form] = Form.useForm<
BaseInfoType & {
mainImg: {
id: number;
name: string;
uid: number;
url: string;
}[];
subImg: {
id: number;
name: string;
uid: number;
url: string;
}[];
masterTypeId: number[];
}
>();
//目录
const [directoryList, setDirectoryList] = useState<directoryType>([]);
//是否添加标签
const [isAddTag, setIsAddTag] = useState<boolean>(false);
//主图文件列表
const [mainImgList, setMainImgList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//副图文件列表
const [subImgList, setSubImgList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//视频文件列表
const [videoList, setVideoList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
useImperativeHandle(ref, () => ({
baseInform: form,
}));
//获取目录列表
const getDirectoryList = () => {
CategoryManageAPI.getDirectoryListClone({ type: goodsType ? 2 : 4 }).then(({ result }) => {
setDirectoryList(result || []);
});
};
const directorySelectChange = (value: number) => {
getCategoryList(value);
};
//商品标签
const radioChangeEvent = (e: any) => {
setIsAddTag(e.target.value);
};
//主图上传
const mainImgUploadSuccess = (
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
setMainImgList(fileList);
form.setFieldsValue({
mainImg: fileList,
});
};
//副图上传
const subImgUploadSuccess = (
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
setSubImgList(fileList);
form.setFieldsValue({
subImg: fileList,
});
};
//视频上传
const videoUploadSuccess = (
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
setVideoList(fileList);
form.setFieldsValue({
goodsVideo: fileList[0].url,
});
};
//视频移除
const deleteVideo = () => {
setVideoList([]);
form.setFieldsValue({
goodsVideo: undefined,
});
};
useEffect(() => {
getDirectoryList();
}, []);
useEffect(() => {
if (goodsDetail) {
const goodsMainImg = goodsDetail.images
.filter((v) => v.imgType === 0)
.map((v) => ({
id: v.id,
name: 'mainImg',
uid: v.id,
url: v.imgUrl,
}));
setMainImgList(goodsMainImg);
const goodsSubImg = goodsDetail.images
.filter((v) => v.imgType === 1)
.map((v) => ({
id: v.id,
name: 'sunImg',
uid: v.id,
url: v.imgUrl,
}));
setSubImgList(goodsSubImg);
if (goodsDetail.goodsVideo) {
setVideoList([
{
id: goodsDetail.goodsVideoId || Math.random(),
name: 'video',
uid: goodsDetail.goodsVideoId || Math.random(),
url: goodsDetail.goodsVideo,
},
]);
}
form.setFieldsValue({
mainImg: goodsMainImg,
subImg: goodsSubImg.length ? goodsSubImg : undefined,
goodsVideo: goodsDetail.goodsVideo || undefined,
goodsName: goodsDetail.goodsName,
goodsDesc: goodsDetail.goodsDetail.goodsDesc,
masterTypeId: [goodsDetail.categoryByOne, goodsDetail.categoryByTwo],
directoryId: goodsDetail.directoryId,
shelfStatus: goodsDetail.shelfStatus,
tag: goodsDetail.tag || undefined,
});
setIsAddTag(!!goodsDetail.tag);
}
}, [goodsDetail]);
return (
<div className='base-info'>
<div className='base-info-title'>基本信息</div>
<div className='base-info-form'>
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 16 }}
initialValues={{ shelfStatus: 1 }}
form={form}
disabled={isDetail}
>
<Form.Item
name='mainImg'
label='商品主图'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader
listType='picture-card'
fileUpload
onChange={mainImgUploadSuccess}
defaultFileList={mainImgList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品副图' name='subImg'>
<Uploader
listType={isDetail && subImgList.length === 0 ? 'text' : 'picture-card'}
fileUpload
onChange={subImgUploadSuccess}
fileLength={3}
defaultFileList={subImgList}
>
{isDetail ? subImgList.length ? '' : '暂无' : <UploadOutlined />}
</Uploader>
</Form.Item>
<Form.Item label='商品视频' name='goodsVideo'>
{videoList.length ? (
<div className='goods-video-wrap'>
<video
src={videoList[0].url}
style={{ width: '200px', height: '200px' }}
controls
/>
{!isDetail && <img src={deletePng} alt='删除' onClick={deleteVideo} />}
</div>
) : (
<Uploader
listType='text'
fileUpload
onChange={videoUploadSuccess}
defaultFileList={videoList}
>
{isDetail ? (
videoList.length ? (
''
) : (
'暂无'
)
) : (
<Button icon={<UploadOutlined />}>上传视频</Button>
)}
</Uploader>
)}
</Form.Item>
<Form.Item
name='goodsName'
label='商品名称'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' maxLength={50} style={{ width: '400px' }} />
</Form.Item>
<Form.Item
name='goodsDesc'
label='商品描述'
rules={[{ required: true, message: '请输入商品描述' }]}
>
<Input.TextArea
placeholder='请输入商品描述'
maxLength={70}
style={{ width: '400px' }}
rows={4}
showCount
/>
</Form.Item>
<Form.Item
name='directoryId'
label='所属目录'
rules={[{ required: true, message: '请选择所属目录' }]}
>
<Select
placeholder='请选择所属目录'
style={{ width: '400px' }}
onChange={directorySelectChange}
>
{directoryList.map((v) => (
<Select.Option value={v.id} key={v.id}>
{v.directoryName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name='masterTypeId'
label='商品分类'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
style={{ width: '400px' }}
options={categoryList}
fieldNames={{
label: 'classifyName',
value: 'id',
children: 'children',
}}
placeholder='请选择商品分类'
allowClear
/>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group onChange={radioChangeEvent} value={isAddTag}>
<Radio value={false}>不加</Radio>
<Radio value={true}></Radio>
</Radio.Group>
</Form.Item>
{isAddTag && (
<Form.Item
name='tag'
label='标签名称'
rules={[{ required: true, message: '请输入标签名称' }]}
>
<Input placeholder='请输入标签名称' style={{ width: '400px' }} maxLength={5} />
</Form.Item>
)}
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态' style={{ width: '400px' }}>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
</div>
);
},
);
export default BaseInfo;
import React, { useEffect, useState } from 'react';
import { Modal, Form, Select, Input, message, Button, ModalProps } from 'antd';
import { InterDataType } from '~/api/interface';
import { cooperationTagType } from '~/api/interface/produceManageType';
import { customizeEntity } from '~/api/interface/goodsType';
import { filterObjAttr } from '~/utils';
//加盟标签返回类型
type cooperationTagResponseType = InterDataType<cooperationTagType>;
interface selfProps {
handleOk: (specPrice: any, leaseTerm: number) => void;
handleCancel: () => void;
customRowData: Partial<customizeEntity>;
tagInfoList: cooperationTagResponseType;
goodsType: number;
}
const ConfigurePriceModal: React.FC<ModalProps & selfProps> = ({
open,
handleOk,
handleCancel,
customRowData,
tagInfoList,
goodsType,
}) => {
// 选择的列表
const [selectList, setSelectList] = useState<number[]>([]);
// 配置价格Form
const [cfgPriceForm] = Form.useForm<any>();
const deselectEvent = (id: number) => {
const obj: any = {};
obj[id] = undefined;
cfgPriceForm.setFieldsValue(obj);
const numArr: number[] = selectList.filter((i: number) => i !== id);
setSelectList([...numArr]);
};
const levelSelectEvent = (id: number) => {
selectList.push(id);
setSelectList([...selectList]);
};
// 将val转换为label
const transValtoLabel = (id: number) => {
const item = tagInfoList.find((i) => i.id === id);
return item ? item.tagName : id;
};
// 表单验证
const handleSubmit = async () => {
cfgPriceForm
.validateFields()
.then(async (values) => {
const specPrice = Object.keys(filterObjAttr(values, ['leaseTerm'])).reduce(
(pre: any, cur: string) => {
if (Object.keys(customRowData.productSpecCPQVO).length != 0) {
const priceItem: any = customRowData.productSpecCPQVO.specPrice.find(
(i: any) => i.cooperationTag === Number(cur),
);
pre.push({
id: priceItem?.id,
price: values[cur],
cooperationTag: cur,
});
} else {
pre.push({ price: values[cur], cooperationTag: cur });
}
return pre;
},
[],
);
handleOk([...specPrice], values.leaseTerm);
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
});
};
const handleCancelEvent = () => {
cfgPriceForm.resetFields();
handleCancel();
};
// 价格正则
const priceValidator = (_rule: any, value: any) => {
const regExp = /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/;
const bol: boolean = regExp.test(value);
if (!value) {
return Promise.reject(new Error('请输入定价金额'));
}
if (!bol) {
return Promise.reject(
new Error('金额应为数字,小数最多两位,整数最多八位,不能输入0开头的整数'),
);
}
return Promise.resolve();
};
useEffect(() => {
// 新增规格则清空表单数据
if (Object.keys(customRowData.productSpecCPQVO).length === 0) {
cfgPriceForm.resetFields();
setSelectList([]);
} else {
cfgPriceForm.setFieldValue('leaseTerm', customRowData.productSpecCPQVO.leaseTerm);
const ids: number[] = [];
customRowData.productSpecCPQVO.specPrice.map((item: any) => {
cfgPriceForm.setFieldValue(Number(item.cooperationTag), item.price);
if (item.cooperationTag != '0') {
ids.push(Number(item.cooperationTag));
}
setSelectList(ids);
});
}
}, [customRowData]);
return (
<Modal
title='配置价格'
open={open}
onCancel={handleCancelEvent}
zIndex={1009}
footer={[
<Button key={1} type='default' onClick={handleCancelEvent}>
取消
</Button>,
<Button key={2} type='primary' onClick={handleSubmit}>
确认
</Button>,
]}
>
<Form
labelCol={{ span: 7 }}
wrapperCol={{ span: 14 }}
form={cfgPriceForm}
initialValues={{ leaseTerm: 0 }}
>
{goodsType && (
<Form.Item
label='租期'
name='leaseTerm'
rules={[{ required: true, message: '请选择租期' }]}
>
<Select>
<Select.Option value={0}>1-7天</Select.Option>
<Select.Option value={1}>8-15天</Select.Option>
<Select.Option value={2}>16-30天</Select.Option>
<Select.Option value={3}>31天以上</Select.Option>
</Select>
</Form.Item>
)}
<Form.Item label='渠道等级'>
<Select
placeholder='请选择渠道等级'
mode='multiple'
filterOption={(input, option) =>
(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
}
onDeselect={deselectEvent}
onSelect={levelSelectEvent}
value={selectList}
>
{tagInfoList.map((item) => (
<Select.Option key={item.id} value={item.id}>
{item.tagName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label='市场单价'
name={0}
rules={[{ required: true, validator: priceValidator }]}
>
<Input placeholder='请输入市场单价' maxLength={11} />
</Form.Item>
{selectList.map((item: number) => (
<Form.Item
label={transValtoLabel(item)}
key={item}
name={item}
rules={[{ required: true, validator: priceValidator }]}
>
<Input placeholder='请输入定价金额' maxLength={11} />
</Form.Item>
))}
</Form>
</Modal>
);
};
export default ConfigurePriceModal;
import './index.scss';
import RichText from '~/components/richText';
const GoodsIntroduce = () => {
import { FC } from 'react';
import { InterDataType } from '~/api/interface';
import { detailGoodsType } from '~/api/interface/goodsType';
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
interface selfProps {
getRichText: (html?: string) => void;
goodsDetail: goodsDetailType | undefined;
isDetail: boolean;
}
const GoodsIntroduce: FC<selfProps> = ({ getRichText, goodsDetail, isDetail }) => {
const richTextChange = (html?: string) => {
getRichText(html);
};
return (
<div className='goods-introduce'>
<div className='goods-introduce-title'>产品介绍图</div>
<div className='goods-introduce-content'>
<RichText richTextHeight={300} />
<RichText
value={goodsDetail?.goodsDetail.content}
onChange={richTextChange}
isDetail={isDetail}
/>
</div>
</div>
);
......
import React, { useEffect, useState } from 'react';
import { Checkbox, Form } from 'antd';
import './index.scss';
import GoodsAPI from '~/api/modules/goodsAPI';
import { detailGoodsType, otherServiceType } from '~/api/interface/goodsType';
import { InterDataType } from '~/api/interface';
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
interface selfProps {
otherServiceSelect: (id: number[]) => void;
goodsDetail: goodsDetailType | undefined;
isDetail: boolean;
}
//其它服务返回类型
type otherServiceListType = InterDataType<otherServiceType>;
const OtherInfo: React.FC<selfProps> = ({ otherServiceSelect, goodsDetail, isDetail }) => {
const [otherInfoForm] = Form.useForm();
//其它服务
const [otherServiceList, setOtherServiceList] = useState<otherServiceListType>([]);
const otherServiceRadioChange = (e: any) => {
otherServiceSelect(e);
};
//获取其它服务
const getOtherServiceList = () => {
GoodsAPI.getOtherServiceList().then(({ result }) => {
setOtherServiceList(result);
});
};
useEffect(() => {
getOtherServiceList();
}, []);
useEffect(() => {
if (goodsDetail) {
otherInfoForm.setFieldsValue({
otherService: goodsDetail.otherService.map((v) => v.saleServiceId),
});
}
}, [goodsDetail]);
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form form={otherInfoForm} disabled={isDetail}>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group onChange={otherServiceRadioChange}>
{otherServiceList.map((item: any, index: number) => (
<Checkbox value={item.id} key={index}>
{item.saleServiceName}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
</Form>
</div>
</div>
);
};
export default OtherInfo;
......@@ -3,17 +3,44 @@ import { Table, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './index.scss';
import { ColumnsType } from 'antd/es/table';
const columns: ColumnsType<any> = [
import { customizeEntity, skuUnitType, specEntity } from '~/api/interface/goodsType';
import { InterDataType } from '~/api/interface';
import { categoryListType } from '~/api/interface/categoryManage';
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
interface selfProps {
addOrEditSku: (record?: specEntity) => void;
specData: specEntity[];
categoryList: categoryType;
skuUnitList: unitType;
deleteSku: (record: specEntity) => void;
isDetail: boolean;
}
const StockSku: React.FC<selfProps> = ({
addOrEditSku,
specData,
categoryList,
skuUnitList,
deleteSku,
isDetail,
}) => {
const columns: ColumnsType<specEntity> = [
{
title: '序号',
align: 'center',
render: () => <div>--</div>,
render: (_text: string, _record: specEntity, index: number) => index + 1,
},
{
title: `产品类型`,
align: 'center',
// dataIndex: "goodsTypeId",
render: () => <div>--</div>,
dataIndex: 'categoryId',
render: (text: string) => <div>{getGoodsTypeName(text)}</div>,
},
{
title: '规格名称',
......@@ -29,55 +56,106 @@ const columns: ColumnsType<any> = [
title: '选项来源',
align: 'center',
dataIndex: 'specIds',
render: () => <div>--</div>,
render: (_text: string, record) => (
<div>
{record.flag !== 1
? record.specIds.map((i: any, j: number) => (
<div key={j}>
{i.specName}
{i.partNo && `(${i.partNo})`}
</div>
))
: record.customizeInfo &&
record.customizeInfo.map((i, index: number) => (
<div key={index}>{getSelfSpecName(i)}</div>
))}
</div>
),
},
{
title: '选择方式',
align: 'center',
dataIndex: 'chooseType',
render: () => <div>--</div>,
render: (text: number) => <div>{text === 0 ? '单选' : '多选'}</div>,
},
{
title: '是否必选',
align: 'center',
dataIndex: 'must',
render: () => <div>--</div>,
render: (text: number) => <div>{text ? '必选' : '非必选'}</div>,
},
{
title: '规格单位',
align: 'center',
dataIndex: 'skuUnitId',
render: () => {
return <div>--</div>;
render: (text: number) => {
return <div>{getSkuUnitName(text)}</div>;
},
},
{
title: '操作',
align: 'center',
width: '20%',
render: () => {
render: (_text: any, record) => {
return (
<div>
<Button type='link' style={{ marginRight: '10px' }}>
<Button
type='link'
style={{ marginRight: '10px' }}
onClick={() => addOrEditSkuClick(record)}
>
编辑
</Button>
<Button type='link'>删除</Button>
<Button type='link' onClick={() => deleteSkuClick(record)}>
删除
</Button>
</div>
);
},
},
];
const StockSku: React.FC<any> = () => {
];
//添加、编辑规格操作
const addOrEditSkuClick = (record?: specEntity) => {
addOrEditSku(record);
};
//删除规格操作
const deleteSkuClick = (record: specEntity) => {
deleteSku(record);
};
// 自定义选项来源名称
const getSelfSpecName = (obj: customizeEntity) => {
return `${obj.specName}(${obj.partNo || ''})`;
};
// 行业或产品名称
const getGoodsTypeName = (id: number | string) => {
const obj = categoryList.find((i) => i.id === id);
return obj?.classifyName;
};
// 单位名称
const getSkuUnitName = (id: number) => {
const unitObj = skuUnitList.find((i) => i.id === id);
return unitObj?.unitName;
};
return (
<div className='stock-sku'>
<div className='stock-sku-title'>库存规格</div>
<div className='stock-sku-content'>
{!isDetail && (
<div className='stock-sku-operate'>
<Button icon={<PlusOutlined />} type='primary'>
<Button icon={<PlusOutlined />} type='primary' onClick={() => addOrEditSkuClick()}>
添加规格
</Button>
</div>
<Table size='small' bordered rowKey='id' pagination={false} columns={columns} />
)}
<Table
size='small'
bordered
dataSource={specData}
rowKey='id'
pagination={false}
columns={isDetail ? columns.filter((v) => v.title !== '操作') : columns}
/>
</div>
</div>
);
......
......@@ -46,7 +46,7 @@ $page-background: #f3f6ff;
}
.ant-layout-sider-children {
border-radius: 10px;
overflow: hidden;
//overflow: hidden;
}
.ant-menu-item {
......
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { FC, useEffect, useRef } from 'react';
import React, { useEffect } from 'react';
import E from 'wangeditor';
import { message } from 'antd';
// import events from '@/events';
import { CommonAPI } from '~/api';
interface selfProps {
richTextHeight: number;
let editor: any = null;
interface PropsType {
onChange: (html?: string) => void;
value: string | undefined;
// eslint-disable-next-line react/require-default-props
isDetail?: boolean;
height?: number;
}
const RichText: FC<selfProps> = ({ richTextHeight }) => {
const quillRef = useRef<any>();
const modules = {
toolbar: {
container: [
[{ size: ['small', false, 'large', 'huge'] }], //字体设置
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号,不能设置单个字大小
['bold', 'italic', 'underline', 'strike'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link', 'image'], // a链接和图片的显示
[{ align: [] }],
[
{
background: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
[
{
color: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
['clean'], //清空
['emoji'], //emoji表情,设置了才能显示
['video2'], //我自定义的视频图标,和插件提供的不一样,所以设置为video2
],
// handlers: {
// image: this.imageHandler.bind(this), //点击图片标志会调用的方法
// video2: this.showVideoModal.bind(this),
// },
},
// ImageExtend: {
// loading: true,
// name: 'img',
// action: RES_URL + "connector?isRelativePath=true",
// response: res => FILE_URL + res.info.url
// },
// ImageDrop: true,
// 'emoji-toolbar': true, //是否展示出来
// 'emoji-textarea': false, //我不需要emoji展示在文本框所以设置为false
// 'emoji-shortname': true,
};
const RichText: React.FC<PropsType> = ({ onChange, value, isDetail, height }) => {
useEffect(() => {
quillRef.current.editor.container.style.height = richTextHeight + 'px';
// 注:class写法需要在componentDidMount 创建编辑器
editor = new E('.edit');
editor.config.uploadImgShowBase64 = false;
editor.config.zIndex = 1;
editor.config.height = height ? height : 550;
editor.config.uploadImgMaxLength = 5;
editor.config.uploadImgMaxSize = 1024 * 1024 * 3; // 2M
editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
const formData = new FormData();
resultFiles.map(async (item: any) => {
formData.append('uploadFile', item);
});
return <ReactQuill modules={modules} ref={quillRef} />;
const { code, result } = await CommonAPI.uploadOss(formData);
if (code === '200') {
insertImgFn(result.filePath);
message.success('上传成功');
} else {
message.error('上传失败');
}
};
editor.config.onchange = (newHtml: string) => {
if (newHtml) {
onChange(newHtml);
} else {
onChange(undefined);
}
};
// 需要展示的菜单
editor.config.menus = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'table',
'splitLine',
'undo',
'redo',
'image',
];
/** 一定要创建 */
editor.create();
// events.addListener('clearEdit', () => {
// editor.txt.html('');
// });
return () => {
// 组件销毁时销毁编辑器 注:class写法需要在componentWillUnmount中调用
editor.destroy();
};
// 这里一定要加上下面的这个注释
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (editor) {
editor.txt.html(value || '');
}
if (isDetail) {
editor.disable();
}
}, [value]);
return <div className='edit' />;
};
export default RichText;
......@@ -10,7 +10,7 @@
// min-width: 200px;
//}
.ant-form-item {
margin-inline-end: 20px;
margin-inline-end: 15px;
}
.ant-row {
......
import { Form, Input, Button, Select, DatePicker } from 'antd';
import { Form, Input, Button, Select, DatePicker, TreeSelect, Cascader } from 'antd';
import moment from 'dayjs';
import { SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
import React, { useImperativeHandle } from 'react';
......@@ -8,7 +8,7 @@ const { RangePicker } = DatePicker;
// 搜索列表的类型
export interface searchColumns {
type: 'input' | 'select' | 'rangePicker' | 'DatePicker' | 'Select';
type: 'input' | 'select' | 'rangePicker' | 'DatePicker' | 'Select' | 'TreeSelect' | 'Cascader';
label?: string;
name: string;
placeholder: string;
......@@ -155,6 +155,33 @@ const Index: React.FC<propsType> = (props) => {
showTime={item.showTime}
style={{ width: item.width ? `${item.width}px` : '180px' }}
/>
) : item.type === 'TreeSelect' ? (
<TreeSelect
allowClear
treeDefaultExpandAll
placeholder={item.placeholder}
treeData={item.options}
fieldNames={{
label: 'name',
value: 'id',
children: 'childNodes',
}}
popupClassName='head-search-treeSelect'
style={{ width: item.width ? `${item.width}px` : '180px' }}
/>
) : item.type === 'Cascader' ? (
<Cascader
allowClear
changeOnSelect
placeholder={item.placeholder}
options={item.options}
fieldNames={{
label: 'name',
value: 'id',
children: 'childNodes',
}}
style={{ width: item.width ? `${item.width}px` : '180px' }}
/>
) : (
''
)}
......
import React, { useEffect, useState } from 'react';
import { message, Upload, UploadProps } from 'antd';
// import { UploadFile } from "antd/es/upload/interface";
import { CommonAPI } from '~/api';
import './index.scss';
......@@ -23,10 +22,20 @@ interface PropsType {
}
export const Uploader: React.FC<PropsType> = (props) => {
Uploader.defaultProps = {
listType: 'text',
listType: 'picture-card',
fileSize: 2,
fileLength: 1,
fileType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp'],
fileType: [
'image/png',
'image/jpeg',
'image/jpg',
'image/gif',
'image/bmp',
'video/mp4',
'video/avi',
'video/mov',
'video/mkv',
],
// eslint-disable-next-line @typescript-eslint/no-empty-function
onChange: () => {},
defaultFileList: [],
......@@ -104,6 +113,7 @@ export const Uploader: React.FC<PropsType> = (props) => {
onRemove: (res) => {
const newFileList = fileList.filter((item) => item.uid !== res.uid);
setFileList(newFileList);
onChange?.(newFileList);
},
// onPreview: { onPreview },
};
......
......@@ -123,7 +123,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
<Form.Item label='分类模块' name='type' rules={[{ required: true }]}>
<Select options={typeOptions} allowClear={true} onChange={onChangeType}></Select>
</Form.Item>
<Form.Item label='目录类型'>
{/* <Form.Item label='目录类型'>
<Radio.Group onChange={(e: RadioChangeEvent) => setHasPid(e.target.value)} value={hasPid}>
<Radio value={false}>无关联目录</Radio>
<Radio value={true}>有关联目录</Radio>
......@@ -137,7 +137,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
allowClear={true}
></Select>
</Form.Item>
)}
)} */}
<Form.Item label='目录名称' name='directoryName' rules={[{ required: true }]}>
<Input placeholder='请输入目录名称' allowClear={true}></Input>
......
......@@ -71,7 +71,7 @@ const DirectoryManage: FC = (props: any) => {
});
return <div>{find?.label}</div>;
},
},
} /*
{
title: '目录类型',
dataIndex: 'directoryType',
......@@ -83,7 +83,7 @@ const DirectoryManage: FC = (props: any) => {
dataIndex: 'relevanceName',
key: 'relevanceName',
align: 'center',
},
}, */,
{
title: '操作',
key: 'action',
......
import { FC, useEffect, useState } from 'react';
import { Form, Modal, Select } from 'antd';
// import { tagLevelEntity } from "@/api/modules/user";
// import { UserAPI } from "@/api";
import { InterListType } from '~/api/interface';
import { listAppUserType } from '~/api/interface/customManageType';
import { CustomManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listAppUserType>;
// 数据的类型
interface PropsType {
visible: boolean;
open: boolean;
closed: any;
data: any;
state: any;
data?: TableType[0];
}
// 修改等级标签
interface tagLevelForm {
channelLevelId: number;
mallOperator: number;
mallSaleManager: number;
cooperationTagId: number;
}
export const ChangeModal: FC<PropsType> = (props) => {
ChangeModal.defaultProps = {
data: undefined,
};
// 父组件传参
const { visible, closed, data, state } = props;
const { open, closed, data } = props;
// 个人等级标签
const [tagLevelForm] = Form.useForm<tagLevelForm>();
const [form] = Form.useForm<tagLevelForm>();
// 相关运营列表
const [operationList] = useState([]);
const [operationList] = useState<{ value: number; label: string }[]>([]);
// 等级标签列表
const [cooperationTagIdList, setCooperationTagIdList] = useState<
{ value: number; label: string }[]
>([]);
// 关闭事件
const handleClosed = () => {
tagLevelForm.resetFields();
form.resetFields();
closed();
};
// 提交数据
const handleSubmit = () => {
tagLevelForm.validateFields().then(async (value: tagLevelForm) => {
// 提交表单数据
const SubmitFuc = async () => {
// const res: any = await UserAPI.mallUserChangeInfo({
// ...value,
// userAccountId: data.id,
// });
// if (res.code === '200') {
// message.success('修改成功');
// handleClosed();
// } else {
// message.warning(res.message);
// }
};
// 如果之前填过等级标签,现在又删除了的话,调用删除等级标签的接口
if (data.channelClass && !value.channelLevelId) {
// 删除等级标签
// const res: any = await UserAPI.mallUserDeleteInfo({
// userAccountId: data.id,
// });
// if (res && res.code === '200') {
// await SubmitFuc();
// } else {
// message.warning(res.message);
// }
} else {
await SubmitFuc();
form.validateFields().then(async (value) => {
const res = await CustomManageAPI.changeUserTag({
userAccountId: Number(data?.id),
cooperationTagId: value.cooperationTagId,
});
if (res && res.code === '200') {
handleClosed();
}
});
};
// 获取运营人员列表
const getListOperate = () => {
// UserAPI.getKbtUserList({ keyword: '' }).then(({ result }) => {
// if (result) {
// setOperationList(
// result.map((i: any) => {
// return {
// label: `${i.userName || i.nickName}(${i.uid})`,
// value: i.id,
// };
// }),
// );
// }
// });
// 获取加盟列表
const getCompanyListTag = async () => {
const res = await CustomManageAPI.CompanyListTag({});
if (res && res.code === '200') {
setCooperationTagIdList(res.result.map((i) => ({ value: i.id, label: i.tagName })));
// console.log(res.result);
}
};
// 组件启动
useEffect(() => {
if (data) {
getListOperate();
tagLevelForm.setFieldsValue({
channelLevelId: data.channelClass || undefined,
mallOperator: data.mallOperator || undefined,
mallSaleManager: data.mallSaleManager || undefined,
if (!data) return;
getCompanyListTag().then();
form.setFieldsValue({
cooperationTagId: data.cooperationTagId,
});
}
}, [data]);
}, [open]);
return (
<Modal open={visible} title='变更' onCancel={handleClosed} destroyOnClose onOk={handleSubmit}>
<Form form={tagLevelForm} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
<Form.Item label='等级标签' name='channelLevelId'>
<Modal open={open} title='变更' onCancel={handleClosed} destroyOnClose onOk={handleSubmit}>
<Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
<Form.Item label='等级标签' name='cooperationTagId'>
<Select
placeholder='请选择等级标签'
disabled={!data?.realAuthStatus && !data?.entAuthStatus}
disabled={!data?.userName && !data?.companyName}
allowClear
>
{state.levelTags.map((item: any, index: number) => (
<Select.Option value={item.id} key={index}>
{item.tagName}
</Select.Option>
))}
</Select>
options={cooperationTagIdList}
/>
</Form.Item>
<Form.Item label='相关运营' name='mallOperator'>
<Select placeholder='请选择相关运营' allowClear>
<Select placeholder='请选择相关运营' allowClear disabled>
{operationList.map((item: any, index: number) => (
<Select.Option value={item.value} key={index}>
{item.label}
......@@ -113,7 +86,7 @@ export const ChangeModal: FC<PropsType> = (props) => {
</Select>
</Form.Item>
<Form.Item label='相关销售' name='mallSaleManager'>
<Select placeholder='请选择相关销售' allowClear>
<Select placeholder='请选择相关销售' allowClear disabled>
{operationList.map((item: any, index: number) => (
<Select.Option value={item.value} key={index}>
{item.label}
......
......@@ -24,6 +24,10 @@ const portTypeList = [
];
function CustomListView() {
// 等级标签列表
const [cooperationTagIdList, setCooperationTagIdList] = useState<
{ value: number; label: string }[]
>([]);
// 是否打开变更弹窗
const [isChangeVisModal, setIsChangeVisModal] = useState<boolean>(false);
// 表格分页配置
......@@ -36,7 +40,7 @@ function CustomListView() {
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 需要编辑的数据
const [editData] = useState<TableType[0]>();
const [editData, setEditData] = useState<TableType[0]>();
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
......@@ -68,10 +72,21 @@ function CustomListView() {
query = data;
getTableList(data).then();
};
// 获取加盟列表
const getCompanyListTag = async () => {
const res = await CustomManageAPI.CompanyListTag({});
if (res && res.code === '200') {
setCooperationTagIdList(res.result.map((i) => ({ value: i.id, label: i.tagName })));
// console.log(res.result);
}
};
// componentDidMount
useEffect(() => {
query = {};
getTableList().then();
(async () => {
await getCompanyListTag();
await getTableList();
})();
}, []);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
......@@ -80,7 +95,6 @@ function CustomListView() {
dataIndex: 'uid',
align: 'center',
width: '100px',
render: (text) => `UID${text}`,
},
{
title: '用户名称',
......@@ -131,7 +145,7 @@ function CustomListView() {
title: '渠道等级',
dataIndex: 'cooperationTagId',
align: 'center',
render: (text) => text,
render: (text) => cooperationTagIdList.find((i) => i.value === text)?.label || text,
},
{
title: '上级推荐人',
......@@ -162,12 +176,13 @@ function CustomListView() {
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: '150px',
render: (_text) => (
width: '100px',
render: (_text, record) => (
<>
<Button
type={'link'}
onClick={() => {
setEditData(JSON.parse(JSON.stringify(record)));
setIsChangeVisModal(true);
}}
>
......@@ -198,37 +213,37 @@ function CustomListView() {
},
{
label: '来源',
name: 'form',
name: 'portType',
type: 'Select',
placeholder: '请选择相关来源',
options: portTypeList,
},
{
label: '创建时间',
name: 'time',
name: 'rangeTime',
type: 'rangePicker',
placeholder: '请选择创建时间',
},
{
label: '企业认证',
name: 'enterprise',
type: 'Select',
placeholder: '请选择是否认证',
options: [
{ value: 1, label: '未认证' },
{ value: 2, label: '已认证' },
],
},
{
label: '电子签约认证',
name: 'contract',
name: 'companyAuthStatus',
type: 'Select',
placeholder: '请选择是否认证',
options: [
{ value: 1, label: '未认证' },
{ value: 2, label: '已认证' },
{ value: 0, label: '未认证' },
{ value: 1, label: '已认证' },
],
},
// {
// label: '电子签约认证',
// name: 'contract',
// type: 'Select',
// placeholder: '请选择是否认证',
// options: [
// { value: 1, label: '未认证' },
// { value: 2, label: '已认证' },
// ],
// },
]}
searchData={onFinish}
/>
......@@ -250,12 +265,12 @@ function CustomListView() {
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<ChangeModal
visible={isChangeVisModal}
open={isChangeVisModal}
closed={() => {
setIsChangeVisModal(false);
paginationChange(pagination.current, pagination.pageSize);
}}
data={editData}
state={{ levelTags: [] }}
/>
</>
);
......
import { InterListType, InterReqType } from '~/api/interface';
import React, { useEffect } from 'react';
import { Cascader, Form, Input, message, Modal } from 'antd';
import { Uploader } from '~/components/uploader';
import { PlusOutlined } from '@ant-design/icons';
import { MallManageAPI } from '~/api';
import { addCurriculumType, queryCurriculumInfoListType } from '~/api/interface/mallManageType';
import RichText from '~/components/richText';
// 表格数据类型
type TableType = InterListType<queryCurriculumInfoListType>;
// 请求数据的类型
type ReqType = InterReqType<addCurriculumType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const AddEditModal: React.FC<propType> = (props) => {
AddEditModal.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 课程类型列表
const [curriculumSkillList, setCurriculumSkillList] = React.useState<
{
value: number;
label: string;
children?: Array<{
value: number;
label: string;
}>;
}[]
>([]);
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
// console.log('确认事件 --->', values);
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await MallManageAPI[data?.id ? 'updateCurriculum' : 'addCurriculum']({
...values,
flightSkills: Number((values?.flightSkills as unknown as number[])?.at(-1)),
id: data?.id ? data?.id : null,
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// 获取课程类型
const getCurriculumSkillList = async () => {
const res = await MallManageAPI.treeCurriculumSkill({});
if (res && res.code === '200') {
setCurriculumSkillList(
res.result?.map((i) => ({
label: i.skillsName,
value: i.id,
children: i.flightSkills?.map((j) => ({ label: j.skillsName, value: j.id })),
})),
);
// console.log(res);
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
// 获取课程类型
getCurriculumSkillList().then(() => {
// 加载出数据再操作
if (!data) return;
// 反向找数据回显
const flightSkillsName1 = curriculumSkillList.find(
(i) => i.label === data?.flightSkillsName1,
);
const flightSkillsName2 = flightSkillsName1?.children?.find(
(i) => i.label === data?.flightSkillsName2,
);
// 回显数据
form.setFieldsValue({
...data,
flightSkills: [flightSkillsName1?.value, flightSkillsName2?.value],
});
});
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={600}
>
<Form
name='addForm'
form={form}
labelAlign='right'
autoComplete='new-password'
labelCol={{ span: 3 }}
wrapperCol={{ span: 10 }}
>
<Form.Item
label='课程类型'
name='flightSkills'
rules={[{ required: true, message: '请选择课程类型' }]}
>
<Cascader placeholder={'请选择课程类型'} options={curriculumSkillList} allowClear />
</Form.Item>
<Form.Item
label='课程名称'
name='curriculumName'
rules={[{ required: true, message: '请输入课程名称' }]}
>
<Input placeholder={'请输入课程名称'} maxLength={20} allowClear />
</Form.Item>
<Form.Item
label='课程描述'
name='curriculumDesc'
rules={[{ required: true, message: '请输入课程描述' }]}
>
<Input.TextArea placeholder={'请输入课程描述'} maxLength={20} allowClear showCount />
</Form.Item>
<Form.Item
label='课程封面'
name='surfaceUrl'
rules={[{ required: true, message: '请上传质检照片' }]}
style={{ marginBottom: '-40px' }}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
onChange={(e) => form.setFieldValue('surfaceUrl', e[0].url)}
defaultFileList={data?.surfaceUrl ? [{ url: data?.surfaceUrl }] : []}
>
<PlusOutlined />
</Uploader>
<div style={{ opacity: '0.68', transform: 'scale(0.86) translate(60px, -68px)' }}>
添加图片
<br />
建议尺寸750*420或比例16:9,小于5M的 JPG、PNG格式图片
</div>
</Form.Item>
<Form.Item
label='课程上传'
name='videoUrl'
rules={[{ required: true, message: '请上传质检视频' }]}
style={{ marginBottom: '-40px' }}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
fileSize={10}
onChange={(e) => form.setFieldValue('videoUrl', e[0].url)}
defaultFileList={data?.videoUrl ? [{ url: data?.videoUrl }] : []}
>
<PlusOutlined />
</Uploader>
<div style={{ opacity: '0.68', transform: 'scale(0.86) translate(60px, -68px)' }}>
从本地上传视频
<br />
支持mp4,avi,wmv,mov,flv, rmvb,3gp,m4v,mkv格式; 文件最大不超过1G。
</div>
</Form.Item>
<Form.Item
label='课程详情'
name='detailContent'
rules={[{ required: false, message: '请填写详情' }]}
wrapperCol={{ span: 20 }}
>
<RichText
value={form.getFieldValue('detailContent')}
onChange={(e) => form.setFieldValue('detailContent', e)}
height={250}
/>
</Form.Item>
</Form>
</Modal>
);
};
export default AddEditModal;
import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, Table, Image, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { queryCurriculumInfoListType } from '~/api/interface/mallManageType';
import { InterListType, InterReqType } from '~/api/interface';
import { MallManageAPI } from '~/api';
import { ColumnsType } from 'antd/es/table';
import AddEditModal from './comp/addEditModal';
// 表格数据类型
type TableType = InterListType<queryCurriculumInfoListType>;
// 请求数据的类型
type ReqType = InterReqType<queryCurriculumInfoListType>;
// 搜索表单的数据
let query: ReqType = {};
const CourseManageView = () => {
const { confirm } = Modal;
// 是否打开变更弹窗
const [isAddEditVisModal, setIsAddEditVisModal] = useState<boolean>(false);
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>();
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res = await MallManageAPI.queryCurriculumInfoList({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
...query,
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
current: pageNo,
pageSize,
totalPage,
});
setTableData(list);
// console.log('加载列表 --->', list);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 表单提交
const onFinish = (data: ReqType) => {
pagination.current = 1;
query = data;
getTableList(data).then();
};
// 删除数据
const handleDelete = (value: TableType[0]) => {
confirm({
title: '提示',
content: '是否删除该课程?',
onOk: async () => {
const res = await MallManageAPI.removeCurriculum({ id: value.id });
if (res && res.code === '200') {
message.success('删除成功');
paginationChange(
tableData.length === 1 ? pagination.current - 1 : pagination.current,
pagination.pageSize,
);
}
},
});
};
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '课程名称',
dataIndex: 'curriculumName',
align: 'center',
width: '150px',
},
{
title: '课程类型',
dataIndex: 'flightSkillsName1',
align: 'center',
width: '150px',
render: (text, record) => `${text}/${record.flightSkillsName2}`,
},
{
title: '课程类型',
dataIndex: 'curriculumDesc',
align: 'center',
width: '150px',
ellipsis: true,
},
{
title: '封面图',
dataIndex: 'surfaceUrl',
align: 'center',
width: '150px',
render: (text, record) => (
<>
<Image
src={text ? text : `${record.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
alt={'封面图'}
style={{ width: '35px', height: '35px' }}
/>
</>
),
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: '100px',
render: (_text, record) => (
<>
<Button
type={'link'}
onClick={() => {
setEditData(JSON.parse(JSON.stringify(record)));
setIsAddEditVisModal(true);
}}
>
编辑
</Button>
<Button type={'link'} danger onClick={() => handleDelete(record)}>
删除
</Button>
</>
),
},
];
// componentDidMount
useEffect(() => {
query = {};
(async () => {
await getTableList();
})();
}, []);
return (
<>
<SearchBox
search={[
{
label: '课程名称',
name: 'keyword',
type: 'input',
placeholder: '请输入课程名称',
},
{
label: '课程类型',
name: 'companyAuthStatus',
type: 'Select',
placeholder: '请选择是否认证',
options: [
{ value: 0, label: '未认证' },
{ value: 1, label: '已认证' },
],
},
]}
searchData={onFinish}
child={
<>
<Button
type={'primary'}
icon={<PlusOutlined />}
onClick={() => {
setIsAddEditVisModal(true);
}}
>
新建课程
</Button>
</>
}
/>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
// scroll={{ x: 1200 }}
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<AddEditModal
open={isAddEditVisModal}
closed={() => {
setEditData(undefined);
setIsAddEditVisModal(false);
paginationChange(pagination.current, pagination.pageSize);
}}
data={editData}
title={editData?.id ? '编辑' : '新增'}
/>
</>
);
};
export default CourseManageView;
import React, { forwardRef } from 'react';
import { Button, Form, Upload, Input, Radio, Select, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import './index.scss';
const BaseInfo: React.FC<any> = forwardRef(() => {
return (
<div className='base-info'>
<div className='base-info-title'>基本信息</div>
<div className='base-info-form'>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }} initialValues={{ shelfStatus: 1 }}>
<Form.Item
name='mainFileList'
label='商品主图'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品副图' name='subFileList'>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Upload>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Upload>
</Form.Item>
<Form.Item
name='goodsName'
label='商品名称'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' maxLength={50} style={{ width: '400px' }} />
</Form.Item>
<Form.Item
name='goodsDesc'
label='商品描述'
rules={[{ required: true, message: '请输入商品描述' }]}
>
<Input.TextArea
placeholder='请输入商品描述'
maxLength={70}
style={{ width: '400px' }}
rows={4}
showCount
/>
</Form.Item>
<Form.Item
name='sortTypeId'
label='所属目录'
rules={[{ required: true, message: '请选择所属目录' }]}
>
<Select placeholder='请选择所属目录' style={{ width: '400px' }}>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
<Form.Item
name='masterTypeId'
label='商品分类'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
style={{ width: '400px' }}
fieldNames={{
label: 'goodsMasterType',
value: 'goodsMasterTypeId',
children: 'goodsSlaveTypeDTO',
}}
placeholder='请选择商品分类'
allowClear
/>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Radio value={false}>不加</Radio>
<Radio value></Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name='tag'
label='标签名称'
rules={[{ required: true, message: '请输入标签名称' }]}
>
<Input placeholder='请输入标签名称' style={{ width: '400px' }} maxLength={5} />
</Form.Item>
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态' style={{ width: '400px' }}>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
</div>
);
});
export default BaseInfo;
import React, { forwardRef } from 'react';
import { Checkbox, Form, Select, Row, Col } from 'antd';
import './index.scss';
const OtherInfo: React.FC<any> = forwardRef(() => {
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group>
<Checkbox>1</Checkbox>
</Checkbox.Group>
</Form.Item>
<Row>
<Col>
<span>用服务&gt;云享飞:</span>
</Col>
<Col span={8}>
<Form.Item name='shareFlyServiceId'>
<Select
allowClear
placeholder='请选择服务'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<span>&nbsp;&nbsp;&nbsp;&nbsp;我要租&gt;云仓:</span>
</Col>
<Col span={8}>
<Form.Item name='repoId'>
<Select
allowClear
placeholder='请选择商品'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
);
});
export default OtherInfo;
import BaseInfo from './components/baseInfo';
import StockSku from './components/stockSku';
import OtherInfo from './components/otherInfo';
import GoodsIntroduce from './components/goodsIntroduce';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import BaseInfo from '~/components/goods/commonAddOrEdit/baseInfo';
import StockSku from '~/components/goods/commonAddOrEdit/stockSku';
import OtherInfo from '~/components/goods/commonAddOrEdit/otherInfo';
import GoodsIntroduce from '~/components/goods/commonAddOrEdit/goodsIntroduce';
import AddOrEditSkuModal from '~/components/goods/commonAddOrEdit/addOrEditSkuModal';
import { Button, message } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './index.scss';
import { useEffect, useRef, useState } from 'react';
import { CategoryManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { categoryListType } from '~/api/interface/categoryManage';
import {
customizeEntity,
detailGoodsType,
skuUnitType,
specEntity,
} from '~/api/interface/goodsType';
import goodsAPI from '~/api/modules/goodsAPI';
import { filterObjAttr } from '~/utils';
import GoodsAPI from '~/api/modules/goodsAPI';
import { UploadFile } from 'antd/es/upload/interface';
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
const GoodsAddOrEditOrDetail = () => {
const [searchParams] = useSearchParams();
//基本信息ref
const baseInfoRef = useRef<any>();
const navigate = useNavigate();
//当前目录
const [currentDesc, setCurrentDesc] = useState<number>(-1);
//分类
const [categoryList, setCategoryList] = useState<categoryType>([]);
//添加、编辑库存规格弹窗
const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState(false);
//库存规格数据
const [specData, setSpecData] = useState<specEntity[]>([]);
const [goodsSpecCopy, setGoodsSpecCopy] = useState<specEntity[]>([]);
//产品规格-单位
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
//其它服务
const [otherService, setOtherService] = useState<number[]>([]);
// 当前操作行数据
const [curtRowData, setCurtRowData] = useState<Partial<specEntity>>({});
//商品详情
const [goodsDetail, setGoodsDetail] = useState<goodsDetailType>();
//产品介绍
const [productIntroduce, setProductIntroduce] = useState<string>('');
//是否商品详情
const [isDetail, setIsDetail] = useState<boolean>(false);
//添加、编辑规格
const addOrEditSkuShowEvent = (record?: specEntity) => {
const baseInfoForm = baseInfoRef.current.baseInform;
setCurrentDesc(baseInfoForm.getFieldValue('directoryId') || -1);
if (!baseInfoForm.getFieldValue('directoryId')) {
return message.warning('请先选择目录');
}
if (record) {
setCurtRowData({ ...record });
}
setAddOrEditSkuModalShow(true);
};
//删除规格
const deleteSkuEvent = (record: specEntity) => {
const index = specData.findIndex((v) => v.id === record.id);
specData.splice(index, 1);
setSpecData([...specData]);
};
const addOrEditSkuModalCancel = () => {
setAddOrEditSkuModalShow(false);
};
const addOrEditSkuModalOk = (data: specEntity) => {
if (Object.keys(curtRowData).length != 0) {
const index: number = specData.findIndex((i) => i.id === data.id);
specData.splice(index, 1, data);
setSpecData([...specData]);
} else {
setSpecData([...specData, data]);
}
setAddOrEditSkuModalShow(false);
};
//根据目录获取分类列表
const getCategoryList = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ directoryId, type: 4, pageSize: 9999, pageNo: 1 }).then(
({ result }) => {
setCategoryList(result.list || []);
},
);
};
//产品-单位
const getSkuUnit = () => {
goodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
//其它服务选择
const otherServiceSelect = (ids: number[]) => {
setOtherService(ids);
};
//获取产品详情
const getRichText = (html?: string) => {
setProductIntroduce(html || '');
};
//商品详情
const getGoodsDetail = (goodsInfoId: number) => {
GoodsAPI.getGoodsDetail({ goodsInfoId, type: 0 }).then(({ result }) => {
setGoodsDetail(result);
getCategoryList(result.directoryId);
const specList: specEntity[] = result.goodsSpec.reduce((pre: any, cur: specEntity) => {
// 自定义
if (cur.flag === 1) {
const cusList: customizeEntity[] =
cur.productSpecList &&
cur.productSpecList.reduce((preProd: any, curProd: customizeEntity, index: number) => {
const obj: UploadFile = {
uid: `img${index}`,
status: 'done',
url: curProd.specImage,
name: 'image',
};
preProd.push({ ...curProd, fileList: [obj] });
return preProd;
}, []);
cur.customizeInfo = cusList;
} else {
const specId: number[] =
result.directoryId === 2
? cur.industrySpecList &&
cur.industrySpecList.map((curIndu: any) => {
return {
mallSpecId: curIndu.industrySpecId,
specName: curIndu.specName,
partNo: curIndu.partNo,
id: curIndu.id,
};
})
: cur.productSpecList &&
cur.productSpecList.map((item: any) => {
return {
mallSpecId: item.productSpec,
specName: item.specName,
partNo: item.partNo,
id: item.id,
};
});
cur.specIds = specId;
}
pre.push({ ...cur, productName: cur.skuName });
return pre;
}, []);
setGoodsSpecCopy(result.goodsSpec);
setSpecData(specList);
});
};
//保存
const saveSubmit = () => {
const baseInfoForm = baseInfoRef.current.baseInform;
baseInfoForm.validateFields().then((values: any) => {
if (specData.length === 0) {
return message.warning('清添加库存规格');
}
//主图
values.images = [
{
imgType: 0,
imgUrl: values.mainImg[0].url,
id: goodsDetail ? values.mainImg[0].id : undefined,
},
];
//副图
if (values.subImg) {
values.images.push(
...values.subImg.map((v: any) => ({
imgType: 1,
imgUrl: v.url,
id: goodsDetail
? goodsDetail.images.some((i) => i.id === v.id)
? v.id
: undefined
: undefined,
})),
);
}
//分类
values.categoryByOne = values.masterTypeId[0];
values.categoryByTne = values.masterTypeId[1] || undefined;
// 过滤对象属性
const goodsSpecVO: specEntity[] = specData.reduce((pre: any, cur: specEntity) => {
cur.customizeInfo = cur.customizeInfo?.reduce((cusPre: any, cusCur: customizeEntity) => {
const bol: boolean = goodsSpecCopy.some((i: specEntity) => {
return i.customizeInfo?.some((i: customizeEntity) => i.id === cusCur.id);
});
cusPre = [
...cusPre,
bol ? filterObjAttr(cusCur, ['fileList']) : filterObjAttr(cusCur, ['id', 'fileList']),
];
return cusPre;
}, []);
// 存在对象属性改变!
cur.specIds = cur.specIds?.reduce((preSpec: any, curSpec: any) => {
preSpec = [...preSpec, filterObjAttr(curSpec, ['specName', 'partNo'])];
return preSpec;
}, []);
// 是否新增
const isAdd: boolean = goodsSpecCopy.every((i: specEntity) => i.id != cur.id);
// 是否修改了某一条
const isEdit: boolean = goodsSpecCopy.every(
(i: specEntity) => i.categoryId != cur.categoryId,
);
pre = [
...pre,
!isAdd
? isEdit
? filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName', 'id'])
: filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName'])
: filterObjAttr(cur, ['id', 'skuName']),
];
return pre;
}, []);
goodsAPI[goodsDetail ? 'editGoods' : 'addGoods']({
...filterObjAttr(values, ['mainImg', 'subImg', 'video', 'masterTypeId', 'id', 'goodsDesc']),
productSpec: goodsSpecVO,
goodsType: 0,
goodsDetailVO: { goodsDesc: values.goodsDesc, productDesc: productIntroduce },
otherService: otherService,
id: goodsDetail ? goodsDetail.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success(goodsDetail ? '编辑成功' : '新增成功');
navigate(-1);
}
});
});
};
//返回
const backRoute = () => {
navigate(-1);
};
useEffect(() => {
if (searchParams.get('id')) {
getGoodsDetail(Number(searchParams.get('id')));
}
setIsDetail(!!searchParams.get('isDetail'));
getSkuUnit();
}, []);
return (
<div className='goods-info'>
<BaseInfo />
<StockSku />
<OtherInfo />
<GoodsIntroduce />
{/* 基本信息*/}
<BaseInfo
ref={baseInfoRef}
categoryList={categoryList}
getCategoryList={getCategoryList}
goodsDetail={goodsDetail}
isDetail={isDetail}
goodsType={0}
/>
{/* 库存规格*/}
<StockSku
addOrEditSku={addOrEditSkuShowEvent}
specData={specData}
categoryList={categoryList}
skuUnitList={skuUnitList}
deleteSku={deleteSkuEvent}
isDetail={isDetail}
/>
{/*其它信息*/}
<OtherInfo
otherServiceSelect={otherServiceSelect}
goodsDetail={goodsDetail}
isDetail={isDetail}
/>
{/*产品介绍图*/}
<GoodsIntroduce getRichText={getRichText} goodsDetail={goodsDetail} isDetail={isDetail} />
{/*库存规格,添加、编辑弹窗*/}
<AddOrEditSkuModal
currentDesc={currentDesc}
open={addOrEditSkuModalShow}
handleCancel={addOrEditSkuModalCancel}
handleOk={addOrEditSkuModalOk}
categoryList={categoryList}
skuUnitList={skuUnitList}
curtRowData={curtRowData}
goodsType={0}
/>
<div className='goods-info-operate'>
<Button type='primary'>保存</Button>
{!isDetail && (
<Button type='primary' onClick={saveSubmit}>
保存
</Button>
)}
<Button onClick={backRoute}>返回</Button>
</div>
</div>
......
import SearchBox, { searchColumns } from '~/components/search-box';
import { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Table } from 'antd';
import { Button, Card, Image, message, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
......@@ -9,6 +9,17 @@ import {
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import GoodsAPI from '~/api/modules/goodsAPI';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { listGoodsType } from '~/api/interface/goodsType';
import { CategoryManageAPI } from '~/api';
import { filterObjAttr } from '~/utils';
//商品返回类型
type goodsType = InterDataType<listGoodsType>['list'];
//商品列表筛选类型
type goodsSearchParameters = Omit<InterReqType<listGoodsType>, 'pageNo' | 'pageSize' | 'goodsType'>;
const GoodsList = () => {
const navigate = useNavigate();
const tabList = [
......@@ -26,54 +37,173 @@ const GoodsList = () => {
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
const [searchColumns, setSearchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
name: 'goodsName',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
name: 'directoryId',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
name: 'time',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
const tableColumns: ColumnsType<goodsType[0]> = [
{
title: '序号',
align: 'center',
render: (_text: any, _record, index: number) =>
(pagination.pageNo - 1) * pagination.pageSize + index + 1,
},
{
title: '图片',
align: 'center',
dataIndex: 'imgUrl',
render: (text: string) => <Image src={text} width={50} height={50} />,
},
{ title: '商品名称', align: 'center', dataIndex: 'goodsName' },
{ title: '所属目录', align: 'center', dataIndex: 'directoryName' },
{ title: '创建时间', align: 'center', dataIndex: 'createTime' },
{
title: '状态',
align: 'center',
dataIndex: 'status',
render: (text: number) => (text ? '上架' : '下架'),
},
{
title: '操作',
align: 'center',
render: () => (
dataIndex: 'id',
render: (id: number) => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
<Button type='link' onClick={() => toEditGoods(id)}>
编辑
</Button>
<Button type='link' onClick={() => toGoodsDetail(id)}>
详情
</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const [tableData, setTableData] = useState<goodsType>([]);
//分页
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
//筛选
const [query, setQuery] = useState<goodsSearchParameters>({ status: undefined });
// 表格多选
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onTabChange = (key: string) => {
pagination.pageNo = 1;
query.status = key === '1' ? undefined : key === '2' ? 1 : 0;
getGoodsList(query);
setQuery(query);
setActiveTabKey(key);
};
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageSize = pageSize;
pagination.pageNo = pageNo;
getGoodsList(query);
};
//筛选
const searchSuccess = (data: any) => {
pagination.pageNo = 1;
setQuery(filterObjAttr(data, ['time']));
getGoodsList(filterObjAttr(data, ['time']));
};
//商品列表
const getGoodsList = (query?: goodsSearchParameters) => {
GoodsAPI.getGoodsList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
goodsType: 0,
...query,
}).then(({ result }) => {
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
//新增商品
const toAddMallGoods = () => {
navigate({ pathname: '/mallManage/mallGoods/add' });
};
//编辑商品
const toEditGoods = (id: number) => {
navigate({
pathname: '/mallManage/mallGoods/add',
search: `id=${id}`,
});
};
//商品详情
const toGoodsDetail = (id: number) => {
navigate({
pathname: '/mallManage/mallGoods/detail',
search: `id=${id}&isDetail=1`,
});
};
// 表格多选事件
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
};
//获取目录列表
const getDirectoryList = () => {
CategoryManageAPI.getDirectoryListClone({ type: 4 }).then(({ result }) => {
if (result) {
const options = result.map((v) => ({ id: v.id, name: v.directoryName }));
searchColumns[1].options = options;
setSearchColumns(searchColumns);
}
});
};
//商品-批量上下架
const batchOnShelfOrTakeDown = (status: number) => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchOnShelfOrTakeDown({ goodsIds: selectedRowKeys as number[], status }).then(
({ code }) => {
if (code === '200') {
message.success(status ? '上架成功' : '下架成功');
getGoodsList(query);
}
},
);
};
//商品-删除
const deleteGoods = () => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
});
};
useEffect(() => {
getGoodsList();
getDirectoryList();
}, []);
return (
<div className='goods-list'>
<SearchBox
......@@ -83,20 +213,54 @@ const GoodsList = () => {
新增商品
</Button>
}
searchData={searchSuccess}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
{activeTabKey !== '2' && (
<Button
type='primary'
style={{ marginRight: '10px' }}
icon={<ArrowUpOutlined />}
onClick={() => batchOnShelfOrTakeDown(1)}
>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
)}
{activeTabKey !== '3' && (
<Button
type='primary'
style={{ marginRight: '10px' }}
icon={<ArrowDownOutlined />}
onClick={() => batchOnShelfOrTakeDown(0)}
>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
)}
<Button danger icon={<DeleteOutlined />} onClick={deleteGoods}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
<Table
columns={tableColumns}
bordered
dataSource={tableData}
rowKey='id'
rowSelection={{
selectedRowKeys,
onChange: onSelectChange,
}}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
current: pagination.pageNo,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
</Card>
</div>
);
......
......@@ -51,11 +51,25 @@ const SetProduceSpecPriceModal: FC<ModalProps & PropsType> = ({ open, onCancel,
return { ...pre };
}, {});
if (result.length) {
form.setFieldsValue({ ...Obj, level: levelNumber });
//没有设置价格的清空
const setDefaultObj = tagInfoList.reduce((pre: any, cur) => {
if (!Object.keys(Obj).includes(cur.id.toString())) {
pre[cur.id] = undefined;
}
return pre;
}, {});
console.log('数据-->', setDefaultObj);
form.setFieldsValue({ ...Obj, level: levelNumber, ...setDefaultObj });
} else {
//如果没有返回价格,清楚上一次选择的租期价格
const defaultObj = tagInfoList.reduce((pre: any, cur) => {
pre[cur.id] = undefined;
return pre;
}, {});
form.setFieldsValue({
0: undefined,
level: undefined,
...defaultObj,
});
}
const arr = result
......
......@@ -157,6 +157,7 @@ function ProduceManage() {
}).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
......
.base-info {
&-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 20px;
&::before {
content: '*';
color: red;
}
}
}
import React, { forwardRef } from 'react';
import { Button, Form, Upload, Input, Radio, Select, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import './index.scss';
const BaseInfo: React.FC<any> = forwardRef(() => {
return (
<div className='base-info'>
<div className='base-info-title'>基本信息</div>
<div className='base-info-form'>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }} initialValues={{ shelfStatus: 1 }}>
<Form.Item
name='mainFileList'
label='商品主图'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品副图' name='subFileList'>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Upload>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Upload>
</Form.Item>
<Form.Item
name='goodsName'
label='商品名称'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' maxLength={50} style={{ width: '400px' }} />
</Form.Item>
<Form.Item
name='goodsDesc'
label='商品描述'
rules={[{ required: true, message: '请输入商品描述' }]}
>
<Input.TextArea
placeholder='请输入商品描述'
maxLength={70}
style={{ width: '400px' }}
rows={4}
showCount
/>
</Form.Item>
<Form.Item
name='sortTypeId'
label='所属目录'
rules={[{ required: true, message: '请选择所属目录' }]}
>
<Select placeholder='请选择所属目录' style={{ width: '400px' }}>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
<Form.Item
name='masterTypeId'
label='商品分类'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
style={{ width: '400px' }}
fieldNames={{
label: 'goodsMasterType',
value: 'goodsMasterTypeId',
children: 'goodsSlaveTypeDTO',
}}
placeholder='请选择商品分类'
allowClear
/>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Radio value={false}>不加</Radio>
<Radio value></Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name='tag'
label='标签名称'
rules={[{ required: true, message: '请输入标签名称' }]}
>
<Input placeholder='请输入标签名称' style={{ width: '400px' }} maxLength={5} />
</Form.Item>
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态' style={{ width: '400px' }}>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
</div>
);
});
export default BaseInfo;
.goods-introduce {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content {
margin-left: 50px;
}
}
import './index.scss';
import RichText from '~/components/richText';
const GoodsIntroduce = () => {
return (
<div className='goods-introduce'>
<div className='goods-introduce-title'>产品介绍图</div>
<div className='goods-introduce-content'>
<RichText richTextHeight={300} />
</div>
</div>
);
};
export default GoodsIntroduce;
.other-info {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-form {
margin-left: 50px;
}
}
import React, { forwardRef } from 'react';
import { Checkbox, Form, Select, Row, Col } from 'antd';
import './index.scss';
const OtherInfo: React.FC<any> = forwardRef(() => {
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group>
<Checkbox>1</Checkbox>
</Checkbox.Group>
</Form.Item>
<Row>
<Col>
<span>用服务&gt;云享飞:</span>
</Col>
<Col span={8}>
<Form.Item name='shareFlyServiceId'>
<Select
allowClear
placeholder='请选择服务'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<span>&nbsp;&nbsp;&nbsp;&nbsp;我要租&gt;云仓:</span>
</Col>
<Col span={8}>
<Form.Item name='repoId'>
<Select
allowClear
placeholder='请选择商品'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
);
});
export default OtherInfo;
.stock-sku {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content {
margin-left: 50px;
}
&-operate {
margin-bottom: 10px;
}
}
import React from 'react';
import { Table, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './index.scss';
import { ColumnsType } from 'antd/es/table';
const StockSku: React.FC<any> = () => {
const columns: ColumnsType<any> = [
{
title: '序号',
align: 'center',
render: () => <div>--</div>,
},
{
title: `产品类型`,
align: 'center',
// dataIndex: "goodsTypeId",
render: () => <div>--</div>,
},
{
title: '规格名称',
align: 'center',
dataIndex: 'goodsSpecName',
},
{
title: `方案`,
align: 'center',
dataIndex: 'skuName',
},
{
title: '选项来源',
align: 'center',
dataIndex: 'specIds',
render: () => <div>--</div>,
},
{
title: '选择方式',
align: 'center',
dataIndex: 'chooseType',
render: () => <div>--</div>,
},
{
title: '是否必选',
align: 'center',
dataIndex: 'must',
render: () => <div>--</div>,
},
{
title: '规格单位',
align: 'center',
dataIndex: 'skuUnitId',
render: () => {
return <div>--</div>;
},
},
{
title: '操作',
align: 'center',
width: '20%',
render: () => {
return (
<div>
<Button type='link' style={{ marginRight: '10px' }}>
编辑
</Button>
<Button type='link'>删除</Button>
</div>
);
},
},
];
return (
<div className='stock-sku'>
<div className='stock-sku-title'>库存规格</div>
<div className='stock-sku-content'>
<div className='stock-sku-operate'>
<Button icon={<PlusOutlined />} type='primary'>
添加规格
</Button>
</div>
<Table size='small' bordered rowKey='id' pagination={false} columns={columns} />
</div>
</div>
);
};
export default StockSku;
.rent-info {
.goods-info {
&-operate {
margin-top: 50px;
display: flex;
......
import BaseInfo from './components/baseInfo';
import StockSku from './components/stockSku';
import OtherInfo from './components/otherInfo';
import GoodsIntroduce from './components/goodsIntroduce';
import { useNavigate } from 'react-router-dom';
import BaseInfo from '~/components/goods/commonAddOrEdit/baseInfo';
import StockSku from '~/components/goods/commonAddOrEdit/stockSku';
import OtherInfo from '~/components/goods/commonAddOrEdit/otherInfo';
import GoodsIntroduce from '~/components/goods/commonAddOrEdit/goodsIntroduce';
import AddOrEditSkuModal from '~/components/goods/commonAddOrEdit/addOrEditSkuModal';
import { Button, message } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './index.scss';
import { Button } from 'antd';
const RentDetail = () => {
import { useEffect, useRef, useState } from 'react';
import { CategoryManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { categoryListType } from '~/api/interface/categoryManage';
import {
customizeEntity,
detailGoodsType,
skuUnitType,
specEntity,
} from '~/api/interface/goodsType';
import goodsAPI from '~/api/modules/goodsAPI';
import { filterObjAttr } from '~/utils';
import GoodsAPI from '~/api/modules/goodsAPI';
import { UploadFile } from 'antd/es/upload/interface';
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
const GoodsAddOrEditOrDetail = () => {
const [searchParams] = useSearchParams();
//基本信息ref
const baseInfoRef = useRef<any>();
const navigate = useNavigate();
//当前目录
const [currentDesc, setCurrentDesc] = useState<number>(-1);
//分类
const [categoryList, setCategoryList] = useState<categoryType>([]);
//添加、编辑库存规格弹窗
const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState(false);
//库存规格数据
const [specData, setSpecData] = useState<specEntity[]>([]);
const [goodsSpecCopy, setGoodsSpecCopy] = useState<specEntity[]>([]);
//产品规格-单位
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
//其它服务
const [otherService, setOtherService] = useState<number[]>([]);
// 当前操作行数据
const [curtRowData, setCurtRowData] = useState<Partial<specEntity>>({});
//商品详情
const [goodsDetail, setGoodsDetail] = useState<goodsDetailType>();
//产品介绍
const [productIntroduce, setProductIntroduce] = useState<string>('');
//是否商品详情
const [isDetail, setIsDetail] = useState<boolean>(false);
//添加、编辑规格
const addOrEditSkuShowEvent = (record?: specEntity) => {
const baseInfoForm = baseInfoRef.current.baseInform;
setCurrentDesc(baseInfoForm.getFieldValue('directoryId') || -1);
if (!baseInfoForm.getFieldValue('directoryId')) {
return message.warning('请先选择目录');
}
if (record) {
setCurtRowData({ ...record });
}
setAddOrEditSkuModalShow(true);
};
//删除规格
const deleteSkuEvent = (record: specEntity) => {
const index = specData.findIndex((v) => v.id === record.id);
specData.splice(index, 1);
setSpecData(specData);
};
const addOrEditSkuModalCancel = () => {
setAddOrEditSkuModalShow(false);
};
const addOrEditSkuModalOk = (data: specEntity) => {
if (Object.keys(curtRowData).length != 0) {
const index: number = specData.findIndex((i) => i.id === data.id);
specData.splice(index, 1, data);
setSpecData([...specData]);
} else {
setSpecData([...specData, data]);
}
setAddOrEditSkuModalShow(false);
};
//根据目录获取分类列表
const getCategoryList = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ directoryId, type: 4, pageSize: 9999, pageNo: 1 }).then(
({ result }) => {
setCategoryList(result.list || []);
},
);
};
//产品-单位
const getSkuUnit = () => {
goodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
//其它服务选择
const otherServiceSelect = (ids: number[]) => {
setOtherService(ids);
};
//获取产品详情
const getRichText = (html?: string) => {
setProductIntroduce(html || '');
};
//商品详情
const getGoodsDetail = (goodsInfoId: number) => {
GoodsAPI.getGoodsDetail({ goodsInfoId, type: 1, leaseTerm: 0 }).then(({ result }) => {
setGoodsDetail(result);
getCategoryList(result.directoryId);
const specList: specEntity[] = result.goodsSpec.reduce((pre: any, cur: specEntity) => {
// 自定义
if (cur.flag === 1) {
const cusList: customizeEntity[] =
cur.productSpecList &&
cur.productSpecList.reduce((preProd: any, curProd: customizeEntity, index: number) => {
const obj: UploadFile = {
uid: `img${index}`,
status: 'done',
url: curProd.specImage,
name: 'image',
};
preProd.push({ ...curProd, fileList: [obj] });
return preProd;
}, []);
cur.customizeInfo = cusList;
} else {
const specId: number[] =
result.directoryId === 2
? cur.industrySpecList &&
cur.industrySpecList.map((curIndu: any) => {
return {
mallSpecId: curIndu.industrySpecId,
specName: curIndu.specName,
partNo: curIndu.partNo,
id: curIndu.id,
};
})
: cur.productSpecList &&
cur.productSpecList.map((item: any) => {
return {
mallSpecId: item.productSpec,
specName: item.specName,
partNo: item.partNo,
id: item.id,
};
});
cur.specIds = specId;
}
pre.push({ ...cur, productName: cur.skuName });
return pre;
}, []);
setGoodsSpecCopy(result.goodsSpec);
setSpecData(specList);
});
};
//保存
const saveSubmit = () => {
const baseInfoForm = baseInfoRef.current.baseInform;
baseInfoForm.validateFields().then((values: any) => {
if (specData.length === 0) {
return message.warning('清添加库存规格');
}
//主图
values.images = [
{
imgType: 0,
imgUrl: values.mainImg[0].url,
id: goodsDetail ? values.mainImg[0].id : undefined,
},
];
//副图
if (values.subImg) {
values.images.push(
...values.subImg.map((v: any) => ({
imgType: 1,
imgUrl: v.url,
id: goodsDetail
? goodsDetail.images.some((i) => i.id === v.id)
? v.id
: undefined
: undefined,
})),
);
}
//分类
values.categoryByOne = values.masterTypeId[0];
values.categoryByTne = values.masterTypeId[1] || undefined;
// 过滤对象属性
const goodsSpecVO: specEntity[] = specData.reduce((pre: any, cur: specEntity) => {
cur.customizeInfo = cur.customizeInfo?.reduce((cusPre: any, cusCur: customizeEntity) => {
const bol: boolean = goodsSpecCopy.some((i: specEntity) => {
return i.customizeInfo?.some((i: customizeEntity) => i.id === cusCur.id);
});
cusPre = [
...cusPre,
bol ? filterObjAttr(cusCur, ['fileList']) : filterObjAttr(cusCur, ['id', 'fileList']),
];
return cusPre;
}, []);
// 存在对象属性改变!
cur.specIds = cur.specIds?.reduce((preSpec: any, curSpec: any) => {
preSpec = [...preSpec, filterObjAttr(curSpec, ['specName', 'partNo'])];
return preSpec;
}, []);
// 是否新增
const isAdd: boolean = goodsSpecCopy.every((i: specEntity) => i.id != cur.id);
// 是否修改了某一条
const isEdit: boolean = goodsSpecCopy.every(
(i: specEntity) => i.categoryId != cur.categoryId,
);
pre = [
...pre,
!isAdd
? isEdit
? filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName', 'id'])
: filterObjAttr(cur, ['industrySpecList', 'productSpecList', 'skuName'])
: filterObjAttr(cur, ['id', 'skuName']),
];
return pre;
}, []);
goodsAPI[goodsDetail ? 'editGoods' : 'addGoods']({
...filterObjAttr(values, ['mainImg', 'subImg', 'video', 'masterTypeId', 'id', 'goodsDesc']),
productSpec: goodsSpecVO,
goodsType: 1,
goodsDetailVO: { goodsDesc: values.goodsDesc, productDesc: productIntroduce },
otherService: otherService,
id: goodsDetail ? goodsDetail.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success(goodsDetail ? '编辑成功' : '新增成功');
navigate(-1);
}
});
});
};
//返回
const backRoute = () => {
navigate(-1);
};
useEffect(() => {
if (searchParams.get('id')) {
getGoodsDetail(Number(searchParams.get('id')));
}
setIsDetail(!!searchParams.get('isDetail'));
getSkuUnit();
}, []);
return (
<div className='rent-info'>
<BaseInfo />
<StockSku />
<OtherInfo />
<GoodsIntroduce />
<div className='rent-info-operate'>
<Button type='primary'>保存</Button>
<div className='goods-info'>
{/* 基本信息*/}
<BaseInfo
ref={baseInfoRef}
categoryList={categoryList}
getCategoryList={getCategoryList}
goodsDetail={goodsDetail}
isDetail={isDetail}
goodsType={1}
/>
{/* 库存规格*/}
<StockSku
addOrEditSku={addOrEditSkuShowEvent}
specData={specData}
categoryList={categoryList}
skuUnitList={skuUnitList}
deleteSku={deleteSkuEvent}
isDetail={isDetail}
/>
{/*其它信息*/}
<OtherInfo
otherServiceSelect={otherServiceSelect}
goodsDetail={goodsDetail}
isDetail={isDetail}
/>
{/*产品介绍图*/}
<GoodsIntroduce getRichText={getRichText} goodsDetail={goodsDetail} isDetail={isDetail} />
{/*库存规格,添加、编辑弹窗*/}
<AddOrEditSkuModal
currentDesc={currentDesc}
open={addOrEditSkuModalShow}
handleCancel={addOrEditSkuModalCancel}
handleOk={addOrEditSkuModalOk}
categoryList={categoryList}
skuUnitList={skuUnitList}
curtRowData={curtRowData}
goodsType={1}
/>
<div className='goods-info-operate'>
{!isDetail && (
<Button type='primary' onClick={saveSubmit}>
保存
</Button>
)}
<Button onClick={backRoute}>返回</Button>
</div>
</div>
);
};
export default RentDetail;
export default GoodsAddOrEditOrDetail;
import SearchBox, { searchColumns } from '~/components/search-box';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { Button, Card, Table } from 'antd';
import { Button, Card, Image, message, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
......@@ -9,6 +9,16 @@ import {
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import GoodsAPI from '~/api/modules/goodsAPI';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { listGoodsType } from '~/api/interface/goodsType';
import { CategoryManageAPI } from '~/api';
import { filterObjAttr } from '~/utils';
//商品返回类型
type goodsType = InterDataType<listGoodsType>['list'];
//商品列表筛选类型
type goodsSearchParameters = Omit<InterReqType<listGoodsType>, 'pageNo' | 'pageSize' | 'goodsType'>;
const RentList = () => {
const navigate = useNavigate();
const tabList = [
......@@ -26,56 +36,175 @@ const RentList = () => {
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
const [searchColumns, setSearchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
name: 'goodsName',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
name: 'directoryId',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
name: 'time',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
const tableColumns: ColumnsType<goodsType[0]> = [
{
title: '序号',
align: 'center',
render: (_text: any, _record, index: number) =>
(pagination.pageNo - 1) * pagination.pageSize + index + 1,
},
{
title: '图片',
align: 'center',
dataIndex: 'imgUrl',
render: (text: string) => <Image src={text} width={50} height={50} />,
},
{ title: '商品名称', align: 'center', dataIndex: 'goodsName' },
{ title: '所属目录', align: 'center', dataIndex: 'directoryName' },
{ title: '创建时间', align: 'center', dataIndex: 'createTime' },
{
title: '状态',
align: 'center',
dataIndex: 'status',
render: (text: number) => (text ? '上架' : '下架'),
},
{
title: '操作',
align: 'center',
render: () => (
dataIndex: 'id',
render: (id: number) => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
<Button type='link' onClick={() => toEditGoods(id)}>
编辑
</Button>
<Button type='link' onClick={() => toRentGoodsDetail(id)}>
详情
</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const [tableData, setTableData] = useState<goodsType>([]);
//分页
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
//筛选
const [query, setQuery] = useState<goodsSearchParameters>({ status: undefined });
// 表格多选
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onTabChange = (key: string) => {
pagination.pageNo = 1;
query.status = key === '1' ? undefined : key === '2' ? 1 : 0;
getGoodsList(query);
setQuery(query);
setActiveTabKey(key);
};
//新增租赁商品
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageSize = pageSize;
pagination.pageNo = pageNo;
getGoodsList(query);
};
//筛选
const searchSuccess = (data: any) => {
pagination.pageNo = 1;
setQuery(filterObjAttr(data, ['time']));
getGoodsList(filterObjAttr(data, ['time']));
};
//商品列表
const getGoodsList = (query?: goodsSearchParameters) => {
GoodsAPI.getGoodsList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
goodsType: 1,
...query,
}).then(({ result }) => {
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
//新增商品
const toAddRentGoods = () => {
navigate({ pathname: '/mallManage/rentGoods/add' });
};
//编辑商品
const toEditGoods = (id: number) => {
navigate({
pathname: '/mallManage/rentGoods/edit',
search: `id=${id}`,
});
};
//商品详情
const toRentGoodsDetail = (id: number) => {
navigate({
pathname: '/mallManage/rentGoods/detail',
search: `id=${id}&isDetail=1`,
});
};
// 表格多选事件
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
};
//获取目录列表
const getDirectoryList = () => {
CategoryManageAPI.getDirectoryListClone({ type: 4 }).then(({ result }) => {
if (result) {
const options = result.map((v) => ({ id: v.id, name: v.directoryName }));
searchColumns[1].options = options;
setSearchColumns(searchColumns);
}
});
};
//商品-批量上下架
const batchOnShelfOrTakeDown = (status: number) => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchOnShelfOrTakeDown({ goodsIds: selectedRowKeys as number[], status }).then(
({ code }) => {
if (code === '200') {
message.success(status ? '上架成功' : '下架成功');
getGoodsList(query);
}
},
);
};
//商品-删除
const deleteGoods = () => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
});
};
useEffect(() => {
getGoodsList();
getDirectoryList();
}, []);
return (
<div className='rent-list'>
<div className='goods-list'>
<SearchBox
search={searchColumns}
child={
......@@ -83,20 +212,54 @@ const RentList = () => {
新增商品
</Button>
}
searchData={searchSuccess}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
{activeTabKey !== '2' && (
<Button
type='primary'
style={{ marginRight: '10px' }}
icon={<ArrowUpOutlined />}
onClick={() => batchOnShelfOrTakeDown(1)}
>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
)}
{activeTabKey !== '3' && (
<Button
type='primary'
style={{ marginRight: '10px' }}
icon={<ArrowDownOutlined />}
onClick={() => batchOnShelfOrTakeDown(0)}
>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
)}
<Button danger icon={<DeleteOutlined />} onClick={deleteGoods}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
<Table
columns={tableColumns}
bordered
dataSource={tableData}
rowKey='id'
rowSelection={{
selectedRowKeys,
onChange: onSelectChange,
}}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
current: pagination.pageNo,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
</Card>
</div>
);
......
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import RichText from '~/components/richText';
const ServiceIntroduce = () => {
const navigate = useNavigate();
......@@ -19,9 +18,7 @@ const ServiceIntroduce = () => {
</Button>
</div>
<div className='service-introduce-title'></div>
<div className='service-introduce-rich-text'>
<RichText richTextHeight={500} />
</div>
<div className='service-introduce-rich-text'></div>
</div>
);
};
......
......@@ -24,6 +24,7 @@ import {
AppstoreOutlined,
CoffeeOutlined,
UnorderedListOutlined,
BookOutlined,
} from '@ant-design/icons';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
......@@ -44,6 +45,7 @@ import CustomListView from '~/pages/customManage/customList';
import CustomMoneyView from '~/pages/customManage/customMoney';
import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
import AccountManageView from '~/pages/systemManage/accountManage';
import CourseManageView from '~/pages/mallManage/courseManage';
// 活动
const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
......@@ -226,6 +228,15 @@ export const routerList: Array<RouteObjectType> = [
},
children: [
{
path: '/mallManage/courseManage',
element: withLoadingComponent(<CourseManageView />),
meta: {
id: 10190,
icon: <BookOutlined />,
title: '课程管理',
},
},
{
path: '/mallManage/serviceList',
element: withLoadingComponent(<ServiceListView />),
meta: {
......@@ -274,6 +285,26 @@ export const routerList: Array<RouteObjectType> = [
},
},
{
path: '/mallManage/rentGoods/edit',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品编辑',
hidden: true,
},
},
{
path: '/mallManage/rentGoods/detail',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品详情',
hidden: true,
},
},
{
path: '/mallManage/mallGoods',
element: withLoadingComponent(<MallGoodsView />),
meta: {
......@@ -293,6 +324,26 @@ export const routerList: Array<RouteObjectType> = [
},
},
{
path: '/mallManage/mallGoods/edit',
element: withLoadingComponent(<MallAddOrEditOrDetailView />),
meta: {
id: 10146,
icon: <SmileOutlined />,
title: '商城商品编辑',
hidden: true,
},
},
{
path: '/mallManage/mallGoods/detail',
element: withLoadingComponent(<MallAddOrEditOrDetailView />),
meta: {
id: 10146,
icon: <SmileOutlined />,
title: '商城商品详情',
hidden: true,
},
},
{
path: '/mallManage/produceList',
element: withLoadingComponent(<ProduceListView />),
meta: {
......@@ -443,6 +494,7 @@ export const routerList: Array<RouteObjectType> = [
id: 26200,
title: '现金管理',
icon: <RedEnvelopeOutlined />,
hidden: true,
},
},
{
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论