hldy_vue/src/views/config/serviceDirective/components/ConfigServiceDirectiveForm.vue

303 lines
13 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="ConfigServiceDirectiveForm">
<a-row>
<a-col :span="24">
<a-form-item label="服务类别id" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
name="categoryId">
<j-dict-select-tag v-model:value="formData.categoryId" dictCode="" placeholder="请选择服务类别id"
allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="服务类型id" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
name="typeId">
<j-dict-select-tag v-model:value="formData.typeId" dictCode="" placeholder="请选择服务类型id" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="指令标签id" v-bind="validateInfos.instructionTagId"
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
<j-dict-select-tag v-model:value="formData.instructionTagId" dictCode="instruction_tag"
placeholder="请选择指令标签id" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="收费价格" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
name="tollPrice">
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="提成价格" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
name="comPrice">
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="是否参与医保报销 0不报销 1报销" v-bind="validateInfos.izReimbursement"
id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
<j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode=""
placeholder="请选择是否参与医保报销 0不报销 1报销" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="是否参与机构优惠 0不参与 1参与" v-bind="validateInfos.izPreferential"
id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
<j-dict-select-tag type='radio' v-model:value="formData.izPreferential" dictCode=""
placeholder="请选择是否参与机构优惠 0不参与 1参与" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="收费频次" v-bind="validateInfos.chargingFrequency"
id="ConfigServiceDirectiveForm-chargingFrequency" name="chargingFrequency">
<j-dict-select-tag v-model:value="formData.chargingFrequency" dictCode="" placeholder="请选择收费频次"
allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
name="cycleType">
<j-dict-select-tag v-model:value="formData.cycleType" dictCode="" placeholder="请选择周期类型" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="排序" v-bind="validateInfos.sort" id="ConfigServiceDirectiveForm-sort" name="sort">
<a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="服务说明" v-bind="validateInfos.serviceContent"
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
<a-textarea v-model:value="formData.serviceContent" :rows="4" placeholder="请输入服务说明" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="服务时长(分钟)" v-bind="validateInfos.serviceDuration"
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
<a-input v-model:value="formData.serviceDuration" placeholder="请输入服务时长(分钟)" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
name="izEnabled">
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
placeholder="请选择是否启用"  allowClear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="创建人" v-bind="validateInfos.createBy" id="ConfigServiceDirectiveForm-createBy"
name="createBy">
<a-input v-model:value="formData.createBy" placeholder="请输入创建人" disabled allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="创建日期" v-bind="validateInfos.createTime" id="ConfigServiceDirectiveForm-createTime"
name="createTime">
<a-date-picker placeholder="请选择创建日期" v-model:value="formData.createTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="更新人" v-bind="validateInfos.updateBy" id="ConfigServiceDirectiveForm-updateBy"
name="updateBy">
<a-input v-model:value="formData.updateBy" placeholder="请输入更新人" disabled allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="更新日期" v-bind="validateInfos.updateTime" id="ConfigServiceDirectiveForm-updateTime"
name="updateTime">
<a-date-picker placeholder="请选择更新日期" v-model:value="formData.updateTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="语音文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File"
name="mp3File">
<j-upload v-model:value="formData.mp3File"></j-upload>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File"
name="mp4File">
<j-upload v-model:value="formData.mp4File"></j-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 JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../ConfigServiceDirective.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.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: '',
instructionTagId: '',
directiveName: '',
tollPrice: 0,
comPrice: 0,
izReimbursement: '0',
izPreferential: '0',
chargingFrequency: '',
cycleType: '',
sort: 99,
serviceContent: '',
serviceDuration: '',
izEnabled: '',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
mp3File: '',
mp4File: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = reactive({
categoryId: [{ required: true, message: '请输入服务类别id!' },],
typeId: [{ required: true, message: '请输入服务类型id!' },],
instructionTagId: [{ required: true, message: '请输入指令标签id!' },],
directiveName: [{ required: true, message: '请输入服务指令名称!' },],
tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!' },],
comPrice: [{ required: false }, { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!' },],
izReimbursement: [{ required: true, message: '请输入是否参与医保报销 0不报销 1报销!' },],
izPreferential: [{ required: true, message: '请输入是否参与机构优惠 0不参与 1参与!' },],
chargingFrequency: [{ required: true, message: '请输入收费频次!' },],
cycleType: [{ required: true, message: '请输入周期类型!' },],
sort: [{ required: true, message: '请输入排序!' },],
serviceDuration: [{ required: true, message: '请输入服务时长(分钟)!' }, { pattern: /^-?\d+$/, message: '请输入整数!' },],
izEnabled: [{ 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>