From a71bf0befbec253cfa9e3ebbe0cf69e789789afb Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 11 May 2023 15:11:58 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=AE=8C=E5=96=84`=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E7=AE=A1=E7=90=86-=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86`?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/system.ts | 177 +++++++++++++------------- package.json | 6 +- pnpm-lock.yaml | 92 ++++++------- src/components/ReDialog/index.vue | 4 +- src/components/ReDialog/type.ts | 22 +++- src/views/components/dialog/index.vue | 56 +++++++- src/views/system/dept/form.vue | 155 ++++++++++++++++++++++ src/views/system/dept/hook.tsx | 121 ++++++++++++++---- src/views/system/dept/index.vue | 28 ++-- src/views/system/dept/rule.ts | 37 ++++++ src/views/system/dept/types.ts | 16 +++ src/views/system/hooks.ts | 39 ++++++ types/global-components.d.ts | 2 +- 13 files changed, 576 insertions(+), 179 deletions(-) create mode 100644 src/views/system/dept/form.vue create mode 100644 src/views/system/dept/rule.ts create mode 100644 src/views/system/dept/types.ts create mode 100644 src/views/system/hooks.ts diff --git a/mock/system.ts b/mock/system.ts index d07cc116a..e9c595288 100644 --- a/mock/system.ts +++ b/mock/system.ts @@ -1,6 +1,7 @@ import { MockMethod } from "vite-plugin-mock"; export default [ + // 角色 { url: "/role", method: "post", @@ -10,7 +11,7 @@ export default [ data: { list: [ { - createTime: 1609837428000, + createTime: 1605456000000, updateTime: 1645477701000, creator: "admin", updater: "", @@ -27,7 +28,7 @@ export default [ dataScopeDeptIds: null }, { - createTime: 1609837428000, + createTime: 1605456000000, updateTime: 1645477700000, creator: "admin", updater: "", @@ -44,7 +45,7 @@ export default [ dataScopeDeptIds: null }, { - createTime: 1609912175000, + createTime: 1605456000000, updateTime: 1647698441000, creator: "", updater: "1", @@ -66,6 +67,7 @@ export default [ }; } }, + // 部门 { url: "/dept", method: "post", @@ -75,138 +77,139 @@ export default [ data: [ { name: "杭州总公司", - type: 1, // 1 公司 2 分公司 3 部门 parentId: 0, - sort: 0, - leaderUserId: 1, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 100, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 0, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 1, // 1 公司 2 分公司 3 部门 + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "郑州分公司", - type: 2, parentId: 100, - sort: 1, - leaderUserId: 104, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 101, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 1, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 2, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "研发部门", - type: 3, parentId: 101, - sort: 1, - leaderUserId: 104, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 103, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 1, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "市场部门", - type: 3, parentId: 102, - sort: 1, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 108, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 1, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "深圳分公司", - type: 2, parentId: 100, - sort: 2, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 102, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 2, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 2, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "市场部门", - type: 3, parentId: 101, - sort: 2, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 1, id: 104, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 2, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "财务部门", - type: 3, parentId: 102, - sort: 2, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 109, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 2, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "测试部门", - type: 3, parentId: 101, - sort: 3, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 105, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 3, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 0, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "财务部门", - type: 3, parentId: 101, - sort: 4, - leaderUserId: 103, - phone: "15888888888", - email: "ry@qq.com", - status: 1, id: 106, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 4, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 1, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" }, { name: "运维部门", - type: 3, parentId: 101, - sort: 5, - leaderUserId: null, - phone: "15888888888", - email: "ry@qq.com", - status: 0, id: 107, - createTime: 1609837427000, - remark: "备注、备注、备注、备注、备注、备注、备注" + sort: 5, + phone: "15888888888", + principal: "@cname()", + email: "@email", + status: 0, + type: 3, + createTime: 1605456000000, + remark: "@cparagraph(1, 3)" } ] }; } }, + // 用户 { url: "/user", method: "post", @@ -225,7 +228,7 @@ export default [ sex: 0, id: 1, status: 0, - createTime: 1609837427000, + createTime: 1605456000000, dept: { id: 103, name: "研发部门" @@ -241,7 +244,7 @@ export default [ sex: 0, id: 100, status: 1, - createTime: 1609981637000, + createTime: 1605456000000, dept: { id: 104, name: "市场部门" @@ -257,7 +260,7 @@ export default [ sex: 1, id: 103, status: 1, - createTime: 1610553035000, + createTime: 1605456000000, dept: { id: 106, name: "财务部门" @@ -273,7 +276,7 @@ export default [ sex: 0, id: 104, status: 0, - createTime: 1611166433000, + createTime: 1605456000000, dept: { id: 107, name: "运维部门" diff --git a/package.json b/package.json index 16b47ced3..8300e3692 100644 --- a/package.json +++ b/package.json @@ -94,8 +94,8 @@ "@types/qrcode": "^1.5.0", "@types/qs": "^6.9.7", "@types/sortablejs": "^1.15.1", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "@typescript-eslint/parser": "^5.59.2", + "@typescript-eslint/eslint-plugin": "^5.59.5", + "@typescript-eslint/parser": "^5.59.5", "@vitejs/plugin-vue": "^4.2.1", "@vitejs/plugin-vue-jsx": "^3.0.1", "@vue/eslint-config-prettier": "^7.1.0", @@ -105,7 +105,7 @@ "cssnano": "^6.0.1", "eslint": "^8.40.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.11.1", + "eslint-plugin-vue": "^9.12.0", "husky": "^8.0.3", "lint-staged": "^13.2.2", "picocolors": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ced5100d1..6f80342de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ specifiers: "@types/qrcode": ^1.5.0 "@types/qs": ^6.9.7 "@types/sortablejs": ^1.15.1 - "@typescript-eslint/eslint-plugin": ^5.59.2 - "@typescript-eslint/parser": ^5.59.2 + "@typescript-eslint/eslint-plugin": ^5.59.5 + "@typescript-eslint/parser": ^5.59.5 "@vitejs/plugin-vue": ^4.2.1 "@vitejs/plugin-vue-jsx": ^3.0.1 "@vue/eslint-config-prettier": ^7.1.0 @@ -48,7 +48,7 @@ specifiers: element-resize-detector: ^1.2.4 eslint: ^8.40.0 eslint-plugin-prettier: ^4.2.1 - eslint-plugin-vue: ^9.11.1 + eslint-plugin-vue: ^9.12.0 husky: ^8.0.3 intro.js: ^7.0.1 js-cookie: ^3.0.5 @@ -180,18 +180,18 @@ devDependencies: "@types/qrcode": 1.5.0 "@types/qs": 6.9.7 "@types/sortablejs": 1.15.1 - "@typescript-eslint/eslint-plugin": 5.59.2_xukgzdyhwbmahvl54wfj63w474 - "@typescript-eslint/parser": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/eslint-plugin": 5.59.5_zaj6dsh3leplki3sfxgbx2w2za + "@typescript-eslint/parser": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq "@vitejs/plugin-vue": 4.2.1_vite@4.3.5+vue@3.2.47 "@vitejs/plugin-vue-jsx": 3.0.1_vite@4.3.5+vue@3.2.47 "@vue/eslint-config-prettier": 7.1.0_cpow4lz2r544yrekpzuutjvo2i - "@vue/eslint-config-typescript": 11.0.3_bpsvh4wngwxirjqntlxkeawmpq + "@vue/eslint-config-typescript": 11.0.3_nhvncizgwdwdw3lhirpwnri2za autoprefixer: 10.4.14_postcss@8.4.23 cloc: 2.11.0 cssnano: 6.0.1_postcss@8.4.23 eslint: 8.40.0 eslint-plugin-prettier: 4.2.1_cpow4lz2r544yrekpzuutjvo2i - eslint-plugin-vue: 9.11.1_eslint@8.40.0 + eslint-plugin-vue: 9.12.0_eslint@8.40.0 husky: 8.0.3 lint-staged: 13.2.2 picocolors: 1.0.0 @@ -2430,10 +2430,10 @@ packages: "@types/yargs-parser": 21.0.0 dev: false - /@typescript-eslint/eslint-plugin/5.59.2_xukgzdyhwbmahvl54wfj63w474: + /@typescript-eslint/eslint-plugin/5.59.5_zaj6dsh3leplki3sfxgbx2w2za: resolution: { - integrity: sha512-yVrXupeHjRxLDcPKL10sGQ/QlVrA8J5IYOEWVqk0lJaSZP7X5DfnP7Ns3cc74/blmbipQ1htFNVGsHX6wsYm0A== + integrity: sha512-feA9xbVRWJZor+AnLNAr7A8JRWeZqHUf4T9tlP+TN04b05pFVhO5eN7/O93Y/1OUlLMHKbnJisgDURs/qvtqdg== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } peerDependencies: @@ -2445,10 +2445,10 @@ packages: optional: true dependencies: "@eslint-community/regexpp": 4.5.0 - "@typescript-eslint/parser": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq - "@typescript-eslint/scope-manager": 5.59.2 - "@typescript-eslint/type-utils": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq - "@typescript-eslint/utils": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/parser": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/scope-manager": 5.59.5 + "@typescript-eslint/type-utils": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/utils": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq debug: 4.3.4 eslint: 8.40.0 grapheme-splitter: 1.0.4 @@ -2461,10 +2461,10 @@ packages: - supports-color dev: true - /@typescript-eslint/parser/5.59.2_3qfatcekpgbllh6uk5ivyhkbxq: + /@typescript-eslint/parser/5.59.5_3qfatcekpgbllh6uk5ivyhkbxq: resolution: { - integrity: sha512-uq0sKyw6ao1iFOZZGk9F8Nro/8+gfB5ezl1cA06SrqbgJAt0SRoFhb9pXaHvkrxUpZaoLxt8KlovHNk8Gp6/HQ== + integrity: sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } peerDependencies: @@ -2474,9 +2474,9 @@ packages: typescript: optional: true dependencies: - "@typescript-eslint/scope-manager": 5.59.2 - "@typescript-eslint/types": 5.59.2 - "@typescript-eslint/typescript-estree": 5.59.2_typescript@5.0.4 + "@typescript-eslint/scope-manager": 5.59.5 + "@typescript-eslint/types": 5.59.5 + "@typescript-eslint/typescript-estree": 5.59.5_typescript@5.0.4 debug: 4.3.4 eslint: 8.40.0 typescript: 5.0.4 @@ -2484,21 +2484,21 @@ packages: - supports-color dev: true - /@typescript-eslint/scope-manager/5.59.2: + /@typescript-eslint/scope-manager/5.59.5: resolution: { - integrity: sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA== + integrity: sha512-jVecWwnkX6ZgutF+DovbBJirZcAxgxC0EOHYt/niMROf8p4PwxxG32Qdhj/iIQQIuOflLjNkxoXyArkcIP7C3A== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } dependencies: - "@typescript-eslint/types": 5.59.2 - "@typescript-eslint/visitor-keys": 5.59.2 + "@typescript-eslint/types": 5.59.5 + "@typescript-eslint/visitor-keys": 5.59.5 dev: true - /@typescript-eslint/type-utils/5.59.2_3qfatcekpgbllh6uk5ivyhkbxq: + /@typescript-eslint/type-utils/5.59.5_3qfatcekpgbllh6uk5ivyhkbxq: resolution: { - integrity: sha512-b1LS2phBOsEy/T381bxkkywfQXkV1dWda/z0PhnIy3bC5+rQWQDS7fk9CSpcXBccPY27Z6vBEuaPBCKCgYezyQ== + integrity: sha512-4eyhS7oGym67/pSxA2mmNq7X164oqDYNnZCUayBwJZIRVvKpBCMBzFnFxjeoDeShjtO6RQBHBuwybuX3POnDqg== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } peerDependencies: @@ -2508,8 +2508,8 @@ packages: typescript: optional: true dependencies: - "@typescript-eslint/typescript-estree": 5.59.2_typescript@5.0.4 - "@typescript-eslint/utils": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/typescript-estree": 5.59.5_typescript@5.0.4 + "@typescript-eslint/utils": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq debug: 4.3.4 eslint: 8.40.0 tsutils: 3.21.0_typescript@5.0.4 @@ -2518,18 +2518,18 @@ packages: - supports-color dev: true - /@typescript-eslint/types/5.59.2: + /@typescript-eslint/types/5.59.5: resolution: { - integrity: sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w== + integrity: sha512-xkfRPHbqSH4Ggx4eHRIO/eGL8XL4Ysb4woL8c87YuAo8Md7AUjyWKa9YMwTL519SyDPrfEgKdewjkxNCVeJW7w== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } dev: true - /@typescript-eslint/typescript-estree/5.59.2_typescript@5.0.4: + /@typescript-eslint/typescript-estree/5.59.5_typescript@5.0.4: resolution: { - integrity: sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q== + integrity: sha512-+XXdLN2CZLZcD/mO7mQtJMvCkzRfmODbeSKuMY/yXbGkzvA9rJyDY5qDYNoiz2kP/dmyAxXquL2BvLQLJFPQIg== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } peerDependencies: @@ -2538,8 +2538,8 @@ packages: typescript: optional: true dependencies: - "@typescript-eslint/types": 5.59.2 - "@typescript-eslint/visitor-keys": 5.59.2 + "@typescript-eslint/types": 5.59.5 + "@typescript-eslint/visitor-keys": 5.59.5 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -2550,10 +2550,10 @@ packages: - supports-color dev: true - /@typescript-eslint/utils/5.59.2_3qfatcekpgbllh6uk5ivyhkbxq: + /@typescript-eslint/utils/5.59.5_3qfatcekpgbllh6uk5ivyhkbxq: resolution: { - integrity: sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ== + integrity: sha512-sCEHOiw+RbyTii9c3/qN74hYDPNORb8yWCoPLmB7BIflhplJ65u2PBpdRla12e3SSTJ2erRkPjz7ngLHhUegxA== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } peerDependencies: @@ -2562,9 +2562,9 @@ packages: "@eslint-community/eslint-utils": 4.4.0_eslint@8.40.0 "@types/json-schema": 7.0.11 "@types/semver": 7.3.13 - "@typescript-eslint/scope-manager": 5.59.2 - "@typescript-eslint/types": 5.59.2 - "@typescript-eslint/typescript-estree": 5.59.2_typescript@5.0.4 + "@typescript-eslint/scope-manager": 5.59.5 + "@typescript-eslint/types": 5.59.5 + "@typescript-eslint/typescript-estree": 5.59.5_typescript@5.0.4 eslint: 8.40.0 eslint-scope: 5.1.1 semver: 7.5.0 @@ -2573,14 +2573,14 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys/5.59.2: + /@typescript-eslint/visitor-keys/5.59.5: resolution: { - integrity: sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig== + integrity: sha512-qL+Oz+dbeBRTeyJTIy0eniD3uvqU7x+y1QceBismZ41hd4aBSRh8UAw4pZP0+XzLuPZmx4raNMq/I+59W2lXKA== } engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 } dependencies: - "@typescript-eslint/types": 5.59.2 + "@typescript-eslint/types": 5.59.5 eslint-visitor-keys: 3.4.1 dev: true @@ -2840,7 +2840,7 @@ packages: prettier: 2.8.7 dev: true - /@vue/eslint-config-typescript/11.0.3_bpsvh4wngwxirjqntlxkeawmpq: + /@vue/eslint-config-typescript/11.0.3_nhvncizgwdwdw3lhirpwnri2za: resolution: { integrity: sha512-dkt6W0PX6H/4Xuxg/BlFj5xHvksjpSlVjtkQCpaYJBIEuKj2hOVU7r+TIe+ysCwRYFz/lGqvklntRkCAibsbPw== @@ -2854,10 +2854,10 @@ packages: typescript: optional: true dependencies: - "@typescript-eslint/eslint-plugin": 5.59.2_xukgzdyhwbmahvl54wfj63w474 - "@typescript-eslint/parser": 5.59.2_3qfatcekpgbllh6uk5ivyhkbxq + "@typescript-eslint/eslint-plugin": 5.59.5_zaj6dsh3leplki3sfxgbx2w2za + "@typescript-eslint/parser": 5.59.5_3qfatcekpgbllh6uk5ivyhkbxq eslint: 8.40.0 - eslint-plugin-vue: 9.11.1_eslint@8.40.0 + eslint-plugin-vue: 9.12.0_eslint@8.40.0 typescript: 5.0.4 vue-eslint-parser: 9.2.1_eslint@8.40.0 transitivePeerDependencies: @@ -5574,10 +5574,10 @@ packages: prettier-linter-helpers: 1.0.0 dev: true - /eslint-plugin-vue/9.11.1_eslint@8.40.0: + /eslint-plugin-vue/9.12.0_eslint@8.40.0: resolution: { - integrity: sha512-SNtBGDrRkPUFsREswPceqdvZ7YVdWY+iCYiDC+RoxwVieeQ7GJU1FLDlkcaYTOD2os/YuVgI1Fdu8YGM7fmoow== + integrity: sha512-xH8PgpDW2WwmFSmRfs/3iWogef1CJzQqX264I65zz77jDuxF2yLy7+GA2diUM8ZNATuSl1+UehMQkb5YEyau5w== } engines: { node: ^14.17.0 || >=16.0.0 } peerDependencies: diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue index 8103ed6fe..7e9143db0 100644 --- a/src/components/ReDialog/index.vue +++ b/src/components/ReDialog/index.vue @@ -22,7 +22,7 @@ const footerButtons = computed(() => { const done = () => closeDialog(options, index, { command: "cancel" }); if (options?.beforeCancel && isFunction(options?.beforeCancel)) { - options.beforeCancel(done); + options.beforeCancel(done, { options, index }); } else { done(); } @@ -37,7 +37,7 @@ const footerButtons = computed(() => { const done = () => closeDialog(options, index, { command: "sure" }); if (options?.beforeSure && isFunction(options?.beforeSure)) { - options.beforeSure(done); + options.beforeSure(done, { options, index }); } else { done(); } diff --git a/src/components/ReDialog/type.ts b/src/components/ReDialog/type.ts index 28f2db9d0..fe4d4a31a 100644 --- a/src/components/ReDialog/type.ts +++ b/src/components/ReDialog/type.ts @@ -190,9 +190,27 @@ interface DialogOptions extends DialogProps { index: number; }) => void; /** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */ - beforeCancel?: (done: Function) => void; + beforeCancel?: ( + done: Function, + { + options, + index + }: { + options: DialogOptions; + index: number; + } + ) => void; /** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */ - beforeSure?: (done: Function) => void; + beforeSure?: ( + done: Function, + { + options, + index + }: { + options: DialogOptions; + index: number; + } + ) => void; } export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions }; diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue index 2db17c545..11a8bed06 100644 --- a/src/views/components/dialog/index.vue +++ b/src/views/components/dialog/index.vue @@ -191,6 +191,7 @@ function onCloseCallBackClick() { }); } +// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取 function onNestingClick() { addDialog({ title: "嵌套的弹框", @@ -323,6 +324,44 @@ function onFormFourClick() { } }); } + +function onBeforeCancelClick() { + addDialog({ + title: "点击底部取消按钮的回调", + contentRenderer: () => ( +

弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）

+ ), + beforeCancel: (done, { options, index }) => { + console.log( + "%coptions, index===>>>: ", + "color: MidnightBlue; background: Aquamarine; font-size: 20px;", + options, + index + ); + // done(); // 需要关闭把注释解开即可 + } + }); +} + +function onBeforeSureClick() { + addDialog({ + title: "点击底部确定按钮的回调", + contentRenderer: () => ( +

+ 弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口） +

+ ), + beforeSure: (done, { options, index }) => { + console.log( + "%coptions, index===>>>: ", + "color: MidnightBlue; background: Aquamarine; font-size: 20px;", + options, + index + ); + // done(); // 需要关闭把注释解开即可 + } + }); +} @@ -380,5 +425,14 @@ function onFormFourClick() { 结合Form表单（第四种方式） + + + + 点击底部取消按钮的回调（会暂停弹框的关闭） + + + 点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口） + + diff --git a/src/views/system/dept/form.vue b/src/views/system/dept/form.vue new file mode 100644 index 000000000..3e5d0ce95 --- /dev/null +++ b/src/views/system/dept/form.vue @@ -0,0 +1,155 @@ + + + diff --git a/src/views/system/dept/hook.tsx b/src/views/system/dept/hook.tsx index cb68f03e1..463b74729 100644 --- a/src/views/system/dept/hook.tsx +++ b/src/views/system/dept/hook.tsx @@ -1,22 +1,26 @@ import dayjs from "dayjs"; +import editForm from "./form.vue"; import { handleTree } from "@/utils/tree"; +import { usePublicHooks } from "../hooks"; +import { message } from "@/utils/message"; import { getDeptList } from "@/api/system"; -import { reactive, ref, onMounted } from "vue"; +import { type FormItemProps } from "./types"; +import { addDialog } from "@/components/ReDialog"; +import { reactive, ref, onMounted, h } from "vue"; +import { cloneDeep, isAllEmpty } from "@pureadmin/utils"; export function useDept() { const form = reactive({ - user: "", - status: "" + name: "", + status: null }); + + const formRef = ref(); const dataList = ref([]); const loading = ref(true); + const { tagStyle } = usePublicHooks(); const columns: TableColumnList = [ - { - label: "序号", - type: "index", - minWidth: 70 - }, { label: "部门名称", prop: "name", @@ -33,12 +37,8 @@ export function useDept() { prop: "status", minWidth: 100, cellRenderer: ({ row, props }) => ( - - {row.status === 0 ? "关闭" : "开启"} + + {row.status === 1 ? "启用" : "停用"} ) }, @@ -52,7 +52,7 @@ export function useDept() { { label: "备注", prop: "remark", - minWidth: 200 + minWidth: 320 }, { label: "操作", @@ -62,14 +62,6 @@ export function useDept() { } ]; - function handleUpdate(row) { - console.log(row); - } - - function handleDelete(row) { - console.log(row); - } - function handleSelectionChange(val) { console.log("handleSelectionChange", val); } @@ -82,13 +74,86 @@ export function useDept() { async function onSearch() { loading.value = true; - const { data } = await getDeptList(); - dataList.value = handleTree(data); + const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id + let newData = data; + if (!isAllEmpty(form.name)) { + // 前端搜索部门名称 + newData = newData.filter(item => item.name.includes(form.name)); + } + if (!isAllEmpty(form.status)) { + // 前端搜索状态 + newData = newData.filter(item => item.status === form.status); + } + dataList.value = handleTree(newData); // 处理成树结构 setTimeout(() => { loading.value = false; }, 500); } + function formatHigherDeptOptions(treeList) { + // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理） + if (!treeList || !treeList.length) return; + const newTreeList = []; + for (let i = 0; i < treeList.length; i++) { + treeList[i].disabled = treeList[i].status === 0 ? true : false; + formatHigherDeptOptions(treeList[i].children); + newTreeList.push(treeList[i]); + } + return newTreeList; + } + + function openDialog(title = "新增", row?: FormItemProps) { + addDialog({ + title: `${title}部门`, + props: { + formInline: { + higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)), + parentId: row?.parentId ?? 0, + name: row?.name ?? "", + principal: row?.principal ?? "", + phone: row?.phone ?? "", + email: row?.email ?? "", + sort: row?.sort ?? 0, + status: row?.status ?? 1, + remark: row?.remark ?? "" + } + }, + width: "40%", + draggable: true, + closeOnClickModal: false, + contentRenderer: () => h(editForm, { ref: formRef }), + beforeSure: (done, { options }) => { + const FormRef = formRef.value.getRef(); + const curData = options.props.formInline as FormItemProps; + function chores() { + message(`您${title}了部门名称为${curData.name}的这条数据`, { + type: "success" + }); + done(); // 关闭弹框 + onSearch(); // 刷新表格数据 + } + FormRef.validate(valid => { + if (valid) { + console.log("curData", curData); + // 表单规则校验通过 + if (title === "新增") { + // 实际开发先调用新增接口，再进行下面操作 + chores(); + } else { + // 实际开发先调用编辑接口，再进行下面操作 + chores(); + } + } + }); + } + }); + } + + function handleDelete(row) { + message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" }); + onSearch(); + } + onMounted(() => { onSearch(); }); @@ -98,9 +163,13 @@ export function useDept() { loading, columns, dataList, + /** 搜索 */ onSearch, + /** 重置 */ resetForm, - handleUpdate, + /** 新增、编辑部门 */ + openDialog, + /** 删除部门 */ handleDelete, handleSelectionChange }; diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index 736260194..c691c720c 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -23,7 +23,7 @@ const { dataList, onSearch, resetForm, - handleUpdate, + openDialog, handleDelete, handleSelectionChange } = useDept(); @@ -37,9 +37,9 @@ const { :model="form" class="bg-bg_color w-[99/100] pl-8 pt-4" > - + - - + + @@ -72,13 +72,17 @@ const { @@ -107,12 +111,15 @@ const { link type="primary" :size="size" - @click="handleUpdate(row)" :icon="useRenderIcon(EditPen)" + @click="openDialog('编辑', row)" > - 修改 + 编辑 - +