| | |
| | | <el-form :model="departmentForm" size="default" label-width="90px"> |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="部门等级"> |
| | | <el-select v-model="departmentForm.depLevel" placeholder="请输入部门等级" class="input-add" clearable> |
| | | <el-option |
| | | v-for="item in depLevelList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="上级部门"> |
| | | <el-cascader :options="deptData" class="input-add" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable v-model="departmentForm.parentDepId"> </el-cascader> |
| | | <el-input v-model="parentName" class="input-add" disabled clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="部门描述"> |
| | | <el-input v-model="departmentForm.depInfo" class="input-add" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> |
| | | <el-input v-model="departmentForm.info" class="input-add" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | parentId: string; |
| | | id: number; |
| | | } |
| | | interface DeptSate { |
| | | interface DeptState { |
| | | title: string; |
| | | parentName: string |
| | | isShowDialog: boolean; |
| | | departmentForm: { |
| | | depName: string; |
| | | depInfo: string; |
| | | parentDepId: string; |
| | | depLevel:null | number |
| | | info: string; |
| | | parentId?: null|number |
| | | id?: null|number |
| | | }; |
| | | deptData: Array<TableDataRow>; |
| | | depLevelList: Array<Type>; |
| | |
| | | export default defineComponent({ |
| | | name: 'systemAddDept', |
| | | setup(prop, context) { |
| | | const state = reactive<DeptSate>({ |
| | | const state = reactive<DeptState>({ |
| | | title: '', |
| | | parentName: '', |
| | | isShowDialog: false, |
| | | departmentForm: { |
| | | depName: '', |
| | | parentDepId: '', |
| | | depInfo: '', |
| | | depLevel:null, |
| | | parentId: null, |
| | | info: '', |
| | | id: null |
| | | }, |
| | | deptData: [], // 部门数据 |
| | | depLevelList: [ |
| | |
| | | ] // 部门数据 |
| | | }); |
| | | |
| | | const findParentById=(tree:Array<any>,id:number|null,depName:string)=>{ |
| | | const parent = tree.find(i=>i.id == id) |
| | | if(parent){ |
| | | return parent[depName] |
| | | } |
| | | for(const item of tree){ |
| | | if(item.children){ |
| | | const result = findParentById(item.children,id,depName) |
| | | if(result){ |
| | | return result |
| | | } |
| | | } |
| | | } |
| | | return null |
| | | } |
| | | |
| | | // 打开弹窗 |
| | | const openDialog = (type: string, value: any, departmentList: []) => { |
| | | state.isShowDialog = true; |
| | | state.departmentForm = JSON.parse(JSON.stringify(value)) |
| | | state.parentName = value.depName |
| | | state.deptData = JSON.parse(JSON.stringify(departmentList)); |
| | | if (type === '新增') { |
| | | state.title = '新增部门'; |
| | | state.departmentForm = { |
| | | depName: '', |
| | | parentDepId: '', |
| | | depLevel:null, |
| | | depInfo: '' |
| | | parentId: value.id, |
| | | info: '' |
| | | }; |
| | | } else { |
| | | state.parentName = findParentById(departmentList,value.parentId,'depName') |
| | | state.title = '修改部门'; |
| | | state.departmentForm = JSON.parse(JSON.stringify(value)); |
| | | state.departmentForm = { |
| | | depName: value.depName, |
| | | id: value.id, |
| | | info: value.info |
| | | } |
| | | } |
| | | }; |
| | | // 关闭弹窗 |
| | |
| | | const onSubmit = async () => { |
| | | if (state.title === '新增部门') { |
| | | let res = await departmentApi().addDepartment(state.departmentForm); |
| | | if (res.data.code === '200') { |
| | | if (res.data.code === 100) { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '部门新增成功', |
| | |
| | | } |
| | | } else { |
| | | let res = await departmentApi().modDepartment(state.departmentForm); |
| | | if (res.data.code === '200') { |
| | | if (res.data.code === 100) { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '部门修改成功', |
| | |
| | | initTableData(); |
| | | }); |
| | | return { |
| | | findParentById, |
| | | openDialog, |
| | | closeDialog, |
| | | onCancel, |