280 lines
13 KiB
Vue
280 lines
13 KiB
Vue
|
<template>
|
||
|
<a-spin :spinning="confirmLoading">
|
||
|
<JFormContainer :disabled="disabled">
|
||
|
<template #detail>
|
||
|
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="ConfigMaterialInfoForm">
|
||
|
<a-row>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="物料类别" v-bind="validateInfos.categoryId" id="ConfigMaterialInfoForm-categoryId" name="categoryId">
|
||
|
<j-dict-select-tag type='list' v-model:value="formData.categoryId" dictCode="config_material_category,category_name,id,iz_enabled = 0 and del_flag = 0" placeholder="请选择物料类别" allow-clear @change="formData.typeId = null , formData.medicationId = null" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="物料类型" v-bind="validateInfos.typeId" id="ConfigMaterialInfoForm-typeId" name="typeId">
|
||
|
<j-dict-select-tag type='list' v-model:value="formData.typeId" :dictCode="`config_material_type,type_name,id,category_id = ${formData.categoryId || -1} and iz_enabled = 0 and del_flag = 0 `" placeholder="请选择物料类型" @change="formData.medicationId = null" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="用药类型" v-bind="validateInfos.medicationId" id="ConfigMaterialInfoForm-medicationId" name="medicationId">
|
||
|
<j-dict-select-tag type='list' v-model:value="formData.medicationId" :dictCode="`config_material_medication,medication_name,id,type_id = ${formData.typeId || -1} and iz_enabled = 0 and del_flag = 0`" placeholder="请选择用药类型" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="货品名称" v-bind="validateInfos.materialName" id="ConfigMaterialInfoForm-materialName" name="materialName">
|
||
|
<a-input v-model:value="formData.materialName" placeholder="请输入货品名称" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="货品编码" v-bind="validateInfos.materialNo" id="ConfigMaterialInfoForm-materialNo" name="materialNo">
|
||
|
<a-input v-model:value="formData.materialNo" placeholder="请输入货品编码" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="规格型号" v-bind="validateInfos.specificationModel" id="ConfigMaterialInfoForm-specificationModel" name="specificationModel">
|
||
|
<a-input v-model:value="formData.specificationModel" placeholder="请输入规格型号" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="销售单价" v-bind="validateInfos.salesUnitPrice" id="ConfigMaterialInfoForm-salesUnitPrice" name="salesUnitPrice">
|
||
|
<a-input-number v-model:value="formData.salesUnitPrice" placeholder="请输入销售单价" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="参考单价" v-bind="validateInfos.referenceUnitPrice" id="ConfigMaterialInfoForm-referenceUnitPrice" name="referenceUnitPrice">
|
||
|
<a-input-number v-model:value="formData.referenceUnitPrice" placeholder="请输入参考单价" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="货品单位" v-bind="validateInfos.materialUnits" id="ConfigMaterialInfoForm-materialUnits" name="materialUnits">
|
||
|
<a-input v-model:value="formData.materialUnits" placeholder="请输入货品单位" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="多单位开关" v-bind="validateInfos.multiUnitSwitch" id="ConfigMaterialInfoForm-multiUnitSwitch" name="multiUnitSwitch">
|
||
|
<j-dict-select-tag type='radio' v-model:value="formData.multiUnitSwitch" dictCode="multiUnitSwitch" placeholder="请选择多单位开关" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="多单位采购单位" v-bind="validateInfos.multiUnitType" id="ConfigMaterialInfoForm-multiUnitType" name="multiUnitType">
|
||
|
<j-dict-select-tag type='radio' v-model:value="formData.multiUnitType" dictCode="multiUnitType" placeholder="请选择多单位默认采购" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigMaterialInfoForm-izEnabled" name="izEnabled">
|
||
|
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled" placeholder="请选择是否启用" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="父级单位" v-bind="validateInfos.oneUnit" id="ConfigMaterialInfoForm-oneUnit" name="oneUnit">
|
||
|
<a-input v-model:value="formData.oneUnit" placeholder="请输入父级单位" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="父级单位兑换比例" v-bind="validateInfos.oneUnitProportion" id="ConfigMaterialInfoForm-oneUnitProportion" name="oneUnitProportion">
|
||
|
<a-input-number v-model:value="formData.oneUnitProportion" placeholder="请输入父级单位兑换比例" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="父级单位价格" v-bind="validateInfos.oneUnitPrice" id="ConfigMaterialInfoForm-oneUnitPrice" name="oneUnitPrice">
|
||
|
<a-input-number v-model:value="formData.oneUnitPrice" placeholder="请输入父级单位价格" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="爷级单位" v-bind="validateInfos.twoUnit" id="ConfigMaterialInfoForm-twoUnit" name="twoUnit">
|
||
|
<a-input v-model:value="formData.twoUnit" placeholder="请输入爷级单位" allow-clear ></a-input>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="爷级单位兑换比例" v-bind="validateInfos.twoUnitProportion" id="ConfigMaterialInfoForm-twoUnitProportion" name="twoUnitProportion">
|
||
|
<a-input-number v-model:value="formData.twoUnitProportion" placeholder="请输入爷级单位兑换比例" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8" v-if="formData.multiUnitSwitch == '1'">
|
||
|
<a-form-item label="爷级单位价格" v-bind="validateInfos.twoUnitPrice" id="ConfigMaterialInfoForm-twoUnitPrice" name="twoUnitPrice">
|
||
|
<a-input-number v-model:value="formData.twoUnitPrice" placeholder="请输入爷级单位价格" style="width: 100%" />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="24">
|
||
|
<a-form-item label="供应商" v-bind="validateInfos.suppliers" id="ConfigMaterialInfoForm-suppliers" name="suppliers" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
|
||
|
<j-select-multiple placeholder="请选择物料类别" v-model:value="formData.suppliers" dictCode="config_suppliers_info,suppliers_name,id,supply_state = 1 and del_flag = 0" allow-clear />
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="物料图片" v-bind="validateInfos.materialImg" id="ConfigMaterialInfoForm-materialImg" name="materialImg">
|
||
|
<j-image-upload :fileMax="0" v-model:value="formData.materialImg" ></j-image-upload>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
<a-col :span="8">
|
||
|
<a-form-item label="物料标识" v-bind="validateInfos.materialIdent" id="ConfigMaterialInfoForm-materialIdent" name="materialIdent">
|
||
|
<j-image-upload :fileMax="0" v-model:value="formData.materialIdent" ></j-image-upload>
|
||
|
</a-form-item>
|
||
|
</a-col>
|
||
|
</a-row>
|
||
|
</a-form>
|
||
|
</template>
|
||
|
</JFormContainer>
|
||
|
</a-spin>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||
|
import { defHttp } from '/@/utils/http/axios';
|
||
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||
|
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||
|
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
|
||
|
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
|
||
|
import { getValueType } from '/@/utils';
|
||
|
import { saveOrUpdate } from '../ConfigMaterialInfo.api';
|
||
|
import { Form } from 'ant-design-vue';
|
||
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||
|
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
|
||
|
const props = defineProps({
|
||
|
formDisabled: { type: Boolean, default: false },
|
||
|
formData: { type: Object, default: () => ({})},
|
||
|
formBpm: { type: Boolean, default: true }
|
||
|
});
|
||
|
const formRef = ref();
|
||
|
const useForm = Form.useForm;
|
||
|
const emit = defineEmits(['register', 'ok']);
|
||
|
const formData = reactive<Record<string, any>>({
|
||
|
id: '',
|
||
|
categoryId: '',
|
||
|
typeId: '',
|
||
|
medicationId: '',
|
||
|
materialName: '',
|
||
|
materialNo: '',
|
||
|
specificationModel: '',
|
||
|
salesUnitPrice: undefined,
|
||
|
referenceUnitPrice: undefined,
|
||
|
materialUnits: '',
|
||
|
multiUnitSwitch: '2',
|
||
|
oneUnit: '',
|
||
|
oneUnitProportion: undefined,
|
||
|
oneUnitPrice: undefined,
|
||
|
twoUnit: '',
|
||
|
twoUnitProportion: undefined,
|
||
|
twoUnitPrice: undefined,
|
||
|
multiUnitType: '0',
|
||
|
izEnabled: '0',
|
||
|
suppliers: '',
|
||
|
materialImg: '',
|
||
|
materialIdent: '',
|
||
|
});
|
||
|
const { createMessage } = useMessage();
|
||
|
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 9 } });
|
||
|
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 13 } });
|
||
|
const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||
|
const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||
|
const labelCol3 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
|
||
|
const wrapperCol3 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
|
||
|
const confirmLoading = ref<boolean>(false);
|
||
|
//表单验证
|
||
|
const validatorRules = reactive({
|
||
|
categoryId: [{ required: true, message: '请选择物料类别!'},],
|
||
|
typeId: [{ required: true, message: '请选择物料类型!'},],
|
||
|
materialName: [{ required: true, message: '请输入货品名称!'},],
|
||
|
salesUnitPrice: [{ required: true, message: '请输入销售单价!'},],
|
||
|
referenceUnitPrice: [{ required: true, message: '请输入参考单价!'},],
|
||
|
materialUnits: [{ required: true, message: '请输入货品单位!'},],
|
||
|
suppliers: [{ required: true, message: '请选择供应商!'},],
|
||
|
});
|
||
|
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||
|
|
||
|
// 表单禁用
|
||
|
const disabled = computed(()=>{
|
||
|
if(props.formBpm === true){
|
||
|
if(props.formData.disabled === false){
|
||
|
return false;
|
||
|
}else{
|
||
|
return true;
|
||
|
}
|
||
|
}
|
||
|
return props.formDisabled;
|
||
|
});
|
||
|
|
||
|
/**
|
||
|
* 新增
|
||
|
*/
|
||
|
function add() {
|
||
|
edit({});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 编辑
|
||
|
*/
|
||
|
function edit(record) {
|
||
|
nextTick(() => {
|
||
|
resetFields();
|
||
|
const tmpData = {};
|
||
|
Object.keys(formData).forEach((key) => {
|
||
|
if(record.hasOwnProperty(key)){
|
||
|
tmpData[key] = record[key]
|
||
|
}
|
||
|
})
|
||
|
//赋值
|
||
|
Object.assign(formData, tmpData);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 提交数据
|
||
|
*/
|
||
|
async function submitForm() {
|
||
|
try {
|
||
|
// 触发表单验证
|
||
|
await validate();
|
||
|
} catch ({ errorFields }) {
|
||
|
if (errorFields) {
|
||
|
const firstField = errorFields[0];
|
||
|
if (firstField) {
|
||
|
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
||
|
}
|
||
|
}
|
||
|
return Promise.reject(errorFields);
|
||
|
}
|
||
|
confirmLoading.value = true;
|
||
|
const isUpdate = ref<boolean>(false);
|
||
|
//时间格式化
|
||
|
let model = formData;
|
||
|
if (model.id) {
|
||
|
isUpdate.value = true;
|
||
|
}
|
||
|
//循环数据
|
||
|
for (let data in model) {
|
||
|
//如果该数据是数组并且是字符串类型
|
||
|
if (model[data] instanceof Array) {
|
||
|
let valueType = getValueType(formRef.value.getProps, data);
|
||
|
//如果是字符串类型的需要变成以逗号分割的字符串
|
||
|
if (valueType === 'string') {
|
||
|
model[data] = model[data].join(',');
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
await saveOrUpdate(model, isUpdate.value)
|
||
|
.then((res) => {
|
||
|
if (res.success) {
|
||
|
createMessage.success(res.message);
|
||
|
emit('ok');
|
||
|
} else {
|
||
|
createMessage.warning(res.message);
|
||
|
}
|
||
|
})
|
||
|
.finally(() => {
|
||
|
confirmLoading.value = false;
|
||
|
});
|
||
|
}
|
||
|
|
||
|
|
||
|
defineExpose({
|
||
|
add,
|
||
|
edit,
|
||
|
submitForm,
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<style lang="less" scoped>
|
||
|
.antd-modal-form {
|
||
|
padding: 14px;
|
||
|
}
|
||
|
</style>
|