录入明细前端调整

This commit is contained in:
zhuangdashia 2025-08-23 01:07:12 +08:00
parent b00c4270cb
commit c320e23f4d
2 changed files with 312 additions and 214 deletions

View File

@ -21,6 +21,14 @@ const { download } = useDownload();
const { hasAuth } = useAuth();
const { bool: importVisible, setTrue: openImportModal } = useBoolean();
// trafficList
const trafficListModalVisible = ref(false);
const currentTrafficList = ref<{ trafficNo?: string; trafficAmt?: number }[]>([]);
// magneticCardList
const magneticCardListModalVisible = ref(false);
const currentMagneticCardList = ref<{ oldCardNo?: string; newCardNo?: string }[]>([]);
const {
columns,
columnChecks,
@ -80,22 +88,22 @@ const {
width: 64,
resizable: true
},
{
key: 'dataId',
title: '主键',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
{
key: 'subcategoryId',
title: '业务类型id',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
// {
// key: 'dataId',
// title: '',
// align: 'center',
// minWidth: 120,
// ellipsis: true,
// resizable: true
// },
// {
// key: 'subcategoryId',
// title: 'id',
// align: 'center',
// minWidth: 120,
// ellipsis: true,
// resizable: true
// },
{
key: 'subcategoryName',
title: '业务类型名称',
@ -113,16 +121,16 @@ const {
resizable: true
},
{
key: 'jbName',
title: '经办人员名称',
key: 'yxId',
title: '营销人员营销号',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
{
key: 'yxId',
title: '营销人员营销号',
key: 'jbName',
title: '经办人员名称',
align: 'center',
minWidth: 120,
ellipsis: true,
@ -162,11 +170,14 @@ const {
},
{
key: 'custType',
title: '客户类型1-个人2-对公)',
title: '客户类型',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
resizable: true,
render(row) {
return <DictTag size="small" value={row.custType} dictCode="mps_cust_type" />;
}
},
{
key: 'custId',
@ -206,7 +217,23 @@ const {
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
resizable: true,
render(row) {
// magneticCardList
if (row.magneticCardList && row.magneticCardList.length > 0) {
return (
<NButton
text
type="primary"
onClick={() => showMagneticCardList(row.magneticCardList)}
>
查看详情
</NButton>
);
}
// magneticCardIdmagneticCardListmagneticCardId
return row.magneticCardId || '';
}
},
{
key: 'acquiringName',
@ -238,7 +265,23 @@ const {
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
resizable: true,
render(row) {
// trafficList
if (row.trafficList && row.trafficList.length > 0) {
return (
<NButton
text
type="primary"
onClick={() => showTrafficList(row.trafficList)}
>
查看详情
</NButton>
);
}
// trafficIdtrafficListtrafficId
return row.trafficId || '';
}
},
{
key: 'workplace',
@ -266,36 +309,39 @@ const {
},
{
key: 'checkFlag',
title: '核对标志0未核对 1核对通过 9核对失败',
title: '核对标志',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
{
key: 'checkTime',
title: '核对时间',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
{
key: 'checkUser',
title: '核对人员(人工核对时)',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
},
{
key: 'checkType',
title: '核对方式0系统 1人工 2其他1 3其他2 4其他3',
align: 'center',
minWidth: 120,
ellipsis: true,
resizable: true
resizable: true,
render(row) {
return <DictTag size="small" value={row.checkFlag} dictCode="mps_check_status" />;
}
},
// {
// key: 'checkTime',
// title: '',
// align: 'center',
// minWidth: 120,
// ellipsis: true,
// resizable: true
// },
// {
// key: 'checkUser',
// title: '',
// align: 'center',
// minWidth: 120,
// ellipsis: true,
// resizable: true
// },
// {
// key: 'checkType',
// title: '0 1 21 32 43',
// align: 'center',
// minWidth: 120,
// ellipsis: true,
// resizable: true
// },
{
key: 'checkMsg',
title: '核对结果',
@ -304,62 +350,73 @@ const {
ellipsis: true,
resizable: true
},
{
key: 'operate',
title: $t('common.operate'),
fixed: 'right',
width: 130,
render: row => {
const divider = () => {
if (!hasAuth('mps:detailEntry:edit') || !hasAuth('mps:detailEntry:remove')) {
return null;
}
return <NDivider vertical />;
};
const editBtn = () => {
if (!hasAuth('mps:detailEntry:edit')) {
return null;
}
return (
<ButtonIcon
text
type="primary"
local-icon="drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.dataId!)}
/>
);
};
const deleteBtn = () => {
if (!hasAuth('mps:detailEntry:remove')) {
return null;
}
return (
<ButtonIcon
text
type="error"
local-icon="delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.dataId!)}
/>
);
};
return (
<div class="flex-center gap-8px">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);
}
}
// {
// key: 'operate',
// title: $t('common.operate'),
// fixed: 'right',
// width: 130,
// render: row => {
// const divider = () => {
// if (!hasAuth('mps:detailEntry:edit') || !hasAuth('mps:detailEntry:remove')) {
// return null;
// }
// return <NDivider vertical />;
// };
//
// const editBtn = () => {
// if (!hasAuth('mps:detailEntry:edit')) {
// return null;
// }
// return (
// <ButtonIcon
// text
// type="primary"
// local-icon="drive-file-rename-outline-outline"
// tooltipContent={$t('common.edit')}
// onClick={() => edit(row.dataId!)}
// />
// );
// };
//
// const deleteBtn = () => {
// if (!hasAuth('mps:detailEntry:remove')) {
// return null;
// }
// return (
// <ButtonIcon
// text
// type="error"
// local-icon="delete-outline"
// tooltipContent={$t('common.delete')}
// popconfirmContent={$t('common.confirmDelete')}
// onPositiveClick={() => handleDelete(row.dataId!)}
// />
// );
// };
//
// return (
// <div class="flex-center gap-8px">
// {editBtn()}
// {divider()}
// {deleteBtn()}
// </div>
// );
// }
// }
]
});
// trafficList
function showTrafficList(trafficList: { trafficNo?: string; trafficAmt?: number }[]) {
currentTrafficList.value = trafficList;
trafficListModalVisible.value = true;
}
// magneticCardList
function showMagneticCardList(magneticCardList: { oldCardNo?: string; newCardNo?: string }[]) {
currentMagneticCardList.value = magneticCardList;
magneticCardListModalVisible.value = true;
}
const scrollX = ref(0);
//
const calculateTotalWidth = () => {
@ -428,22 +485,22 @@ function handleExport() {
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="hasAuth('mps:detailEntry:add')"
:show-delete="hasAuth('mps:detailEntry:remove')"
:show-add="false"
:show-delete="false"
:show-export="hasAuth('mps:detailEntry:export')"
@add="handleAdd"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
>
<template #after>
<NButton v-if="hasAuth('mps:privateEbankNew:export')" size="small" ghost @click="handleImport">
<template #icon>
<SvgIcon local-icon="upload-rounded" class="text-icon"/>
</template>
{{ $t('common.import') }}
</NButton>
</template>
<!-- <template #after>-->
<!-- <NButton v-if="hasAuth('mps:privateEbankNew:export')" size="small" ghost @click="handleImport">-->
<!-- <template #icon>-->
<!-- <SvgIcon local-icon="upload-rounded" class="text-icon"/>-->
<!-- </template>-->
<!-- {{ $t('common.import') }}-->
<!-- </NButton>-->
<!-- </template>-->
</TableHeaderOperation>
</template>
@ -472,6 +529,47 @@ function handleExport() {
@submitted="getDataByPage"
/>
</NCard>
<!-- 用于显示trafficList详情的模态框 -->
<NModal v-model:show="trafficListModalVisible" preset="card" style="width: 600px;" title="交警处罚决定书详情">
<NTable :bordered="true" :single-line="false">
<thead>
<tr>
<th>决定书编号</th>
<th>处罚金额</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in currentTrafficList" :key="index">
<td>{{ item.trafficNo }}</td>
<td>{{ item.trafficAmt }}</td>
</tr>
<tr v-if="currentTrafficList.length === 0">
<td colspan="2" style="text-align: center;">暂无数据</td>
</tr>
</tbody>
</NTable>
</NModal>
<!-- 用于显示magneticCardList详情的模态框 -->
<NModal v-model:show="magneticCardListModalVisible" preset="card" style="width: 600px;" title="磁条卡更换记录详情">
<NTable :bordered="true" :single-line="false">
<thead>
<tr>
<th>老卡号</th>
<th>新卡号</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in currentMagneticCardList" :key="index">
<td>{{ item.oldCardNo }}</td>
<td>{{ item.newCardNo }}</td>
</tr>
<tr v-if="currentMagneticCardList.length === 0">
<td colspan="2" style="text-align: center;">暂无数据</td>
</tr>
</tbody>
</NTable>
</NModal>
</div>
</template>

View File

@ -39,109 +39,109 @@ async function search() {
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="业务类型id" path="subcategoryId" class="pr-24px">
<NInput v-model:value="model.subcategoryId" placeholder="请输入业务类型id" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="业务类型名称" path="subcategoryName" class="pr-24px">
<!-- <NFormItemGi span="24 s:12 m:6" label="业务类型id" path="subcategoryId" class="pr-24px">-->
<!-- <NInput v-model:value="model.subcategoryId" placeholder="请输入业务类型id" />-->
<!-- </NFormItemGi>-->
<NFormItemGi span="24 s:12 m:6" label="业务名称" path="subcategoryName" class="pr-24px">
<NInput v-model:value="model.subcategoryName" placeholder="请输入业务类型名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="营销人员名称" path="yxName" class="pr-24px">
<NInput v-model:value="model.yxName" placeholder="请输入营销人员名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="经办人员名称" path="jbName" class="pr-24px">
<NInput v-model:value="model.jbName" placeholder="请输入经办人员名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="营销人员营销号" path="yxId" class="pr-24px">
<NInput v-model:value="model.yxId" placeholder="请输入营销人员营销号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="经办人员营销号" path="jbId" class="pr-24px">
<NInput v-model:value="model.jbId" placeholder="请输入经办人员营销号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="数据日期" path="date" class="pr-24px">
<NDatePicker
v-model:formatted-value="model.date"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="部门名称" path="deptName" class="pr-24px">
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="部门id" path="deptId" class="pr-24px">
<NInput v-model:value="model.deptId" placeholder="请输入部门id" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="客户类型1-个人2-对公)" path="custType" class="pr-24px">
<NSelect
v-model:value="model.custType"
placeholder="请选择客户类型1-个人2-对公)"
:options="mpsCustTypeOptions"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="客户身份证号" path="custId" class="pr-24px">
<NInput v-model:value="model.custId" placeholder="请输入客户身份证号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="客户姓名" path="custName" class="pr-24px">
<NInput v-model:value="model.custName" placeholder="请输入客户姓名" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="客户账号/卡号" path="custAcctNo" class="pr-24px">
<NInput v-model:value="model.custAcctNo" placeholder="请输入客户账号/卡号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="客户联系电话" path="custPhoneNo" class="pr-24px">
<NInput v-model:value="model.custPhoneNo" placeholder="请输入客户联系电话" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="磁条卡更换登记id" path="magneticCardId" class="pr-24px">
<NInput v-model:value="model.magneticCardId" placeholder="请输入磁条卡更换登记id" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="综合收单商户名" path="acquiringName" class="pr-24px">
<NInput v-model:value="model.acquiringName" placeholder="请输入综合收单商户名" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="综合收单商户号" path="acquiringId" class="pr-24px">
<NInput v-model:value="model.acquiringId" placeholder="请输入综合收单商户号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="网上支付开通渠道" path="internetChannel" class="pr-24px">
<NSelect
v-model:value="model.internetChannel"
placeholder="请选择网上支付开通渠道"
:options="mpsCustTypeOptions"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="交警处罚决定书" path="trafficId" class="pr-24px">
<NInput v-model:value="model.trafficId" placeholder="请输入交警处罚决定书" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="职工所属单位" path="workplace" class="pr-24px">
<NInput v-model:value="model.workplace" placeholder="请输入职工所属单位" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="公积金缴纳账户名称" path="surplusAccountName" class="pr-24px">
<NInput v-model:value="model.surplusAccountName" placeholder="请输入公积金缴纳账户名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="取暖费户号" path="heatingNo" class="pr-24px">
<NInput v-model:value="model.heatingNo" placeholder="请输入取暖费户号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="核对标志0未核对 1核对通过 9核对失败" path="checkFlag" class="pr-24px">
<NInput v-model:value="model.checkFlag" placeholder="请输入核对标志0未核对 1核对通过 9核对失败" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="核对时间" path="checkTime" class="pr-24px">
<NDatePicker
v-model:formatted-value="model.checkTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="核对人员(人工核对时)" path="checkUser" class="pr-24px">
<NInput v-model:value="model.checkUser" placeholder="请输入核对人员(人工核对时)" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="核对方式0系统 1人工 2其他1 3其他2 4其他3" path="checkType" class="pr-24px">
<NSelect
v-model:value="model.checkType"
placeholder="请选择核对方式0系统 1人工 2其他1 3其他2 4其他3"
:options="[]"
clearable
/>
</NFormItemGi>
<!-- <NFormItemGi span="24 s:12 m:6" label="营销人员名称" path="yxName" class="pr-24px">-->
<!-- <NInput v-model:value="model.yxName" placeholder="请输入营销人员名称" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="经办人员名称" path="jbName" class="pr-24px">-->
<!-- <NInput v-model:value="model.jbName" placeholder="请输入经办人员名称" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="营销人员营销号" path="yxId" class="pr-24px">-->
<!-- <NInput v-model:value="model.yxId" placeholder="请输入营销人员营销号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="经办人员营销号" path="jbId" class="pr-24px">-->
<!-- <NInput v-model:value="model.jbId" placeholder="请输入经办人员营销号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="数据日期" path="date" class="pr-24px">-->
<!-- <NDatePicker-->
<!-- v-model:formatted-value="model.date"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- clearable-->
<!-- />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="部门名称" path="deptName" class="pr-24px">-->
<!-- <NInput v-model:value="model.deptName" placeholder="请输入部门名称" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="部门id" path="deptId" class="pr-24px">-->
<!-- <NInput v-model:value="model.deptId" placeholder="请输入部门id" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="客户类型1-个人2-对公)" path="custType" class="pr-24px">-->
<!-- <NSelect-->
<!-- v-model:value="model.custType"-->
<!-- placeholder="请选择客户类型1-个人2-对公)"-->
<!-- :options="mpsCustTypeOptions"-->
<!-- clearable-->
<!-- />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="客户身份证号" path="custId" class="pr-24px">-->
<!-- <NInput v-model:value="model.custId" placeholder="请输入客户身份证号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="客户姓名" path="custName" class="pr-24px">-->
<!-- <NInput v-model:value="model.custName" placeholder="请输入客户姓名" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="客户账号/卡号" path="custAcctNo" class="pr-24px">-->
<!-- <NInput v-model:value="model.custAcctNo" placeholder="请输入客户账号/卡号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="客户联系电话" path="custPhoneNo" class="pr-24px">-->
<!-- <NInput v-model:value="model.custPhoneNo" placeholder="请输入客户联系电话" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="磁条卡更换登记id" path="magneticCardId" class="pr-24px">-->
<!-- <NInput v-model:value="model.magneticCardId" placeholder="请输入磁条卡更换登记id" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="综合收单商户名" path="acquiringName" class="pr-24px">-->
<!-- <NInput v-model:value="model.acquiringName" placeholder="请输入综合收单商户名" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="综合收单商户号" path="acquiringId" class="pr-24px">-->
<!-- <NInput v-model:value="model.acquiringId" placeholder="请输入综合收单商户号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="网上支付开通渠道" path="internetChannel" class="pr-24px">-->
<!-- <NSelect-->
<!-- v-model:value="model.internetChannel"-->
<!-- placeholder="请选择网上支付开通渠道"-->
<!-- :options="mpsCustTypeOptions"-->
<!-- clearable-->
<!-- />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="交警处罚决定书" path="trafficId" class="pr-24px">-->
<!-- <NInput v-model:value="model.trafficId" placeholder="请输入交警处罚决定书" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="职工所属单位" path="workplace" class="pr-24px">-->
<!-- <NInput v-model:value="model.workplace" placeholder="请输入职工所属单位" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="公积金缴纳账户名称" path="surplusAccountName" class="pr-24px">-->
<!-- <NInput v-model:value="model.surplusAccountName" placeholder="请输入公积金缴纳账户名称" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="取暖费户号" path="heatingNo" class="pr-24px">-->
<!-- <NInput v-model:value="model.heatingNo" placeholder="请输入取暖费户号" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="核对标志0未核对 1核对通过 9核对失败" path="checkFlag" class="pr-24px">-->
<!-- <NInput v-model:value="model.checkFlag" placeholder="请输入核对标志0未核对 1核对通过 9核对失败" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="核对时间" path="checkTime" class="pr-24px">-->
<!-- <NDatePicker-->
<!-- v-model:formatted-value="model.checkTime"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- clearable-->
<!-- />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="核对人员(人工核对时)" path="checkUser" class="pr-24px">-->
<!-- <NInput v-model:value="model.checkUser" placeholder="请输入核对人员(人工核对时)" />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" label="核对方式0系统 1人工 2其他1 3其他2 4其他3" path="checkType" class="pr-24px">-->
<!-- <NSelect-->
<!-- v-model:value="model.checkType"-->
<!-- placeholder="请选择核对方式0系统 1人工 2其他1 3其他2 4其他3"-->
<!-- :options="[]"-->
<!-- clearable-->
<!-- />-->
<!-- </NFormItemGi>-->
<NFormItemGi span="24 s:12 m:6" label="核对结果" path="checkMsg" class="pr-24px">
<NInput v-model:value="model.checkMsg" placeholder="请输入核对结果" />
</NFormItemGi>