<template>
<a-modal
width="560px"
:visible="visible"
:title="type === 'add' ? '新增' : '编辑'"
:confirm-loading="loading"
@cancel="onClose"
@ok="onSubmit"
>
<a-form v-bind="GLOBAL_FORM_LAYOUT" :model="formData">
<a-form-item label="角色" v-bind="validateInfos.ccLevel1DeptCode">
<a-cascader
v-model:value="formData.selectValue"
:options="treeData"
expand-trigger="hover"
show-search
change-on-select
:field-names="{
label: 'name',
value: 'id',
}"
placeholder="请选择"
@change="onChange"
/>
</a-form-item>
<a-form-item label="人力成本" v-bind="validateInfos.bpId">
<a-input-number
id="inputNumber"
v-model:value="formData.bpId"
placeholder="请输入数字"
:min="1"
:max="10000"
/> 元
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang="ts" name="RelatedDocsForm">
import { message } from 'ant-design-vue';
import { DefaultOptionType, ValueType } from 'ant-design-vue/lib/vc-cascader/Cascader';
import { addBasicConfig, editBasicConfig } from '@/api/modules/basicConfig';
import { getCosCenterTree } from '@/api/modules/budget';
import { GLOBAL_FORM_LAYOUT, useForm } from '@/utils';
const props = defineProps<{
current: Recordable;
type?: string;
visible?: boolean;
}>();
const treeData = ref([]);
const emit = defineEmits(['cancel', 'success']);
const formData = reactive<Recordable>({
bpName: '',
bpId: undefined,
selectValue: undefined,
ccLevel1DeptCode: undefined,
ccLevel1DeptName: undefined,
ccLevel2DeptCode: undefined,
ccLevel2DeptName: undefined,
ccLevel3DeptCode: undefined,
ccLevel3DeptName: undefined,
});
const [loading, toggleLoading] = useToggle();
const rules = reactive<FormRules<Recordable>>({
bpId: [{ required: true, message: '请选择数字化BP' }],
ccLevel1DeptCode: [{ required: true, message: '请选择部门' }],
});
const { validate, validateInfos, resetFields, clearValidate } = useForm(
formData,
rules
) as UseFormReturn<Recordable>;
// 项目经理
const bpOptions = computed<UserInfo[]>(() => {
const PdUser = [
{
userId: formData.bpId,
realName: formData.bpName,
},
];
return formData.bpId && formData.bpName ? PdUser : [];
});
const onUserChange = (user: UserInfo, type: string) => {
if (type == 'bpName') {
formData.bpName = user.realName;
formData.bpId = user.userId;
}
};
const getCosCenterTreeData = () => {
getCosCenterTree().then(res => {
treeData.value = res;
if (
props.type == 'edit' &&
(formData.ccLevel1DeptCode || formData.ccLevel2DeptCode || formData.ccLevel3DeptCode)
) {
// formData.selectValue = findSelectData(formData.costCenter);
let selectValue = [];
if (formData.ccLevel1DeptCode) {
selectValue.push(Number(formData.ccLevel1DeptCode));
}
if (formData.ccLevel2DeptCode) {
selectValue.push(Number(formData.ccLevel2DeptCode));
}
if (formData.ccLevel3DeptCode) {
selectValue.push(Number(formData.ccLevel3DeptCode));
}
formData.selectValue = selectValue;
}
});
};
const onChange = (
value: ValueType,
selectedOptions: DefaultOptionType[] | DefaultOptionType[][]
) => {
if (!value) {
// formData.costCenter = undefined;
formData.ccLevel1DeptCode = undefined;
formData.ccLevel1DeptName = undefined;
formData.ccLevel2DeptCode = undefined;
formData.ccLevel2DeptName = undefined;
formData.ccLevel3DeptCode = undefined;
formData.ccLevel3DeptName = undefined;
} else {
if (selectedOptions?.length) {
formData.ccLevel1DeptCode = selectedOptions[0]?.id;
formData.ccLevel2DeptCode = selectedOptions[1]?.id;
formData.ccLevel3DeptCode = selectedOptions[2]?.id;
formData.ccLevel1DeptName = selectedOptions[0]?.name;
formData.ccLevel2DeptName = selectedOptions[1]?.name;
formData.ccLevel3DeptName = selectedOptions[2]?.name;
}
}
};
// const findSelectData = (constCenter: Recordable) => {
// const id = constCenter?.deptCode || undefined;
// const level = constCenter?.deptLevel || undefined;
// let optionValue: Recordable[] = [];
// treeData.value.forEach((item: Recordable) => {
// if (item?.level === level && item?.id === id) {
// optionValue = [item?.id];
// } else {
// if (item?.children) {
// item?.children.forEach((val: Recordable) => {
// if (val?.level === level && val?.id === id) {
// optionValue = [item?.id, val?.id];
// } else {
// if (val?.children) {
// val?.children.forEach((t: Recordable) => {
// if (t?.level === level && t?.id === id) {
// optionValue = [item?.id, val?.id, t?.id];
// }
// });
// }
// }
// });
// }
// }
// });
// return optionValue;
// };
const onCancel = () => {
resetFields();
toggleLoading(false);
};
const onClose = () => {
onCancel();
emit('cancel');
};
const onSubmit = () => {
validate().then(() => {
toggleLoading(true);
const obj = {
add: addBasicConfigFunc,
edit: editBasicConfigFunc,
};
toggleLoading(true);
if (props.type === 'add') {
obj['add']();
}
if (props.type === 'edit') {
obj['edit']();
}
});
};
const addBasicConfigFunc = () => {
addBasicConfig({ ...formData })
.then(() => {
emit('success');
message.success('保存成功');
onClose();
})
.finally(() => {
toggleLoading(false);
});
};
const editBasicConfigFunc = () => {
editBasicConfig({ ...formData })
.then(() => {
emit('success');
message.success('保存成功');
onClose();
})
.finally(() => {
toggleLoading(false);
});
};
watch([() => props.visible, () => props.type], ([val, typeVal]) => {
if (val) {
if (typeVal == 'edit') {
Object.assign(formData, props?.current || {});
}
getCosCenterTreeData();
}
nextTick(() => {
clearValidate();
});
});
</script>
<style lang="scss" scoped>
.cus-fomr-item {
display: flex;
align-items: center;
.cus-input-item {
width: 100% !important;
}
.cus-rate {
margin-left: -25px;
z-index: 10;
}
}
:deep(.ant-input-number) {
width: 94%;
}
</style>
v3+antd基础table框架页面
需积分: 0 104 浏览量
2023-07-05
11:09:20
上传
评论
收藏 11KB ZIP 举报
m0_72134895
- 粉丝: 1
- 资源: 1
最新资源
- 海尔618算价表_七海5.20_16.00xlsx(1)(2).xlsx
- WebCrawler.scr
- 【计算机专业毕业设计】大学生就业信息管理系统设计源码.zip
- YOLO 数据集:8种路面缺陷病害检测【包含划分好的数据集、类别class文件、数据可视化脚本】
- JAVA实现Modbus RTU或Modbus TCPIP案例.zip
- 基于YOLOv8的FPS TPS AI自动锁定源码+使用步骤说明.zip
- JAVA实现Modbus RTU或Modbus TCPIP案例.zip
- 基于yolov8+streamlit的火灾检测部署源码+模型.zip
- 测试aaaaaaabbbbb
- VID20240521070643.mp4
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈