<template>
|
<el-affix :offset="84">
|
<div class="affix-box">
|
<div class="affix-box-title">
|
</div>
|
<div>
|
<el-button type="warning" @click="goToList">返 回</el-button>
|
|
<el-button type="primary" @click="submitForm">提 交</el-button>
|
</div>
|
</div>
|
</el-affix>
|
<div class="app-container">
|
<h4 class="form-header">客商信息</h4>
|
<el-form ref="wmsDzInoutOrderItemRef" :model="form" :rules="rules" class="form-wrapper">
|
<el-descriptions class="margin-top" title="" :column="3" border>
|
<el-descriptions-item label="客户全称" label-align="right" align="center">
|
<template #label>
|
<div class="container">
|
<img style="width: 19px; height: 22px" src="@/assets/必填.svg" alt="" />
|
<div class="text">客户全称</div>
|
</div>
|
</template>
|
<template #default="label">
|
<el-form-item prop="customerFullName" class="seqNOForm" align="center"
|
:rules="customerFullName">
|
<el-input :disabled="formDisabled" v-model="form.customerFullName"></el-input>
|
</el-form-item>
|
</template>
|
</el-descriptions-item>
|
|
<el-descriptions-item label="客户简称" label-align="right" align="center">
|
<template #label>
|
<div class="container">
|
<img style="width: 19px; height: 22px" src="@/assets/必填.svg" alt="" />
|
<div class="text">客户简称</div>
|
</div>
|
</template>
|
<template #default="label">
|
<el-form-item prop="customerShortName" class="seqNOForm" align="center"
|
:rules="customerShortName">
|
<el-input :disabled="formDisabled" v-model="form.customerShortName"></el-input>
|
</el-form-item>
|
</template>
|
</el-descriptions-item>
|
|
<el-descriptions-item label="客户类型" label-align="right" align="center">
|
<template #label>
|
<div class="container">
|
<img style="width: 19px; height: 22px" src="@/assets/必填.svg" alt="" />
|
<div class="text">客户类型</div>
|
</div>
|
</template>
|
<template #default="label">
|
<el-form-item prop="customerType" class="seqNOForm" align="center" :rules="customerType">
|
<el-select :disabled="formDisabled" v-model="form.customerType" placeholder="请选择客户类型"
|
clearable>
|
<el-option v-for="dict in customer_type" :key="dict.value" :label="dict.label"
|
:value="parseInt(dict.value)" />
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="联系人姓名" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.contactPerson"></el-input>
|
</template>
|
</el-descriptions-item> -->
|
<el-descriptions-item label="经营证件登记号码" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.licenseNumber"></el-input>
|
</template>
|
</el-descriptions-item>
|
<el-descriptions-item label="地址" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.address"></el-input>
|
</template>
|
</el-descriptions-item>
|
<el-descriptions-item label="联系人姓名" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.contactPerson"></el-input>
|
</template>
|
</el-descriptions-item>
|
<el-descriptions-item label="联系人电话" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.contactPhone"></el-input>
|
</template>
|
</el-descriptions-item>
|
<el-descriptions-item label="联系人邮箱" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.contactEmail"></el-input>
|
</template>
|
</el-descriptions-item>
|
<el-descriptions-item label="备注" label-align="right" align="center">
|
<template #default="label">
|
<el-input :disabled="formDisabled" v-model="form.remark"></el-input>
|
</template>
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-form>
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
<el-tab-pane label="开票资料配置" name="first">
|
<h4>开票资料配置</h4>
|
<el-button type="primary" icon="Plus" v-hasPermi="['cwgl:customerManagement:add']"
|
@click="handleAdd(1)">新增
|
</el-button>
|
|
<el-table border :data="invoiceInfoList">
|
<el-table-column type="selection" width="55" align="center" />
|
<!-- <el-table-column label="id" align="center" prop="id" /> -->
|
<el-table-column label="抬头公司名称" align="center" prop="invoiceCompanyName" />
|
<el-table-column label="统一社会信用代码" align="center" prop="invoiceCreditCode" />
|
<el-table-column label="发票类型" align="center" prop="invoiceType">
|
<template #default="scope">
|
{{ dictFormat(sys_invoice_type, scope.row.invoiceType) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button type="text" icon="Edit" @click="handleUpdates(scope.row)">编辑
|
</el-button>
|
<el-button type="text" @click="handleDelte(scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
</el-tab-pane>
|
<el-tab-pane label="银行账号配置" name="second">
|
<h4>银行账号配置</h4>
|
<el-button type="primary" icon="Plus" v-hasPermi="['cwgl:customerManagement:add']"
|
@click="handleBankAdd(2)">新增
|
</el-button>
|
|
<el-table border :data="bankAccountConfigList">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="银行账号编号" align="center" prop="accountNo" />
|
<el-table-column label="户名" align="center" prop="accountName" />
|
<el-table-column label="银行名称" align="center" prop="bankName" />
|
<el-table-column label="支行名称" align="center" prop="branchName" />
|
<el-table-column label="账号类型" align="center" prop="accountType">
|
<template #default="scope">
|
{{ dictFormat(sys_account_type, scope.row.accountType) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="币种" align="center" prop="currency">
|
<template #default="scope">
|
{{ dictFormat(sys_currency, scope.row.currency) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button type="text" icon="Edit" @click="handleBankUpdates(scope.row)">编辑
|
</el-button>
|
<el-button type="text" @click="handleBankDelte(scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="bankPageF.total > 0" :total="bankPageF.total" v-model:page="queryBankParams.pageNum"
|
v-model:limit="queryBankParams.pageSize" @pagination="getList" />
|
</el-tab-pane>
|
</el-tabs>
|
|
</div>
|
<CommonDialogForm :visible="isDialogVisible" title="企业发票抬头信息" :initial-data="initialFormData"
|
@close="isDialogVisible = false" @submit="handleFormSubmit" />
|
|
<bankAccount :visible="isDialogVisibleBank" title="客户银行账号配置" :initial-data="bankFormData"
|
@close="isDialogVisibleBank = false" @submit="handleBankFormSubmit" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { nextTick, reactive, ref, toRefs, watch } from "vue";
|
import router from "@/router";
|
|
import { PageF } from "@/utils/globalInterface";
|
import { usePagePlus } from "@/hooks/usePagePlus";
|
import CommonDialogForm from "@/components/makeInvoice/index.vue";
|
import bankAccount from "@/components/bankAccount/index.vue";
|
import {
|
addTmsCustomerInfo,
|
|
} from "@/api/tms/tmsCustomerInfo";
|
interface DzInventoryI extends BaseEntityInterface {
|
id?: number, no?: string, enterId?: string, putrecNo?: string, etpsInnerInvtNo?: string, bizopEtpsSccd?: string, bizopEtpsNo?: string, bizopEtpsNm?: string, rcvgdEtpsNo?: string, rvsngdEtpsSccd?: string, rcvgdEtpsNm?: string, dclEtpsSccd?: string, dclEtpsNo?: string, dclEtpsNm?: string, invtDclTime?: string, entryDclTime?: string, rltInvtNo?: string, rltPutrecNo?: string, rltEntryNo?: string, rltEntryBizopEtpsSccd?: string, rltEntryBizopEtpsno?: string, rltEntryBizopEtpsnm?: string, rltEntryRvsngdEtpsSccd?: string, rltEntryRcvgdEtpsNo?: string, rltEntryRcvgdEtpsNm?: string, rltEntryDclEtpsSccd?: string, rltEntryDclEtpsNo?: string, rltEntryDclEtpsNm?: string, impExpPortcd?: string, dclPlcCuscd?: string, mtpckEndprdMarkcd?: string, supvModecd?: string, trspModecd?: string, dclCusFlag?: number, decType?: string, vrfdedMarkcd?: string, invtIochkptStucd?: string, prevdTime?: string, formalVrfdedTime?: string, applyNo?: string, listType?: string, inputCode?: string, inputCreditCode?: string, inputName?: string, icCardNo?: string, inputTime?: string, listStat?: string, correntryDclEtpssccd?: string, correntryDclEtpsno?: string, correntryDclEtpsnm?: string, decType?: string, chgTmsCnt?: number, stshipTrsarvNatcd?: string, invtType?: string, entryStucd?: number, passPortUsedTypecd?: string, dclTypecd?: number, needEntryModified?: string, levyBlAmt?: string, genDecFlag?: number, createBy?: string, createTime?: string, updateBy?: string, updateTime?: string, status?: number, deleted?: number, remark?: string
|
impExpMarkcd?: string, dzOrders?: any, wmsDzInoutOrderItemList?: any, inputSccd?: string
|
}
|
|
|
const { proxy } = useCurrentInstance();
|
const {
|
customer_type, sys_invoice_type, sys_currency, sys_account_type
|
|
|
} =
|
proxy.useDict(
|
'customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type'
|
);
|
|
|
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
const pageF = reactive({
|
...PageF,
|
});
|
const bankPageF = reactive({
|
...PageF,
|
});
|
const wmsDzInoutOrderItemRef = ref<FormInstance>();
|
const inoutOrderRef = ref()
|
const data = reactive({
|
form: <DzInventoryI & any>{
|
},
|
operate: 'add',
|
queryParams: <DzInoutOrderI>{ pageNum: 1, pageSize: 10 },
|
queryBankParams: <DzInoutOrderI>{ pageNum: 1, pageSize: 10 },
|
|
|
rules: {
|
customerFullName: [
|
{ required: true, message: '请输入客户全称', trigger: 'blur' },
|
],
|
customerShortName: [
|
{ required: true, message: '请输入客户简称', trigger: 'blur' },
|
],
|
customerType: [
|
{ required: true, message: '请选择客户类型', trigger: 'change' },
|
],
|
|
},
|
formDisabled: false,
|
invoiceInfoList: [],
|
bankAccountConfigList: [],
|
|
})
|
const { form, rules, queryParams, operate, formDisabled, invoiceInfoList, queryBankParams, bankAccountConfigList } = toRefs(data);
|
|
const activeName = ref('first')
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
console.log(tab, event)
|
}
|
const goToList = () => {
|
router.push('/customer/customerManagement');
|
}
|
const submitForm = () => {
|
// router.push({ path: '/cwgl/dzInventory' });
|
wmsDzInoutOrderItemRef.value!.validate(valid => {
|
if (valid) {
|
if (invoiceInfoList.value.length > 0) {
|
form.value.invoiceInfoList = invoiceInfoList.value
|
}
|
if (bankAccountConfigList.value.length > 0) {
|
form.value.bankAccountConfigList = bankAccountConfigList.value
|
}
|
addTmsCustomerInfo(form.value).then(res => {
|
if (res.code = 200) {
|
proxy.$message.error(res.msg);
|
setTimeout(() => {
|
goToList();
|
}, 2000);
|
return;
|
}
|
});
|
}
|
});
|
}
|
const updateForm = () => {
|
// router.push({ path: '/cwgl/dzInventory' });
|
}
|
/* 开票资料 */
|
const handleAdd = () => {
|
if (!form.value.customerFullName || form.value.customerFullName.trim() == '') {
|
proxy.$message.error("客户全称不能为空");
|
return;
|
}
|
|
isDialogVisible.value = true;
|
initialFormData.value = {
|
relatedCustomerName: form.value.customerFullName,
|
};
|
};
|
const handleUpdates = (row: any) => {
|
// 编辑行数据
|
isDialogVisible.value = true;
|
initialFormData.value = row;
|
}
|
const handleDelte = (row: any) => {
|
const index = invoiceInfoList.value.findIndex((item: any) => item === row);
|
if (index > -1) {
|
invoiceInfoList.value.splice(index, 1);
|
}
|
}
|
const handleFormSubmit = (data: any) => {
|
invoiceInfoList.value.push(data);
|
};
|
const getList = () => {
|
// 获取列表数据
|
}
|
// 弹窗显示状态
|
const isDialogVisible = ref(false);
|
const isDialogVisibleBank = ref(false);
|
|
// 初始表单数据（可选，编辑场景用）
|
const initialFormData = ref({
|
|
});
|
const bankFormData = ref({
|
|
});
|
|
/* 银行 */
|
const handleBankAdd = () => {
|
if (!form.value.customerFullName || form.value.customerFullName.trim() == '') {
|
proxy.$message.error("客户全称不能为空");
|
return;
|
}
|
isDialogVisibleBank.value = true;
|
bankFormData.value = {
|
relatedCustomerName: form.value.customerFullName,
|
};
|
};
|
const handleBankUpdates = (row: any) => {
|
// 编辑行数据
|
isDialogVisibleBank.value = true;
|
bankFormData.value = row;
|
};
|
const handleBankDelte = (row: any) => {
|
console.log(row);
|
const index = bankAccountConfigList.value.findIndex((item: any) => item === row);
|
if (index > -1) {
|
bankAccountConfigList.value.splice(index, 1);
|
}
|
}
|
const handleBankFormSubmit = (data: any) => {
|
console.log(data);
|
bankAccountConfigList.value.push(data);
|
};
|
|
|
</script>
|
|
<style scoped lang="scss">
|
@import "./common.scss";
|
|
.w200 {
|
width: 250px
|
}
|
|
.select-box {
|
border: 1px solid #c0c4cc;
|
border-radius: 5px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.m-2 {
|
flex: 0 0 110px;
|
|
::v-deep .el-input__inner {
|
border-right: 1px solid #c0c4cc;
|
border-top-right-radius: 0;
|
border-bottom-right-radius: 0;
|
}
|
}
|
|
::v-deep .el-button {
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
}
|
|
::v-deep .el-input__inner {
|
border: none;
|
}
|
}
|
|
.container {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.seqNOForm {
|
margin-bottom: 4px;
|
}
|
|
// 将全选项隐藏
|
::v-deep .more_btn thead .el-table-column--selection .cell {
|
display: none;
|
}
|
|
::v-deep .el-collapse-item__header {
|
font-size: 15px;
|
color: #6379bb;
|
// border-bottom:5px solid
|
}
|
|
::v-deep .el-collapse {
|
--el-collapse-border-color: #c1c1c1;
|
}
|
|
/* 描述 */
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
border: var(--el-descriptions-table-border);
|
padding: 8px 10px;
|
width: 200px;
|
}
|
|
.app-container {
|
transform: translateZ(0);
|
will-change: transform; // 告诉浏览器提前优化
|
}
|
|
.form-wrapper {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.desc-fixed-layout {
|
width: 100%;
|
table-layout: fixed !important; // 禁止浏览器动态计算列宽
|
|
:deep(.el-descriptions__table) {
|
width: 100% !important;
|
border-collapse: collapse !important; // 消除边框间隙
|
|
.el-descriptions__cell {
|
width: calc(100% / 3) !important; // 均分3列，替代固定200px
|
height: 56px !important; // 固定行高，防止行高变化
|
box-sizing: border-box !important; // 边框计入尺寸
|
}
|
}
|
}
|
|
.desc-input {
|
|
:deep(.el-input__inner),
|
:deep(.el-select__wrapper) {
|
border: 1px solid #dcdfe6 !important;
|
transition: none !important; // 关闭过渡动画
|
|
&:hover {
|
border-color: #c0c4cc !important;
|
box-shadow: none !important; // 消除阴影导致的尺寸变化
|
}
|
}
|
}
|
</style>
|
