朱进
301c0199d2
- 创建合同模版详情组件Detail.vue，呈现合同模版编码、名称、备注等信息 - 详情页使用BasicModal弹窗及多标签页展示合同框架、合同参数、打印模版 - 实现RelationDetail作为关联表单详情展示模块 - 新增合同模版表单组件Form.vue，支持合同模版的新增与编辑 - 表单包含合同基础信息及启用各类清单开关切换 - 合同参数中支持合同类型及签约类型的选择 - 打印模版部分实现打印模版列表展示及增删复制操作 - 使用Yunzhupaas系列组件构建输入框、开关、选择器等表单元素 - 表单支持操作后的提交与记录切换（上一条、下一条） - 完善表单权限、数据加载、数据变更监听等逻辑处理 - 为表格列增加复杂表头处理的预留支持 - 掩码配置及多语言国际化支持已集成
1171 lines
41 KiB
Vue
1171 lines
41 KiB
Vue
<template>
|
||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="1000px" showFooter :showOkBtn="false">
|
||
<template #insertFooter> </template>
|
||
<a-row class="p-10px dynamic-form">
|
||
<!-- 表单 -->
|
||
<a-form :colon="false" size="middle" layout="horizontal" labelAlign="right" :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef">
|
||
<a-row :gutter="15">
|
||
<!-- 具体表单 -->
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="company_code">
|
||
<template #label>企业编码 </template> <p>{{ dataForm.company_code }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="company_name">
|
||
<template #label>企业名称 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.company_name"
|
||
placeholder="请输入企业名称"
|
||
:maxlength="200"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.company_name">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item">
|
||
<a-form-item name="short_name">
|
||
<template #label>简称/昵称 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.short_name"
|
||
placeholder="请输入简称/昵称"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.short_name">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="entity_type">
|
||
<template #label>类型 </template> <p>{{ dataForm.entity_type }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="credit_code">
|
||
<template #label>{{ dataForm.entity_type_yunzhupaasId === 'IND' ? '身份证' : '社会信用代码' }} </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.credit_code"
|
||
placeholder="请输入社会信用代码"
|
||
:maxlength="100"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.credit_code">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="org_id">
|
||
<template #label>归属组织 </template> <p>{{ dataForm.org_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="province_id">
|
||
<template #label>所属地区 </template> <p>{{ dataForm.province_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="tax_type">
|
||
<template #label>纳税人类别 </template> <p>{{ dataForm.tax_type }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="enterprise_scale">
|
||
<template #label>企业规模 </template> <p>{{ dataForm.enterprise_scale }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="enterprise_nature">
|
||
<template #label>企业类型 </template> <p>{{ dataForm.enterprise_nature }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="industry_code">
|
||
<template #label>行业代码 </template> <p>{{ dataForm.industry_code }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" v-if="dataForm.entity_type_yunzhupaasId=='ORG'">
|
||
<a-form-item name="registration_date">
|
||
<template #label>成立日期 </template> <p>{{ dataForm.registration_date }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="registered_capital">
|
||
<template #label>注册资本 </template>
|
||
<YunzhupaasInputNumber
|
||
v-model:value="dataForm.registered_capital"
|
||
placeholder="请输入注册资本"
|
||
disabled
|
||
detailed
|
||
:style="{ width: '100%' }"
|
||
:max="999999"
|
||
:step="1"
|
||
:precision="4"
|
||
:controls="false"
|
||
addonAfter="万元">
|
||
</YunzhupaasInputNumber>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="legal_representative">
|
||
<template #label>法定代表人 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.legal_representative"
|
||
placeholder="请输入法定代表人"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.legal_representative">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="phone">
|
||
<template #label>联系电话 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.phone"
|
||
placeholder="请输入联系电话"
|
||
:maxlength="11"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.phone">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="email">
|
||
<template #label>邮箱 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.email"
|
||
placeholder="请输入邮箱"
|
||
:maxlength="100"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.email">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="website">
|
||
<template #label>网站 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.website"
|
||
placeholder="请输入网站"
|
||
:maxlength="100"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.website">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="address">
|
||
<template #label>地址 </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.address"
|
||
placeholder="请输入地址"
|
||
:maxlength="200"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.address">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item" >
|
||
<a-form-item name="business_scope">
|
||
<template #label>经营范围 </template> <p>{{ dataForm.business_scope }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_major_person_id">
|
||
<template #label>责任人 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_major_person_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_supplier_level">
|
||
<template #label>供应商级别 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_supplier_level }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_supplier_type">
|
||
<template #label>供应商类型 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_supplier_type }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_supplier_category">
|
||
<template #label>供应商分类 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_supplier_category }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_honor">
|
||
<template #label>荣誉、资质 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_honor }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_achievement">
|
||
<template #label>供应商业绩 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_achievement }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item" >
|
||
<a-form-item name="yunzhupaas_mdm_supplier_yunzhupaas_finish_project">
|
||
<template #label>完工项目 </template> <p>{{ dataForm.yunzhupaas_mdm_supplier_yunzhupaas_finish_project }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item" >
|
||
<a-form-item name="remark">
|
||
<template #label>备注 </template> <p>{{ dataForm.remark }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-tabs v-model:activeKey="state.activetabformItemfe79ef" tabPosition="top" class="mb-20">
|
||
<a-tab-pane tab="发票抬头" key="1" forceRender>
|
||
<a-row :gutter="15">
|
||
<a-col :span="24" class="ant-col-item mb-20px" >
|
||
<a-form-item>
|
||
<a-table
|
||
:data-source="dataForm.tableField46dc53"
|
||
:columns="panyInvoiceColumns"
|
||
size="small"
|
||
:pagination="false"
|
||
:scroll="{ x: 'max-content' }">
|
||
<template #headerCell="{ column }">
|
||
<span class="required-sign" v-if="column.required">*</span>
|
||
{{ column.title }}
|
||
<BasicHelp :text="column.tipLabel" v-if="column.tipLabel && column.title" />
|
||
</template>
|
||
<template #bodyCell="{ column, index, record }">
|
||
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
|
||
<template v-if="column.key === 'title_code'">
|
||
<p>{{ record.title_code }}</p>
|
||
</template>
|
||
<template v-if="column.key === 'title_name'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.title_name"
|
||
placeholder="请输入联系人"
|
||
:maxlength="10"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoicetitle_name">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'credit_code'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.credit_code"
|
||
placeholder="请输入联系人职务"
|
||
:maxlength="20"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoicecredit_code">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'tax_type'">
|
||
<p>{{ record.tax_type }}</p>
|
||
</template>
|
||
<template v-if="column.key === 'address'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.address"
|
||
placeholder="请输入联系人邮箱"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoiceaddress">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'phone'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.phone"
|
||
placeholder="请输入联系人邮箱"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoicephone">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'bank_name'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_name"
|
||
placeholder="请输入联系人邮箱"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoicebank_name">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'bank_account'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_account"
|
||
placeholder="请输入联系人邮箱"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoicebank_account">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'is_defalut'">
|
||
<p>{{ record.is_defalut }}</p>
|
||
</template>
|
||
<template v-if="column.key === 'is_valid'">
|
||
<p>{{ record.is_valid }}</p>
|
||
</template>
|
||
<template v-if="column.key === 'remark'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.remark"
|
||
placeholder="请输入备注"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.panyInvoiceremark">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
<a-tab-pane tab="银行卡信息" key="2" forceRender>
|
||
<a-row :gutter="15">
|
||
<a-col :span="24" class="ant-col-item mb-20px" >
|
||
<a-form-item>
|
||
<a-table
|
||
:data-source="dataForm.tableFieldad9d92"
|
||
:columns="companyBankColumns"
|
||
size="small"
|
||
:pagination="false"
|
||
:scroll="{ x: 'max-content' }">
|
||
<template #headerCell="{ column }">
|
||
<span class="required-sign" v-if="column.required">*</span>
|
||
{{ column.title }}
|
||
<BasicHelp :text="column.tipLabel" v-if="column.tipLabel && column.title" />
|
||
</template>
|
||
<template #bodyCell="{ column, index, record }">
|
||
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
|
||
<template v-if="column.key === 'bank_name'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_name"
|
||
placeholder="请输入开户行"
|
||
:maxlength="20"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.companyBankbank_name">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'bank_account_name'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_account_name"
|
||
placeholder="请输入账户名"
|
||
:maxlength="20"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.companyBankbank_account_name">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'bank_account_number'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_account_number"
|
||
placeholder="请输入银行账号"
|
||
:maxlength="20"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.companyBankbank_account_number">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'bank_province'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.bank_province"
|
||
placeholder="请输入开户行城市"
|
||
:maxlength="20"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.companyBankbank_province">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
<template v-if="column.key === 'remark'">
|
||
<YunzhupaasInput
|
||
v-model:value="record.remark"
|
||
placeholder="请输入备注"
|
||
:maxlength="200"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.companyBankremark">
|
||
</YunzhupaasInput>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</a-col>
|
||
<!-- 表单结束 -->
|
||
</a-row>
|
||
</a-form>
|
||
</a-row>
|
||
</BasicDrawer>
|
||
<!-- 有关联表单详情：开始 -->
|
||
<RelationDetail ref="relationDetailRef" />
|
||
<!-- 有关联表单详情：结束 -->
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { getDetailInfo } from './helper/api';
|
||
import { getConfigData } from '@/api/onlineDev/visualDev';
|
||
import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue';
|
||
import { BasicModal, useModal } from '@/components/Modal';
|
||
import { BasicDrawer, useDrawer } from '@/components/Drawer';
|
||
// 有关联表单详情
|
||
import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
|
||
// 表单权限
|
||
import { usePermission } from '@/hooks/web/usePermission';
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||
import { buildUUID } from '@/utils/uuid';
|
||
import { useI18n } from '@/hooks/web/useI18n';
|
||
import { getDataChange } from '@/api/onlineDev/visualDev';
|
||
import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
|
||
import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';
|
||
|
||
interface State {
|
||
dataForm: any;
|
||
title: string;
|
||
maskConfig: any;
|
||
interfaceRes: any;
|
||
locationScope: any;
|
||
extraOptions: any;
|
||
extraData: any;
|
||
|
||
activetabformItemfe79ef: any;
|
||
}
|
||
|
||
defineOptions({ name: 'Detail' });
|
||
const { createMessage, createConfirm } = useMessage();
|
||
const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
|
||
const panyInvoiceColumns: any[] = computed(() => {
|
||
let list = [
|
||
{
|
||
title: '发票抬头编码',
|
||
dataIndex: 'title_code',
|
||
key: 'title_code',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'title_code',
|
||
},
|
||
{
|
||
title: '发票抬头名称',
|
||
dataIndex: 'title_name',
|
||
key: 'title_name',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'title_name',
|
||
},
|
||
{
|
||
title: '纳税人识别号',
|
||
dataIndex: 'credit_code',
|
||
key: 'credit_code',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'credit_code',
|
||
},
|
||
{
|
||
title: '纳税人类别',
|
||
dataIndex: 'tax_type',
|
||
key: 'tax_type',
|
||
labelWidth: '',
|
||
span: '8',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'tax_type',
|
||
},
|
||
{
|
||
title: '地址',
|
||
dataIndex: 'address',
|
||
key: 'address',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'address',
|
||
},
|
||
{
|
||
title: '电话',
|
||
dataIndex: 'phone',
|
||
key: 'phone',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'phone',
|
||
},
|
||
{
|
||
title: '开户银行',
|
||
dataIndex: 'bank_name',
|
||
key: 'bank_name',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_name',
|
||
},
|
||
{
|
||
title: '银行账户',
|
||
dataIndex: 'bank_account',
|
||
key: 'bank_account',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_account',
|
||
},
|
||
{
|
||
title: '是否默认',
|
||
dataIndex: 'is_defalut',
|
||
key: 'is_defalut',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: '',
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'is_defalut',
|
||
},
|
||
{
|
||
title: '是否有效',
|
||
dataIndex: 'is_valid',
|
||
key: 'is_valid',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: '',
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'is_valid',
|
||
},
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'remark',
|
||
key: 'remark',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'remark',
|
||
},
|
||
];
|
||
// list = list.filter(o => hasFormP('tableField46dc53-' + o.formP));
|
||
const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 };
|
||
//子表复杂表头-处理
|
||
let columnList = list;
|
||
let complexHeaderList: any[] = [];
|
||
if (complexHeaderList.length) {
|
||
let childColumns: any[] = [];
|
||
let firstChildColumns: string[] = [];
|
||
for (let i = 0; i < complexHeaderList.length; i++) {
|
||
const e = complexHeaderList[i];
|
||
e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode, e.fullName) : e.fullName;
|
||
e.align = e.align;
|
||
e.children = [];
|
||
e.yunzhupaasKey = 'complexHeader';
|
||
if (e.childColumns?.length) {
|
||
childColumns.push(...e.childColumns);
|
||
for (let k = 0; k < e.childColumns.length; k++) {
|
||
const item = e.childColumns[k];
|
||
for (let j = 0; j < list.length; j++) {
|
||
const o = list[j];
|
||
if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o });
|
||
}
|
||
}
|
||
}
|
||
if (e.children.length) firstChildColumns.push(e.children[0].key);
|
||
}
|
||
complexHeaderList = complexHeaderList.filter(o => o.children.length);
|
||
let newList: any[] = [];
|
||
for (let i = 0; i < list.length; i++) {
|
||
const e = list[i];
|
||
if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') {
|
||
newList.push(e);
|
||
} else {
|
||
if (firstChildColumns.includes(e.key)) {
|
||
const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
|
||
newList.push(item);
|
||
}
|
||
}
|
||
}
|
||
columnList = newList;
|
||
}
|
||
let columns = [indexColumn, ...columnList];
|
||
const leftFixedList = columns.filter(o => o.fixed === 'left');
|
||
const rightFixedList = columns.filter(o => o.fixed === 'right');
|
||
const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
|
||
return [...leftFixedList, ...noFixedList, ...rightFixedList];
|
||
});
|
||
const companyBankColumns: any[] = computed(() => {
|
||
let list = [
|
||
{
|
||
title: '开户行',
|
||
dataIndex: 'bank_name',
|
||
key: 'bank_name',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_name',
|
||
},
|
||
{
|
||
title: '账户名',
|
||
dataIndex: 'bank_account_name',
|
||
key: 'bank_account_name',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_account_name',
|
||
},
|
||
{
|
||
title: '银行账号',
|
||
dataIndex: 'bank_account_number',
|
||
key: 'bank_account_number',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_account_number',
|
||
},
|
||
{
|
||
title: '开户行城市',
|
||
dataIndex: 'bank_province',
|
||
key: 'bank_province',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'bank_province',
|
||
},
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'remark',
|
||
key: 'remark',
|
||
labelWidth: '',
|
||
span: '24',
|
||
tipLabel: '',
|
||
required: false,
|
||
style: { width: '100%' },
|
||
align: 'left',
|
||
fixed: false,
|
||
formP: 'remark',
|
||
},
|
||
];
|
||
// list = list.filter(o => hasFormP('tableFieldad9d92-' + o.formP));
|
||
const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 };
|
||
//子表复杂表头-处理
|
||
let columnList = list;
|
||
let complexHeaderList: any[] = [];
|
||
if (complexHeaderList.length) {
|
||
let childColumns: any[] = [];
|
||
let firstChildColumns: string[] = [];
|
||
for (let i = 0; i < complexHeaderList.length; i++) {
|
||
const e = complexHeaderList[i];
|
||
e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode, e.fullName) : e.fullName;
|
||
e.align = e.align;
|
||
e.children = [];
|
||
e.yunzhupaasKey = 'complexHeader';
|
||
if (e.childColumns?.length) {
|
||
childColumns.push(...e.childColumns);
|
||
for (let k = 0; k < e.childColumns.length; k++) {
|
||
const item = e.childColumns[k];
|
||
for (let j = 0; j < list.length; j++) {
|
||
const o = list[j];
|
||
if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o });
|
||
}
|
||
}
|
||
}
|
||
if (e.children.length) firstChildColumns.push(e.children[0].key);
|
||
}
|
||
complexHeaderList = complexHeaderList.filter(o => o.children.length);
|
||
let newList: any[] = [];
|
||
for (let i = 0; i < list.length; i++) {
|
||
const e = list[i];
|
||
if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') {
|
||
newList.push(e);
|
||
} else {
|
||
if (firstChildColumns.includes(e.key)) {
|
||
const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
|
||
newList.push(item);
|
||
}
|
||
}
|
||
}
|
||
columnList = newList;
|
||
}
|
||
let columns = [indexColumn, ...columnList];
|
||
const leftFixedList = columns.filter(o => o.fixed === 'left');
|
||
const rightFixedList = columns.filter(o => o.fixed === 'right');
|
||
const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
|
||
return [...leftFixedList, ...noFixedList, ...rightFixedList];
|
||
});
|
||
|
||
const { t } = useI18n();
|
||
const relationDetailRef = ref<any>(null);
|
||
const state = reactive<State>({
|
||
dataForm: {},
|
||
title: t('common.detailText', '详情'),
|
||
maskConfig: {
|
||
company_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
short_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
credit_code: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
legal_representative: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
phone: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
email: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
website: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
address: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoicetitle_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoicecredit_code: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoiceaddress: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoicephone: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoicebank_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoicebank_account: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
panyInvoiceremark: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
companyBankbank_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
companyBankbank_account_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
companyBankbank_account_number: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
companyBankbank_province: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
companyBankremark: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
},
|
||
interfaceRes: {
|
||
companyBankbank_account_number: [],
|
||
companyBankremark: [],
|
||
panyInvoicebank_name: [],
|
||
panyInvoicephone: [],
|
||
industry_code: [],
|
||
panyInvoicetitle_code: [],
|
||
remark: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_honor: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_supplier_type: [],
|
||
credit_code: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_finish_project: [],
|
||
company_code: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_achievement: [],
|
||
email: [],
|
||
panyInvoicecredit_code: [],
|
||
website: [],
|
||
address: [],
|
||
companyBankbank_account_name: [],
|
||
panyInvoicetitle_name: [],
|
||
panyInvoicetax_type: [],
|
||
legal_representative: [],
|
||
enterprise_nature: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_major_person_id: [],
|
||
panyInvoicebank_account: [],
|
||
registered_capital: [],
|
||
panyInvoiceaddress: [],
|
||
companyBankbank_province: [],
|
||
business_scope: [],
|
||
entity_type: [],
|
||
registration_date: [],
|
||
province_id: [],
|
||
tax_type: [],
|
||
phone: [],
|
||
panyInvoiceis_defalut: [],
|
||
org_id: [],
|
||
company_name: [],
|
||
panyInvoiceis_valid: [],
|
||
short_name: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_supplier_level: [],
|
||
yunzhupaas_mdm_supplier_yunzhupaas_supplier_category: [],
|
||
enterprise_scale: [],
|
||
panyInvoiceremark: [],
|
||
companyBankbank_name: [],
|
||
},
|
||
locationScope: {},
|
||
extraOptions: {},
|
||
extraData: {},
|
||
activetabformItemfe79ef: '1',
|
||
});
|
||
const { title, dataForm, maskConfig } = toRefs(state);
|
||
// 表单权限
|
||
const { hasFormP } = usePermission();
|
||
|
||
defineExpose({ init });
|
||
|
||
function init(data) {
|
||
state.dataForm.id = data.id;
|
||
openDrawer();
|
||
nextTick(() => {
|
||
setTimeout(initData, 0);
|
||
});
|
||
}
|
||
function initData() {
|
||
changeLoading(true);
|
||
state.activetabformItemfe79ef = '1';
|
||
if (state.dataForm.id) {
|
||
getData(state.dataForm.id);
|
||
} else {
|
||
closeDrawer();
|
||
}
|
||
}
|
||
function getData(id) {
|
||
getDetailInfo(id).then(res => {
|
||
state.dataForm = res.data || {};
|
||
nextTick(() => {
|
||
changeLoading(false);
|
||
});
|
||
});
|
||
}
|
||
|
||
function toDetail(modelId, id, propsValue) {
|
||
if (!id) return;
|
||
getConfigData(modelId).then(res => {
|
||
if (!res.data || !res.data.formData) return;
|
||
const formConf = JSON.parse(res.data.formData);
|
||
formConf.popupType = 'general';
|
||
formConf.hasPrintBtn = false;
|
||
formConf.customBtns = [];
|
||
const data = { id, formConf, modelId, propsValue };
|
||
relationDetailRef.value?.init(data);
|
||
});
|
||
}
|
||
function setFormProps(data) {
|
||
setDrawerProps(data);
|
||
}
|
||
function changeLoading(loading) {
|
||
setFormProps({ loading });
|
||
}
|
||
|
||
function getParamList(key) {
|
||
let templateJson: any[] = state.interfaceRes[key];
|
||
if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
|
||
for (let i = 0; i < templateJson.length; i++) {
|
||
if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
|
||
templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
|
||
}
|
||
}
|
||
return templateJson;
|
||
}
|
||
</script>
|