Files
geg-gas-web/src/views/supplier/Supplier/components/createForm.vue
‘huanghaiixia’ b36a9b2186 日期
2026-03-11 14:18:51 +08:00

619 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-spin :spinning="spinning" tip="加载中...">
<div class="page-bg-wrap formViewStyle">
<a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
<Card title="基本信息" :bordered="false" >
<div>
<a-row>
<a-col :span="8">
<a-form-item label="供应商编码" name="suCode">
<a-input v-model:value="formState.suCode" disabled />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="集团编码" name="suMcode">
<a-input v-model:value="formState.suMcode" :disabled="isDisable" placeholder="请输入集团编码" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="母公司名称" name="parentNname">
<a-input v-model:value="formState.parentNname" :disabled="isDisable" placeholder="请输入母公司名称" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="供应商名称" name="suName" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-input v-model:value="formState.suName" :disabled="isDisable" placeholder="请输入供应商名称" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="供应商简称" name="suSname">
<a-input v-model:value="formState.suSname" :disabled="isDisable" placeholder="请输入供应商简称" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="国内/国际" name="dI">
<a-select v-model:value="formState.dI" :disabled="isDisable" placeholder="请选择国内/国际" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.dIList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="企业性质" name="natureCode">
<a-select v-model:value="formState.natureCode" :disabled="isDisable" placeholder="请选择企业性质" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.natureCodeList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="供应商类型" name="typeCode">
<a-select v-model:value="formState.typeCode" :disabled="isDisable" placeholder="请选择供应商类型" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.typeCodeList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="供应商分类" name="classCode">
<a-select v-model:value="formState.classCode" :disabled="isDisable" placeholder="请选择供应商分类" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.classCodeList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="统一社会信用代码" name="creditNo">
<a-input v-model:value="formState.creditNo" :disabled="isDisable" placeholder="请输入统一社会信用代码" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="纳税人识别号" name="tiNo">
<a-input v-model:value="formState.tiNo" :disabled="isDisable" placeholder="请输入纳税人识别号" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="法定代表人" name="representative">
<a-input v-model:value="formState.representative" :disabled="isDisable" placeholder="请输入法定代表人" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="注册资本(万元)" name="amtReg">
<input-number v-model:value="formState.amtReg" :disabled="isDisable" :min="0" style="width: 100%" placeholder="请输入注册资本"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="成立日期" name="dateEstab">
<a-date-picker :inputReadOnly="true" v-model:value="formState.dateEstab" :disabled="isDisable" style="width: 100%" placeholder="请选择成立日期" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="准入时间" name="dateEntry">
<a-date-picker :inputReadOnly="true" v-model:value="formState.dateEntry" :disabled="isDisable" style="width: 100%" placeholder="请选择准入时间" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="是否有效" name="valid">
<a-select v-model:value="formState.valid" disabled style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.validList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="注册地址" name="addrReg" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-textarea v-model:value="formState.addrReg" :disabled="isDisable" placeholder="请输入注册地址" :auto-size="{ minRows: 1, maxRows: 5 }"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="通讯地址" name="addrMail" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-textarea v-model:value="formState.addrMail" :disabled="isDisable" placeholder="请输入通讯地址" :auto-size="{ minRows: 1, maxRows: 5 }"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="审批状态" name="approCode">
<a-select v-model:value="formState.approCode" disabled style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.approCodeList" :key="item.code" :value="item.code">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-textarea v-model:value="formState.note" :disabled="isDisable" placeholder="请输入备注最多200字" :maxlength="200" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-item>
</a-col>
</a-row>
</div>
</Card>
<Card :bordered="false" >
<template #title>
<div style="display: flex; align-items: center;">
<span style="color: red;">*</span>
<span style="margin-left: 8px;">资质证书信息</span>
<span style="font-size: 12px;font-weight: normal;">需上传证书营业执照危险化学品许可证/燃气经营许可证/危险化学品道路运输许可证等证书</span>
</div>
</template>
<a-button v-if="!isDisable" type="primary" style="margin-bottom: 10px;" @click="handleAdd('certificate')">新增证书</a-button>
<a-table :columns="columnsCertificate" :data-source="dataCertificate" :pagination="false">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'dateFrom'">
{{ record.dateFrom ? dayjs(record.dateFrom).format('YYYY-MM-DD') : ''}}
</template>
<template v-if="column.dataIndex === 'dateTo'">
{{ record.dateTo ? dayjs(record.dateTo).format('YYYY-MM-DD') : ''}}
</template>
<!-- <template v-if="column.dataIndex === 'docTypeCode'">
{{ (optionSelect.docCpList.find(v=>v.code == record.docTypeCode) || {}).fullName }}
</template> -->
<template v-if="column.dataIndex === 'operation'">
<a v-if="!isDisable" style="margin-right: 10px" @click="btnCheck('certificate', 'edit', record, index)">编辑</a>
<a v-if="!isDisable" style="margin-right: 10px" @click="btnCheck('certificate', 'delete', record, index)">删除</a>
<a style="margin-right: 10px" @click="btnCheck('certificate', 'view', record)">查看</a>
<ArrowUpOutlined style="margin-right: 10px;" class="btn" @click="btnCheck('certificate', 'up', record, index)" />
<ArrowDownOutlined class="btn" @click="btnCheck('certificate', 'down', record, index)" />
</template>
</template>
</a-table>
</Card>
<Card :bordered="false" >
<template #title>
<div style="display: flex; align-items: center;">
<span style="color: red;">*</span>
<span style="margin-left: 8px;">银行账户信息</span>
<span style="font-size: 12px;font-weight: normal;">至少填写一条银行信息</span>
</div>
</template>
<a-button v-if="!isDisable" type="primary" style="margin-bottom: 10px;" @click="handleAdd('bank')">新增银行账户</a-button>
<a-table :columns="columnsBank" :data-source="dataBank" :pagination="false">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'defaultSign'">
{{ (optionSelect.signList.find(v=>v.code == record.defaultSign) || {}).name }}
</template>
<template v-if="column.dataIndex === 'operation'">
<a style="margin-right: 10px" @click="btnCheck('bank', 'edit', record, index)">编辑</a>
<a style="margin-right: 10px" @click="btnCheck('bank', 'delete', record, index)">删除</a>
</template>
</template>
</a-table>
</Card>
<Card :bordered="false" >
<template #title>
<div style="display: flex; align-items: center;">
<span style="color: red;">*</span>
<span style="margin-left: 8px;">联系人信息</span>
<span style="font-size: 12px;font-weight: normal;">至少填写一条联系人信息</span>
</div>
</template>
<a-button v-if="!isDisable" type="primary" style="margin-bottom: 10px;" @click="handleAdd('contact')">新增联系人</a-button>
<a-table :columns="columnsContact" :data-source="dataContact" :pagination="false">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'operation'">
<a style="margin-right: 10px" @click="btnCheck('contact', 'edit', record, index)">编辑</a>
<a style="margin-right: 10px" @click="btnCheck('contact', 'delete', record, index)">删除</a>
</template>
</template>
</a-table>
</Card>
<Card :bordered="false" >
<template #title>
<div style="display: flex; align-items: center;">
<span style="margin-left: 8px;">附件信息</span>
<span style="font-size: 12px;font-weight: normal;">上传公司财报等附件</span>
</div>
</template>
<UploadList :disabled="isDisable" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
</Card>
</a-form>
</div>
</a-spin>
<certificateModal @register="registerCertificate" @success="handleSuccessCertificate" />
<contactModal @register="registerContact" @success="handleSuccessContact" />
<bankModal @register="registerBank" @success="handleSuccessBank"/>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { Card } from 'ant-design-vue';
import { FromPageType } from '/@/enums/workflowEnum';
import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { CheckCircleOutlined, StopOutlined, CloseOutlined, UploadOutlined, SaveOutlined, DownloadOutlined,ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import useEventBus from '/@/hooks/event/useEventBus';
import type { Rule } from 'ant-design-vue/es/form';
import { getDocCpList, getDictionary } from '/@/api/sales/Customer';
import certificateModal from '/@/components/common/certificateModal.vue';
import contactModal from '/@/components/common/contactModal.vue';
import bankModal from '/@/components/common/bankModal.vue';
import { useModal } from '/@/components/Modal';
import { addLngSupplier,updateLngSupplier,getLngSupplier } from '/@/api/supplier/Supplier';
import dayjs from 'dayjs';
import { getAppEnvConfig } from '/@/utils/env';
import { message } from 'ant-design-vue';
import UploadList from '/@/components/Form/src/components/UploadList.vue';
const tableName = '1';
const columnName = '1'
const formType = ref('2'); // 0 新建 1 修改 2 查看
const formRef = ref();
const uploadFile = ref()
const props = defineProps({
disabled: false,
id: ''
});
const { bus, FORM_LIST_MODIFIED } = useEventBus();
const router = useRouter();
const { currentRoute } = router;
const isDisable = ref(false);
const { formPath } = currentRoute.value.query;
const pathArr = [];
const tabStore = useMultipleTabStore();
const formProps = ref(null);
const formId = ref(currentRoute.value?.params?.id);
const pageType = ref(currentRoute.value.query?.type);
const pageId = ref(currentRoute.value.query?.id)
const spinning = ref(false);
const curIdx = ref(null)
const { notification } = useMessage();
const { t } = useI18n();
const formState = reactive({
valid: 'Y',
approCode: 'WTJ',
tSign: 'N',
});
const [registerCertificate, { openModal:openModalCertificate }] = useModal();
const [registerContact, { openModal:openModalContact }] = useModal();
const [registerBank, { openModal:openModalBank}] = useModal();
const rules: Record<string, Rule[]> = {
suSname: [{ required: true, message: "该项为必填项", trigger: 'change' }],
suMcode: [{ required: false, message: "该项为必填项", trigger: 'change' }],
dI: [{ required: true, message: "该项为必填项", trigger: 'change' }],
suName: [{ required: true, message: "该项为必填项", trigger: 'change'}],
natureCode: [{ required: true, message: "该项为必填项", trigger: 'change'}],
classCode: [{ required: true, message: "该项为必填项", trigger: 'change'}],
typeCode: [{ required: true, message: "该项为必填项", trigger: 'change'}],
prepaySign: [{ required: true, message: "该项为必填项", trigger: 'change'}],
onlineSign: [{ required: true, message: "该项为必填项", trigger: 'change'}],
tSign: [{ required: false, message: "该项为必填项", trigger: 'change'}],
};
const layout = {
labelCol: { span: 9 },
wrapperCol: { span: 15 },
}
const columnsCertificate = ref([
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 100},
{ title: t('资质证书名称'), dataIndex: 'docTypeName' , width:200},
{ title: t('有效期开始'), dataIndex: 'dateFrom', width: 140},
{ title: t('有效期结束'), dataIndex: 'dateTo', width: 140},
{ title: t('备注'), dataIndex: 'note', },
{ title: t('操作'), dataIndex: 'operation', width: 220},
]);
const columnsBank = ref([
{ title: t('序号'), dataIndex: 'index', customRender: (column) => `${column.index + 1}`},
{ title: t('银行名称'), dataIndex: 'bankName', },
{ title: t('联行号'), dataIndex: 'interBankCode', },
{ title: t('账号名称'), dataIndex: 'accountName', },
{ title: t('银行账号'), dataIndex: 'account', },
{ title: t('默认银行'), dataIndex: 'defaultSign', },
{ title: t('操作'), dataIndex: 'operation', },
]);
const columnsContact = ref([
{ title: t('序号'), dataIndex: 'index', customRender: (column) => `${column.index + 1}`},
{ title: t('姓名'), dataIndex: 'contactName', },
{ title: t('联系电话'), dataIndex: 'tel', },
{ title: t('电子邮箱'), dataIndex: 'email', },
{ title: t('通讯地址'), dataIndex: 'addrMail', },
{ title: t('职位'), dataIndex: 'position', },
{ title: t('备注'), dataIndex: 'note', },
{ title: t('操作'), dataIndex: 'operation', },
]);
const dataCertificate= reactive([]);
const dataBank= reactive([]);
const dataFile = ref([]);
const dataContact= reactive([]);
let optionSelect= reactive({
natureCodeList: [],
dIList: [],
validList: [],
approCodeList: [],
classCodeList: [],
typeCodeList: [],
signList: [],
docCpList: []
});
watch(
() => props.id,
(val) => {
if (val) {
getInfo(val)
}
},
{
immediate: true
}
);
watch(
() => props.disabled,
(val) => {
isDisable.value = val
if (val) {
let idx = columnsBank.value.findIndex(v =>v.dataIndex == 'operation')
idx>-1 && columnsBank.value.splice(idx, 1)
let idx1 = columnsContact.value.findIndex(v =>v.dataIndex == 'operation')
idx1>-1 && columnsContact.value.splice(idx1, 1)
}
},
{
immediate: true
}
);
onMounted(() => {
getOption()
if (pageId.value) {
getInfo(pageId.value)
}
});
const uploadListChange = (val) => {
dataFile.value = val
}
async function getInfo(id) {
spinning.value = true
try {
let data = await getLngSupplier(id)
spinning.value = false
Object.assign(formState, {...data})
Object.assign(dataBank, formState.lngSupplierBankList || [])
Object.assign(dataCertificate, formState.lngSupplierDocList || [])
Object.assign(dataContact, formState.lngSupplierContactList || [])
Object.assign(dataFile.value, formState.lngFileUploadList || [])
formState.dateEntry = formState.dateEntry ? dayjs(formState.dateEntry) : null
formState.dateEstab = formState.dateEstab ? dayjs(formState.dateEstab) : null
} catch (error) {
spinning.value = false
}
}
async function getOption() {
optionSelect.natureCodeList = await getDictionary('LNG_ENT_PR')
optionSelect.dIList = await getDictionary('LNG_NATURE')
optionSelect.classCodeList = await getDictionary('LNG_CLASS')
optionSelect.typeCodeList = await getDictionary('LNG_SU_TYP')
optionSelect.signList = await getDictionary('LNG_YN')
optionSelect.validList = await getDictionary('LNG_VALID')
optionSelect.approCodeList = await getDictionary('LNG_APPRO')
// optionSelect.docCpList = await getDocCpList()
}
const handleAdd = (val)=> {
curIdx.value = null
if (val ==='certificate') {
openModalCertificate(true,{isUpdate: false, list: dataCertificate});
}
if (val ==='contact'){
openModalContact(true, {});
}
if (val == 'bank'){
openModalBank(true,{isUpdate: false})
}
}
const btnCheck = (type, btn, record, index) => {
console.log(index, 555, type, )
curIdx.value = null
btn=='edit' && (curIdx.value = index)
// 证书
if (type == 'certificate') {
if (btn == 'edit' || btn == 'view') {
openModalCertificate(true, {record: record,isUpdate: true, btnType: btn, list: dataCertificate});
console.log(record, 'record', dataCertificate)
}
if (btn == 'delete') {
dataCertificate.splice(index, 1)
}
if (btn == 'up') {
if (index === 0) {
return
}
dataCertificate[index] = dataCertificate.splice(index-1, 1, dataCertificate[index])[0];
}
if (btn == 'down') {
if (index === dataCertificate.length - 1) {
return
}
dataCertificate[index] = dataCertificate.splice(index+1, 1, dataCertificate[index])[0];
}
}
// 联系人
if (type == 'contact') {
if (btn == 'edit') {
openModalContact(true, {record: record,isUpdate: true});
}
if (btn == 'delete') {
dataContact.splice(index, 1)
}
}
// 银行
if (type == 'bank') {
if (btn == 'edit') {
openModalBank(true, {record: record,isUpdate: true});
}
if (btn == 'delete') {
dataBank.splice(index, 1)
}
}
}
const handleSuccessCertificate = (val) => {
// 编辑
if (curIdx.value != null) {
dataCertificate[curIdx.value] = {...val}
return
}
let idx =dataCertificate.findIndex(v => v.docTypeCode == val.docTypeCode)
if (idx <0) {
dataCertificate.push(val)
}
console.log(dataCertificate, 'dataCertificate')
}
const handleSuccessContact = (val)=> {
if (curIdx.value != null) {
dataContact[curIdx.value] = {...val}
return
}
dataContact.push(val)
}
const handleSuccessBank = (val) => {
if (curIdx.value != null) {
dataBank[curIdx.value] = {...val}
return
}
dataBank.push(val)
}
function close() {
tabStore.closeTab(currentRoute.value, router);
}
async function getFormValue() {
return formState
}
async function handleSubmit(type) {
try {
await formRef.value.validateFields();
if (!dataBank.length) {
notification.warning({
message: 'Tip',
description: '请添加银行信息'
})
return
}
if (!dataCertificate.length) {
notification.warning({
message: 'Tip',
description: '请添加资质证书'
})
return
}
if (!dataContact.length) {
notification.warning({
message: 'Tip',
description: '请添加联系人'
})
return
}
let arr = []
dataBank.forEach(v => {
if (v.defaultSign == 'Y') {
arr.push(v)
}
})
if (arr.length !== 1) {
notification.warning({
message: 'Tip',
description: '默认银行有且仅有一个'
})
return
}
let arrCertificate = JSON.parse(JSON.stringify(dataCertificate))
arrCertificate.forEach(v => {
v.dateFrom = v.dateFrom ? dayjs(v.dateFrom ).format('YYYY-MM-DD HH:mm:ss') : '';
v.dateTo = v.dateTo ? dayjs(v.dateTo ).format('YYYY-MM-DD HH:mm:ss'): '';
})
let obj = {
...formState,
lngSupplierBankList: dataBank,
lngSupplierDocList: arrCertificate,
lngSupplierContactList: dataContact,
lngFileUploadList: dataFile.value
}
spinning.value = true;
let request = !formState.id ? addLngSupplier :updateLngSupplier
try {
const data = await request(obj);
// 新增保存
// data?.id && (formState.id = data.id)
// data?.suCode && (Object.assign(formState, {cuCode: data?.suCode}))
if (data?.id) {
getInfo(data?.id)
}
// 同意保存不提示
if (!type) {
notification.success({
message: 'Tip',
description: data?.id ? t('新增成功!') : t('修改成功!')
}); //提示消息
}
// formRef.value.resetFields();
return data?.id ? data : obj
// setTimeout(() => {
// bus.emit(FORM_LIST_MODIFIED, { path: formPath });
// close();
// }, 1000);
} finally {
spinning.value = false;
}
} catch (errorInfo) {
spinning.value = false;
console.log(errorInfo, 'errorInfo')
errorInfo?.errorFields?.length && notification.warning({
message: 'Tip',
description: '请完善信息'
});
return false
}
}
defineExpose({
handleSubmit,
getFormValue
});
</script>
<style lang="less" scoped>
.page-bg-wrap {
background-color: #fff;
}
.top-toolbar {
min-height: 44px;
margin-bottom: 12px;
border-bottom: 1px solid #eee;
}
.rateStyle {
position: absolute;
right: -25px;
top:4px;
}
.btn {
color: #5e95ff;
font-size: 20px;
font-weight: bold;
}
</style>