客户自定义表单流程
This commit is contained in:
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" destroyOnClose @register="registerModal" showFooter :title="getTitle" width="40%" @ok="handleSubmit" @cancel="handleCancel">
|
||||
<BasicModal v-bind="$attrs" destroyOnClose @register="registerModal" showFooter :title="getTitle" width="40%" @ok="handleSubmit" @cancel="handleCancel" :showOkBtn="!isDisable">
|
||||
<a-form ref="formRef" :model="formState" :rules="rules" v-bind="{labelCol: { span: 8 },wrapperCol: { span: 16 },}">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="证书名称" name="docTypeCode" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
|
||||
<a-select v-model:value="formState.docTypeCode" placeholder="请选择证书名称" style="width: 100%" allow-clear>
|
||||
<a-select v-model:value="formState.docTypeCode" placeholder="请选择证书名称" :disabled="isDisable" style="width: 100%" allow-clear>
|
||||
<a-select-option v-for="item in optionList" :key="item.code" :value="item.code">
|
||||
{{ item.fullName }}
|
||||
</a-select-option>
|
||||
@ -13,22 +13,22 @@
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="有效期开始" name="dateFrom" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||||
<a-date-picker v-model:value="formState.dateFrom" format="YYYY-MM-DD" :disabled-date="disabledDateStart" style="width: 100%" placeholder="请选择有效期开始" />
|
||||
<a-date-picker v-model:value="formState.dateFrom" format="YYYY-MM-DD" :disabled="isDisable" :disabled-date="disabledDateStart" style="width: 100%" placeholder="请选择有效期开始" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="有效期结束" name="dateTo" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||||
<a-date-picker v-model:value="formState.dateTo" format="YYYY-MM-DD" :disabled-date="disabledDateEnd" style="width: 100%" placeholder="请选择有效期结束" />
|
||||
<a-date-picker v-model:value="formState.dateTo" format="YYYY-MM-DD" :disabled="isDisable" :disabled-date="disabledDateEnd" style="width: 100%" placeholder="请选择有效期结束" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注" name="note" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
|
||||
<a-textarea v-model:value="formState.note" placeholder="请输入备注,最多50字" :maxlength="50" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||||
<a-textarea v-model:value="formState.note" placeholder="请输入备注,最多50字" :disabled="isDisable" :maxlength="50" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="上传附件" name="parentNname" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
|
||||
<Upload :fileList="formState.fileList" :maxSize="200" :accept="accept"></Upload>
|
||||
<a-form-item label="上传附件" name="fileList" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
|
||||
<Upload v-model:value="formState.filePath" @change="changeUplod" :multiple="true" :maxSize="200" :accept="accept"></Upload>
|
||||
<div style="color: #ccc; font-size: 12px">{{ fileTip }}</div>
|
||||
|
||||
</a-form-item>
|
||||
@ -49,10 +49,11 @@ import Upload from '/@/components/Form/src/components/Upload.vue';
|
||||
import { getDocCpList } from '/@/api/sales/Customer';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { object } from 'vue-types';
|
||||
|
||||
const { t } = useI18n();
|
||||
const isUpdate = ref(true);
|
||||
const disable = ref(false);
|
||||
const isDisable = ref(false);
|
||||
let optionList = reactive([])
|
||||
const fileTip = '支持格式.rar .zip .doc .docx .pdf ,单个文件不能超过20MB';
|
||||
const accept ='.rar,.zip, .doc, .docx, .pdf, .RAR, .ZIP, .DOC, .DOCX, .PDF'
|
||||
@ -62,6 +63,7 @@ const emit = defineEmits(['success','register']);
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? t('新增证书') : t('编辑证书')));
|
||||
let formState = reactive({
|
||||
docTypeCode: '',
|
||||
fileList: []
|
||||
});
|
||||
const rules = {
|
||||
docTypeCode: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||||
@ -71,9 +73,11 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
|
||||
getOption()
|
||||
setModalProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
disable.value = data?.btnType == 'view' ? true : false
|
||||
isDisable.value = data?.btnType == 'view' ? true : false
|
||||
if (unref(isUpdate)) {
|
||||
formState=data.record || {}
|
||||
let dateFrom = data.record?.dateFrom ? dayjs(data.record?.dateFrom) : null
|
||||
let dateTo = data.record?.dateTo ? dayjs(data.record?.dateTo) : null
|
||||
Object.assign(formState, {...data.record,dateFrom, dateTo})
|
||||
}
|
||||
});
|
||||
|
||||
@ -97,6 +101,9 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
|
||||
|
||||
const handleChangeFile = (val) => {
|
||||
|
||||
}
|
||||
function changeUplod (val) {
|
||||
console.log(val, 532)
|
||||
}
|
||||
async function getOption() {
|
||||
optionList = await getDocCpList({'valid': 'Y'})
|
||||
@ -108,13 +115,13 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
// 验证通过,提交表单
|
||||
let docNo = (optionList.find(v=>v.code === formState.docTypeCode) || {}).fullName
|
||||
let obj = {
|
||||
...formState,
|
||||
docNo: docNo,
|
||||
dateFrom: formState.dateFrom ? dayjs(formState.dateFrom).format('YYYY-MM-DD') : null,
|
||||
dateTo: formState.dateTo ? dayjs(formState.dateTo).format('YYYY-MM-DD') : null,
|
||||
dateFrom: formState.dateFrom ? dayjs(formState.dateFrom).format('YYYY-MM-DD') : '',
|
||||
dateTo: formState.dateTo ? dayjs(formState.dateTo).format('YYYY-MM-DD') : '',
|
||||
}
|
||||
console.log(obj,543)
|
||||
|
||||
emit('success', obj);
|
||||
notification.success({
|
||||
message: t('操作'),
|
||||
|
||||
Reference in New Issue
Block a user