<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 v-if="!formDisabled" 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 v-if="!formDisabled" type="primary" icon="Plus" v-hasPermi="['cwgl:customerManagement:add']"
|
@click="handleAdd(1)">新增
|
</el-button>
|
|
<el-table border class="demo-tabs" :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 v-if="!formDisabled" type="text" icon="Edit" @click="handleUpdates(scope.row,scope.$index)">编辑
|
</el-button>
|
<el-button v-if="!formDisabled" type="text" @click="handleDelte(scope.row,scope.$index)">删除
|
</el-button>
|
|
<el-button v-if="formDisabled" type="text" @click="handleExamine(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 v-if="!formDisabled" type="primary" icon="Plus" v-hasPermi="['cwgl:customerManagement:add']"
|
@click="handleBankAdd(2)">新增
|
</el-button>
|
|
<el-table border class="demo-tabs" :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 v-if="!formDisabled" type="text" icon="Edit"
|
@click="handleBankUpdates(scope.row, scope.$index)">编辑
|
</el-button>
|
<el-button v-if="!formDisabled" type="text" @click="handleBankDelte(scope.row, scope.$index)">删除
|
</el-button>
|
<el-button v-if="formDisabled" type="text" @click="handleExamine(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 class="bottom-operation-container">
|
<el-button size="large" type="warning" @click="goToList" style="width: 120px;">返 回</el-button>
|
<el-button v-if="!formDisabled" size="large" type="primary" @click="submitForm" style="width: 120px; margin-left: 30px;">提 交</el-button>
|
</div>
|
</div>
|
<CommonDialogForm :mode="formMode" :visible="isDialogVisible" title="企业发票抬头信息" :initial-data="initialFormData"
|
@close="isDialogVisible = false" @submit="handleFormSubmit" />
|
|
<bankAccount :mode="formBankeMode" :visible="isDialogVisibleBank" title="客户银行账号配置" :initial-data="bankFormData"
|
@close="isDialogVisibleBank = false" @submit="handleBankFormSubmit" />
|
|
<!-- 详情弹窗：仅展示描述列表，无输入框 -->
|
<el-dialog v-model="invoiceVisible" :title="invoiceTitle" width="70%" destroy-on-close @close="handleClose"
|
append-to-body>
|
<el-descriptions v-if="activeName == 'first'" :column="3" border>
|
<!-- 基本信息组 -->
|
<el-descriptions-item label="系统编号">
|
{{ formData.id }}
|
</el-descriptions-item>
|
<el-descriptions-item label="关联客户">
|
{{ formData.customerName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="抬头公司">
|
{{ formData.invoiceCompanyName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="统一社会信用代码">
|
{{ formData.invoiceCreditCode }}
|
</el-descriptions-item>
|
<el-descriptions-item label="发票类型">
|
{{ dictFormat(sys_invoice_type, formData.invoiceType) }}
|
</el-descriptions-item>
|
<!-- 联系人信息组 -->
|
<el-descriptions-item label="开户银行名称">
|
{{ formData.invoiceBankName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="基本开户账号">
|
{{ formData.invoiceBankNo }}
|
</el-descriptions-item>
|
<el-descriptions-item label="注册场所地址">
|
{{ formData.invoiceOperatingLicenseAddress }}
|
</el-descriptions-item>
|
<!-- 银行账户信息组 -->
|
<el-descriptions-item label="注册固定电话">
|
{{ formData.invoiceOperatingLicensePhone }}
|
</el-descriptions-item>
|
<el-descriptions-item label="邮箱">
|
{{ formData.invoiceOperatingLicenseEmail }}
|
</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions v-if="activeName == 'second'" :column="3" border>
|
<!-- 基本信息组 -->
|
<el-descriptions-item label="系统编号">
|
{{ formData.id }}
|
</el-descriptions-item>
|
<el-descriptions-item label="关联客户">
|
{{ formData.customerName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="账号编号">
|
{{ formData.accountNo }}
|
</el-descriptions-item>
|
<el-descriptions-item label="户名">
|
{{ formData.accountName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="银行名称">
|
{{ formData.bankName }}
|
</el-descriptions-item>
|
<!-- 联系人信息组 -->
|
<el-descriptions-item label="支行名称">
|
{{ formData.branchName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="账号类型">
|
{{ dictFormat(sys_account_type, formData.accountType) }}
|
</el-descriptions-item>
|
<el-descriptions-item label="币种">
|
{{ dictFormat(sys_currency, formData.currency) }}
|
</el-descriptions-item>
|
<!-- 银行账户信息组 -->
|
<el-descriptions-item label="账户状态">
|
{{ dictFormat(sys_bank_type, formData.status) }}
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<!-- 底部按钮 -->
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="handleClose">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
</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, getTmsCustomerInfo
|
|
} from "@/api/tms/tmsCustomerInfo";
|
|
import { listInvoiceInfo, getInvoiceInfo } from "@/api/cwgl/invoiceInfo";
|
|
import { listBankAccountConfig, getBankAccountConfig } from "@/api/cwgl/bankAccountConfig";
|
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, sys_bank_type
|
|
|
} =
|
proxy.useDict(
|
'customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type', 'sys_bank_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>{
|
},
|
formData: {},
|
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, formData } = toRefs(data);
|
|
const activeName = ref('first')
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
if (router.currentRoute.value.query.formDisabled == 'true') {
|
if (tab.props.name == 'first') {
|
// 开票资料
|
queryParams.value.customerId = router.currentRoute.value.query.id
|
listInvoiceInfo(queryParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.invoiceInfoList = res.rows;
|
invoiceInfoList.value = res.rows;
|
pageF.total = res.total;
|
}
|
});
|
} else if (tab.props.name == 'second') {
|
// 银行账号
|
listBankAccountConfig(queryBankParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.bankAccountConfigList = res.rows;
|
bankAccountConfigList.value = res.rows;
|
bankPageF.total = res.total;
|
}
|
});
|
}
|
}
|
|
}
|
const goToList = () => {
|
router.push('/customer/tmsCustomerInfo');
|
}
|
|
console.log(router.currentRoute.value.query.formDisabled);
|
if (router.currentRoute.value.query.formDisabled == 'true') {
|
formDisabled.value = true
|
} else {
|
formDisabled.value = false
|
}
|
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.success(res.msg);
|
setTimeout(() => {
|
goToList();
|
}, 2000);
|
return;
|
}
|
});
|
}
|
});
|
}
|
const updateForm = () => {
|
// router.push({ path: '/cwgl/dzInventory' });
|
}
|
/* 开票资料 */
|
const formMode = ref<'add' | 'edit'>('add');
|
const formBankeMode = ref<'add' | 'edit'>('add');
|
|
|
const handleAdd = () => {
|
if (!form.value.customerFullName || form.value.customerFullName.trim() == '') {
|
proxy.$message.error("客户全称不能为空");
|
return;
|
}
|
formMode.value = 'add';
|
isDialogVisible.value = true;
|
initialFormData.value = {
|
relatedCustomerName: form.value.customerFullName,
|
};
|
};
|
const editingIndex = ref()
|
const handleUpdates = (row: any,index:any) => {
|
// 编辑行数据
|
console.log(row);
|
formMode.value = 'edit';
|
isDialogVisible.value = true;
|
initialFormData.value = row;
|
editingIndex.value = index; // 记录索引
|
}
|
const handleDelte = (row: any,index:any) => {
|
// const index = invoiceInfoList.value.findIndex((item: any) => item === row);
|
if (index > -1) {
|
invoiceInfoList.value.splice(index, 1);
|
}
|
}
|
const handleFormSubmit = (data: any,mode:any) => {
|
if (formMode.value === 'edit' && editingIndex.value !== null) {
|
// 模式1：基于索引修改（最推荐，支持未保存的新数据）
|
invoiceInfoList.value.splice(editingIndex.value, 1, data);
|
} else {
|
// 新增模式
|
invoiceInfoList.value.push(data);
|
}
|
// 重置状态
|
editingIndex.value = null;
|
isDialogVisible.value = false;
|
};
|
const getList = () => {
|
// 获取列表数据
|
if (activeName.value == 'first') {
|
// 开票资料
|
queryParams.value.customerId = router.currentRoute.value.query.id
|
listInvoiceInfo(queryParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.invoiceInfoList = res.rows;
|
invoiceInfoList.value = res.rows;
|
pageF.total = res.total;
|
}
|
});
|
} else if (activeName.value == 'second') {
|
// 银行账号
|
listBankAccountConfig(queryBankParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.bankAccountConfigList = res.rows;
|
bankAccountConfigList.value = res.rows;
|
bankPageF.total = res.total;
|
}
|
});
|
}
|
}
|
// 弹窗显示状态
|
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;
|
}
|
formBankeMode.value = 'add';
|
isDialogVisibleBank.value = true;
|
bankFormData.value = {
|
relatedCustomerName: form.value.customerFullName,
|
};
|
};
|
const bankIndex = ref()
|
const handleBankUpdates = (row: any, index: any) => {
|
// 编辑行数据
|
formBankeMode.value = 'edit';
|
bankIndex.value = index;
|
isDialogVisibleBank.value = true;
|
bankFormData.value = row;
|
};
|
const handleBankDelte = (row: any, index: any) => {
|
// const index = bankAccountConfigList.value.findIndex((item: any) => item === row);
|
if (index > -1) {
|
bankAccountConfigList.value.splice(index, 1);
|
}
|
}
|
const handleBankFormSubmit = (data: any) => {
|
|
if (formBankeMode.value === 'edit' && bankIndex.value !== null) {
|
// 模式1：基于索引修改（最推荐，支持未保存的新数据）
|
bankAccountConfigList.value.splice(bankIndex.value, 1, data);
|
} else {
|
// 新增模式
|
bankAccountConfigList.value.push(data);
|
}
|
// 重置状态
|
bankIndex.value = null;
|
isDialogVisibleBank.value = false;
|
|
};
|
const getDataFormat = () => {
|
console.log(router.currentRoute.value.query.id);
|
if (router.currentRoute.value.query.id) {
|
getTmsCustomerInfo(router.currentRoute.value.query.id).then(res => {
|
if (res.code = 200) {
|
form.value = res.data;
|
// invoiceInfoList.value = res.data.invoiceInfoList;
|
// bankAccountConfigList.value = res.data.bankAccountConfigList;
|
}
|
});
|
queryParams.value.customerId = router.currentRoute.value.query.id
|
listInvoiceInfo(queryParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.invoiceInfoList = res.rows;
|
invoiceInfoList.value = res.rows;
|
pageF.total = res.total;
|
}
|
});
|
queryBankParams.value.customerId = router.currentRoute.value.query.id
|
listBankAccountConfig(queryBankParams.value).then(res => {
|
if (res.code = 200) {
|
form.value.bankAccountConfigList = res.rows;
|
bankAccountConfigList.value = res.rows;
|
bankPageF.total = res.total;
|
}
|
});
|
}
|
}
|
const invoiceVisible = ref(false);
|
const invoiceTitle = ref('')
|
const handleExamine = (row: any) => {
|
console.log(activeName.value);
|
|
if (activeName.value == 'first') {
|
invoiceTitle.value = '查看企业发票抬头信息'
|
getInvoiceInfo(row.id).then(res => {
|
if (res.code == 200) {
|
formData.value = res.data;
|
invoiceVisible.value = true
|
}
|
});
|
} else if (activeName.value == 'second') {
|
getBankAccountConfig(row.id).then(res => {
|
if (res.code == 200) {
|
invoiceTitle.value = '查看客户银行账号信息'
|
|
formData.value = res.data;
|
invoiceVisible.value = true
|
}
|
});
|
}
|
|
}
|
const handleClose = () => {
|
invoiceVisible.value = false;
|
};
|
getDataFormat()
|
</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 标签内添加 */
|
|
.bottom-operation-container {
|
margin-top: 40px; /* 与上方 Tabs 的间距 */
|
margin-bottom: 20px; /* 与页面底部的间距 */
|
display: flex;
|
justify-content: center; /* 水平居中 */
|
align-items: center;
|
padding: 20px 0;
|
border-top: 1px solid #eee; /* 可选：增加一条顶部分割线 */
|
}
|
|
/* 优化表格样式，确保固定高度时滚动条美观 */
|
::v-deep .el-table {
|
margin-top: 5px;
|
/* 替换掉报错的 @include，改用原生 CSS 美化滚动条（可选） */
|
.el-scrollbar__bar {
|
z-index: 5;
|
}
|
}
|
|
/* 调整 Tabs 样式使其底部不要太局促 */
|
.demo-tabs {
|
margin-bottom: 20px;
|
}
|
</style>
|
