| | |
| | | |
| | | <script setup name="Dept" lang="ts"> |
| | | import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept" |
| | | import { ComponentInternalInstance } from 'vue'; |
| | | import { DeptForm, DeptQuery, DeptVO } from "@/api/system/dept/types"; |
| | | import { ElTable, ElForm } from "element-plus"; |
| | | |
| | | interface DeptOptionsType { |
| | | deptId: number | string; |
| | |
| | | title: '' |
| | | }); |
| | | |
| | | const deptTableRef = ref(ElTable); |
| | | const queryFormRef = ref(ElForm); |
| | | const deptFormRef = ref(ElForm); |
| | | const deptTableRef = ref<ElTableInstance>(); |
| | | const queryFormRef = ref<ElFormInstance>(); |
| | | const deptFormRef = ref<ElFormInstance>(); |
| | | |
| | | const initFormData: DeptForm = { |
| | | deptId: undefined, |
| | |
| | | /** 表单重置 */ |
| | | const reset = () => { |
| | | form.value = {...initFormData}; |
| | | deptFormRef.value.resetFields(); |
| | | deptFormRef.value?.resetFields(); |
| | | } |
| | | |
| | | /** 搜索按钮操作 */ |
| | |
| | | } |
| | | /** 重置按钮操作 */ |
| | | const resetQuery = () => { |
| | | queryFormRef.value.resetFields(); |
| | | queryFormRef.value?.resetFields(); |
| | | handleQuery() |
| | | } |
| | | /** 新增按钮操作 */ |
| | |
| | | /** 展开/折叠所有 */ |
| | | const toggleExpandAll = (data: DeptVO[], status: boolean) => { |
| | | data.forEach((item) => { |
| | | deptTableRef.value.toggleRowExpansion(item, status) |
| | | deptTableRef.value?.toggleRowExpansion(item, status) |
| | | if(item.children && item.children.length > 0) toggleExpandAll(item.children, status) |
| | | }) |
| | | } |
| | |
| | | const res = await getDept(row.deptId); |
| | | dialog.visible = true; |
| | | dialog.title = "修改部门"; |
| | | 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); |
| | | } |
| | | 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) => { |
| | | 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; |
| | | getList(); |
| | | await getList(); |
| | | } |
| | | }) |
| | | } |
| | |
| | | const handleDelete = async (row: DeptVO) => { |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?'); |
| | | await delDept(row.deptId); |
| | | getList(); |
| | | await getList(); |
| | | proxy?.$modal.msgSuccess("删除成功"); |
| | | } |
| | | |