From 428989c9931767ed5ff69b09843b23290b99358c Mon Sep 17 00:00:00 2001
From: WUSIJIAN <13825895+wsj0228@user.noreply.gitee.com>
Date: Mon, 24 Nov 2025 16:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AF=BC=E5=85=A5=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 157 +++-
 package.json                                  |   2 +
 src/api/customerService/account/index.ts      |   6 +
 src/api/customerService/product/index.ts      |   0
 src/api/customerService/report/index.ts       |   0
 src/api/customerService/script/index.ts       |   0
 src/views/customerService/account/index.vue   | 480 ++++++-------
 .../product/component/exportDialog.vue        |  48 ++
 .../product/component/importDialog.vue        | 431 +++++++++++
 src/views/customerService/product/index.vue   | 485 +++++++------
 src/views/customerService/report/index.vue    | 670 +++++++++---------
 .../script/component/editRole.vue             | 424 +++++------
 src/views/customerService/script/index.vue    | 442 ++++++------
 13 files changed, 1894 insertions(+), 1251 deletions(-)
 create mode 100644 src/api/customerService/account/index.ts
 create mode 100644 src/api/customerService/product/index.ts
 create mode 100644 src/api/customerService/report/index.ts
 create mode 100644 src/api/customerService/script/index.ts
 create mode 100644 src/views/customerService/product/component/exportDialog.vue
 create mode 100644 src/views/customerService/product/component/importDialog.vue

diff --git a/package-lock.json b/package-lock.json
index abf1d03..616af29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,8 +21,10 @@
         "echarts-gl": "^2.0.9",
         "echarts-wordcloud": "^2.1.0",
         "element-plus": "^2.10.7",
+        "file-saver": "^2.0.5",
         "js-cookie": "^3.0.5",
         "jsplumb": "^2.15.6",
+        "jszip": "^3.10.1",
         "lodash": "^4.17.21",
         "mitt": "^3.0.1",
         "nprogress": "^0.2.0",
@@ -850,6 +852,7 @@
       "version": "1.10.27",
       "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.27.tgz",
       "integrity": "sha512-SliUr/3ZbLAdED8LokzYzWHWMdCB5Cq+UnpXuRy+BIod1j97m4IUFf/D1iIKUBBjBcucgXbz28z96WnenVCB7Q==",
+      "peer": true,
       "peerDependencies": {
         "@interactjs/utils": "1.10.27"
       }
@@ -915,6 +918,7 @@
       "version": "1.10.27",
       "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.27.tgz",
       "integrity": "sha512-ei/qfoQ+9/8k6WzNzdNqHI6cWkIV576N4Ap16r5CoqOWwhA6Xzj3OMHf1g0t1O4eSq2HdJsVJn3eLNfw9HsbeQ==",
+      "peer": true,
       "dependencies": {
         "@interactjs/snappers": "1.10.27"
       },
@@ -976,7 +980,8 @@
     "node_modules/@interactjs/utils": {
       "version": "1.10.27",
       "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.27.tgz",
-      "integrity": "sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw=="
+      "integrity": "sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw==",
+      "peer": true
     },
     "node_modules/@intlify/core-base": {
       "version": "11.1.2",
@@ -1727,6 +1732,7 @@
       "version": "4.17.12",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -1736,6 +1742,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
       "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -1795,6 +1802,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
       "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "7.18.0",
         "@typescript-eslint/types": "7.18.0",
@@ -1963,6 +1971,7 @@
       "resolved": "https://registry.npmjs.org/@uppy/core/-/core-2.3.4.tgz",
       "integrity": "sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@transloadit/prettier-bytes": "0.0.7",
         "@uppy/store-default": "^2.1.1",
@@ -1994,6 +2003,7 @@
       "resolved": "https://registry.npmjs.org/@uppy/xhr-upload/-/xhr-upload-2.1.3.tgz",
       "integrity": "sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@uppy/companion-client": "^2.2.2",
         "@uppy/utils": "^4.1.2",
@@ -2150,6 +2160,7 @@
       "resolved": "https://registry.npmjs.org/@wangeditor/basic-modules/-/basic-modules-1.1.7.tgz",
       "integrity": "sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "is-url": "^1.2.4"
       },
@@ -2182,6 +2193,7 @@
       "resolved": "https://registry.npmjs.org/@wangeditor/core/-/core-1.1.19.tgz",
       "integrity": "sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/event-emitter": "^0.3.3",
         "event-emitter": "^0.3.5",
@@ -2299,6 +2311,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2514,6 +2527,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
       "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "peer": true,
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/commands": "^6.0.0",
@@ -2565,6 +2579,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/countup.js": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.9.0.tgz",
@@ -2707,6 +2727,7 @@
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
       "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ssr-window": "^3.0.0-alpha.1"
       }
@@ -2740,6 +2761,7 @@
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
       "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "peer": true,
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "5.6.1"
@@ -2948,6 +2970,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3235,6 +3258,12 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3588,6 +3617,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immer": {
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -3643,8 +3678,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
@@ -3671,7 +3705,8 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
       "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/is-number": {
       "version": "7.0.0",
@@ -3715,6 +3750,12 @@
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
       "license": "MIT"
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3776,6 +3817,18 @@
       "resolved": "https://registry.npmjs.org/jsplumb/-/jsplumb-2.15.6.tgz",
       "integrity": "sha512-sIpbpz5eMVM+vV+MQzFCidlaa1RsknrQs6LOTKYDjYUDdTAi2AN2bFi94TxB33TifcIsRNV1jebcaxg0tCoPzg=="
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3798,6 +3851,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3816,12 +3878,14 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "peer": true
     },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "peer": true
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -3837,32 +3901,37 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.foreach": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
       "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
       "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -3874,13 +3943,15 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
       "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.toarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
       "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/magic-string": {
       "version": "0.30.21",
@@ -3995,6 +4066,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -4116,6 +4188,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4290,6 +4368,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4343,6 +4427,21 @@
         }
       ]
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -4455,11 +4554,18 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/sass": {
       "version": "1.94.2",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
       "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -4552,6 +4658,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4660,6 +4772,7 @@
       "resolved": "https://registry.npmjs.org/slate/-/slate-0.72.8.tgz",
       "integrity": "sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "immer": "^9.0.6",
         "is-plain-object": "^5.0.0",
@@ -4683,6 +4796,7 @@
       "resolved": "https://registry.npmjs.org/snabbdom/-/snabbdom-3.6.3.tgz",
       "integrity": "sha512-W2lHLLw2qR2Vv0DcMmcxXqcfdBaIcoN+y/86SmHv8fn4DazEQSH6KN3TjZcWvwujW56OHiiirsbHWZb4vx/0fg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.17.0"
       }
@@ -4729,6 +4843,15 @@
       "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==",
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4825,6 +4948,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4896,6 +5020,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4931,14 +5056,14 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
       "version": "6.3.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.4.tgz",
       "integrity": "sha512-BiReIiMS2fyFqbqNT/Qqt4CVITDU9M9vE+DKcVAsB+ZV0wvTKd+3hMbkpxz1b+NmEDMegpVbisKiAZOnvO92Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -5099,6 +5224,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5110,6 +5236,7 @@
       "version": "3.5.24",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
       "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.24",
         "@vue/compiler-sfc": "3.5.24",
diff --git a/package.json b/package.json
index 612e874..6e0c1be 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,10 @@
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "^2.10.7",
+    "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
     "jsplumb": "^2.15.6",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
diff --git a/src/api/customerService/account/index.ts b/src/api/customerService/account/index.ts
new file mode 100644
index 0000000..cd2f438
--- /dev/null
+++ b/src/api/customerService/account/index.ts
@@ -0,0 +1,6 @@
+import request from '/@/utils/request';
+
+/**
+ * 登录api接口集合
+ * @method signIn 用户登录
+ */
diff --git a/src/api/customerService/product/index.ts b/src/api/customerService/product/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/customerService/report/index.ts b/src/api/customerService/report/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/customerService/script/index.ts b/src/api/customerService/script/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/customerService/account/index.vue b/src/views/customerService/account/index.vue
index 50a6eb1..565633a 100644
--- a/src/views/customerService/account/index.vue
+++ b/src/views/customerService/account/index.vue
@@ -1,256 +1,262 @@
 <template>
-    <div class="system-role-container">
-        <el-card shadow="hover">
-            <div class="system-user-search mb15">
-                <el-form :inline="true">
-                    <el-form-item label="客服ID">
-                        <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID"
-                            class="w-50 m-2" clearable />
-                    </el-form-item>
-                    <el-form-item label="客服平台" prop="status" style="width: 200px;">
-                        <el-select placeholder="小红书" clearable size="default" style="width: 240px">
-                            <el-option :label="'小红书'" />
-                            <el-option :label="'抖音'" />
-                            <el-option :label="'快手'" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button size="default" type="primary" class="ml10" @click="roleList">
-                            <el-icon>
-                                <ele-Search />
-                            </el-icon>
-                            查询
-                        </el-button>
-                        <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
-                            <el-icon>
-                                <ele-FolderAdd />
-                            </el-icon>
-                            新增客服
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <el-table :data="tableData.data" style="width: 100%">
-                <el-table-column type="index" label="序号" width="60" />
-                <el-table-column prop="name" label="客服id" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="status" label="客服状态" show-overflow-tooltip>
-                    <template #default="scope">
-                        <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
-                        <el-tag type="info" v-else>禁用</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="key" label="修改人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
-                <el-table-column label="操作" width="220">
-                    <template #default="scope">
-                        <el-button size="small" text type="primary"
-                            @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
-                        <el-button size="small" text type="primary"
-                            @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
-                v-model:limit="tableData.param.pageSize" @pagination="roleList" />
-        </el-card>
-        <EditRole ref="editRoleRef" @getRoleList="roleList" />
-    </div>
+	<div class="system-role-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+				<el-form :inline="true">
+					<el-form-item label="客服ID">
+						<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID" class="w-50 m-2" clearable />
+					</el-form-item>
+					<el-form-item label="客服平台" prop="status" style="width: 200px">
+						<el-select placeholder="小红书" clearable size="default" style="width: 240px">
+							<el-option :label="'小红书'" :value="''" />
+							<el-option :label="'抖音'" :value="''" />
+							<el-option :label="'快手'" :value="''" />
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="roleList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增客服
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="name" label="客服id" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="key" label="修改人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="220">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
+							><el-icon><ele-EditPen /></el-icon>修改</el-button
+						>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
+							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="roleList"
+			/>
+		</el-card>
+		<EditRole ref="editRoleRef" @getRoleList="roleList" />
+	</div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/customerService/account/component/editRole.vue';
-import { deleteRole, getRoleList } from "/@/api/system/role";
+import { deleteRole, getRoleList } from '/@/api/system/role';
 // 定义接口来定义对象的类型
 interface TableData {
-    id: number;
-    status: number;
-    listOrder: number;
-    name: string;
-    remark: string;
-    dataScope: number;
-    createdAt: string;
+	id: number;
+	status: number;
+	listOrder: number;
+	name: string;
+	remark: string;
+	dataScope: number;
+	createdAt: string;
 }
 interface TableDataState {
-    tableData: {
-        data: Array<TableData>;
-        total: number;
-        loading: boolean;
-        param: {
-            roleName: string;
-            roleStatus: string;
-            pageNum: number;
-            pageSize: number;
-        };
-    };
+	tableData: {
+		data: Array<TableData>;
+		total: number;
+		loading: boolean;
+		param: {
+			roleName: string;
+			roleStatus: string;
+			pageNum: number;
+			pageSize: number;
+		};
+	};
 }
 
 const dateList = ref([
-    {
-        "id": 1,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "小红书",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:00:15",
-        "key": 'list'
-    },
-    {
-        "id": 2,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:01:34",
-        "key": 'list'
-    },
-    {
-        "id": 3,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "快手",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "key": '李四'
-    },
-    {
-        "id": 4,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "key": '张三'
-    },
-    {
-        "id": 5,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "key": 'zhang'
-    },
-    {
-        "id": 8,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "快手",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-06 09:53:40",
-        "key": 'list'
-    }
-])
+	{
+		id: 1,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '小红书',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:00:15',
+		key: 'list',
+	},
+	{
+		id: 2,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:01:34',
+		key: 'list',
+	},
+	{
+		id: 3,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '快手',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		key: '李四',
+	},
+	{
+		id: 4,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		key: '张三',
+	},
+	{
+		id: 5,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		key: 'zhang',
+	},
+	{
+		id: 8,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '快手',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-06 09:53:40',
+		key: 'list',
+	},
+]);
 
 export default defineComponent({
-    name: 'apiV1SystemRoleList',
-    components: { EditRole },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const addRoleRef = ref();
-        const editRoleRef = ref();
-        const dataScopeRef = ref();
-        const state = reactive<TableDataState>({
-            tableData: {
-                data: [],
-                total: 0,
-                loading: false,
-                param: {
-                    roleName: '',
-                    roleStatus: '',
-                    pageNum: 1,
-                    pageSize: 10,
-                },
-            },
-        });
-        // 初始化表格数据
-        const initTableData = () => {
-            roleList()
-        };
-        const roleList = () => {
-            const data: Array<TableData> = [];
-            getRoleList(state.tableData.param).then(res => {
-                const list = res.data.list ?? []
-                list.map((item: TableData) => {
-                    data.push({
-                        id: item.id,
-                        status: item.status,
-                        listOrder: item.listOrder,
-                        name: item.name,
-                        remark: item.remark,
-                        dataScope: item.dataScope,
-                        createdAt: item.createdAt,
-                    });
-                })
-                state.tableData.data = dateList.value;
-                state.tableData.total = dateList.value.length;
-            })
-        };
-        // 打开新增角色弹窗
-        const onOpenAddRole = () => {
-            editRoleRef.value.openDialog();
-        };
-        // 打开修改角色弹窗
-        const onOpenEditRole = (row: Object) => {
-            editRoleRef.value.openDialog(toRaw(row));
-        };
+	name: 'apiV1SystemRoleList',
+	components: { EditRole },
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const addRoleRef = ref();
+		const editRoleRef = ref();
+		const dataScopeRef = ref();
+		const state = reactive<TableDataState>({
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					roleName: '',
+					roleStatus: '',
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			roleList();
+		};
+		const roleList = () => {
+			const data: Array<TableData> = [];
+			getRoleList(state.tableData.param).then((res) => {
+				const list = res.data.list ?? [];
+				list.map((item: TableData) => {
+					data.push({
+						id: item.id,
+						status: item.status,
+						listOrder: item.listOrder,
+						name: item.name,
+						remark: item.remark,
+						dataScope: item.dataScope,
+						createdAt: item.createdAt,
+					});
+				});
+				state.tableData.data = dateList.value;
+				state.tableData.total = dateList.value.length;
+			});
+		};
+		// 打开新增角色弹窗
+		const onOpenAddRole = () => {
+			editRoleRef.value.openDialog();
+		};
+		// 打开修改角色弹窗
+		const onOpenEditRole = (row: Object) => {
+			editRoleRef.value.openDialog(toRaw(row));
+		};
 
-        // 删除角色
-        const onRowDel = (row: any) => {
-            ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    deleteRole(row.id).then(() => {
-                        ElMessage.success('删除成功');
-                        proxy.$refs['editRoleRef'].resetMenuSession();
-                        roleList();
-                    })
-                })
-                .catch(() => { });
-        };
-        // 分页改变
-        const onHandleSizeChange = (val: number) => {
-            state.tableData.param.pageSize = val;
-        };
-        // 分页改变
-        const onHandleCurrentChange = (val: number) => {
-            state.tableData.param.pageNum = val;
-        };
-        // 页面加载时
-        onMounted(() => {
-            initTableData();
-        });
-        return {
-            addRoleRef,
-            editRoleRef,
-            dataScopeRef,
-            onOpenAddRole,
-            onOpenEditRole,
-            onRowDel,
-            onHandleSizeChange,
-            onHandleCurrentChange,
-            roleList,
-            ...toRefs(state),
-        };
-    },
+		// 删除角色
+		const onRowDel = (row: any) => {
+			ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					deleteRole(row.id).then(() => {
+						ElMessage.success('删除成功');
+						proxy.$refs['editRoleRef'].resetMenuSession();
+						roleList();
+					});
+				})
+				.catch(() => {});
+		};
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		return {
+			addRoleRef,
+			editRoleRef,
+			dataScopeRef,
+			onOpenAddRole,
+			onOpenEditRole,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			roleList,
+			...toRefs(state),
+		};
+	},
 });
 </script>
diff --git a/src/views/customerService/product/component/exportDialog.vue b/src/views/customerService/product/component/exportDialog.vue
new file mode 100644
index 0000000..c274141
--- /dev/null
+++ b/src/views/customerService/product/component/exportDialog.vue
@@ -0,0 +1,48 @@
+<template>
+	<el-dialog title="是否导出产品" v-model="isShowDialog" width="500px">
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="isShowDialog = false">取消</el-button>
+				<el-button type="primary" @click="handleExport">导出</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+
+export default defineComponent({
+	name: 'ExportDialog',
+	setup() {
+		const isShowDialog = ref(false);
+		const tableData = ref([]);
+
+		const form = reactive({
+			exportType: 'current',
+			fileType: 'xlsx',
+		});
+
+		// 打开对话框
+		const openDialog = (data: any) => {
+			tableData.value = data;
+			isShowDialog.value = true;
+		};
+
+		// 处理导出
+		const handleExport = () => {
+			// 这里处理导出逻辑
+			ElMessage.success('导出成功');
+			isShowDialog.value = false;
+		};
+
+		return {
+			isShowDialog,
+			form,
+			openDialog,
+			handleExport,
+		};
+	},
+});
+</script>
diff --git a/src/views/customerService/product/component/importDialog.vue b/src/views/customerService/product/component/importDialog.vue
new file mode 100644
index 0000000..6d82599
--- /dev/null
+++ b/src/views/customerService/product/component/importDialog.vue
@@ -0,0 +1,431 @@
+<template>
+	<el-dialog title="导入产品" v-model="isShowDialog" width="500px" destroy-on-close>
+		<div class="import-container">
+			<!-- 导入说明 -->
+			<div class="import-instructions mt20" style="margin-bottom: 40px">
+				<el-card shadow="never" class="box-card">
+					<el-text type="info" size="small">
+						<ul class="instruction-list">
+							<li>1. 请先下载模板ZIP包，查看Word文档格式要求</li>
+							<li>2. 按照模板中的Word文档格式准备您的产品文档</li>
+							<li>3. 将您的Word文档打包成ZIP格式上传</li>
+							<li>4. 支持 .docx 格式的Word文档</li>
+						</ul>
+					</el-text>
+				</el-card>
+			</div>
+
+			<!-- 上传区域 -->
+			<el-upload
+				ref="uploadRef"
+				class="upload-demo"
+				drag
+				:action="uploadAction"
+				:headers="uploadHeaders"
+				:data="uploadData"
+				:accept="acceptFileTypes"
+				:limit="1"
+				:on-success="handleSuccess"
+				:on-error="handleError"
+				:before-upload="beforeUpload"
+				:on-exceed="handleExceed"
+				:on-remove="handleRemove"
+			>
+				<div class="el-upload-area">
+					<el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
+					<div class="el-upload__text">将ZIP文件拖到此处，或<em>点击上传</em></div>
+				</div>
+				<template #tip>
+					<div class="el-upload__tip">
+						<el-text type="info" size="small"> 请上传 {{ acceptFileTypes }} 格式文件，且不超过 {{ fileSizeLimit }}MB </el-text>
+					</div>
+				</template>
+			</el-upload>
+
+			<!-- 下载模板按钮 -->
+			<div class="download-section" style="margin-top: 20px; text-align: center">
+				<el-button type="primary" size="default" :loading="downloadLoading" @click="downloadTemplate" style="width: 200px">
+					<template #icon>
+						<el-icon><ele-Download /></el-icon>
+					</template>
+					{{ downloadLoading ? '正在生成模板...' : '下载导入模板' }}
+				</el-button>
+			</div>
+		</div>
+
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="isShowDialog = false">取消</el-button>
+				<el-button type="primary" :loading="loading" @click="submitUpload">
+					{{ loading ? '导入中...' : '开始导入' }}
+				</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { UploadFilled, Download } from '@element-plus/icons-vue';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+
+export default defineComponent({
+	name: 'ImportDialog',
+	components: { UploadFilled, Download },
+	emits: ['getRoleList'],
+	setup(props, { emit }) {
+		const isShowDialog = ref(false);
+		const uploadRef = ref();
+		const loading = ref(false);
+		const downloadLoading = ref(false);
+
+		// 上传配置
+		const uploadAction = ref('/api/product/import-word-zip');
+		const uploadHeaders = reactive({
+			Authorization: 'Bearer ' + localStorage.getItem('token'),
+		});
+		const uploadData = reactive({
+			type: 'word-zip',
+		});
+		const acceptFileTypes = '.zip,.ZIP';
+		const fileSizeLimit = 50;
+
+		// 打开对话框
+		const openDialog = () => {
+			isShowDialog.value = true;
+			loading.value = false;
+			downloadLoading.value = false;
+			if (uploadRef.value) {
+				uploadRef.value.clearFiles();
+			}
+		};
+
+		// 创建Word文档的二进制内容（模拟真实的.docx格式）
+		const createWordDocumentContent = (content: string) => {
+			// Word文档的基本结构（简化版）
+			// 实际Word文档是复杂的XML结构，这里创建一个简单的文本文件
+			// 在实际项目中应该使用后端生成真正的Word文档
+
+			// 创建一个包含基本Word文档结构的文本
+			const wordContent = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<?mso-application progid="Word.Document"?>
+<w:wordDocument xmlns:w="http://schemas.microsoft.com/office/word/2003/wordml">
+	<w:body>
+		<w:p>
+			<w:r>
+				<w:t>${content.replace(/\n/g, '</w:t></w:r></w:p><w:p><w:r><w:t>')}</w:t>
+			</w:r>
+		</w:p>
+	</w:body>
+</w:wordDocument>`;
+
+			return new Blob([wordContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
+		};
+
+		// 创建文本文件内容
+		const createTextFile = (content: string) => {
+			return new Blob([content], { type: 'text/plain;charset=utf-8' });
+		};
+
+		// 下载模板 - 修复版本：生成包含真实文件的ZIP包
+		const downloadTemplate = async () => {
+			downloadLoading.value = true;
+
+			try {
+				const zip = new JSZip();
+
+				// 1. 创建产品说明书模板内容
+				const manualContent = `产品说明书模板
+
+产品名称：_________________________
+产品型号：_________________________
+创建人：___________________________
+创建时间：_________________________
+
+产品描述：
+___________________________________
+___________________________________
+
+技术参数：
+• 规格：___________________________
+• 尺寸：___________________________
+• 重量：___________________________
+• 材质：___________________________
+
+功能特点：
+1. ________________________________
+2. ________________________________
+3. ________________________________
+
+使用说明：
+___________________________________
+___________________________________
+
+注意事项：
+• ________________________________
+• ________________________________
+• ________________________________`;
+
+				// 2. 创建技术规格书模板内容
+				const specContent = `技术规格书模板
+
+产品名称：_________________________
+产品型号：_________________________
+
+技术规格：
+1. 基本参数
+   - 工作电压：___________________
+   - 功率：_______________________
+   - 尺寸：_______________________
+   - 重量：_______________________
+
+2. 性能指标
+   - 精度：_______________________
+   - 范围：_______________________
+   - 寿命：_______________________
+
+3. 环境要求
+   - 工作温度：___________________
+   - 存储温度：___________________
+   - 湿度：_______________________
+
+4. 安全标准
+   - 认证：_______________________
+   - 防护等级：___________________`;
+
+				// 3. 创建使用说明文档
+				const readmeContent = `产品文档导入模板使用说明
+================================
+
+欢迎使用产品文档导入模板！
+
+📁 ZIP包内容说明：
+-----------------
+1. 产品说明书模板.docx    - 产品详细说明文档模板
+2. 技术规格书模板.docx    - 技术参数文档模板
+3. 使用说明.txt           - 本说明文件
+
+📝 使用步骤：
+-----------
+1. 解压本ZIP包到您的电脑
+2. 打开Word文档模板
+3. 按照模板格式填写您的产品信息
+4. 保存您填写好的Word文档
+5. 将填写好的文档重新打包成ZIP格式
+6. 在系统中上传您制作的ZIP包
+
+⚙️ 文档要求：
+-----------
+• 必须使用 .docx 格式（Word 2007及以上版本）
+• 文档命名请使用有意义的名称
+• 确保填写所有必填字段
+• 文档大小不超过10MB/个
+
+📞 技术支持：
+-----------
+如有问题请联系系统管理员。
+
+祝您使用愉快！`;
+
+				// 创建真实的文件Blob对象
+				const manualBlob = createWordDocumentContent(manualContent);
+				const specBlob = createWordDocumentContent(specContent);
+				const readmeBlob = createTextFile(readmeContent);
+
+				// 将文件添加到ZIP包
+				zip.file('产品说明书模板.docx', manualBlob);
+				zip.file('技术规格书模板.docx', specBlob);
+				zip.file('使用说明.txt', readmeBlob);
+
+				// 生成ZIP包
+				const zipBlob = await zip.generateAsync({
+					type: 'blob',
+					compression: 'DEFLATE',
+					compressionOptions: {
+						level: 6,
+					},
+				});
+
+				// 重要：检查文件大小，确保不是空文件
+				if (zipBlob.size === 0) {
+					throw new Error('生成的ZIP包为空，请检查文件内容');
+				}
+
+				// 下载文件
+				saveAs(zipBlob, `产品文档导入模板_${new Date().toISOString().split('T')[0]}.zip`);
+
+				ElMessage.success({
+					message: `模板下载成功！文件大小：${(zipBlob.size / 1024).toFixed(2)}KB`,
+					duration: 3000,
+				});
+
+				// 显示使用提示
+				setTimeout(() => {
+					ElMessage.info('下载完成后请解压ZIP包查看Word文档模板');
+				}, 1000);
+			} catch (error) {
+				console.error('模板下载失败:', error);
+				ElMessage.error({
+					message: '模板生成失败：' + (error instanceof Error ? error.message : '未知错误'),
+					duration: 5000,
+				});
+
+				// 提供备用方案
+				setTimeout(() => {
+					ElMessageBox.alert('如果模板下载仍有问题，请联系管理员获取手动模板文件。', '下载失败', {
+						confirmButtonText: '确定',
+						type: 'warning',
+					});
+				}, 1000);
+			} finally {
+				downloadLoading.value = false;
+			}
+		};
+
+		// 上传前校验
+		const beforeUpload = (file: File) => {
+			const isZip = file.type === 'application/zip' || file.name.toLowerCase().endsWith('.zip');
+			const isLt50M = file.size / 1024 / 1024 < fileSizeLimit;
+
+			if (!isZip) {
+				ElMessage.error('请上传ZIP格式的压缩包文件!');
+				return false;
+			}
+			if (!isLt50M) {
+				ElMessage.error(`ZIP文件大小不能超过${fileSizeLimit}MB!`);
+				return false;
+			}
+
+			ElMessage.info(`开始上传ZIP包: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`);
+			return true;
+		};
+
+		// 文件超出限制
+		const handleExceed = () => {
+			ElMessage.warning('只能上传一个ZIP包文件，请先删除当前文件');
+		};
+
+		// 移除文件
+		const handleRemove = () => {
+			// 文件被移除时的处理
+		};
+
+		// 上传成功
+		const handleSuccess = (response: any) => {
+			loading.value = false;
+			if (response.code === 200) {
+				ElMessage.success('Word文档导入成功');
+				emit('getRoleList');
+				isShowDialog.value = false;
+			} else {
+				ElMessage.error(response.msg || 'Word文档ZIP包导入失败');
+			}
+		};
+
+		// 上传失败
+		const handleError = (error: any) => {
+			loading.value = false;
+			ElMessage.error('ZIP包上传失败，请重试');
+			console.error('ZIP upload error:', error);
+		};
+
+		// 手动提交上传
+		const submitUpload = () => {
+			if (!uploadRef.value || !uploadRef.value.uploadFiles.length) {
+				ElMessage.warning('请先选择要上传的ZIP包文件');
+				return;
+			}
+
+			ElMessageBox.confirm('确认导入选中的ZIP包吗？', '导入确认', {
+				confirmButtonText: '确认导入',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					loading.value = true;
+					uploadRef.value.submit();
+				})
+				.catch(() => {
+					// 用户取消
+				});
+		};
+
+		return {
+			isShowDialog,
+			uploadRef,
+			loading,
+			downloadLoading,
+			uploadAction,
+			uploadHeaders,
+			uploadData,
+			acceptFileTypes,
+			fileSizeLimit,
+			openDialog,
+			downloadTemplate,
+			beforeUpload,
+			handleExceed,
+			handleRemove,
+			handleSuccess,
+			handleError,
+			submitUpload,
+		};
+	},
+});
+</script>
+
+<style scoped>
+.import-container {
+	padding: 10px 0;
+}
+
+.download-section {
+	text-align: center;
+}
+
+.template-tips {
+	margin-top: 10px;
+}
+
+.upload-demo {
+	width: 100%;
+}
+
+.el-upload-area {
+	padding: 20px;
+	text-align: center;
+}
+
+.el-icon--upload {
+	font-size: 48px;
+	color: #c0c4cc;
+	margin-bottom: 16px;
+}
+
+.import-instructions .card-header {
+	font-weight: 600;
+}
+
+.instruction-list {
+	margin: 0;
+	padding-left: 16px;
+	line-height: 1.8;
+}
+
+.instruction-list li {
+	margin-bottom: 4px;
+}
+
+:deep(.el-upload-dragger) {
+	width: 100%;
+	height: 180px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+:deep(.el-upload-list) {
+	margin-top: 10px;
+}
+</style>
diff --git a/src/views/customerService/product/index.vue b/src/views/customerService/product/index.vue
index fdc09b3..fde7a55 100644
--- a/src/views/customerService/product/index.vue
+++ b/src/views/customerService/product/index.vue
@@ -1,236 +1,287 @@
 <template>
-    <div class="system-role-container">
-        <el-card shadow="hover">
-            <div class="system-user-search mb15">
-                <el-form :inline="true">
-                    <el-form-item label="产品名称">
-                        <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入产品名称"
-                            class="w-50 m-2" clearable />
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button size="default" type="primary" class="ml10" @click="roleList">
-                            <el-icon>
-                                <ele-Search />
-                            </el-icon>
-                            查询
-                        </el-button>
-                        <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
-                            <el-icon>
-                                <ele-FolderAdd />
-                            </el-icon>
-                            新增产品
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <el-table :data="tableData.data" style="width: 100%">
-                <el-table-column type="index" label="序号" width="60" />
-                <el-table-column prop="name" label="产品名称" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="remark" label="创建人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="status" label="修改人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
-                <el-table-column label="操作" width="220">
-                    <template #default="scope">
-                        <el-button size="small" text type="primary"
-                            @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
-                        <el-button size="small" text type="primary"
-                            @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
-                v-model:limit="tableData.param.pageSize" @pagination="roleList" />
-        </el-card>
-        <EditRole ref="editRoleRef" @getRoleList="roleList" />
-    </div>
+	<div class="system-role-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+				<el-form :inline="true">
+					<el-form-item label="产品名称">
+						<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入产品名称" class="w-50 m-2" clearable />
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="roleList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增产品
+						</el-button>
+						<!-- 添加导入导出按钮 -->
+						<el-button size="default" type="warning" class="ml10" @click="onOpenImport">
+							<el-icon>
+								<ele-Upload />
+							</el-icon>
+							导入
+						</el-button>
+						<el-button size="default" type="info" class="ml10" @click="onOpenExport">
+							<el-icon>
+								<ele-Download />
+							</el-icon>
+							导出
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="name" label="产品名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="remark" label="创建人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" label="修改人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="220">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
+							><el-icon><ele-EditPen /></el-icon>修改</el-button
+						>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
+							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="roleList"
+			/>
+		</el-card>
+
+		<EditRole ref="editRoleRef" @getRoleList="roleList" />
+
+		<!-- 添加导入导出对话框 -->
+		<ImportDialog ref="importDialogRef" @getRoleList="roleList" />
+		<ExportDialog ref="exportDialogRef" />
+	</div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/customerService/product/component/editRole.vue';
-import { deleteRole, getRoleList } from "/@/api/system/role";
+import { deleteRole, getRoleList } from '/@/api/system/role';
+import ImportDialog from '/@/views/customerService/product/component/importDialog.vue';
+import ExportDialog from '/@/views/customerService/product/component/exportDialog.vue';
+
 // 定义接口来定义对象的类型
 interface TableData {
-    id: number;
-    status: number;
-    listOrder: number;
-    name: string;
-    remark: string;
-    dataScope: number;
-    createdAt: string;
+	id: number;
+	status: number;
+	listOrder: number;
+	name: string;
+	remark: string;
+	dataScope: number;
+	createdAt: string;
 }
 interface TableDataState {
-    tableData: {
-        data: Array<TableData>;
-        total: number;
-        loading: boolean;
-        param: {
-            roleName: string;
-            roleStatus: string;
-            pageNum: number;
-            pageSize: number;
-        };
-    };
+	tableData: {
+		data: Array<TableData>;
+		total: number;
+		loading: boolean;
+		param: {
+			roleName: string;
+			roleStatus: string;
+			pageNum: number;
+			pageSize: number;
+		};
+	};
 }
 
 const dateList = ref([
-    {
-        "id": 1,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:00:15"
-    },
-    {
-        "id": 2,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:01:34"
-    },
-    {
-        "id": 3,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39"
-    },
-    {
-        "id": 4,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39"
-    },
-    {
-        "id": 5,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39"
-    },
-    {
-        "id": 8,
-        "status": '李四',
-        "listOrder": 0,
-        "name": "xxx药品",
-        "remark": "张三",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-06 09:53:40"
-    }
-])
+	{
+		id: 1,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:00:15',
+	},
+	{
+		id: 2,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:01:34',
+	},
+	{
+		id: 3,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+	},
+	{
+		id: 4,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+	},
+	{
+		id: 5,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+	},
+	{
+		id: 8,
+		status: '李四',
+		listOrder: 0,
+		name: 'xxx药品',
+		remark: '张三',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-06 09:53:40',
+	},
+]);
 
 export default defineComponent({
-    name: 'apiV1SystemRoleList',
-    components: { EditRole },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const addRoleRef = ref();
-        const editRoleRef = ref();
-        const dataScopeRef = ref();
-        const state = reactive<TableDataState>({
-            tableData: {
-                data: [],
-                total: 0,
-                loading: false,
-                param: {
-                    roleName: '',
-                    roleStatus: '',
-                    pageNum: 1,
-                    pageSize: 10,
-                },
-            },
-        });
-        // 初始化表格数据
-        const initTableData = () => {
-            roleList()
-        };
-        const roleList = () => {
-            const data: Array<TableData> = [];
-            getRoleList(state.tableData.param).then(res => {
-                const list = res.data.list ?? []
-                list.map((item: TableData) => {
-                    data.push({
-                        id: item.id,
-                        status: item.status,
-                        listOrder: item.listOrder,
-                        name: item.name,
-                        remark: item.remark,
-                        dataScope: item.dataScope,
-                        createdAt: item.createdAt,
-                    });
-                })
-                state.tableData.data = dateList.value;
-                state.tableData.total = dateList.value.length;
-            })
-        };
-        // 打开新增角色弹窗
-        const onOpenAddRole = () => {
-            editRoleRef.value.openDialog();
-        };
-        // 打开修改角色弹窗
-        const onOpenEditRole = (row: Object) => {
-            editRoleRef.value.openDialog(toRaw(row));
-        };
+	name: 'apiV1SystemRoleList',
+	components: { EditRole, ImportDialog, ExportDialog },
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const addRoleRef = ref();
+		const editRoleRef = ref();
+		const importDialogRef = ref();
+		const exportDialogRef = ref();
+		const dataScopeRef = ref();
+		const state = reactive<TableDataState>({
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					roleName: '',
+					roleStatus: '',
+					pageNum: 1,
+					pageSize: 10,
+				},
+			},
+		});
 
-        // 删除角色
-        const onRowDel = (row: any) => {
-            ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    deleteRole(row.id).then(() => {
-                        ElMessage.success('删除成功');
-                        proxy.$refs['editRoleRef'].resetMenuSession();
-                        roleList();
-                    })
-                })
-                .catch(() => { });
-        };
-        // 分页改变
-        const onHandleSizeChange = (val: number) => {
-            state.tableData.param.pageSize = val;
-        };
-        // 分页改变
-        const onHandleCurrentChange = (val: number) => {
-            state.tableData.param.pageNum = val;
-        };
-        // 页面加载时
-        onMounted(() => {
-            initTableData();
-        });
-        return {
-            addRoleRef,
-            editRoleRef,
-            dataScopeRef,
-            onOpenAddRole,
-            onOpenEditRole,
-            onRowDel,
-            onHandleSizeChange,
-            onHandleCurrentChange,
-            roleList,
-            ...toRefs(state),
-        };
-    },
+		// 初始化表格数据
+		const initTableData = () => {
+			roleList();
+		};
+
+		const roleList = () => {
+			const data: Array<TableData> = [];
+			getRoleList(state.tableData.param).then((res) => {
+				const list = res.data.list ?? [];
+				list.map((item: TableData) => {
+					data.push({
+						id: item.id,
+						status: item.status,
+						listOrder: item.listOrder,
+						name: item.name,
+						remark: item.remark,
+						dataScope: item.dataScope,
+						createdAt: item.createdAt,
+					});
+				});
+				state.tableData.data = dateList.value;
+				state.tableData.total = dateList.value.length;
+			});
+		};
+
+		// 打开新增角色弹窗
+		const onOpenAddRole = () => {
+			editRoleRef.value.openDialog();
+		};
+
+		// 打开修改角色弹窗
+		const onOpenEditRole = (row: Object) => {
+			editRoleRef.value.openDialog(toRaw(row));
+		};
+
+		// 打开导入弹窗
+		const onOpenImport = () => {
+			importDialogRef.value.openDialog();
+		};
+
+		// 打开导出弹窗
+		const onOpenExport = () => {
+			exportDialogRef.value.openDialog(state.tableData.data);
+		};
+
+		// 删除角色
+		const onRowDel = (row: any) => {
+			ElMessageBox.confirm(`此操作将永久删除角色："${row.name}"，是否继续?`, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					deleteRole(row.id).then(() => {
+						ElMessage.success('删除成功');
+						proxy.$refs['editRoleRef']?.resetMenuSession?.();
+						roleList();
+					});
+				})
+				.catch(() => {});
+		};
+
+		// 分页改变
+		const onHandleSizeChange = (val: number) => {
+			state.tableData.param.pageSize = val;
+		};
+
+		// 分页改变
+		const onHandleCurrentChange = (val: number) => {
+			state.tableData.param.pageNum = val;
+		};
+
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+
+		return {
+			addRoleRef,
+			editRoleRef,
+			importDialogRef,
+			exportDialogRef,
+			dataScopeRef,
+			onOpenAddRole,
+			onOpenEditRole,
+			onOpenImport,
+			onOpenExport,
+			onRowDel,
+			onHandleSizeChange,
+			onHandleCurrentChange,
+			roleList,
+			...toRefs(state),
+		};
+	},
 });
 </script>
diff --git a/src/views/customerService/report/index.vue b/src/views/customerService/report/index.vue
index f01f829..6bdfed4 100644
--- a/src/views/customerService/report/index.vue
+++ b/src/views/customerService/report/index.vue
@@ -1,68 +1,70 @@
 <template>
-    <div class="system-dic-container">
-        <el-card shadow="hover">
-            <div class="system-user-search mb15">
-                <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+	<div class="system-dic-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+					<el-form-item label="客服平台" prop="status" style="width: 200px">
+						<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default" style="width: 240px">
+							<el-option :label="'小红书'" :value="''" />
+							<el-option :label="'抖音'" :value="''" />
+							<el-option :label="'快手'" :value="''" />
+						</el-select>
+					</el-form-item>
 
-
-
-
-                    <el-form-item label="客服平台" prop="status" style="width: 200px;">
-                        <el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default"
-                            style="width: 240px">
-                            <el-option :label="'小红书'" />
-                            <el-option :label="'抖音'" />
-                            <el-option :label="'快手'" />
-                        </el-select>
-                    </el-form-item>
-
-
-
-                    <el-form-item label="" prop="dateRange">
-                        <el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px"
-                            value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="请选择开始日期"
-                            end-placeholder="请选择结束日期"></el-date-picker>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button size="default" type="primary" class="ml10" @click="dataList">
-                            <el-icon>
-                                <ele-Search />
-                            </el-icon>
-                            查询
-                        </el-button>
-                        <el-button size="default" @click="resetQuery(queryRef)">
-                            <el-icon>
-                                <ele-Refresh />
-                            </el-icon>
-                            重置
-                        </el-button>
-
-                    </el-form-item>
-                </el-form>
-            </div>
-            <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
-                <!-- <el-table-column type="selection" width="55" align="center" /> -->
-                <el-table-column label="日期" align="center" prop="loginTime" width="180" />
-                <el-table-column label="客服平台" align="center" prop="platform" />
-                <el-table-column label="客服ID" align="center" prop="infoId" />
-                <el-table-column label="客服姓名" align="center" prop="loginName" />
-                <el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
-                <el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
-                <el-table-column label="留资卡发送数量" align="center" prop="browser" />
-                <el-table-column label="名片发送数" align="center" prop="os" />
-                <!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
-                <el-table-column label="留资人数" align="center" prop="status" />
-                <el-table-column label="接待人数" align="center" prop="msg" />
-                <el-table-column label="30秒回复率" alian="center" prop="module" />
-                <el-table-column label="60秒回复率" alian="center" prop="module" />
-                <el-table-column label="3分钟回复率" alian="center" prop="module" />
-
-
-            </el-table>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
-                v-model:limit="tableData.param.pageSize" @pagination="dataList" />
-        </el-card>
-    </div>
+					<el-form-item label="" prop="dateRange">
+						<el-date-picker
+							v-model="tableData.param.dateRange"
+							size="default"
+							style="width: 240px"
+							value-format="YYYY-MM-DD"
+							type="daterange"
+							range-separator="-"
+							start-placeholder="请选择开始日期"
+							end-placeholder="请选择结束日期"
+						></el-date-picker>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="dataList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" @click="resetQuery(queryRef)">
+							<el-icon>
+								<ele-Refresh />
+							</el-icon>
+							重置
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+				<!-- <el-table-column type="selection" width="55" align="center" /> -->
+				<el-table-column label="日期" align="center" prop="loginTime" width="180" />
+				<el-table-column label="客服平台" align="center" prop="platform" />
+				<el-table-column label="客服ID" align="center" prop="infoId" />
+				<el-table-column label="客服姓名" align="center" prop="loginName" />
+				<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
+				<el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
+				<el-table-column label="留资卡发送数量" align="center" prop="browser" />
+				<el-table-column label="名片发送数" align="center" prop="os" />
+				<!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
+				<el-table-column label="留资人数" align="center" prop="status" />
+				<el-table-column label="接待人数" align="center" prop="msg" />
+				<el-table-column label="30秒回复率" alian="center" prop="module" />
+				<el-table-column label="60秒回复率" alian="center" prop="module" />
+				<el-table-column label="3分钟回复率" alian="center" prop="module" />
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="dataList"
+			/>
+		</el-card>
+	</div>
 </template>
 
 <script lang="ts">
@@ -73,288 +75,282 @@ import { log } from 'console';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-    infoId: number;
-    loginName: string;
-    ipaddr: string;
-    loginLocation: string;
-    browser: string;
-    os: string;
-    status: number;
-    msg: string;
-    loginTime: string;
-    module: string;
+	infoId: number;
+	loginName: string;
+	ipaddr: string;
+	loginLocation: string;
+	browser: string;
+	os: string;
+	status: number;
+	msg: string;
+	loginTime: string;
+	module: string;
 }
 interface TableDataState {
-    ids: number[];
-    tableData: {
-        data: Array<TableDataRow>;
-        total: number;
-        loading: boolean;
-        param: {
-            pageNum: number;
-            pageSize: number;
-            dateRange: string[];
-            status: string;
-            ipaddr: string;
-            loginLocation: any;
-            userName: string;
-        };
-    };
+	ids: number[];
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			dateRange: string[];
+			status: string;
+			ipaddr: string;
+			loginLocation: any;
+			userName: string;
+		};
+	};
 }
 
 export default defineComponent({
-    name: 'apiV1SystemLoginLogList',
-    setup() {
+	name: 'apiV1SystemLoginLogList',
+	setup() {
+		//模拟数据
+		const dateList = ref([
+			{
+				infoId: 434569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '抖音',
+			},
+			{
+				infoId: 424569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+			{
+				infoId: 414569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '快手',
+			},
+			{
+				infoId: 404569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+			{
+				infoId: 394569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+			{
+				infoId: 384569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '快手',
+			},
+			{
+				infoId: 374569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+			{
+				infoId: 364569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '抖音',
+			},
+			{
+				infoId: 354569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+			{
+				infoId: 344569527,
+				loginName: 'demo',
+				ipaddr: '0',
+				loginLocation: '0',
+				browser: '0',
+				os: '0',
+				status: 0,
+				msg: '0',
+				loginTime: '2025-11-22',
+				module: '0',
+				platform: '小红书',
+			},
+		]);
 
-        //模拟数据
-        const dateList = ref([
-            {
-                "infoId": 434569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '抖音'
-            },
-            {
-                "infoId": 424569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            },
-            {
-                "infoId": 414569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '快手'
-            },
-            {
-                "infoId": 404569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            },
-            {
-                "infoId": 394569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            },
-            {
-                "infoId": 384569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '快手'
-            },
-            {
-                "infoId": 374569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            },
-            {
-                "infoId": 364569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '抖音'
-            },
-            {
-                "infoId": 354569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            },
-            {
-                "infoId": 344569527,
-                "loginName": "demo",
-                "ipaddr": "0",
-                "loginLocation": "0",
-                "browser": "0",
-                "os": "0",
-                "status": 0,
-                "msg": "0",
-                "loginTime": "2025-11-22",
-                "module": "0",
-                "platform": '小红书'
-            }
-        ])
+		const { proxy } = getCurrentInstance() as any;
+		const queryRef = ref();
+		const { admin_login_status } = proxy.useDict('admin_login_status');
+		const state = reactive<TableDataState>({
+			ids: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					dateRange: [],
+					status: '',
+					ipaddr: '',
+					loginLocation: '',
+					userName: '',
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			dataList();
+		};
 
+		const dataList = () => {
+			// logList(state.tableData.param).then((res: any) => {
+			//     state.tableData.data = res.data.list;
+			//     console.log(state.tableData.data, '11111');
+			//     state.tableData.total = res.data.total;
 
+			// });
 
-        const { proxy } = getCurrentInstance() as any;
-        const queryRef = ref();
-        const { admin_login_status } = proxy.useDict('admin_login_status')
-        const state = reactive<TableDataState>({
-            ids: [],
-            tableData: {
-                data: [],
-                total: 0,
-                loading: false,
-                param: {
-                    pageNum: 1,
-                    pageSize: 10,
-                    dateRange: [],
-                    status: '',
-                    ipaddr: '',
-                    loginLocation: '',
-                    userName: ''
-                },
-            },
-        });
-        // 初始化表格数据
-        const initTableData = () => {
-            dataList()
-        };
-
-
-
-        const dataList = () => {
-            // logList(state.tableData.param).then((res: any) => {
-            //     state.tableData.data = res.data.list;
-            //     console.log(state.tableData.data, '11111');
-            //     state.tableData.total = res.data.total;
-
-            // });
-
-            state.tableData.data = dateList.value;
-            console.log(state.tableData.data, '11111');
-            state.tableData.total = dateList.value.length;
-
-        };
-        // 删除日志
-        const onRowDel = (row: TableDataRow) => {
-            let msg = '你确定要删除所选数据？';
-            let ids: number[] = [];
-            if (row) {
-                msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
-                ids = [row.infoId]
-                4569527
-            } else {
-                ids = state.ids
-            }
-            if (ids.length === 0) {
-                ElMessage.error('请选择要删除的数据。');
-                return
-            }
-            ElMessageBox.confirm(msg, '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    deleteLog(ids).then(() => {
-                        ElMessage.success('删除成功');
-                        dataList();
-                    })
-                })
-                .catch(() => { });
-        };
-        // 清空日志
-        const onRowClear = () => {
-            ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    clearLog().then(() => {
-                        ElMessage.success('清除成功');
-                        dataList();
-                    })
-                })
-                .catch(() => { });
-        };
-        // 页面加载时
-        onMounted(() => {
-            initTableData();
-        });
-        /** 重置按钮操作 */
-        const resetQuery = (formEl: FormInstance | undefined) => {
-            if (!formEl) return
-            formEl.resetFields()
-            dataList()
-        };
-        // 多选框选中数据
-        const handleSelectionChange = (selection: TableDataRow[]) => {
-            state.ids = selection.map(item => item.infoId)
-            4569527
-        };
-        // 登录状态字典翻译
-        const statusFormat = (row: TableDataRow) => {
-            return proxy.selectDictLabel(unref(admin_login_status), row.status);
-        };
-        return {
-            queryRef,
-            onRowDel,
-            dataList,
-            resetQuery,
-            handleSelectionChange,
-            statusFormat,
-            onRowClear,
-            admin_login_status,
-            ...toRefs(state),
-        };
-    },
+			state.tableData.data = dateList.value;
+			console.log(state.tableData.data, '11111');
+			state.tableData.total = dateList.value.length;
+		};
+		// 删除日志
+		const onRowDel = (row: TableDataRow) => {
+			let msg = '你确定要删除所选数据？';
+			let ids: number[] = [];
+			if (row) {
+				msg = `此操作将永久删除：“${row.loginName}”，是否继续?`;
+				ids = [row.infoId];
+				4569527;
+			} else {
+				ids = state.ids;
+			}
+			if (ids.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					deleteLog(ids).then(() => {
+						ElMessage.success('删除成功');
+						dataList();
+					});
+				})
+				.catch(() => {});
+		};
+		// 清空日志
+		const onRowClear = () => {
+			ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					clearLog().then(() => {
+						ElMessage.success('清除成功');
+						dataList();
+					});
+				})
+				.catch(() => {});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			dataList();
+		};
+		// 多选框选中数据
+		const handleSelectionChange = (selection: TableDataRow[]) => {
+			state.ids = selection.map((item) => item.infoId);
+			4569527;
+		};
+		// 登录状态字典翻译
+		const statusFormat = (row: TableDataRow) => {
+			return proxy.selectDictLabel(unref(admin_login_status), row.status);
+		};
+		return {
+			queryRef,
+			onRowDel,
+			dataList,
+			resetQuery,
+			handleSelectionChange,
+			statusFormat,
+			onRowClear,
+			admin_login_status,
+			...toRefs(state),
+		};
+	},
 });
 </script>
diff --git a/src/views/customerService/script/component/editRole.vue b/src/views/customerService/script/component/editRole.vue
index 6c80119..7bf26d9 100644
--- a/src/views/customerService/script/component/editRole.vue
+++ b/src/views/customerService/script/component/editRole.vue
@@ -1,32 +1,32 @@
 <template>
-  <div class="system-edit-role-container">
-    <el-dialog title="" v-model="isShowDialog" width="769px">
-      <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
-        <el-row :gutter="35">
-
-          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="标签" prop="name">
-              <el-input placeholder="小红书" clearable></el-input>
-            </el-form-item>
-          </el-col>
-          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+	<div class="system-edit-role-container">
+		<el-dialog title="" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="标签" prop="name">
+							<el-input placeholder="小红书" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="排序">
               <el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序"
                 class="w100" />
             </el-form-item>
           </el-col> -->
-          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="客服状态">
               <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启"
                 inactive-text="禁"></el-switch>
             </el-form-item>
           </el-col> -->
-          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-            <el-form-item label="话术描述">
-              <el-input type="textarea" placeholder="请输入话术" maxlength="150"></el-input>
-            </el-form-item>
-          </el-col>
-          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+					<!-- 新增富文本编辑器 -->
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="产品详情" prop="content">
+							<Editor height="400px" placeholder="请输入产品详细描述..." />
+						</el-form-item>
+					</el-col>
+					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
             <el-form-item label="菜单权限">
               <el-row :gutter="35">
                 <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -42,223 +42,227 @@
               </el-row>
             </el-form-item>
           </el-col> -->
-        </el-row>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="onCancel" size="default">取 消</el-button>
-          <el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' :
-            '修改' }}</el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-  </div>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' : '修改' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
 </template>
 
 <script lang="ts">
 import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
-import { addRole, editRole, getRole, getRoleParams } from "/@/api/system/role";
-import { ElMessage } from "element-plus";
-import { refreshBackEndControlRoutes } from "/@/router/backEnd";
-
+import { addRole, editRole, getRole, getRoleParams } from '/@/api/system/role';
+import { ElMessage } from 'element-plus';
+import { refreshBackEndControlRoutes } from '/@/router/backEnd';
+// 引入富文本编辑器组件
+import Editor from '/@/components/editor/index.vue';
 
 // 定义接口来定义对象的类型
 interface MenuDataTree {
-  id: number;
-  pid: number;
-  title: string;
-  children?: MenuDataTree[];
+	id: number;
+	pid: number;
+	title: string;
+	children?: MenuDataTree[];
 }
 interface DialogRow {
-  id: number;
-  name: string;
-  status: number;
-  listOrder: number;
-  remark: string;
-  menuIds: Array<number>
+	id: number;
+	name: string;
+	status: number;
+	listOrder: number;
+	remark: string;
+	menuIds: Array<number>;
 }
 interface RoleState {
-  loading: boolean;
-  isShowDialog: boolean;
-  formData: DialogRow;
-  menuData: Array<MenuDataTree>;
-  menuExpand: boolean;
-  menuNodeAll: boolean;
-  menuCheckStrictly: boolean;
-  menuProps: {
-    children: string;
-    label: string;
-  };
-  rules: object;
+	loading: boolean;
+	isShowDialog: boolean;
+	formData: DialogRow;
+	menuData: Array<MenuDataTree>;
+	menuExpand: boolean;
+	menuNodeAll: boolean;
+	menuCheckStrictly: boolean;
+	menuProps: {
+		children: string;
+		label: string;
+	};
+	rules: object;
 }
 
 export default defineComponent({
-  name: 'systemEditRole',
-  setup(props, { emit }) {
-    const { proxy } = getCurrentInstance() as any;
-    const formRef = ref<HTMLElement | null>(null);
-    const menuRef = ref();
-    const state = reactive<RoleState>({
-      loading: false,
-      isShowDialog: false,
-      formData: {
-        id: 0,
-        name: '',
-        status: 1,
-        listOrder: 0,
-        remark: '',
-        menuIds: []
-      },
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" },
-        ]
-      },
-      menuData: [],
-      menuExpand: false,
-      menuNodeAll: false,
-      menuCheckStrictly: false,
-      menuProps: {
-        children: 'children',
-        label: 'title',
-      },
-    });
-    // 打开弹窗
-    const openDialog = (row?: DialogRow) => {
-      resetForm();
-      getMenuData();
-      if (row) {
-        getRole(row.id).then((res: any) => {
-          if (res.data.role) {
-            state.formData = res.data.role;
-            state.formData.menuIds = res.data.menuIds ?? []
-          }
-        })
-      }
-      state.isShowDialog = true;
-    };
-    // 关闭弹窗
-    const closeDialog = () => {
-      state.isShowDialog = false;
-    };
-    // 取消
-    const onCancel = () => {
-      closeDialog();
-    };
-    // 新增
-    const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          state.loading = true;
-          state.formData.menuIds = getMenuAllCheckedKeys();
-          if (state.formData.id === 0) {
-            //添加
-            addRole(state.formData).then(() => {
-              ElMessage.success('角色添加成功');
-              closeDialog(); // 关闭弹窗
-              resetMenuSession()
-              emit('getRoleList')
-            }).finally(() => {
-              state.loading = false;
-            })
-          } else {
-            //修改
-            editRole(state.formData).then(() => {
-              ElMessage.success('角色修改成功');
-              closeDialog(); // 关闭弹窗
-              resetMenuSession()
-              emit('getRoleList')
-            }).finally(() => {
-              state.loading = false;
-            })
-          }
-        }
-      });
-    };
-    // 获取菜单结构数据
-    const getMenuData = () => {
-      getRoleParams().then((res: any) => {
-        state.menuData = proxy.handleTree(res.data.menu, "id", "pid");
-      })
-    };
-    const resetForm = () => {
-      state.menuCheckStrictly = false;
-      state.menuExpand = false;
-      state.menuNodeAll = false;
-      state.formData = {
-        id: 0,
-        name: '',
-        status: 1,
-        listOrder: 0,
-        remark: '',
-        menuIds: []
-      }
-    };
-    /** 树权限（展开/折叠）*/
-    const handleCheckedTreeExpand = (value: any) => {
-      let treeList = state.menuData;
-      for (let i = 0; i < treeList.length; i++) {
-        menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
-      }
-    }
+	name: 'systemEditRole',
+	components: {
+		Editor, // 注册富文本组件
+	},
+	setup(props, { emit }) {
+		const { proxy } = getCurrentInstance() as any;
+		const formRef = ref<HTMLElement | null>(null);
+		const menuRef = ref();
+		const state = reactive<RoleState>({
+			loading: false,
+			isShowDialog: false,
+			formData: {
+				id: 0,
+				name: '',
+				status: 1,
+				listOrder: 0,
+				remark: '',
+				menuIds: [],
+			},
+			// 表单校验
+			rules: {
+				name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+			},
+			menuData: [],
+			menuExpand: false,
+			menuNodeAll: false,
+			menuCheckStrictly: false,
+			menuProps: {
+				children: 'children',
+				label: 'title',
+			},
+		});
+		// 打开弹窗
+		const openDialog = (row?: DialogRow) => {
+			resetForm();
+			getMenuData();
+			if (row) {
+				getRole(row.id).then((res: any) => {
+					if (res.data.role) {
+						state.formData = res.data.role;
+						state.formData.menuIds = res.data.menuIds ?? [];
+					}
+				});
+			}
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					state.loading = true;
+					state.formData.menuIds = getMenuAllCheckedKeys();
+					if (state.formData.id === 0) {
+						//添加
+						addRole(state.formData)
+							.then(() => {
+								ElMessage.success('角色添加成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('getRoleList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					} else {
+						//修改
+						editRole(state.formData)
+							.then(() => {
+								ElMessage.success('角色修改成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('getRoleList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					}
+				}
+			});
+		};
+		// 获取菜单结构数据
+		const getMenuData = () => {
+			getRoleParams().then((res: any) => {
+				state.menuData = proxy.handleTree(res.data.menu, 'id', 'pid');
+			});
+		};
+		const resetForm = () => {
+			state.menuCheckStrictly = false;
+			state.menuExpand = false;
+			state.menuNodeAll = false;
+			state.formData = {
+				id: 0,
+				name: '',
+				status: 1,
+				listOrder: 0,
+				remark: '',
+				menuIds: [],
+			};
+		};
+		/** 树权限（展开/折叠）*/
+		const handleCheckedTreeExpand = (value: any) => {
+			let treeList = state.menuData;
+			for (let i = 0; i < treeList.length; i++) {
+				menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+			}
+		};
 
-    /** 树权限（全选/全不选） */
-    const handleCheckedTreeNodeAll = (value: any) => {
-      menuRef.value.setCheckedNodes(value ? state.menuData : []);
-    }
+		/** 树权限（全选/全不选） */
+		const handleCheckedTreeNodeAll = (value: any) => {
+			menuRef.value.setCheckedNodes(value ? state.menuData : []);
+		};
 
-    /** 树权限（父子联动） */
-    const handleCheckedTreeConnect = (value: any) => {
-      state.menuCheckStrictly = value ? true : false;
-    }
+		/** 树权限（父子联动） */
+		const handleCheckedTreeConnect = (value: any) => {
+			state.menuCheckStrictly = value ? true : false;
+		};
 
-    /** 所有菜单节点数据 */
-    function getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      let checkedKeys = menuRef.value.getCheckedKeys();
-      // 半选中的菜单节点
-      let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    }
+		/** 所有菜单节点数据 */
+		function getMenuAllCheckedKeys() {
+			// 目前被选中的菜单节点
+			let checkedKeys = menuRef.value.getCheckedKeys();
+			// 半选中的菜单节点
+			let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+			checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+			return checkedKeys;
+		}
 
-    // 重置菜单session
-    const resetMenuSession = () => {
-      refreshBackEndControlRoutes();
-    };
-    return {
-      openDialog,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      menuRef,
-      formRef,
-      handleCheckedTreeExpand,
-      handleCheckedTreeNodeAll,
-      handleCheckedTreeConnect,
-      resetMenuSession,
-      ...toRefs(state),
-    };
-  },
+		// 重置菜单session
+		const resetMenuSession = () => {
+			refreshBackEndControlRoutes();
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			menuRef,
+			formRef,
+			handleCheckedTreeExpand,
+			handleCheckedTreeNodeAll,
+			handleCheckedTreeConnect,
+			resetMenuSession,
+			...toRefs(state),
+		};
+	},
 });
 </script>
 
 <style scoped lang="scss">
 .tree-border {
-  margin-top: 5px;
-  border: 1px solid #e5e6e7 !important;
-  border-radius: 4px;
+	margin-top: 5px;
+	border: 1px solid #e5e6e7 !important;
+	border-radius: 4px;
 }
 
 .system-edit-role-container {
-  .menu-data-tree {
-    border: var(--el-input-border, var(--el-border-base));
-    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
-    padding: 5px;
-  }
+	.menu-data-tree {
+		border: var(--el-input-border, var(--el-border-base));
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
 }
 </style>
diff --git a/src/views/customerService/script/index.vue b/src/views/customerService/script/index.vue
index 7aee79b..aa3e525 100644
--- a/src/views/customerService/script/index.vue
+++ b/src/views/customerService/script/index.vue
@@ -1,251 +1,223 @@
 <template>
-    <div class="system-role-container">
-        <el-card shadow="hover">
-            <div class="system-user-search mb15">
-                <el-form :inline="true">
-                    <!-- <el-form-item label="客服平台" prop="status" style="width: 200px;">
-                        <el-select placeholder="小红书" clearable size="default" style="width: 240px">
-                            <el-option :label="'小红书'" />
-                            <el-option :label="'抖音'" />
-                            <el-option :label="'快手'" />
-                        </el-select>
-                    </el-form-item> -->
-                    <el-form-item>
-                        <!-- <el-button size="default" type="primary" class="ml10" @click="roleList">
-                            <el-icon>
-                                <ele-Search />
-                            </el-icon>
-                            筛选
-                        </el-button> -->
-                        <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
-                            <el-icon>
-                                <ele-FolderAdd />
-                            </el-icon>
-                            新增话术
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <el-table :data="tableData.data" style="width: 100%">
-                <el-table-column type="index" label="序号" width="60" />
-                <el-table-column prop="label" label="标签" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
-                <el-table-column label="操作" width="220">
-                    <template #default="scope">
-                        <el-button size="small" text type="primary"
-                            @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
-                        <el-button size="small" text type="primary"
-                            @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
-                v-model:limit="tableData.param.pageSize" @pagination="roleList" />
-        </el-card>
-        <EditRole ref="editRoleRef" @getRoleList="roleList" />
-    </div>
+	<div class="system-role-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+				<el-form :inline="true">
+					<el-form-item>
+						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增话术
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData.data" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" />
+				<el-table-column prop="label" label="标签" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="220">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
+							><el-icon><ele-EditPen /></el-icon>修改</el-button
+						>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
+							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="roleList"
+			/>
+		</el-card>
+		<EditRole ref="editRoleRef" @getRoleList="roleList" />
+	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/customerService/script/component/editRole.vue';
-import { deleteRole, getRoleList } from "/@/api/system/role";
+import { deleteRole, getRoleList } from '/@/api/system/role';
 // 定义接口来定义对象的类型
 interface TableData {
-    id: number;
-    status: number;
-    listOrder: number;
-    name: string;
-    remark: string;
-    dataScope: number;
-    createdAt: string;
+	id: number;
+	status: number;
+	listOrder: number;
+	name: string;
+	remark: string;
+	dataScope: number;
+	createdAt: string;
 }
 interface TableDataState {
-    tableData: {
-        data: Array<TableData>;
-        total: number;
-        loading: boolean;
-        param: {
-            roleName: string;
-            roleStatus: string;
-            pageNum: number;
-            pageSize: number;
-        };
-    };
+	data: Array<TableData>;
+	total: number;
+	loading: boolean;
+	param: {
+		roleName: string;
+		roleStatus: string;
+		pageNum: number;
+		pageSize: number;
+	};
 }
-
+//模拟数据
 const dateList = ref([
-    {
-        "id": 1,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "小红书",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:00:15",
-        "label": '产品介绍',
-        "creator": '张三'
-    },
-    {
-        "id": 2,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-28 10:01:34",
-        "label": '公司介绍',
-        "creator": '张三'
-    },
-    {
-        "id": 3,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "快手",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "label": '病症询问',
-        "creator": '王五'
-    },
-    {
-        "id": 4,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 3,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "label": '资质问题',
-        "creator": '李四'
-    },
-    {
-        "id": 5,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "抖音",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-01 11:38:39",
-        "label": '常用沟通',
-        "creator": '张三'
-    },
-    {
-        "id": 8,
-        "status": 1,
-        "listOrder": 0,
-        "name": "987698789",
-        "remark": "快手",
-        "dataScope": 2,
-        "createdAt": "2022-04-01 11:38:39",
-        "updatedAt": "2022-04-06 09:53:40",
-        "label": '公司介绍',
-        "creator": '张三'
-    }
-])
+	{
+		id: 1,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '小红书',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:00:15',
+		label: '产品介绍',
+		creator: '张三',
+	},
+	{
+		id: 2,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-28 10:01:34',
+		label: '公司介绍',
+		creator: '张三',
+	},
+	{
+		id: 3,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '快手',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		label: '病症询问',
+		creator: '王五',
+	},
+	{
+		id: 4,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 3,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		label: '资质问题',
+		creator: '李四',
+	},
+	{
+		id: 5,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '抖音',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-01 11:38:39',
+		label: '常用沟通',
+		creator: '张三',
+	},
+	{
+		id: 8,
+		status: 1,
+		listOrder: 0,
+		name: '987698789',
+		remark: '快手',
+		dataScope: 2,
+		createdAt: '2022-04-01 11:38:39',
+		updatedAt: '2022-04-06 09:53:40',
+		label: '公司介绍',
+		creator: '张三',
+	},
+]);
 
-export default defineComponent({
-    name: 'apiV1SystemRoleList',
-    components: { EditRole },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const addRoleRef = ref();
-        const editRoleRef = ref();
-        const dataScopeRef = ref();
-        const state = reactive<TableDataState>({
-            tableData: {
-                data: [],
-                total: 0,
-                loading: false,
-                param: {
-                    roleName: '',
-                    roleStatus: '',
-                    pageNum: 1,
-                    pageSize: 10,
-                },
-            },
-        });
-        // 初始化表格数据
-        const initTableData = () => {
-            roleList()
-        };
-        const roleList = () => {
-            const data: Array<TableData> = [];
-            getRoleList(state.tableData.param).then(res => {
-                const list = res.data.list ?? []
-                list.map((item: TableData) => {
-                    data.push({
-                        id: item.id,
-                        status: item.status,
-                        listOrder: item.listOrder,
-                        name: item.name,
-                        remark: item.remark,
-                        dataScope: item.dataScope,
-                        createdAt: item.createdAt,
-                    });
-                })
-                state.tableData.data = dateList.value;
-                state.tableData.total = dateList.value.length;
-            })
-        };
-        // 打开新增角色弹窗
-        const onOpenAddRole = () => {
-            editRoleRef.value.openDialog();
-        };
-        // 打开修改角色弹窗
-        const onOpenEditRole = (row: Object) => {
-            editRoleRef.value.openDialog(toRaw(row));
-        };
+const { proxy } = getCurrentInstance() as any;
+const addRoleRef = ref();
+const editRoleRef = ref();
+const dataScopeRef = ref();
+const tableData = reactive<TableDataState>({
+	data: [],
+	total: 0,
+	loading: false,
+	param: {
+		roleName: '',
+		roleStatus: '',
+		pageNum: 1,
+		pageSize: 10,
+	},
+});
+// 初始化表格数据
+const initTableData = () => {
+	roleList();
+};
+const roleList = () => {
+	const data: Array<TableData> = [];
+	getRoleList(tableData.param).then((res) => {
+		const list = res.data.list ?? [];
+		list.map((item: TableData) => {
+			data.push({
+				id: item.id,
+				status: item.status,
+				listOrder: item.listOrder,
+				name: item.name,
+				remark: item.remark,
+				dataScope: item.dataScope,
+				createdAt: item.createdAt,
+			});
+		});
+		tableData.data = dateList.value;
+		tableData.total = dateList.value.length;
+	});
+};
+// 打开新增角色弹窗
+const onOpenAddRole = () => {
+	editRoleRef.value.openDialog();
+};
+// 打开修改角色弹窗
+const onOpenEditRole = (row: Object) => {
+	editRoleRef.value.openDialog(toRaw(row));
+};
 
-        // 删除角色
-        const onRowDel = (row: any) => {
-            ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    deleteRole(row.id).then(() => {
-                        ElMessage.success('删除成功');
-                        proxy.$refs['editRoleRef'].resetMenuSession();
-                        roleList();
-                    })
-                })
-                .catch(() => { });
-        };
-        // 分页改变
-        const onHandleSizeChange = (val: number) => {
-            state.tableData.param.pageSize = val;
-        };
-        // 分页改变
-        const onHandleCurrentChange = (val: number) => {
-            state.tableData.param.pageNum = val;
-        };
-        // 页面加载时
-        onMounted(() => {
-            initTableData();
-        });
-        return {
-            addRoleRef,
-            editRoleRef,
-            dataScopeRef,
-            onOpenAddRole,
-            onOpenEditRole,
-            onRowDel,
-            onHandleSizeChange,
-            onHandleCurrentChange,
-            roleList,
-            ...toRefs(state),
-        };
-    },
+// 删除角色
+const onRowDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			deleteRole(row.id).then(() => {
+				ElMessage.success('删除成功');
+				proxy.$refs['editRoleRef'].resetMenuSession();
+				roleList();
+			});
+		})
+		.catch(() => {});
+};
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	tableData.param.pageSize = val;
+};
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	tableData.param.pageNum = val;
+};
+// 页面加载时
+onMounted(() => {
+	initTableData();
 });
 </script>