中间计价有效无效明细页面++
This commit is contained in:
parent
215f53a07a
commit
ae68380eb7
@ -56,6 +56,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
original_traffic: () => import("@/views/original/traffic/index.vue"),
|
||||
original_water: () => import("@/views/original/water/index.vue"),
|
||||
report_performance: () => import("@/views/report/performance/index.vue"),
|
||||
"report_valid-invalid": () => import("@/views/report/valid-invalid/index.vue"),
|
||||
system_client: () => import("@/views/system/client/index.vue"),
|
||||
system_config: () => import("@/views/system/config/index.vue"),
|
||||
system_dept: () => import("@/views/system/dept/index.vue"),
|
||||
|
||||
@ -435,6 +435,15 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
title: 'report_performance',
|
||||
i18nKey: 'route.report_performance'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'report_valid-invalid',
|
||||
path: '/report/valid-invalid',
|
||||
component: 'view.report_valid-invalid',
|
||||
meta: {
|
||||
title: 'report_valid-invalid',
|
||||
i18nKey: 'route.report_valid-invalid'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -212,6 +212,7 @@ const routeMap: RouteMap = {
|
||||
"original_water": "/original/water",
|
||||
"report": "/report",
|
||||
"report_performance": "/report/performance",
|
||||
"report_valid-invalid": "/report/valid-invalid",
|
||||
"social-callback": "/social-callback",
|
||||
"system": "/system",
|
||||
"system_client": "/system/client",
|
||||
|
||||
36
cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts
Normal file
36
cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { request } from '@/service/request';
|
||||
|
||||
/** 获取员工中间业务有效/无效明细列表 */
|
||||
export function fetchGetValidInvalidList (params?: Api.Report.ValidInvalidSearchParams) {
|
||||
return request<Api.Report.ValidInvalidList>({
|
||||
url: '/report/validInvalid/list',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/** 新增员工中间业务有效/无效明细 */
|
||||
export function fetchCreateValidInvalid (data: Api.Report.ValidInvalidOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/report/validInvalid',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改员工中间业务有效/无效明细 */
|
||||
export function fetchUpdateValidInvalid (data: Api.Report.ValidInvalidOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/report/validInvalid',
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 批量删除员工中间业务有效/无效明细 */
|
||||
export function fetchBatchDeleteValidInvalid (ids: CommonType.IdType[]) {
|
||||
return request<boolean>({
|
||||
url: `/report/validInvalid/${ids.join(',')}`,
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
94
cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts
vendored
Normal file
94
cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts
vendored
Normal file
@ -0,0 +1,94 @@
|
||||
|
||||
/**
|
||||
* Namespace Api
|
||||
*
|
||||
* All backend api type
|
||||
*/
|
||||
declare namespace Api {
|
||||
|
||||
/**
|
||||
* namespace Report
|
||||
*
|
||||
* backend api module: "Report"
|
||||
*/
|
||||
namespace Report {
|
||||
/** valid invalid */
|
||||
type ValidInvalid = Common.CommonRecord<{
|
||||
/** 主键 */
|
||||
id: CommonType.IdType;
|
||||
/** 支行名称 */
|
||||
branchName: string;
|
||||
/** 员工姓名 */
|
||||
employeeName: string;
|
||||
/** 营销编号 */
|
||||
marketingCode: string;
|
||||
/** 客户姓名 */
|
||||
customerName: string;
|
||||
/** 客户身份证号 */
|
||||
customerId: CommonType.IdType;
|
||||
/** 无效的中间业务计价项目 */
|
||||
invalidBusiness: CommonType.IdType;
|
||||
/** 有效的中间业务计价项目 */
|
||||
validBusiness: CommonType.IdType;
|
||||
/** 有效无效标识 */
|
||||
checkFlag: string;
|
||||
/** 记录月份 */
|
||||
recordMonth: string;
|
||||
/** 冗余1 */
|
||||
fill1: string;
|
||||
/** 冗余2 */
|
||||
fill2: string;
|
||||
/** 冗余3 */
|
||||
fill3: string;
|
||||
/** 冗余4 */
|
||||
fill4: string;
|
||||
/** 租户编号 */
|
||||
tenantId: CommonType.IdType;
|
||||
}>;
|
||||
|
||||
/** valid invalid search params */
|
||||
type ValidInvalidSearchParams = CommonType.RecordNullable<
|
||||
Pick<
|
||||
Api.Report.ValidInvalid,
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'customerName'
|
||||
| 'customerId'
|
||||
| 'invalidBusiness'
|
||||
| 'validBusiness'
|
||||
| 'checkFlag'
|
||||
| 'recordMonth'
|
||||
| 'fill1'
|
||||
| 'fill2'
|
||||
| 'fill3'
|
||||
| 'fill4'
|
||||
> &
|
||||
Api.Common.CommonSearchParams
|
||||
>;
|
||||
|
||||
/** valid invalid operate params */
|
||||
type ValidInvalidOperateParams = CommonType.RecordNullable<
|
||||
Pick<
|
||||
Api.Report.ValidInvalid,
|
||||
| 'id'
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'customerName'
|
||||
| 'customerId'
|
||||
| 'invalidBusiness'
|
||||
| 'validBusiness'
|
||||
| 'checkFlag'
|
||||
| 'recordMonth'
|
||||
| 'fill1'
|
||||
| 'fill2'
|
||||
| 'fill3'
|
||||
| 'fill4'
|
||||
>
|
||||
>;
|
||||
|
||||
/** valid invalid list */
|
||||
type ValidInvalidList = Api.Common.PaginatingQueryRecord<ValidInvalid>;
|
||||
}
|
||||
}
|
||||
@ -66,6 +66,7 @@ declare module "@elegant-router/types" {
|
||||
"original_water": "/original/water";
|
||||
"report": "/report";
|
||||
"report_performance": "/report/performance";
|
||||
"report_valid-invalid": "/report/valid-invalid";
|
||||
"social-callback": "/social-callback";
|
||||
"system": "/system";
|
||||
"system_client": "/system/client";
|
||||
@ -194,6 +195,7 @@ declare module "@elegant-router/types" {
|
||||
| "original_traffic"
|
||||
| "original_water"
|
||||
| "report_performance"
|
||||
| "report_valid-invalid"
|
||||
| "system_client"
|
||||
| "system_config"
|
||||
| "system_dept"
|
||||
|
||||
352
cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue
Normal file
352
cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue
Normal file
@ -0,0 +1,352 @@
|
||||
<script setup lang="tsx">
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteValidInvalid, fetchGetValidInvalidList } from '@/service/api/report/valid-invalid';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import ValidInvalidOperateDrawer from './modules/valid-invalid-operate-drawer.vue';
|
||||
import ValidInvalidSearch from './modules/valid-invalid-search.vue';
|
||||
import {computed, ref, watch} from "vue";
|
||||
import {useBoolean} from "~/packages/hooks";
|
||||
import ValidInvalidImportModal from './modules/valid-invalid-import-modal.vue';
|
||||
defineOptions({
|
||||
name: 'ValidInvalidList'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { download } = useDownload();
|
||||
const { hasAuth } = useAuth();
|
||||
const { bool: importVisible, setTrue: openImportModal } = useBoolean();
|
||||
|
||||
const {
|
||||
columns,
|
||||
columnChecks,
|
||||
data,
|
||||
getData,
|
||||
getDataByPage,
|
||||
loading,
|
||||
mobilePagination,
|
||||
searchParams,
|
||||
resetSearchParams
|
||||
} = useTable({
|
||||
apiFn: fetchGetValidInvalidList,
|
||||
apiParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
branchName: null,
|
||||
employeeName: null,
|
||||
marketingCode: null,
|
||||
customerName: null,
|
||||
customerId: null,
|
||||
invalidBusiness: null,
|
||||
validBusiness: null,
|
||||
checkFlag: null,
|
||||
recordMonth: null,
|
||||
fill1: null,
|
||||
fill2: null,
|
||||
fill3: null,
|
||||
fill4: null,
|
||||
params: {}
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
align: 'center',
|
||||
width: 64,
|
||||
resizable: true
|
||||
},
|
||||
// {
|
||||
// key: 'id',
|
||||
// title: '主键',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
{
|
||||
key: 'branchName',
|
||||
title: '支行名称',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'employeeName',
|
||||
title: '员工姓名',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'marketingCode',
|
||||
title: '营销编号',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'customerName',
|
||||
title: '客户姓名',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'customerId',
|
||||
title: '客户身份证号',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'invalidBusiness',
|
||||
title: '无效的中间业务计价项目',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'validBusiness',
|
||||
title: '有效的中间业务计价项目',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'checkFlag',
|
||||
title: '有效无效标识',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'recordMonth',
|
||||
title: '记录月份',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
// {
|
||||
// key: 'fill1',
|
||||
// title: '冗余1',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
// {
|
||||
// key: 'fill2',
|
||||
// title: '冗余2',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
// {
|
||||
// key: 'fill3',
|
||||
// title: '冗余3',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
// {
|
||||
// key: 'fill4',
|
||||
// title: '冗余4',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
{
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
fixed: 'right',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('report:validInvalid:edit') || !hasAuth('report:validInvalid:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('report:validInvalid:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
local-icon="drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
if (!hasAuth('report:validInvalid:remove')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
local-icon="delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const scrollX = ref(0);
|
||||
// 计算总宽度函数
|
||||
const calculateTotalWidth = () => {
|
||||
let totalWidth = 0;
|
||||
const visibleColumns = columns.value;
|
||||
for (let i = 0; i < visibleColumns.length; i++) {
|
||||
const column = visibleColumns[i];
|
||||
// 获取列的实际渲染宽度
|
||||
// 注意：调整大小时会更新 column.width
|
||||
let width = column.width;
|
||||
// 如果没有显式宽度，则使用minWidth或默认值
|
||||
if (!width) {
|
||||
width = column.minWidth || 120;
|
||||
}
|
||||
// 转换为数字类型
|
||||
width = typeof width === 'string' ? parseInt(width) : width;
|
||||
totalWidth += width;
|
||||
}
|
||||
|
||||
// 添加额外的50px余量防止边缘裁剪
|
||||
return totalWidth + 50;
|
||||
};
|
||||
|
||||
// 监听列变化并计算宽度
|
||||
watch(columns, (newColumns) => {
|
||||
scrollX.value = calculateTotalWidth();
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
||||
useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteValidInvalid(checkedRowKeys.value);
|
||||
if (error) return;
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
async function handleDelete(id: CommonType.IdType) {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteValidInvalid([id]);
|
||||
if (error) return;
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function edit(id: CommonType.IdType) {
|
||||
handleEdit('id', id);
|
||||
}
|
||||
|
||||
function handleImport() {
|
||||
openImportModal();
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
download('/report/validInvalid/export', searchParams, `员工中间业务有效/无效明细_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||
<ValidInvalidSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
||||
<NCard title="员工中间业务有效/无效明细列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
:show-add="hasAuth('report:validInvalid:add')"
|
||||
:show-delete="hasAuth('report:validInvalid:remove')"
|
||||
:show-export="hasAuth('report:validInvalid: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"/>
|
||||
</template>
|
||||
{{ $t('common.import') }}
|
||||
</NButton>
|
||||
</template>
|
||||
</TableHeaderOperation>
|
||||
</template>
|
||||
|
||||
<!--scroll-x : 所有表格列宽度之和(包含操作列)+操作列宽度-->
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="scrollX"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.id"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
@update-resize-widths="scrollX = calculateTotalWidth()"
|
||||
/>
|
||||
|
||||
<ValidInvalidImportModal v-model:visible="importVisible" @submitted="getDataByPage"/>
|
||||
|
||||
<ValidInvalidOperateDrawer
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
@submitted="getDataByPage"
|
||||
/>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,162 @@
|
||||
[[[
|
||||
<script setup lang="ts">
|
||||
import { h, ref, watch } from 'vue';
|
||||
import type { UploadFileInfo } from 'naive-ui';
|
||||
import { getToken } from '@/store/modules/auth/shared';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { getServiceBaseURL } from '@/utils/service';
|
||||
import type FileUpload from '@/components/custom/file-upload.vue';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'ValidInvalidImportModal'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const { download } = useDownload();
|
||||
|
||||
const { baseURL } = getServiceBaseURL(import.meta.env);
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
Authorization: `Bearer ${ getToken() }`,
|
||||
clientid: import.meta.env.VITE_APP_CLIENT_ID!
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const uploadRef = ref<typeof FileUpload>();
|
||||
const message = ref<string>('');
|
||||
const success = ref<boolean>(false);
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const data = ref<Record<string, any>>({
|
||||
updateSupport: false
|
||||
});
|
||||
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
if (success.value) {
|
||||
emit('submitted');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
fileList.value.forEach(item => {
|
||||
item.status = 'pending';
|
||||
});
|
||||
uploadRef.value?.submit();
|
||||
}
|
||||
|
||||
function isErrorState(xhr: XMLHttpRequest) {
|
||||
const responseText = xhr?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
return response.code !== 200;
|
||||
}
|
||||
|
||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { file, event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
message.value = response.msg;
|
||||
window.$message?.success($t('common.importSuccess'));
|
||||
success.value = true;
|
||||
return file;
|
||||
}
|
||||
|
||||
function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const msg = JSON.parse(responseText).msg;
|
||||
message.value = msg;
|
||||
window.$message?.error(() => h('div', { innerHTML: msg || $t('common.importFail') }));
|
||||
success.value = false;
|
||||
}
|
||||
|
||||
function handleDownloadTemplate() {
|
||||
download(
|
||||
'/report/validInvalid/importTemplate',
|
||||
{},
|
||||
`${ $t('mps.common') }_${ $t('common.importTemplate') }_${ new Date().getTime() }.xlsx`
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
fileList.value = [];
|
||||
success.value = false;
|
||||
message.value = '';
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
]]]
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="visible"
|
||||
:title="$t('common.import')"
|
||||
preset="card"
|
||||
:bordered="false"
|
||||
display-directive="show"
|
||||
class="max-w-90% w-600px"
|
||||
@close="closeDrawer"
|
||||
>
|
||||
<NUpload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/report/validInvalid/importData`"
|
||||
:headers="headers"
|
||||
:data="data"
|
||||
:max="1"
|
||||
:file-size="50"
|
||||
accept=".xls,.xlsx"
|
||||
:multiple="false"
|
||||
directory-dnd
|
||||
:default-upload="false"
|
||||
list-type="text"
|
||||
:is-error-state="isErrorState"
|
||||
@finish="handleFinish"
|
||||
@error="handleError"
|
||||
>
|
||||
<NUploadDragger>
|
||||
<div class="mb-12px flex-center">
|
||||
<SvgIcon local-icon="unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
|
||||
</div>
|
||||
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
|
||||
<NP depth="3" class="mt-8px text-center">
|
||||
{{ $t('common.importSize') }}
|
||||
<b class="text-red-500">50MB</b>
|
||||
{{ $t('common.importFormat') }}
|
||||
<b class="text-red-500">xls/xlsx</b>
|
||||
{{ $t('common.importEnd') }}
|
||||
</NP>
|
||||
</NUploadDragger>
|
||||
</NUpload>
|
||||
<div class="flex-center">
|
||||
<NCheckbox v-model="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>
|
||||
</div>
|
||||
<NAlert v-if="message" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
|
||||
<template #default>
|
||||
<div v-html="message"></div>
|
||||
</template>
|
||||
</NAlert>
|
||||
<template #footer>
|
||||
<NSpace justify="end" :size="16">
|
||||
<NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,191 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { fetchCreateValidInvalid, fetchUpdateValidInvalid } from '@/service/api/report/valid-invalid';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'ValidInvalidOperateDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.Report.ValidInvalid | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增员工中间业务有效/无效明细',
|
||||
edit: '编辑员工中间业务有效/无效明细'
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Api.Report.ValidInvalidOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
branchName: '',
|
||||
employeeName: '',
|
||||
marketingCode: '',
|
||||
customerName: '',
|
||||
customerId: '',
|
||||
invalidBusiness: '',
|
||||
validBusiness: '',
|
||||
checkFlag: '',
|
||||
recordMonth: '',
|
||||
fill1: '',
|
||||
fill2: '',
|
||||
fill3: '',
|
||||
fill4: '',
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<
|
||||
keyof Model,
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'checkFlag'
|
||||
| 'recordMonth'
|
||||
| 'tenantId'
|
||||
| 'createDept'
|
||||
| 'createBy'
|
||||
| 'createTime'
|
||||
| 'updateBy'
|
||||
| 'updateTime'
|
||||
>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
branchName: createRequiredRule('支行名称不能为空'),
|
||||
employeeName: createRequiredRule('员工姓名不能为空'),
|
||||
marketingCode: createRequiredRule('营销编号不能为空'),
|
||||
checkFlag: createRequiredRule('有效无效标识不能为空'),
|
||||
recordMonth: createRequiredRule('记录月份不能为空'),
|
||||
tenantId: createRequiredRule('租户编号不能为空'),
|
||||
createDept: createRequiredRule('创建部门不能为空'),
|
||||
createBy: createRequiredRule('创建者不能为空'),
|
||||
createTime: createRequiredRule('创建时间不能为空'),
|
||||
updateBy: createRequiredRule('更新者不能为空'),
|
||||
updateTime: createRequiredRule('更新时间不能为空')
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
const { id, branchName, employeeName, marketingCode, customerName, customerId, invalidBusiness, validBusiness, checkFlag, recordMonth, fill1, fill2, fill3, fill4 } = model;
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { error } = await fetchCreateValidInvalid({ branchName, employeeName, marketingCode, customerName, customerId, invalidBusiness, validBusiness, checkFlag, recordMonth, fill1, fill2, fill3, fill4 });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { error } = await fetchUpdateValidInvalid({ id, branchName, employeeName, marketingCode, customerName, customerId, invalidBusiness, validBusiness, checkFlag, recordMonth, fill1, fill2, fill3, fill4 });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NFormItem label="支行名称" path="branchName">
|
||||
<NInput v-model:value="model.branchName" placeholder="请输入支行名称" />
|
||||
</NFormItem>
|
||||
<NFormItem label="员工姓名" path="employeeName">
|
||||
<NInput v-model:value="model.employeeName" placeholder="请输入员工姓名" />
|
||||
</NFormItem>
|
||||
<NFormItem label="营销编号" path="marketingCode">
|
||||
<NInput v-model:value="model.marketingCode" placeholder="请输入营销编号" />
|
||||
</NFormItem>
|
||||
<NFormItem label="客户姓名" path="customerName">
|
||||
<NInput v-model:value="model.customerName" placeholder="请输入客户姓名" />
|
||||
</NFormItem>
|
||||
<NFormItem label="客户身份证号" path="customerId">
|
||||
<NInput v-model:value="model.customerId" placeholder="请输入客户身份证号" />
|
||||
</NFormItem>
|
||||
<NFormItem label="无效的中间业务计价项目" path="invalidBusiness">
|
||||
<NInput v-model:value="model.invalidBusiness" placeholder="请输入无效的中间业务计价项目" />
|
||||
</NFormItem>
|
||||
<NFormItem label="有效的中间业务计价项目" path="validBusiness">
|
||||
<NInput v-model:value="model.validBusiness" placeholder="请输入有效的中间业务计价项目" />
|
||||
</NFormItem>
|
||||
<NFormItem label="有效无效标识" path="checkFlag">
|
||||
<NInput v-model:value="model.checkFlag" placeholder="请输入有效无效标识" />
|
||||
</NFormItem>
|
||||
<NFormItem label="记录月份" path="recordMonth">
|
||||
<NInput v-model:value="model.recordMonth" placeholder="请输入记录月份" disabled/>
|
||||
</NFormItem>
|
||||
<!-- <NFormItem label="冗余1" path="fill1">-->
|
||||
<!-- <NInput v-model:value="model.fill1" placeholder="请输入冗余1" />-->
|
||||
<!-- </NFormItem>-->
|
||||
<!-- <NFormItem label="冗余2" path="fill2">-->
|
||||
<!-- <NInput v-model:value="model.fill2" placeholder="请输入冗余2" />-->
|
||||
<!-- </NFormItem>-->
|
||||
<!-- <NFormItem label="冗余3" path="fill3">-->
|
||||
<!-- <NInput v-model:value="model.fill3" placeholder="请输入冗余3" />-->
|
||||
<!-- </NFormItem>-->
|
||||
<!-- <NFormItem label="冗余4" path="fill4">-->
|
||||
<!-- <NInput v-model:value="model.fill4" placeholder="请输入冗余4" />-->
|
||||
<!-- </NFormItem>-->
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'ValidInvalidSearch'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'reset'): void;
|
||||
(e: 'search'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
|
||||
|
||||
const model = defineModel<Api.Report.ValidInvalidSearchParams>('model', { required: true });
|
||||
|
||||
|
||||
async function reset() {
|
||||
Object.assign(model.value.params!, {});
|
||||
await restoreValidation();
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
async function search() {
|
||||
await validate();
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<NCollapse>
|
||||
<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="支行名称" path="branchName" class="pr-24px">
|
||||
<NInput v-model:value="model.branchName" placeholder="请输入支行名称" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="员工姓名" path="employeeName" class="pr-24px">
|
||||
<NInput v-model:value="model.employeeName" placeholder="请输入员工姓名" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="营销编号" path="marketingCode" class="pr-24px">
|
||||
<NInput v-model:value="model.marketingCode" placeholder="请输入营销编号" />
|
||||
</NFormItemGi>
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="客户姓名" path="customerName" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.customerName" placeholder="请输入客户姓名" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="客户身份证号" path="customerId" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.customerId" placeholder="请输入客户身份证号" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="无效的中间业务计价项目" path="invalidBusiness" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.invalidBusiness" placeholder="请输入无效的中间业务计价项目" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="有效的中间业务计价项目" path="validBusiness" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.validBusiness" placeholder="请输入有效的中间业务计价项目" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<NFormItemGi span="24 s:12 m:6" label="标识" path="checkFlag" class="pr-24px">
|
||||
<NInput v-model:value="model.checkFlag" placeholder="请输入有效无效标识" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="记录月份" path="recordMonth" class="pr-24px">
|
||||
<NInput v-model:value="model.recordMonth" placeholder="请输入记录月份" />
|
||||
</NFormItemGi>
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="冗余1" path="fill1" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.fill1" placeholder="请输入冗余1" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="冗余2" path="fill2" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.fill2" placeholder="请输入冗余2" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="冗余3" path="fill3" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.fill3" placeholder="请输入冗余3" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="冗余4" path="fill4" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.fill4" placeholder="请输入冗余4" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<NFormItemGi span="24" class="pr-24px">
|
||||
<NSpace class="w-full" justify="end">
|
||||
<NButton @click="reset">
|
||||
<template #icon>
|
||||
<SvgIcon local-icon="round-refresh"/>
|
||||
</template>
|
||||
{{ $t('common.reset') }}
|
||||
</NButton>
|
||||
<NButton type="primary" ghost @click="search">
|
||||
<template #icon>
|
||||
<SvgIcon local-icon="round-search"/>
|
||||
</template>
|
||||
{{ $t('common.search') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user