Merge remote-tracking branch 'origin/master'

src/views/mallResourceDevelopment/benchmark/benchmarkMainbody/index.vue

@@ -32,7 +32,7 @@
               <a-button class="top-button" type="primary">导入</a-button>
               <a-button class="top-button" type="primary">新建文件夹</a-button>
               <a-button class="top-button" type="primary" @click="handleAddLabel"
-                >新建标签主体</a-button
+                >新建指标主体</a-button
               >
             </template>
             <template #footer>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/addLabelModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #path="{ field, model }">
+        <div class="flex">
+          <Input v-model:value="model[field]" />
+          <a-button type="primary">选择</a-button>
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { addTabFormSchema } from '@/views/mallResourceDevelopment/benchmark/benchmarkManagement/label.data';
+  import { Input } from 'ant-design-vue';
+
+  const isUpdate = ref(false);
+  const rowId = ref('');
+  const getTitle = '新建标签主体';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 24, md: 24 },
+      schemas: addTabFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/index.vue

 <template>
-  <div> 指标管理 </div>
+  <PageWrapper dense>
+    <template #footer>
+      <div class="flex">
+        <div style="flex: 2" class="flex">
+          <BasicTree
+            class="flex-1"
+            :treeData="labelTreeData"
+            defaultExpandLevel="1"
+            @select="handleSelect"
+            ref="treeData"
+          />
+          <!-- 刷新 -->
+          <a-button type="link" style="padding: 0"><SyncOutlined /></a-button>
+        </div>
+        <div style="flex: 9">
+          <PageWrapper :title="tabName">
+            <template #extra>
+              <a-button class="top-button" type="primary" :disabled="topButtonDisabled()"
+                >移动</a-button
+              >
+              <a-button
+                class="top-button"
+                type="primary"
+                :disabled="topButtonDisabled()"
+                @click="handleDelete"
+                >删除</a-button
+              >
+              <a-button class="top-button" type="primary" :disabled="topButtonDisabled()"
+                >导出</a-button
+              >
+              <a-button class="top-button" type="primary">导入</a-button>
+              <a-button class="top-button" type="primary">新建文件夹</a-button
+              ><a-button class="top-button" type="primary">批量创建原子指标</a-button>
+              <a-button class="top-button" type="primary" @click="handleAddLabel"
+                >新建指标</a-button
+              >
+            </template>
+            <template #footer>
+              <BasicTable @register="tabTable" ref="tabTableRef">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'action'">
+                    <TableAction
+                      :actions="[
+                        {
+                          // 编辑
+                          icon: 'ant-design:edit-outlined',
+                          onClick: handleBody.bind(null, record),
+                        },
+                        {
+                          // 标签
+                          icon: 'ant-design:book-outlined',
+                        },
+                      ]"
+                      :dropDownActions="[
+                        {
+                          // 重命名
+                          icon: 'ant-design:credit-card-outlined',
+                          label: '重命名',
+                        },
+                        {
+                          // 删除
+                          icon: 'ant-design:delete-outlined',
+                          label: '删除',
+                          popConfirm: {
+                            title: '是否确认删除',
+                            placement: 'left',
+                            confirm: handleRemove.bind(null, record),
+                          },
+                          color: 'error',
+                        },
+                        {
+                          // 移动
+                          icon: 'ion-move-outline',
+                          label: '移动',
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+                <template #name="{ text, record }">
+                  <a @click="handleBody(record)">{{ text }}</a>
+                </template>
+                <template #originalSubject="{ text, record }">
+                  <a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
+                </template>
+              </BasicTable>
+            </template>
+          </PageWrapper>
+        </div>
+      </div>
+    </template>
+    <AddLabelModel @register="addLabelModal" />
+  </PageWrapper>
 </template>
 
-<script></script>
+<script lang="ts" setup>
+  import {
+    SyncOutlined,
+    TableOutlined,
+    InsertRowAboveOutlined,
+    SolutionOutlined,
+    FilePdfOutlined,
+    RollbackOutlined,
+    SaveOutlined,
+    DownCircleOutlined,
+    DeleteOutlined,
+    CloudUploadOutlined,
+    EditOutlined,
+    PlusOutlined,
+  } from '@ant-design/icons-vue';
+  import { labelTreeData, tabTableData } from '../benchmarkMainbody/labelData';
+  import { h, ref, unref } from 'vue';
+  import { Divider } from 'ant-design-vue';
+  import type { BasicTableProps, TableActionType, TableRowSelection } from '@/components/Table';
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+  import BasicTree from '@/components/Tree/src/BasicTree.vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { TreeActionItem } from '@/components/Tree';
+  import { tableListViewThree } from '@/views/dataQuality/agentClass/global/details/setup/mock';
+  import { Threecolumns } from '@/views/dataQuality/agentClass/global/details/setup/mainBody.data';
+  import { tabTableColumn, tabTableFormSchema } from './label.data';
+  import { searchFormSchema } from '@/views/auditLog/audi.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useModal } from '@/components/Modal';
+  import AddLabelModel from './addLabelModal.vue';
 
-<style></style>
+  const [addLabelModal, { openModal: openAddLabelModel }] = useModal();
+  const tabName = ref('');
+  const treeData = ref();
+  function handleSelect() {
+    const keys = unref(treeData).getSelectedKeys();
+    const node = unref(treeData).getSelectedNode(keys[0]);
+    console.log('node', node);
+    // 获取标题
+    tabName.value = node.title;
+    if (node.children) {
+      console.log('children', node.children);
+      tabSetTableData(node.children);
+    } else {
+      tabSetTableData([node]);
+    }
+    // 获取列表
+    // console.log('key', key);
+    // tabName.value = findTitleById(labelTreeData[0], key[0]);
+    // console.log('tabName', tabName.value);
+  }
+  // 嵌套 -获取树title
+  function findTitleById(tree, key) {
+    if (tree.key === key) {
+      return tree.title;
+    }
+    if (tree.children && tree.children.length > 0) {
+      for (let child of tree.children) {
+        const result = findTitleById(child, key);
+        if (result) {
+          return result;
+        }
+      }
+    }
+  }
+  const tabTableRef = ref(null);
+  function topButtonDisabled() {
+    if (tabTableRef.value) {
+      return tabGetRowSelection().selectedRowKeys <= 0;
+    } else {
+      return false;
+    }
+  }
+  const { createMessage, createConfirm } = useMessage();
+  function handleDelete() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认批量删除选中数据吗？',
+      onOk() {
+        createMessage.success('批量删除成功!');
+      },
+    });
+  }
+  function handleAddLabel() {
+    openAddLabelModel(true, {
+      isUpdate: false,
+    });
+  }
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
+  const router = useRouter();
+  function handleBody(record) {
+    console.log('recode', record);
+    router.push({
+      path: '/mallResourceDevelopment/label/labelDetail',
+      query: { ...record },
+    });
+  }
+  const [tabTable, { setTableData: tabSetTableData, getRowSelection: tabGetRowSelection }] =
+    useTable({
+      title: '',
+      api: async (params) => {
+        console.log(params);
+        const response = {
+          pageNu: '1',
+          pageSize: '10',
+          pages: '1',
+          total: [],
+          code: '',
+          message: '',
+          data: [],
+        };
+
+        return { ...response };
+      },
+
+      rowKey: 'businessId',
+      columns: tabTableColumn,
+      rowSelection: {
+        type: 'checkbox',
+      },
+      showIndexColumn: false,
+      showTableSetting: false,
+      bordered: true,
+      useSearchForm: true,
+      formConfig: {
+        labelWidth: 80,
+        baseColProps: { span: 6 },
+        schemas: tabTableFormSchema,
+        autoSubmitOnEnter: true,
+      },
+      actionColumn: {
+        width: 120,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: undefined,
+      },
+    } as BasicTableProps);
+</script>
+
+<style scoped>
+  .top-button {
+    padding: 0 5px;
+  }
+</style>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/label.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const tabTableColumn: BasicColumn[] = [
+  {
+    title: '指标主体名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '描述',
+    dataIndex: 'txt',
+  },
+  {
+    title: '创建者',
+    dataIndex: 'createdBy',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdTime',
+    sorter: true,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    sorter: true,
+  },
+  {
+    title: '原始主体',
+    dataIndex: 'originalSubject',
+    slots: { customRender: 'originalSubject' },
+  },
+];
+export const tabTableFormSchema: FormSchema[] = [
+  {
+    field: '输入关键字搜索',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const addTabFormSchema: FormSchema[] = [
+  {
+    label: '标签主体路径',
+    field: 'path',
+    slot: 'path',
+    required: true,
+  },
+  {
+    label: '名称',
+    field: 'name',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '描述',
+    field: 'txt',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelData.ts

+export const labelTreeData = [
+  {
+    title: '我的创建',
+    key: '-1',
+    icon: 'ant-design:table-outlined',
+    children: [
+      {
+        title: '611',
+        key: '0',
+        icon: 'ion:folder-outline',
+
+        name: '611',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'task_611_1',
+            key: '0-1',
+            icon: 'ant-design:table-outlined',
+            name: 'task_611_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'task_611_2',
+            key: '0-2',
+            icon: 'ant-design:table-outlined',
+            name: 'task_611_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: 'YLW数据资产',
+        key: '1',
+        icon: 'ion:folder-outline',
+        name: 'YLW数据资产',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'assets_1',
+            key: '1-1',
+            icon: 'ant-design:table-outlined',
+            name: 'assets_10',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'assets_2',
+            key: '1-2',
+            icon: 'ant-design:table-outlined',
+            name: 'assets_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '数据中台演示',
+        key: '2',
+        icon: 'ion:folder-outline',
+        name: '数据中台演示',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'middle_1',
+            key: '2-1',
+            icon: 'ant-design:table-outlined',
+            name: 'middle_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'middle_2',
+            key: '2-2',
+            icon: 'ant-design:table-outlined',
+            name: 'middle_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '数据资产-华东',
+        key: '3',
+        icon: 'ion:folder-outline',
+        name: '数据资产-华东',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'assets_EC_1',
+            key: '3-1',
+            icon: 'ant-design:table-outlined',
+            name: 'assets_EC_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'assets_EC_2',
+            key: '3-2',
+            icon: 'ant-design:table-outlined',
+            name: 'assets_EC_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '54所网络部',
+        key: '4',
+        icon: 'ion:folder-outline',
+        name: '54所网络部',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'ntd_1',
+            key: '4-1',
+            icon: 'ant-design:table-outlined',
+            name: 'ntd_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'ntd_2',
+            key: '4-2',
+            icon: 'ant-design:table-outlined',
+            name: 'ntd_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '54WLB',
+        key: '5',
+        icon: 'ion:folder-outline',
+        name: '54WLB',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'wlb_1',
+            key: '5-1',
+            icon: 'ant-design:table-outlined',
+            name: 'wlb_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'wlb_2',
+            key: '5-2',
+            icon: 'ant-design:table-outlined',
+            name: 'wlb_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '人力资源管理',
+        key: '6',
+        icon: 'ion:folder-outline',
+        name: '人力资源管理',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'hrm_1',
+            key: '6-1',
+            icon: 'ant-design:table-outlined',
+            name: 'hrm_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'hrm_2',
+            key: '6-2',
+            icon: 'ant-design:table-outlined',
+            name: 'hrm_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+      {
+        title: '文化休闲',
+        key: '7',
+        icon: 'ion:folder-outline',
+        name: '文化休闲',
+        txt: '',
+        createdBy: 'admin',
+        createTime: '2023/05/05 14:22:56',
+        updateTime: '2023/05/05 14:22:56',
+        originalSubject: '',
+        children: [
+          {
+            title: 'culture_leisure_1',
+            key: '7-1',
+            icon: 'ant-design:table-outlined',
+            name: 'culture_leisure_1',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+          {
+            title: 'culture_leisure_2',
+            key: '7-2',
+            icon: 'ant-design:table-outlined',
+            name: 'culture_leisure_2',
+            txt: '',
+            createdBy: 'admin',
+            createTime: '2023/05/05 14:22:56',
+            updateTime: '2023/05/05 14:22:56',
+            originalSubject: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+export const tabTableData = [
+  {
+    businessId: 1,
+    name: '测试',
+    txt: '',
+    createdBy: 'admin',
+    createTime: '2023/05/05 14:22:56',
+    updateTime: '2023/05/05 14:22:56',
+    originalSubject: '',
+  },
+  {
+    businessId: 2,
+    name: 'qwert',
+    txt: 'qwert',
+    createdBy: 'admin',
+    createTime: '2023/05/08 10:36:30',
+    updateTime: '2023/05/08 10:36:30',
+    originalSubject: 'zqq-6.9-原始主体',
+  },
+  {
+    businessId: 3,
+    name: '111',
+    txt: '',
+    createdBy: 'admin',
+    createTime: '2023/04/19 11:28:35',
+    updateTime: '2023/04/19 11:28:35',
+    originalSubject: '',
+  },
+  {
+    businessId: 4,
+    name: 'zqq-test-tag2',
+    txt: '',
+    createdBy: 'admin',
+    createTime: '2023/04/18 17:01:18',
+    updateTime: '2023/04/18 17:01:18',
+    originalSubject: 'zq-6.9-原始主体',
+  },
+  {
+    businessId: 5,
+    name: 'test123',
+    txt: '',
+    createdBy: 'admin',
+    createTime: '2023/04/11 17:22:09',
+    updateTime: '2023/04/11 17:22:09',
+    originalSubject: '',
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/detail.data.ts

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+import Mock from 'mockjs';
+
+export const detailFormSchema: FormSchema[] = [
+  {
+    label: '原始主体',
+    field: 'originalSubject',
+    slot: 'originalSubject',
+  },
+  {
+    label: '标签存储库',
+    field: 'tagLibrary',
+    slot: 'tagLibrary',
+  },
+];
+export const columnFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const columnTableColumn: BasicColumn[] = [
+  {
+    title: '表名',
+    dataIndex: 'table',
+  },
+  {
+    title: '列名',
+    dataIndex: 'column',
+  },
+  {
+    title: '中文名',
+    dataIndex: 'chName',
+  },
+  {
+    title: '字段描述',
+    dataIndex: 'des',
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+  },
+  {
+    title: 'Label分类',
+    dataIndex: 'labelType',
+    slots: { customRender: 'labelType' },
+  },
+  {
+    title: '是否脱敏',
+    dataIndex: 'sensitive',
+    slots: { customRender: 'sensitive' },
+  },
+];
+export const sensitiveTableColumn: BasicColumn[] = [
+  {
+    title: '表名',
+    dataIndex: 'table',
+    width: 100,
+  },
+  {
+    title: '列名',
+    dataIndex: 'column',
+    width: 100,
+  },
+  {
+    title: '是否脱敏',
+    dataIndex: 'sensitive',
+    slots: { customRender: 'sensitive' },
+    width: 100,
+  },
+  {
+    title: '脱敏算法',
+    dataIndex: 'algoritm',
+    slots: { customRender: 'algoritm' },
+    width: 100,
+  },
+  {
+    title: '脱敏参数',
+    dataIndex: 'params',
+    slots: { customRender: 'params' },
+    width: 200,
+  },
+];
+export const infoFormSchema: FormSchema[] = [
+  {
+    label: '主体名称',
+    field: 'name',
+    component: 'Input',
+  },
+  {
+    label: '描述',
+    field: 'des',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+  },
+  {
+    label: '记录保留时间',
+    field: 'time',
+    slot: 'time',
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/detailData.ts

+import Mock from "mockjs";
+
+export const columnTableData = [
+  {
+    table: 'employee',
+    column: 'id',
+    chName: '编号',
+    des: '编号',
+    type: 'NUMBER',
+    labelType: '默认分类',
+    sensitive: '否',
+  },
+  {
+    table: 'employee',
+    column: 'em_name',
+    chName: '姓名',
+    des: '姓名',
+    type: 'STRING',
+    labelType: '默认分类',
+    sensitive: '否',
+  },
+  {
+    table: 'employee',
+    column: 'em_idcard',
+    chName: '身份证',
+    des: '身份证',
+    type: 'STRING',
+    labelType: '默认分类',
+    sensitive: '是',
+  },
+];
+export const gatherDataTableHeader = [
+  {
+    name: '编号',
+    field: 'id',
+  },
+  {
+    name: '姓名',
+    field: 'em_name',
+  },
+  {
+    name: '身份证',
+    field: 'em_idcard',
+  },
+  {
+    name: '地址',
+    field: 'em_address',
+  },
+  {
+    name: '毕业院校',
+    field: 'em_afterschool',
+  },
+  {
+    name: '年龄',
+    field: 'em_age',
+  },
+  {
+    name: '祖籍',
+    field: 'em_ancestralhome',
+  },
+  {
+    name: '出生日期',
+    field: 'em_bom',
+  },
+];
+export const gatherData = (num) => {
+  return Mock.mock({
+    [`users|${num}`]: [
+      // 根据 num 动态生成用户数量
+      {
+        'id|+1': 1,
+        em_name: '@name',
+        em_idcard: '@id',
+        em_address: '@county(true)',
+        em_afterschool: '@ctitle(5, 10)大学',
+        'em_age|18-60': 1,
+        em_ancestralhome: '@county(true)',
+        em_bom: '@date("yyyy-MM-dd")',
+      },
+    ],
+  }).users;
+};

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/index.vue

+<template>
+  <PageWrapper :title="tabName" dense contentFullHeight fixedHeight>
+    <template #extra>
+      <a-button type="primary">发布</a-button>
+      <a-button type="primary">下载</a-button>
+      <a-button type="primary" @click="handleInfo">基本信息</a-button>
+      <a-button type="primary">查看关联标签</a-button>
+      <a-button type="primary">保存</a-button>
+    </template>
+    <template #footer>
+      <BasicForm @register="detailForm">
+        <template #originalSubject="{ field, model }">
+          <InputSearch
+            class="w-1/2"
+            v-model:value="model[field]"
+            enter-button="选择"
+            @search="onSearch"
+          />
+        </template>
+        <template #tagLibrary="{ field, model }">
+          <InputSearch
+            class="w-1/2"
+            v-model:value="model[field]"
+            enter-button="选择"
+            @search="onSearch"
+          />
+        </template>
+      </BasicForm>
+      <Tabs v-model:activeKey="activeKey">
+        <TabPane key="1" tab="列信息">
+          <BasicTable @register="columnTable">
+            <template #labelType="{ text, record }">
+              <Input v-model:value="record.labelType" />
+            </template>
+            <template #sensitive="{ text, record }">
+              <Select v-model:value="record.sensitive" :options="sensitiveOption" />
+              <a-button v-if="record.sensitive === '是'" type="link" @click="handleOpenSensitive"
+                ><SlidersOutlined
+              /></a-button>
+            </template>
+          </BasicTable>
+        </TabPane>
+        <TabPane key="2" tab="采样数据">
+          <BasicTable @register="gatherDataTable">
+            <template #headerCell="{ column }">
+              <template v-if="headerFieldList.includes(column.key)">
+                <div>{{ column.title }}</div>
+                <div style="color: #b3b9c5">{{ column.key }}</div>
+              </template>
+            </template>
+          </BasicTable>
+        </TabPane>
+      </Tabs>
+    </template>
+    <SensitiveWayModel @register="sensitiveWayModel" />
+    <InfoModel @register="infoModel" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { Input, InputSearch, Select, TabPane, Tabs } from 'ant-design-vue';
+  import { SlidersOutlined } from '@ant-design/icons-vue';
+  import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
+  import { useRoute } from 'vue-router';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { onMounted, ref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import {
+    columnFormSchema,
+    columnTableColumn,
+    detailFormSchema,
+  } from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
+  import {
+    columnTableData, gatherData,
+    gatherDataTableHeader,
+  } from '@/views/mallResourceDevelopment/label/labelDetail/detailData';
+  import SensitiveWayModel from './sensitiveWayModel.vue';
+  import { useModal } from '@/components/Modal';
+  import InfoModel from './infoModel.vue';
+
+  const [sensitiveWayModel, { openModal: openSensitiveWayModel }] = useModal();
+  const [infoModel, { openModal: openInfoModel }] = useModal();
+  function handleInfo() {
+    openInfoModel(true, {
+      isUpdate: false,
+    });
+  }
+  const route = useRoute();
+  const tabName = route.query.name;
+  function onSearch() {}
+  const [detailForm] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: detailFormSchema,
+    showActionButtonGroup: false,
+  });
+  const activeKey = ref('1');
+  const sensitiveOption = [
+    {
+      label: '是',
+      value: '是',
+    },
+    {
+      label: '否',
+      value: '否',
+    },
+  ];
+  function handleOpenSensitive() {
+    openSensitiveWayModel(true, {
+      isUpdate: false,
+    });
+  }
+  const [columnTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        code: '',
+        message: '',
+        data: columnTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: columnTableColumn,
+    striped: false,
+    bordered: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      baseColProps: { span: 4 },
+      schemas: columnFormSchema,
+      autoSubmitOnEnter: true,
+    },
+  } as BasicTableProps);
+  const [gatherDataTable, { setColumns: gatherDataSetColumns }] = useTable({
+    title: '',
+    api: async (params) => {
+      // 设置表头
+      const list = gatherDataTableHeader.map((item) => ({
+        title: item.name,
+        dataIndex: item.field,
+      }));
+      gatherDataSetColumns(list);
+      console.log('params:', params);
+      const response = {
+        code: '',
+        message: '',
+        data: gatherData(10),
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: [],
+    striped: false,
+    bordered: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      baseColProps: { span: 4 },
+      schemas: columnFormSchema,
+      autoSubmitOnEnter: true,
+    },
+  } as BasicTableProps);
+  // 动态头listColumn获取
+  const headerFieldList = [];
+  onMounted(() => {
+    gatherDataTableHeader.forEach((item) => {
+      headerFieldList.push(item.field);
+    });
+  });
+</script>
+
+<style scoped></style>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/infoModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #time="{ field, model }">
+        <div class="flex">
+          <Input v-model:value="model[field]" />
+          <span>天</span>
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { infoFormSchema } from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
+
+  const isUpdate = ref(false);
+  const getTitle = '基本信息';
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 24, md: 24 },
+      schemas: infoFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+  });
+
+  // const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/sensitiveWayModel.vue

+<template>
+  <BasicModal
+    width="70%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicTable @register="sensitiveTable">
+      <template #sensitive="{ text, record }">
+        <Select style="width: 120px" v-model:value="record.sensitive" :options="sensitiveOptions" />
+      </template>
+      <template #algoritm="{ text, record }">
+        <div v-if="record.sensitive === '是'">
+          <Select style="width: 120px" v-model:value="record.algoritm" :options="algoritmOptions" />
+          <BasicHelp
+            text="通过将敏感数据的一部分替换为特定的符号（如*、#）来遮掩敏感信息，保留数据的部分结构或格式。常用于保护信用卡号、身份证号等。"
+          />
+        </div>
+      </template>
+      <template #params="{ text, record }">
+        <div v-if="record.sensitive === '是'" style="display: flex">
+          <Select style="width: 120px" v-model:value="record.params" :options="paramsOptions" />
+          <div v-if="record.params" class="flex">
+            <div style="line-height: 30px">{{ record.params === '1' ? '自' : '前' }}</div>
+            <Input v-model:value="record.m" />
+            <div style="line-height: 30px">{{ record.params === '1' ? '至' : '后' }}</div>
+            <Input v-model:value="record.n" />
+          </div>
+        </div>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { Input, Select } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { BasicTable, useTable, TableAction, BasicTableProps } from '@/components/Table';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { tabTableData } from '@/views/mallResourceDevelopment/label/labelData';
+  import {
+    tabTableColumn,
+    tabTableFormSchema,
+  } from '@/views/mallResourceDevelopment/label/label.data';
+  import { sensitiveTableColumn } from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
+  import { columnTableData } from '@/views/mallResourceDevelopment/label/labelDetail/detailData';
+  import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
+
+  const getTitle = '脱敏策略';
+  const isUpdate = ref(true);
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+  });
+  const sensitiveOptions = [
+    {
+      label: '是',
+      value: '是',
+    },
+    {
+      label: '否',
+      value: '否',
+    },
+  ];
+  const algoritmOptions = [
+    {
+      label: '掩码遮盖',
+      value: '掩码遮盖',
+    },
+    {
+      label: '字符替换',
+      value: '字符替换',
+    },
+    {
+      label: '数据加密',
+      value: '数据加密',
+    },
+  ];
+  const paramsOptions = [
+    {
+      label: '自m至n',
+      value: '1',
+    },
+    {
+      label: '前m后n',
+      value: '2',
+    },
+  ];
+  const [sensitiveTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log(params);
+      const response = {
+        code: '',
+        message: '',
+        data: columnTableData,
+      };
+
+      return { ...response };
+    },
+
+    rowKey: 'businessId',
+    columns: sensitiveTableColumn,
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+  } as BasicTableProps);
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>