138 lines
3.7 KiB
Vue
138 lines
3.7 KiB
Vue
<template>
|
|
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
|
|
<template #icon><icon-plus /></template>
|
|
{{ modalTitle }}
|
|
</a-button>
|
|
<a-button
|
|
v-if="!props.isCreate"
|
|
type="outline"
|
|
size="small"
|
|
:style="{ marginRight: '10px' }"
|
|
@click="handleClick"
|
|
>
|
|
{{ modalTitle }}
|
|
</a-button>
|
|
<a-modal
|
|
width="600px"
|
|
:visible="visible"
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
>
|
|
<template #title>{{ modalTitle }}</template>
|
|
<a-form ref="createEditRef" :model="formData" :style="{ width: '500px' }">
|
|
<a-form-item field="parentId" label="父部门">
|
|
<a-tree-select
|
|
v-model="formData.parentId"
|
|
:field-names="{
|
|
key: 'id',
|
|
title: 'name',
|
|
children: 'children',
|
|
}"
|
|
:data="props.trees as TreeNodeData[]"
|
|
allow-clear
|
|
placeholder="请选择父部门 ..."
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item
|
|
field="name"
|
|
label="部门名称"
|
|
:validate-trigger="['change', 'input']"
|
|
:rules="[{ required: true, message: '部门名称不能为空' }]"
|
|
>
|
|
<a-input v-model="formData.name" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
field="code"
|
|
label="部门编码"
|
|
:validate-trigger="['change', 'input']"
|
|
:rules="[{ required: true, message: '部门编码不能为空' }]"
|
|
>
|
|
<a-input v-model="formData.code" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
field="deptSort"
|
|
label="部门排序"
|
|
:validate-trigger="['change', 'input']"
|
|
:rules="[{ required: true, message: '排序不能为空' }]"
|
|
>
|
|
<a-input-number v-model="formData.deptSort" :default-value="0" />
|
|
</a-form-item>
|
|
<a-form-item field="remark" label="备注">
|
|
<a-textarea v-model="formData.remark" placeholder="部门备注" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import useVisible from '@/hooks/visible';
|
|
import { computed, PropType, ref } from 'vue';
|
|
import { FormInstance } from '@arco-design/web-vue/es/form';
|
|
import { DeptRecord, create, update } from '@/api/dept';
|
|
import { Message, TreeNodeData } from '@arco-design/web-vue';
|
|
|
|
const props = defineProps({
|
|
dept: {
|
|
type: Object as PropType<DeptRecord>,
|
|
},
|
|
trees: {
|
|
type: Array as PropType<TreeNodeData[]>,
|
|
},
|
|
isCreate: Boolean,
|
|
});
|
|
|
|
const modalTitle = computed(() => {
|
|
return props.isCreate ? '新增' : '编辑';
|
|
});
|
|
const { visible, setVisible } = useVisible(false);
|
|
|
|
const createEditRef = ref<FormInstance>();
|
|
|
|
const formData = ref<DeptRecord>({
|
|
id: undefined,
|
|
parentId: undefined,
|
|
name: '',
|
|
code: '',
|
|
deptSort: 0,
|
|
remark: '',
|
|
...props.dept,
|
|
});
|
|
|
|
const emit = defineEmits(['refresh']);
|
|
const handleClick = () => {
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
const valid = await createEditRef.value?.validate();
|
|
if (!valid) {
|
|
if (props.isCreate) {
|
|
const res = await create(formData.value);
|
|
if (res.status === 200) {
|
|
Message.success({
|
|
content: `${modalTitle.value}成功`,
|
|
duration: 5 * 1000,
|
|
});
|
|
}
|
|
createEditRef.value?.resetFields();
|
|
} else {
|
|
const res = await update(formData.value);
|
|
if (res.status === 200) {
|
|
Message.success({
|
|
content: `${modalTitle.value}成功`,
|
|
duration: 5 * 1000,
|
|
});
|
|
}
|
|
}
|
|
emit('refresh');
|
|
setVisible(false);
|
|
}
|
|
};
|
|
const handleCancel = async () => {
|
|
createEditRef.value?.resetFields();
|
|
setVisible(false);
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|