| | |
| | | import { DeptForm, DeptQuery, DeptVO } from "@/api/system/dept/types"; |
| | | |
| | | interface DeptOptionsType { |
| | | deptId: number | string; |
| | | deptName: string; |
| | | children: DeptOptionsType[]; |
| | | deptId: number | string; |
| | | deptName: string; |
| | | children: DeptOptionsType[]; |
| | | |
| | | } |
| | | |
| | |
| | | |
| | | |
| | | const dialog = reactive<DialogOption>({ |
| | | visible: false, |
| | | title: '' |
| | | visible: false, |
| | | title: '' |
| | | }); |
| | | |
| | | const deptTableRef = ref<ElTableInstance>(); |
| | |
| | | const deptFormRef = ref<ElFormInstance>(); |
| | | |
| | | const initFormData: DeptForm = { |
| | | deptId: undefined, |
| | | parentId: undefined, |
| | | deptName: undefined, |
| | | orderNum: 0, |
| | | leader: undefined, |
| | | phone: undefined, |
| | | email: undefined, |
| | | status: "0" |
| | | deptId: undefined, |
| | | parentId: undefined, |
| | | deptName: undefined, |
| | | orderNum: 0, |
| | | leader: undefined, |
| | | phone: undefined, |
| | | email: undefined, |
| | | status: "0" |
| | | } |
| | | const data = reactive<PageData<DeptForm, DeptQuery>>({ |
| | | form: {...initFormData}, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | deptName: undefined, |
| | | status: undefined |
| | | }, |
| | | rules: { |
| | | parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }], |
| | | deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }], |
| | | orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }], |
| | | email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }], |
| | | phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }] |
| | | }, |
| | | form: { ...initFormData }, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | deptName: undefined, |
| | | status: undefined |
| | | }, |
| | | rules: { |
| | | parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }], |
| | | deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }], |
| | | orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }], |
| | | email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }], |
| | | phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }] |
| | | }, |
| | | }) |
| | | |
| | | const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data) |
| | | |
| | | /** 查询菜单列表 */ |
| | | const getList = async () => { |
| | | loading.value = true; |
| | | const res = await listDept(queryParams.value); |
| | | const data = proxy?.handleTree<DeptVO>(res.data, "deptId") |
| | | if (data) { |
| | | deptList.value = data |
| | | } |
| | | loading.value = false |
| | | loading.value = true; |
| | | const res = await listDept(queryParams.value); |
| | | const data = proxy?.handleTree<DeptVO>(res.data, "deptId") |
| | | if (data) { |
| | | deptList.value = data |
| | | } |
| | | loading.value = false |
| | | } |
| | | /** 取消按钮 */ |
| | | const cancel = () => { |
| | | reset() |
| | | dialog.visible = false |
| | | reset() |
| | | dialog.visible = false |
| | | } |
| | | /** 表单重置 */ |
| | | const reset = () => { |
| | | form.value = {...initFormData}; |
| | | deptFormRef.value?.resetFields(); |
| | | form.value = { ...initFormData }; |
| | | deptFormRef.value?.resetFields(); |
| | | } |
| | | |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | getList(); |
| | | getList(); |
| | | } |
| | | /** 重置按钮操作 */ |
| | | const resetQuery = () => { |
| | | queryFormRef.value?.resetFields(); |
| | | handleQuery() |
| | | queryFormRef.value?.resetFields(); |
| | | handleQuery() |
| | | } |
| | | /** 新增按钮操作 */ |
| | | const handleAdd = (row?: DeptVO) => { |
| | | listDept().then(res => { |
| | | const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId"); |
| | | if (data) { |
| | | deptOptions.value = data |
| | | dialog.visible = true; |
| | | dialog.title = "添加部门"; |
| | | nextTick(() => { |
| | | reset(); |
| | | if (row && row.deptId) { |
| | | form.value.parentId = row?.deptId; |
| | | } |
| | | }) |
| | | listDept().then(res => { |
| | | const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId"); |
| | | if (data) { |
| | | deptOptions.value = data |
| | | dialog.visible = true; |
| | | dialog.title = "添加部门"; |
| | | nextTick(() => { |
| | | reset(); |
| | | if (row && row.deptId) { |
| | | form.value.parentId = row?.deptId; |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | /** 展开/折叠操作 */ |
| | | const handleToggleExpandAll = () => { |
| | | isExpandAll.value = !isExpandAll.value; |
| | | toggleExpandAll(deptList.value, isExpandAll.value) |
| | | isExpandAll.value = !isExpandAll.value; |
| | | toggleExpandAll(deptList.value, isExpandAll.value) |
| | | } |
| | | /** 展开/折叠所有 */ |
| | | const toggleExpandAll = (data: DeptVO[], status: boolean) => { |
| | | data.forEach((item) => { |
| | | deptTableRef.value?.toggleRowExpansion(item, status) |
| | | if(item.children && item.children.length > 0) toggleExpandAll(item.children, status) |
| | | }) |
| | | data.forEach((item) => { |
| | | deptTableRef.value?.toggleRowExpansion(item, status) |
| | | if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) |
| | | }) |
| | | } |
| | | |
| | | /** 修改按钮操作 */ |
| | | const handleUpdate = async (row: DeptVO) => { |
| | | const res = await getDept(row.deptId); |
| | | dialog.visible = true; |
| | | dialog.title = "修改部门"; |
| | | await nextTick(async () => { |
| | | reset(); |
| | | form.value = res.data |
| | | const response = await listDeptExcludeChild(row.deptId); |
| | | const data = proxy?.handleTree < DeptOptionsType > (response.data, "deptId") |
| | | if (data) { |
| | | deptOptions.value = data; |
| | | if (data.length === 0) { |
| | | const noResultsOptions: DeptOptionsType = { |
| | | deptId: res.data.parentId, |
| | | deptName: res.data.parentName, |
| | | children: [] |
| | | }; |
| | | deptOptions.value.push(noResultsOptions); |
| | | } |
| | | const res = await getDept(row.deptId); |
| | | dialog.visible = true; |
| | | dialog.title = "修改部门"; |
| | | await nextTick(async () => { |
| | | reset(); |
| | | form.value = res.data |
| | | const response = await listDeptExcludeChild(row.deptId); |
| | | const data = proxy?.handleTree<DeptOptionsType>(response.data, "deptId") |
| | | if (data) { |
| | | deptOptions.value = data; |
| | | if (data.length === 0) { |
| | | const noResultsOptions: DeptOptionsType = { |
| | | deptId: res.data.parentId, |
| | | deptName: res.data.parentName, |
| | | children: [] |
| | | }; |
| | | deptOptions.value.push(noResultsOptions); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | /** 提交按钮 */ |
| | | const submitForm = () => { |
| | | deptFormRef.value?.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | form.value.deptId ? await updateDept(form.value) : await addDept(form.value); |
| | | proxy?.$modal.msgSuccess("操作成功"); |
| | | dialog.visible = false; |
| | | await getList(); |
| | | } |
| | | }) |
| | | deptFormRef.value?.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | form.value.deptId ? await updateDept(form.value) : await addDept(form.value); |
| | | proxy?.$modal.msgSuccess("操作成功"); |
| | | dialog.visible = false; |
| | | await getList(); |
| | | } |
| | | }) |
| | | } |
| | | /** 删除按钮操作 */ |
| | | const handleDelete = async (row: DeptVO) => { |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?'); |
| | | await delDept(row.deptId); |
| | | await getList(); |
| | | proxy?.$modal.msgSuccess("删除成功"); |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?'); |
| | | await delDept(row.deptId); |
| | | await getList(); |
| | | proxy?.$modal.msgSuccess("删除成功"); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getList(); |
| | | }); |
| | | </script> |