mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 16:37:18 +08:00
perf: 完善系统管理-部门管理页面
This commit is contained in:
xiaoxian521
parent
47f951312e
commit
a71bf0befb
177
mock/system.ts
177
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: "运维部门"
|
||||
|
||||
@ -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",
|
||||
|
||||
92
pnpm-lock.yaml
generated
92
pnpm-lock.yaml
generated
@ -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:
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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 };
|
||||
|
||||
@ -191,6 +191,7 @@ function onCloseCallBackClick() {
|
||||
});
|
||||
}
|
||||
|
||||
// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
|
||||
function onNestingClick() {
|
||||
addDialog({
|
||||
title: "嵌套的弹框",
|
||||
@ -323,6 +324,44 @@ function onFormFourClick() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onBeforeCancelClick() {
|
||||
addDialog({
|
||||
title: "点击底部取消按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
|
||||
),
|
||||
beforeCancel: (done, { options, index }) => {
|
||||
console.log(
|
||||
"%coptions, index===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
options,
|
||||
index
|
||||
);
|
||||
// done(); // 需要关闭把注释解开即可
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onBeforeSureClick() {
|
||||
addDialog({
|
||||
title: "点击底部确定按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
</p>
|
||||
),
|
||||
beforeSure: (done, { options, index }) => {
|
||||
console.log(
|
||||
"%coptions, index===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
options,
|
||||
index
|
||||
);
|
||||
// done(); // 需要关闭把注释解开即可
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -338,7 +377,13 @@ function onFormFourClick() {
|
||||
>
|
||||
Dialog
|
||||
</el-link>
|
||||
，采用函数式调用弹框组件
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="$router.push({ name: 'Dept' })"
|
||||
>系统管理页面</span
|
||||
>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -380,5 +425,14 @@ function onFormFourClick() {
|
||||
结合Form表单（第四种方式）
|
||||
</el-button>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
<el-space wrap>
|
||||
<el-button @click="onBeforeCancelClick">
|
||||
点击底部取消按钮的回调（会暂停弹框的关闭）
|
||||
</el-button>
|
||||
<el-button @click="onBeforeSureClick">
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
155
src/views/system/dept/form.vue
Normal file
155
src/views/system/dept/form.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { formRules } from "./rule";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
|
||||
/** TODO
|
||||
* 针对类型的props/emit声明，vue3.3.0版本以下不支持复杂的类型和从其他文件进行类型导入，等后续vue正式发布3.3.0版本再优化
|
||||
* https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features
|
||||
*/
|
||||
interface FormProps {
|
||||
formInline: {
|
||||
higherDeptOptions: Record<string, unknown>[];
|
||||
parentId: number;
|
||||
name: string;
|
||||
principal: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
sort: number;
|
||||
status: number;
|
||||
remark: string;
|
||||
};
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
higherDeptOptions: [],
|
||||
parentId: 0,
|
||||
name: "",
|
||||
principal: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
sort: 0,
|
||||
status: 1,
|
||||
remark: ""
|
||||
})
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const newFormInline = ref(props.formInline);
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col>
|
||||
<el-form-item label="上级部门">
|
||||
<el-cascader
|
||||
class="w-full"
|
||||
v-model="newFormInline.parentId"
|
||||
:options="newFormInline.higherDeptOptions"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择上级部门"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input
|
||||
v-model="newFormInline.name"
|
||||
clearable
|
||||
placeholder="请输入部门名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门负责人">
|
||||
<el-input
|
||||
v-model="newFormInline.principal"
|
||||
clearable
|
||||
placeholder="请输入部门负责人"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input
|
||||
v-model="newFormInline.phone"
|
||||
clearable
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="newFormInline.email"
|
||||
clearable
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number
|
||||
v-model="newFormInline.sort"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="部门状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.status"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
|
||||
<re-col>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
placeholder="请输入备注信息"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -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 }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.status === 1 ? "danger" : "success"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.status === 0 ? "关闭" : "开启"}
|
||||
<el-tag size={props.size} style={tagStyle.value(row.status)}>
|
||||
{row.status === 1 ? "启用" : "停用"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="user">
|
||||
<el-form-item label="部门名称：" prop="name">
|
||||
<el-input
|
||||
v-model="form.user"
|
||||
v-model="form.name"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
@ -52,8 +52,8 @@ const {
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="开启" value="1" />
|
||||
<el-option label="关闭" value="0" />
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -72,13 +72,17 @@ const {
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="部门列表"
|
||||
title="部门列表（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增部门
|
||||
</el-button>
|
||||
</template>
|
||||
@ -107,12 +111,15 @@ const {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
修改
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popconfirm title="是否确认删除?">
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除部门名称为${row.name}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
@ -120,7 +127,6 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
37
src/views/system/dept/rule.ts
Normal file
37
src/views/system/dept/rule.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
16
src/views/system/dept/types.ts
Normal file
16
src/views/system/dept/types.ts
Normal file
@ -0,0 +1,16 @@
|
||||
interface FormItemProps {
|
||||
higherDeptOptions: Record<string, unknown>[];
|
||||
parentId: number;
|
||||
name: string;
|
||||
principal: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
sort: number;
|
||||
status: number;
|
||||
remark: string;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
|
||||
export type { FormItemProps, FormProps };
|
||||
39
src/views/system/hooks.ts
Normal file
39
src/views/system/hooks.ts
Normal file
@ -0,0 +1,39 @@
|
||||
// 抽离可公用的工具函数等用于系统管理页面逻辑
|
||||
import { computed } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
|
||||
export function usePublicHooks() {
|
||||
const { isDark } = useDark();
|
||||
|
||||
const switchStyle = computed(() => {
|
||||
return {
|
||||
"--el-switch-on-color": "#6abe39",
|
||||
"--el-switch-off-color": "#e84749"
|
||||
};
|
||||
});
|
||||
|
||||
const tagStyle = computed(() => {
|
||||
return (status: number) => {
|
||||
return status === 1
|
||||
? {
|
||||
"--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
|
||||
"--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
|
||||
"--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
|
||||
}
|
||||
: {
|
||||
"--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
|
||||
"--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
|
||||
"--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
/** 当前网页是否为`dark`模式 */
|
||||
isDark,
|
||||
/** 表现更鲜明的`el-switch`组件 */
|
||||
switchStyle,
|
||||
/** 表现更鲜明的`el-tag`组件 */
|
||||
tagStyle
|
||||
};
|
||||
}
|
||||
2
types/global-components.d.ts
vendored
2
types/global-components.d.ts
vendored
@ -11,7 +11,7 @@ declare module "vue" {
|
||||
}
|
||||
|
||||
/**
|
||||
* todo：https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
|
||||
* TODO https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
|
||||
* No need to install @vue/runtime-core
|
||||
*/
|
||||
declare module "vue" {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user