|
|
@@ -10,20 +10,20 @@
|
|
|
<el-form-item label="部门名称" prop="deptName">
|
|
|
<el-input placeholder="请输入部门名称" v-model="formParams.deptName" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="上级部门" prop="parent">
|
|
|
+ <el-form-item label="上级部门" prop="parentId">
|
|
|
<el-tree-select
|
|
|
:data="getTreeList"
|
|
|
clearable
|
|
|
check-strictly
|
|
|
- v-model="formParams.parent"
|
|
|
+ v-model="formParams.parentId"
|
|
|
placeholder="请选择上级部门"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="排序" prop="orderNum">
|
|
|
<el-input-number placeholder="请输入排序" v-model="formParams.orderNum" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="状态" prop="isEnable">
|
|
|
- <el-switch v-model="formParams.isEnable">
|
|
|
+ <el-form-item label="状态" prop="isDisabled">
|
|
|
+ <el-switch v-model="formParams.isDisabled">
|
|
|
<template #checked> 启用 </template>
|
|
|
<template #unchecked> 禁用 </template>
|
|
|
</el-switch>
|
|
|
@@ -40,13 +40,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, computed } from 'vue';
|
|
|
+ import { ref, computed, watch } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
- import type { formParamsType } from './types';
|
|
|
-
|
|
|
- import { addDept, editDept, deptInfo } from '@/api/auth/dept';
|
|
|
-
|
|
|
+ import type { editDeptProps } from '@/types/dept/type';
|
|
|
+ import { deptInfo, updateDepartments, saveDept } from '@/api/auth/dept';
|
|
|
import { replaceParams } from '@/utils/helper/treeHelper';
|
|
|
+ import { IS_DISABLED } from '@/types/scene/constant';
|
|
|
+ import { DeptTreeItem } from '@/types/dept/type';
|
|
|
|
|
|
const rules = {
|
|
|
deptName: {
|
|
|
@@ -57,25 +57,18 @@
|
|
|
};
|
|
|
|
|
|
const emit = defineEmits(['change']);
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '添加部门',
|
|
|
- },
|
|
|
- width: {
|
|
|
- type: Number,
|
|
|
- default: 450,
|
|
|
- },
|
|
|
- deptList: {
|
|
|
- type: Array,
|
|
|
+ const props = withDefaults(
|
|
|
+ defineProps<{ title: string; width: number; deptList: Array<DeptTreeItem>; dataSource: DeptTreeItem; }>(),
|
|
|
+ {
|
|
|
+ title: '添加部门',
|
|
|
+ width: 450,
|
|
|
},
|
|
|
- });
|
|
|
+ );
|
|
|
|
|
|
const defaultValueRef = () => ({
|
|
|
- deptId: null,
|
|
|
- parent: null,
|
|
|
- isEnable: true,
|
|
|
+ id: null,
|
|
|
+ parentId: null,
|
|
|
+ isDisabled: true,
|
|
|
deptName: '',
|
|
|
orderNum: undefined,
|
|
|
});
|
|
|
@@ -90,16 +83,16 @@
|
|
|
{
|
|
|
label: '顶级部门',
|
|
|
value: 0,
|
|
|
- children: replaceParams(props.deptList || [], 'deptName', 'deptId'),
|
|
|
+ children: replaceParams(props.deptList || [], 'deptName', 'id'),
|
|
|
},
|
|
|
];
|
|
|
});
|
|
|
|
|
|
- const formParams = ref<formParamsType>(defaultValueRef());
|
|
|
+ const formParams = ref<editDeptProps>(defaultValueRef());
|
|
|
|
|
|
- function openDrawer(deptId?) {
|
|
|
- if (deptId) {
|
|
|
- formParams.value.deptId = deptId;
|
|
|
+ function openDrawer(id?) {
|
|
|
+ if (id) {
|
|
|
+ formParams.value.id = id;
|
|
|
getInfo();
|
|
|
return;
|
|
|
}
|
|
|
@@ -115,16 +108,19 @@
|
|
|
if (!valid) {
|
|
|
return message.error('请填写完整信息');
|
|
|
}
|
|
|
- const msg = formParams.value.deptId ? '编辑成功' : '添加成功';
|
|
|
- if (formParams.value.deptId) {
|
|
|
- editDept(formParams.value).then((_) => {
|
|
|
+ const msg = formParams.value.id ? '编辑成功' : '添加成功';
|
|
|
+ const params = { ...formParams.value };
|
|
|
+ params.isDisabled = formParams.value.isDisabled ? IS_DISABLED.FALSE : IS_DISABLED.TRUE;
|
|
|
+ if (formParams.value.id) {
|
|
|
+ updateDepartments(params).then(() => {
|
|
|
message.success(msg);
|
|
|
emit('change');
|
|
|
handleReset();
|
|
|
closeDrawer();
|
|
|
});
|
|
|
} else {
|
|
|
- addDept(formParams.value).then((_) => {
|
|
|
+ delete params.id
|
|
|
+ saveDept(params).then(() => {
|
|
|
message.success(msg);
|
|
|
emit('change');
|
|
|
handleReset();
|
|
|
@@ -140,11 +136,11 @@
|
|
|
}
|
|
|
|
|
|
function getInfo() {
|
|
|
- deptInfo({ id: formParams.value.deptId }).then((res) => {
|
|
|
+ deptInfo({ id: formParams.value.id }).then((res) => {
|
|
|
const params = {
|
|
|
- deptId: res.deptId,
|
|
|
- parent: res.parent,
|
|
|
- isEnable: res.isEnable,
|
|
|
+ id: res.id,
|
|
|
+ parentId: res.parentId,
|
|
|
+ isDisabled: res.isDisabled,
|
|
|
deptName: res.deptName,
|
|
|
orderNum: res.orderNum,
|
|
|
};
|
|
|
@@ -153,6 +149,23 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ watch(
|
|
|
+ () => props.dataSource,
|
|
|
+ (value) => {
|
|
|
+ if (value) {
|
|
|
+ Object.entries(value).forEach(([key, value]) => {
|
|
|
+ if (['id', 'parentId', 'deptName', 'orderNum'].includes(key)) {
|
|
|
+ formParams.value[key] = value;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ formParams.value.isDisabled = value?.isDisabled === IS_DISABLED.FALSE ? true : false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
defineExpose({
|
|
|
openDrawer,
|
|
|
closeDrawer,
|