<template>
|
<basicContainer >
|
<avue-crud
|
:option="option"
|
:table-loading="pageF.loading"
|
:data="tableData"
|
:page="page"
|
:permission="permissionList"
|
:before-open="beforeOpen"
|
:before-close="beforeClose"
|
v-model="form"
|
ref="crudRef"
|
@row-update="rowUpdate"
|
@row-save="rowSave"
|
@row-del="rowDel"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@on-load="onLoad"
|
>
|
<template #menu-left>
|
<el-button
|
type="info"
|
plain
|
icon="Sort"
|
@click="toggleExpandAll"
|
>展开/折叠</el-button>
|
</template>
|
<template #menu-before="scope">
|
<el-link
|
type="primary"
|
icon="Plus" :underline="false"
|
size="small" v-hasPermi="['system:dept:add']"
|
@click.stop="handleAdd(scope.row)"
|
><span style="margin-left: 5px">新 增</span>
|
</el-link>
|
</template>
|
<template #status="scope">
|
<dict-tag v-if="scope.dic" :options="scope.dic" :value="scope.row.status" />
|
</template>
|
</avue-crud>
|
</basicContainer>
|
</template>
|
|
<script setup name="dept" lang="ts">
|
import {DeptI,addDept, delDept, exportDept, getDept, listDept, updateDept} from "@/api/system/dept";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import {computed,reactive, ref, toRefs} from "vue";
|
import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
|
import {usePagePlus} from "@/hooks/usePagePlus";
|
import {hasPermission} from "@/utils/permissionUtils";
|
import {validateNull} from "@/utils/validate";
|
|
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(()=>{
|
return {
|
addBtn: hasPermission(["system:dept:add"]),
|
delBtn: hasPermission(["system:dept:remove"]),
|
editBtn: hasPermission(["system:dept:edit"]),
|
viewBtn: hasPermission(["system:dept:query"]),
|
}
|
})
|
|
const data = reactive({
|
form:<DeptI>{},
|
queryParams:<DeptI&PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList:[],
|
rowAdd:false,
|
})
|
const {queryParams,form,page,selectionList,rowAdd} = toRefs(data);
|
|
const option = ref({
|
pageKey: 'dept',
|
rowKey: 'deptId',
|
rowParentKey: 'parentId',tree: true,
|
selection:false,
|
defaultExpandAll:true,
|
viewBtn: false,
|
column: {
|
deptId: {
|
label: '部门编号',display:false,
|
},
|
parentId: {
|
label: '上级部门',hide: true, type: "tree",
|
dicData:[],
|
value:undefined,
|
addDisabled:true,
|
props: {
|
label: "deptName",
|
value: "deptId"
|
},
|
rules:[
|
{ required: true, message: "上级部门不能为空", trigger: "blur" }
|
]
|
},
|
deptName: {
|
label: '部门名称',search: true,
|
rules:[
|
{ required: true, message: "部门名称不能为空", trigger: "blur" }
|
]
|
},
|
orderNum: {
|
label: '显示顺序',type:"number",
|
rules:[
|
{ required: true, message: "部门名称不能为空", trigger: "blur" }
|
]
|
},
|
leader: {
|
label: '负责人',
|
},
|
phone: {
|
label: '联系电话',hide: true,
|
rules:[
|
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
|
]
|
},
|
email: {
|
label: '邮箱',hide: true,
|
rules:[
|
{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
|
]
|
},
|
status: {
|
label: '部门状态',value:"0",search: true,
|
type: 'radio', dicUrl: '/system/dict/data/type/sys_normal_disable',
|
},
|
createTime: {
|
label: '创建时间',addDisplay:false,editDisplay:false,
|
},
|
}
|
})
|
|
const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange,
|
searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate,refreshChange} = usePagePlus({
|
form:form,
|
option:option,
|
queryParams:queryParams,
|
idKey:'deptId',
|
page:page.value,
|
getListApi:listDept,
|
getDetailApi:getDept,
|
exportApi:exportDept,
|
deleteApi:delDept,
|
addApi:addDept,
|
updateApi:updateDept,
|
handleUpdateFunc:()=>{
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc:(selection:any)=>{
|
selectionList.value = selection;
|
},
|
getListFunc:(res:any)=>{
|
tableData.value = proxy.handleTree(res.data,"deptId");
|
},
|
handleBeforeOpenFunc:()=>{
|
listDept().then(response => {
|
response.data.push({deptId: 0,deptName: '总部'});
|
option.value.column.parentId.dicData= proxy.handleTree(response.data, "deptId");
|
option.value.column.parentId.addDisabled = rowAdd.value;
|
});
|
}
|
})
|
|
/** 展开/折叠操作 */
|
function toggleExpandAll() {
|
option.value.defaultExpandAll = !option.value.defaultExpandAll;
|
crudRef.value.doLayout();
|
crudRef.value.refreshTable();
|
}
|
|
const handleAdd = (row:any) => {
|
option.value.column.parentId.value = row.deptId;
|
option.value.column.parentId.addDisabled = true;
|
form.value.parentId = row.deptId;
|
rowAdd.value = true;
|
crudRef.value.rowAdd();
|
}
|
|
const beforeClose = (done:any, type:string)=>{
|
rowAdd.value = false;
|
done();
|
}
|
|
|
|
</script>
|
