From ae68380eb717b3193538a78e1941afee4c4b3ae1 Mon Sep 17 00:00:00 2001
From: zhuangdashia <cos35507550@163.com>
Date: Fri, 29 Aug 2025 00:39:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E9=97=B4=E8=AE=A1=E4=BB=B7=E6=9C=89?=
 =?UTF-8?q?=E6=95=88=E6=97=A0=E6=95=88=E6=98=8E=E7=BB=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?++?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/elegant/imports.ts             |   1 +
 .../src/router/elegant/routes.ts              |   9 +
 .../src/router/elegant/transform.ts           |   1 +
 .../src/service/api/report/valid-invalid.ts   |  36 ++
 .../typings/api/report.valid-invalid.api.d.ts |  94 +++++
 .../src/typings/elegant-router.d.ts           |   2 +
 .../src/views/report/valid-invalid/index.vue  | 352 ++++++++++++++++++
 .../modules/valid-invalid-import-modal.vue    | 162 ++++++++
 .../modules/valid-invalid-operate-drawer.vue  | 191 ++++++++++
 .../modules/valid-invalid-search.vue          | 103 +++++
 10 files changed, 951 insertions(+)
 create mode 100644 cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts
 create mode 100644 cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts
 create mode 100644 cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue
 create mode 100644 cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-import-modal.vue
 create mode 100644 cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-operate-drawer.vue
 create mode 100644 cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-search.vue

diff --git a/cds-fontend-2025.V1/src/router/elegant/imports.ts b/cds-fontend-2025.V1/src/router/elegant/imports.ts
index 8c7829d..8e5620e 100644
--- a/cds-fontend-2025.V1/src/router/elegant/imports.ts
+++ b/cds-fontend-2025.V1/src/router/elegant/imports.ts
@@ -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"),
diff --git a/cds-fontend-2025.V1/src/router/elegant/routes.ts b/cds-fontend-2025.V1/src/router/elegant/routes.ts
index c35fb0b..aa3c935 100644
--- a/cds-fontend-2025.V1/src/router/elegant/routes.ts
+++ b/cds-fontend-2025.V1/src/router/elegant/routes.ts
@@ -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'
+        }
       }
     ]
   },
diff --git a/cds-fontend-2025.V1/src/router/elegant/transform.ts b/cds-fontend-2025.V1/src/router/elegant/transform.ts
index 89178fb..6a95f1e 100644
--- a/cds-fontend-2025.V1/src/router/elegant/transform.ts
+++ b/cds-fontend-2025.V1/src/router/elegant/transform.ts
@@ -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",
diff --git a/cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts b/cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts
new file mode 100644
index 0000000..ccb73bd
--- /dev/null
+++ b/cds-fontend-2025.V1/src/service/api/report/valid-invalid.ts
@@ -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'
+    });
+}
diff --git a/cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts b/cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts
new file mode 100644
index 0000000..871aea6
--- /dev/null
+++ b/cds-fontend-2025.V1/src/typings/api/report.valid-invalid.api.d.ts
@@ -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>;
+    }
+}
diff --git a/cds-fontend-2025.V1/src/typings/elegant-router.d.ts b/cds-fontend-2025.V1/src/typings/elegant-router.d.ts
index faa30df..9c2a42f 100644
--- a/cds-fontend-2025.V1/src/typings/elegant-router.d.ts
+++ b/cds-fontend-2025.V1/src/typings/elegant-router.d.ts
@@ -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"
diff --git a/cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue b/cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue
new file mode 100644
index 0000000..e673578
--- /dev/null
+++ b/cds-fontend-2025.V1/src/views/report/valid-invalid/index.vue
@@ -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>
diff --git a/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-import-modal.vue b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-import-modal.vue
new file mode 100644
index 0000000..8419301
--- /dev/null
+++ b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-import-modal.vue
@@ -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>
diff --git a/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-operate-drawer.vue b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-operate-drawer.vue
new file mode 100644
index 0000000..c1d3dd6
--- /dev/null
+++ b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-operate-drawer.vue
@@ -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>
diff --git a/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-search.vue b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-search.vue
new file mode 100644
index 0000000..fb950c5
--- /dev/null
+++ b/cds-fontend-2025.V1/src/views/report/valid-invalid/modules/valid-invalid-search.vue
@@ -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>