修改路由 修改指标主体 修改指标管理

src/router/routes/index.ts

@@ -252,7 +252,8 @@ export const MallSourceFileRoute: AppRouteRecordRaw = {
     {
       path: 'fileByApply/fileByApplyDetail',
       name: 'fileByApplyDetail',
-      component: () => import('@/views/mallResourceDevelopment/file/fileByApply/fileByApplyDetail.vue'),
+      component: () =>
+        import('@/views/mallResourceDevelopment/file/fileByApply/fileByApplyDetail.vue'),
       meta: {
         title: '我申请的文件详情',
         icon: '',
@@ -726,6 +727,26 @@ export const BenchmarkRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
+    {
+      path: 'benchmark/benchmarkMainbody/labelDetail',
+      name: 'labelDetail',
+      component: () =>
+        import('@/views/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail/index.vue'),
+      meta: {
+        title: '指标明细',
+        icon: 'icon-label',
+      },
+    },
+    {
+      path: 'benchmark/benchmarkManagement/atomLabel',
+      name: 'atomLabel',
+      component: () =>
+        import('@/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/index.vue'),
+      meta: {
+        title: '原子标签',
+        icon: 'icon-atom-label',
+      },
+    },
   ],
 };
 

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

@@ -43,12 +43,15 @@
                       :actions="[
                         {
                           // 编辑
+
                           icon: 'ant-design:edit-outlined',
+                          tooltip: '编辑',
                           onClick: handleBody.bind(null, record),
                         },
                         {
                           // 标签
                           icon: 'ant-design:book-outlined',
+                          tooltip: '标签',
                         },
                       ]"
                       :dropDownActions="[
@@ -81,7 +84,9 @@
                   <a @click="handleBody(record)">{{ text }}</a>
                 </template>
                 <template #originalSubject="{ text, record }">
-                  <a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
+                  <a-button type="primary" @click="handleBody(record)">{{
+                    text + '明细信息'
+                  }}</a-button>
                 </template>
               </BasicTable>
             </template>
@@ -190,7 +195,7 @@
   function handleBody(record) {
     console.log('recode', record);
     router.push({
-      path: '/mallResourceDevelopment/label/labelDetail',
+      path: '/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail',
       query: { ...record },
     });
   }
@@ -214,9 +219,7 @@
 
       rowKey: 'businessId',
       columns: tabTableColumn,
-      rowSelection: {
-        type: 'checkbox',
-      },
+      rowSelection: true,
       showIndexColumn: false,
       showTableSetting: false,
       bordered: true,

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

@@ -60,22 +60,15 @@
 <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 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/label/labelDetail/detail.data';
-  import {
-    columnTableData, gatherData,
-    gatherDataTableHeader,
-  } from '@/views/mallResourceDevelopment/label/label/labelDetail/detailData';
+  import { columnFormSchema, columnTableColumn, detailFormSchema } from './detail.data';
+  import { columnTableData, gatherData, gatherDataTableHeader } from './detailData';
   import SensitiveWayModel from './sensitiveWayModel.vue';
   import { useModal } from '@/components/Modal';
   import InfoModel from './infoModel.vue';

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

@@ -21,7 +21,7 @@
   import { Input } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import { infoFormSchema } from '@/views/mallResourceDevelopment/label/label/labelDetail/detail.data';
+  import { infoFormSchema } from './detail.data';
 
   const isUpdate = ref(false);
   const getTitle = '基本信息';

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

@@ -44,8 +44,8 @@
     tabTableColumn,
     tabTableFormSchema,
   } from '@/views/mallResourceDevelopment/label/label/label.data';
-  import { sensitiveTableColumn } from '@/views/mallResourceDevelopment/label/label/labelDetail/detail.data';
-  import { columnTableData } from '@/views/mallResourceDevelopment/label/label/labelDetail/detailData';
+  import { sensitiveTableColumn } from './detail.data';
+  import { columnTableData } from './detailData';
   import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
 
   const getTitle = '脱敏策略';

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

@@ -56,5 +56,6 @@
   async function handleSubmit() {
     await validate();
     closeModal();
+    openmodal();
   }
 </script>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/atom.data.ts

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+export const atomFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+  },
+];
+export const atomTableColumn: BasicColumn[] = [
+  {
+    title: '字段名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '字段中文名',
+    dataIndex: 'chName',
+  },
+  {
+    title: '关联标准',
+    dataIndex: 'relationStandard',
+  },
+  {
+    title: '原子标签名称',
+    dataIndex: 'atomLabel',
+    slots: { customRender: 'atomLabel' },
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'dataType',
+    slots: { customRender: 'dataType' },
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/atomData.ts

+export const atomTableData = [
+  {
+    businessId: 1,
+    name: 'id',
+    chName: '编号',
+    relationStandard: '',
+    atomLabel: '编号',
+    dataType: '数值',
+  },
+  {
+    businessId: 2,
+    name: 'em_name',
+    chName: '姓名',
+    relationStandard: '',
+    atomLabel: '姓名',
+    dataType: '字符串',
+  },
+  {
+    businessId: 3,
+    name: 'em_idcard',
+    chName: '身份证',
+    relationStandard: '',
+    atomLabel: '身份证',
+    dataType: '字符串',
+  },
+  {
+    businessId: 4,
+    name: 'em_address',
+    chName: '地址',
+    relationStandard: '',
+    atomLabel: '地址',
+    dataType: '字符串',
+  },
+  {
+    businessId: 5,
+    name: 'em_afterschool',
+    chName: '毕业院校',
+    relationStandard: '',
+    atomLabel: '毕业院校',
+    dataType: '字符串',
+  },
+  {
+    businessId: 6,
+    name: 'em_age',
+    chName: '年龄',
+    relationStandard: '',
+    atomLabel: '年龄',
+    dataType: '数量',
+  },
+  {
+    businessId: 7,
+    name: 'em_ancestralhome',
+    chName: '祖籍',
+    relationStandard: '',
+    atomLabel: '祖籍',
+    dataType: '字符串',
+  },
+  {
+    businessId: 8,
+    name: 'em_born',
+    chName: '出身日期',
+    relationStandard: '',
+    atomLabel: '出身日期',
+    dataType: '字符串',
+  },
+];

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

+<template>
+  <PageWrapper title="生成原子标签" dense contentFullHeight fixedHeight>
+    <template #extra>
+      <a-button type="primary">保存</a-button>
+    </template>
+    <template #footer>
+      <BasicTable @register="registerTable">
+        <template #atomLabel="{ text, record }">
+          <span v-if="!hasSelect(record)">{{ text }}</span>
+          <Input v-else v-model:value="record.atomLabel" />
+        </template>
+        <template #dataType="{ text, record }">
+          <span v-if="!hasSelect(record)">{{ text }}</span>
+          <Select
+            v-else
+            v-model:value="record.dataType"
+            style="width: 120px"
+            :options="dataTypeOptions"
+          />
+        </template>
+      </BasicTable>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { Input, Select } from 'ant-design-vue';
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import {
+    atomFormSchema,
+    atomTableColumn,
+  } from '@/views/mallResourceDevelopment/label/labelDevelop/atomLabel/atom.data';
+  import { atomTableData } from '@/views/mallResourceDevelopment/label/labelDevelop/atomLabel/atomData';
+
+  function hasSelect(record) {
+    return getAtomSelectKeys().includes(record.businessId);
+  }
+  const dataTypeOptions = [
+    {
+      label: '数值',
+      value: '数值',
+    },
+    {
+      label: '字符串',
+      value: '字符串',
+    },
+  ];
+  const [registerTable, { getSelectRowKeys: getAtomSelectKeys }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: atomTableData.length,
+        code: '',
+        message: '',
+        data: atomTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns: atomTableColumn,
+    showIndexColumn: false,
+    showTableSetting: false,
+    pagination: false,
+    formConfig: {
+      labelWidth: 80,
+      schemas: atomFormSchema,
+      autoSubmitOnEnter: true,
+    },
+  } as BasicTableProps);
+</script>
+
+<style scoped></style>

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/createLabel/create.data.ts

+import {FormSchema} from "@/components/Form";
+
+export const createHeaderFormSchema: FormSchema[] = [
+  {
+    label: '标签类型',
+    field: 'labelType',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '衍生标签',
+          value: '衍生标签',
+        },
+        {
+          label: '衍生标签',
+          value: '衍生标签',
+        },
+      ],
+    },
+  },
+  {
+    label: '标签分层',
+    field: 'labelLayered',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '分层',
+          value: '分层',
+        },
+      ],
+    },
+  },
+  {
+    label: '配置方式',
+    field: 'configWay',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '规则表达式',
+          value: '规则表达式',
+        },
+      ],
+    },
+  },
+  {
+    label: '更新频率',
+    field: 'labelType',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '随主体更新',
+          value: '随主体更新',
+        },
+      ],
+    },
+  },
+];
+export const createBodyFormSchema: FormSchema[] = [
+  {
+    label: '英文名称',
+    field: 'enName',
+    component: 'Input',
+  },
+  {
+    label: '逻辑说明',
+    field: 'des',
+    component: 'Input',
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/createLabel/createData.ts

+export const tabList = [
+  {
+    id: 1,
+    name: '全职员工',
+  },
+  {
+    id: 2,
+    name: '兼职员工',
+  },
+  {
+    id: 3,
+    name: '其他',
+  },
+];

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

+<template>
+  <PageWrapper :title="title" dense contentFullHeight fixedHeight>
+    <template #extra>
+      <a-button type="primary">关联名单</a-button>
+      <Divider type="vertical" style="height: 32px; background-color: #eff2f9" />
+      <a-button type="primary">基本信息</a-button>
+      <a-button type="primary">保存</a-button>
+      <a-button type="primary">发布版本</a-button>
+      <a-button type="primary">版本管理</a-button>
+      <a-button type="primary">更新记录</a-button>
+    </template>
+    <template #footer>
+      <BasicForm @register="headerForm" />
+      <div class="flex" style="margin: 0 -24px; border-top: 1px solid #eaecf6">
+        <!-- 标签分层 -->
+        <div class="w-1/7" style="padding: 10px">
+          <div class="flex justify-between">
+            <span>标签分层</span>
+            <a-button type="link"><PlusOutlined /></a-button>
+          </div>
+          <div>
+            <List>
+              <template v-for="item in tabList" :key="item.id">
+                <List.Item
+                  style="cursor: pointer"
+                  :class="clickId === item.id ? 'select-item' : null"
+                  @click="handleClick(item)"
+                >
+                  <List.Item.Meta>
+                    <template #avatar>
+                      <Icon icon="ion:layers-outline" style="color: #f6c79a" />
+                    </template>
+                    <template #title>
+                      <div :class="clickId === item.id ? 'select-item' : null">
+                        <span>{{ item.name }}</span>
+                      </div>
+                    </template>
+                  </List.Item.Meta>
+                </List.Item>
+              </template>
+            </List>
+          </div>
+        </div>
+        <div class="w-6/7" style="border-left: 1px solid #eaecf6">
+          <!-- 标题 -->
+          <div class="flex" style="padding: 5px 24px">
+            <Icon style="font-size: 22px; color: #f6c79a" icon="ion:layers-outline" />
+            <span style="font-size: 18px">{{ clickItem.name }}</span>
+          </div>
+          <BasicForm @register="bodyForm" />
+          <div style="margin: 40px 25px">
+            <div class="flex" v-for="group in groupList" :key="group.key">
+              <Select
+                v-model:value="group.logic"
+                style="width: 65px; height: 32px"
+                :options="logicOptions"
+              />
+              <div style="border-top: 1px solid #d4d9e6; width: 15px; margin-top: 15px"></div>
+              <div>
+                <div
+                  class="flex"
+                  v-for="item in group.fieldList"
+                  :key="item.key"
+                  style="margin-bottom: 20px"
+                >
+                  <div
+                    style="border-left: 1px solid #d4d9e6; margin-top: 15px; margin-bottom: -36px"
+                  ></div>
+                  <div
+                    style="border-bottom: 1px solid #d4d9e6; width: 15px; margin-bottom: 16px"
+                  ></div>
+                  <div class="flex" style="gap: 10px">
+                    <Select
+                      v-model:value="item.field"
+                      style="width: 300px"
+                      :options="fieldOptions"
+                    />
+                    <Select
+                      v-model:value="item.operator"
+                      style="width: 200px"
+                      :options="operatorOptions"
+                    />
+                    <Input
+                      v-if="!['是NULL', '不是NULL', null, undefined].includes(item.operator)"
+                      v-model:value="item.des"
+                    />
+                    <CloseOutlined @click="handleDel(group.fieldList, item.key)" />
+                  </div>
+                </div>
+                <div class="flex">
+                  <div
+                    style="border-bottom: 1px solid #d4d9e6; width: 15px; margin-bottom: 16px"
+                  ></div>
+                  <div class="flex">
+                    <a-button
+                      style="padding-left: 0"
+                      type="link"
+                      @click="handleAddField(group.fieldList)"
+                      >添加条件</a-button
+                    >
+                    <a-button type="link" @click="handleAddGroup">添加组</a-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import { Divider, List, Select, Input } from 'ant-design-vue';
+  import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { tabList } from './createData';
+  import Icon from '@/components/Icon/Icon.vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import {
+    createBodyFormSchema,
+    createHeaderFormSchema,
+  } from '@/views/mallResourceDevelopment/label/labelDevelop/createLabel/create.data';
+  import { reactive, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
+  const title = route.query.name;
+  const [headerForm] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 5, md: 5 },
+    schemas: createHeaderFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const clickId = ref(tabList[0].id);
+  const clickItem = ref(tabList[0]);
+  function handleClick(item) {
+    clickId.value = item.id;
+    clickItem.value = { ...item };
+  }
+  const [bodyForm] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 11 },
+    schemas: createBodyFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const logicOptions = [
+    {
+      label: '或',
+      value: '或',
+    },
+    {
+      label: '且',
+      value: '且',
+    },
+    {
+      label: '非',
+      value: '非',
+    },
+  ];
+  const fieldOptions = [
+    {
+      label: '编号',
+      value: '编号',
+    },
+    {
+      label: '工作类型',
+      value: '工作类型',
+    },
+  ];
+  const operatorOptions = [
+    {
+      label: '等于',
+      value: '等于',
+    },
+    {
+      label: '不等于',
+      value: '不等于',
+    },
+    {
+      label: '不是NULL',
+      value: '不是NULL',
+    },
+    {
+      label: '是NULL',
+      value: '是NULL',
+    },
+  ];
+  const groupList = reactive([
+    {
+      key: 0,
+      fieldList: [
+        {
+          key: 0,
+        },
+      ],
+    },
+  ]);
+  function handleAddField(fieldList) {
+    fieldList.push({
+      key: fieldList.length,
+    });
+  }
+  function handleAddGroup() {
+    groupList.push({
+      key: groupList.length,
+      fieldList: [
+        {
+          key: 0,
+        },
+      ],
+    });
+  }
+  function handleDel(fieldList, item) {
+    fieldList.splice(item, 1);
+  }
+</script>
+
+<style scoped>
+  /*点击后样式*/
+  .select-item {
+    background-color: #338bfe;
+    color: #ffffff;
+    border-radius: 8px;
+  }
+</style>

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

@@ -31,7 +31,9 @@
               >
               <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="handleAtomLabel"
+                >批量创建原子指标</a-button
+              >
               <a-button class="top-button" type="primary" @click="handleAddLabel"
                 >新建指标</a-button
               >
@@ -45,10 +47,12 @@
                         {
                           // 编辑
                           icon: 'ant-design:edit-outlined',
+                          tooltip: '编辑',
                           onClick: handleBody.bind(null, record),
                         },
                         {
                           // 标签
+                          tooltip: '标签',
                           icon: 'ant-design:book-outlined',
                         },
                       ]"
@@ -82,7 +86,9 @@
                   <a @click="handleBody(record)">{{ text }}</a>
                 </template>
                 <template #originalSubject="{ text, record }">
-                  <a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
+                  <a-button type="primary" @click="handleBody(record)">{{
+                    text + '明细信息'
+                  }}</a-button>
                 </template>
               </BasicTable>
             </template>
@@ -187,6 +193,11 @@
   function handleRemove(record) {
     createMessage.success('删除成功!');
   }
+  function handleAtomLabel() {
+    router.push({
+      path: '/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel',
+    });
+  }
   const router = useRouter();
   function handleBody(record) {
     console.log('recode', record);

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

 import { BasicColumn, FormSchema } from '@/components/Table';
+import { ManOutlined } from '@ant-design/icons-vue';
+import { color } from 'echarts';
 
 export const tabTableColumn: BasicColumn[] = [
   {
@@ -6,57 +8,118 @@ export const tabTableColumn: BasicColumn[] = [
     dataIndex: 'name',
   },
   {
-    title: '描述',
+    title: '指标英文名',
+    dataIndex: 'name',
+  },
+  {
+    title: '指标描述',
     dataIndex: 'txt',
   },
   {
-    title: '创建者',
-    dataIndex: 'createdBy',
+    title: '指标类型',
+    dataIndex: 'type',
   },
   {
-    title: '创建时间',
-    dataIndex: 'createdTime',
-    sorter: true,
+    title: '开发状态',
+    dataIndex: 'status',
+  },
+  {
+    title: '创建者',
+    dataIndex: 'createdBy',
   },
   {
     title: '更新时间',
     dataIndex: 'updateTime',
     sorter: true,
   },
-  {
-    title: '原始主体',
-    dataIndex: 'originalSubject',
-    slots: { customRender: 'originalSubject' },
-  },
 ];
 export const tabTableFormSchema: FormSchema[] = [
   {
-    field: '输入关键字搜索',
+    field: '指标名称/英文名搜索',
     component: 'Input',
     componentProps: {
-      placeholder: '输入关键字搜索',
+      placeholder: '指标名称/英文名搜索',
+      style: {
+        marginLeft: '10px',
+      },
+    },
+  },
+  {
+    field: '开发状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '开发状态',
+      options: [
+        { label: '开发中', value: '1' },
+        { label: '已发布', value: '2' },
+      ],
+      style: {
+        marginLeft: '20px',
+      },
+    },
+  },
+  {
+    field: '指标类型',
+    component: 'Select',
+    componentProps: {
+      placeholder: '指标类型',
+      options: [
+        { label: '类型1', value: '1' },
+        { label: '类型2', value: '2' },
+      ],
+      style: {
+        marginLeft: '30px',
+      },
+    },
+  },
+  {
+    field: '更新时间范围',
+    component: 'DatePicker',
+    componentProps: {
+      placeholder: '更新时间范围',
+      style: {
+        marginLeft: '40px',
+      },
     },
   },
 ];
 export const addTabFormSchema: FormSchema[] = [
   {
-    label: '标签主体路径',
-    field: 'path',
-    slot: 'path',
+    label: '选择指标类型',
+    field: 'type',
+    component: 'Select',
     required: true,
+    componentProps: {
+      options: [
+        { label: '原子指标', value: '1' },
+        { label: '衍生指标', value: '2' },
+        { label: '复合指标', value: '3' },
+      ],
+    },
   },
   {
-    label: '名称',
-    field: 'name',
-    component: 'Input',
-    required: true,
+    label: '原子指标是某一业务行为时间下的度量,是业务定义中不可拆分的指标,例如销售额。',
+    field: 'atom',
+    component: 'BasicTitle',
+    ifShow: ({ values }) => {
+      return values.type === '1';
+    },
   },
   {
-    label: '描述',
-    field: 'txt',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 4,
+    label: '衍生指标是原子指标通过添加维度、过滤条件卷积而成,例如全国各城市7月份销售额',
+    field: 'derived',
+    component: 'BasicTitle',
+    ifShow: ({ values }) => {
+      return values.type === '2';
+    },
+  },
+  {
+    label:
+      '复合指标是由一个或多个衍生指标叠加计算而成,其中的维度、过滤条件均继承于衍生指标,例如利润=销售额-成本。',
+    field: 'compound',
+    component: 'BasicTitle',
+    ifShow: ({ values }) => {
+      return values.type === '3';
     },
   },
 ];

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

@@ -25,7 +25,7 @@ export const labelTreeData = [
             createdBy: 'admin',
             createTime: '2023/05/05 14:22:56',
             updateTime: '2023/05/05 14:22:56',
-            originalSubject: '',
+            originalSubject: '111111111',
           },
           {
             title: 'task_611_2',
@@ -36,7 +36,7 @@ export const labelTreeData = [
             createdBy: 'admin',
             createTime: '2023/05/05 14:22:56',
             updateTime: '2023/05/05 14:22:56',
-            originalSubject: '',
+            originalSubject: '22222222222',
           },
         ],
       },

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

@@ -60,22 +60,15 @@
 <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 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 { columnFormSchema, columnTableColumn, detailFormSchema } from './detail.data';
+  import { columnTableData, gatherData, gatherDataTableHeader } from './detailData';
   import SensitiveWayModel from './sensitiveWayModel.vue';
   import { useModal } from '@/components/Modal';
   import InfoModel from './infoModel.vue';

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

+<template>
+  <PageWrapper title="创建商城标签" dense content-full-height fixed-height>
+    <template #extra>
+      <a-button type="link">
+        <div><RollbackOutlined /></div>取消
+      </a-button>
+      <a-button type="link">
+        <div><CheckOutlined /></div>创建
+      </a-button>
+    </template>
+    <template #footer>
+      <BasicForm @register="topForm">
+        <template #path="{ field, model }">
+          <InputSearch
+            v-model:value="model[field]"
+            placeholder="请选择"
+            enter-button="选择"
+            @search="handlePathSelect"
+          />
+        </template>
+        <template #title1="{ field, model }">
+          <span style="font-size: 15px; font-weight: bolder">默认上架配置</span>
+        </template>
+        <template #downloadDate="{ field, model }">
+          <DatePicker style="width: 100%" v-model:value="model[field]" />
+        </template>
+        <template #visibleRange="{ field, model }">
+          <div class="flex">
+            <Select
+              placeholder="请选择"
+              v-model:value="model[field]"
+              :options="visibleRangeOptions"
+            />
+            <a-button type="primary">选择范围 </a-button>
+          </div>
+        </template>
+      </BasicForm>
+      <div class="title">资源信息</div>
+      <Input style="width: 200px; margin-bottom: 15px" placeholder="搜索资源名称">
+        <template #suffix><SearchOutlined /></template>
+      </Input>
+      <div style="border: 1px solid #dde1ee" class="flex">
+        <div class="w-1/4" style="border-right: 1px solid #dde1ee">
+          <div class="flex" style="padding: 5px 0; background-color: #f5f7fc"> </div>
+          <div style="height: 30px; margin-left: 15px; background-color: #f5f7fc">标签名称</div>
+          <div>
+            <div v-for="item in tagList" :key="item">
+              <div
+                class="flex"
+                style="cursor: pointer; padding: 10px 15px"
+                :class="selectItem === item ? 'select-class' : null"
+                @click="handleItem(item)"
+              >
+                <TagOutlined style="color: #e28c34; margin: 0 10px" />
+                <span>{{ item }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w-3/4" style="padding: 0 10px">
+          <div>
+            <div class="title">资源信息</div>
+          </div>
+          <div>
+            <BasicForm @register="bottomForm" />
+          </div>
+          <div>
+            <div class="title">标签数据预览</div>
+            <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>
+          </div>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { InputSearch, Select, Input, DatePicker } from 'ant-design-vue';
+  import { useForm } from '@/components/Form';
+  import {
+    TagOutlined,
+    RollbackOutlined,
+    CheckOutlined,
+    SearchOutlined,
+  } from '@ant-design/icons-vue';
+  import { bottomFormSchema, rangeTableColumn, topFormSchema } from './upShop.data';
+  import { BaseFormatProps } from 'vue-i18n';
+  import { onMounted, ref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { rangeTableData, gatherData, gatherDataTableHeader } from './upShopData';
+
+  const visibleRangeOptions = [
+    {
+      label: '所有人',
+      value: '所有人',
+    },
+    {
+      label: '部分人',
+      value: '部分人',
+    },
+  ];
+
+  const [gatherDataTable, { setColumns: gatherDataSetColumns }] = useTable({
+    title: '',
+    scroll: { y: 500 },
+    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: false,
+  } as BasicTableProps);
+
+  function handlePathSelect() {}
+
+  const [topForm] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 12 },
+    schemas: topFormSchema,
+    showActionButtonGroup: false,
+  });
+  const tagList = ['衍生', 'address'];
+  const selectItem = ref('衍生');
+
+  function handleItem(item) {
+    selectItem.value = item;
+  }
+
+  const [bottomForm] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 12 },
+    schemas: bottomFormSchema,
+    showActionButtonGroup: false,
+  } as BaseFormatProps);
+  const authority = ref({
+    downLoad: null,
+    apiPull: null,
+  });
+  const [rangeTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: rangeTableData.length,
+        code: '',
+        message: '',
+        data: rangeTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns: rangeTableColumn,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+
+  // 动态头listColumn获取
+  const headerFieldList = [];
+  onMounted(() => {
+    gatherDataTableHeader.forEach((item) => {
+      headerFieldList.push(item.field);
+    });
+  });
+</script>
+
+<style scoped>
+  .select-class {
+    background-color: #e3f1fe;
+  }
+  .title {
+    font-size: 15px;
+    font-weight: bolder;
+    margin: 10px 0;
+  }
+  .bottom-label {
+    text-align: right;
+    padding-right: 10px;
+  }
+</style>

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

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+import { DatePickerProps } from 'ant-design-vue';
+
+export const topFormSchema: FormSchema[] = [
+  {
+    label: '路径',
+    field: 'path',
+    required: true,
+    slot: 'path',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'title1',
+    slot: 'title1',
+    colProps: { span: 24 },
+  },
+  {
+    label: '自动下架日期',
+    field: 'downloadDate',
+    slot: 'downloadDate',
+  },
+  {
+    label: '可见范围',
+    field: 'visibleRange',
+    defaultValue: '所有人',
+    required: true,
+    slot: 'visibleRange',
+  },
+  {
+    label: '共享类型',
+    field: 'shareType',
+    required: true,
+    defaultValue: '有条件共享',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '有条件共享',
+          value: '有条件共享',
+        },
+        {
+          label: '无条件共享',
+          value: '无条件共享',
+        },
+      ],
+    },
+  },
+];
+export const bottomFormSchema: FormSchema[] = [
+  {
+    label: '资源名称',
+    field: 'name',
+    required: true,
+    defaultValue: '衍生',
+    component: 'Input',
+  },
+  {
+    label: '描述',
+    field: 'des',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 2,
+    },
+  },
+  {
+    label: '权属机构',
+    field: 'dept',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      defaultValue: '机构管理/数据平台治理部',
+      options: [
+        {
+          label: '机构管理/数据平台治理部',
+          value: '机构管理/数据平台治理部',
+        },
+      ],
+    },
+  },
+  {
+    label: '业务标签',
+    field: 'businessTag',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '业务标签1',
+          value: '业务标签1',
+        },
+        {
+          label: '业务标签2',
+          value: '业务标签2',
+        },
+      ],
+    },
+  },
+  {
+    label: '敏感状态',
+    field: 'sensitiveStatus',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      defaultValue: '不敏感',
+      options: [
+        {
+          label: '敏感',
+          value: '敏感',
+        },
+        {
+          label: '不敏感',
+          value: '不敏感',
+        },
+      ],
+    },
+  },
+  {
+    label: '开放权限',
+    field: 'openPermission',
+    component: 'Select',
+    componentProps: {
+      defaultValue: '取数',
+      options: [
+        {
+          label: '取数',
+          value: '取数',
+        },
+        {
+          label: '无',
+          value: '无',
+        },
+      ],
+    },
+  },
+];
+export const rangeTableColumn: BasicColumn[] = [
+  {
+    title: '字段名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+  },
+];
+
+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' },
+  },
+];

src/views/mallResourceDevelopment/benchmark/benchmarkManagement/upShop/upShopData.ts

+import Mock from "mockjs";
+
+export const rangeTableData = [
+  {
+    name: 'field1',
+    type: 'varchar(255)',
+  },
+  {
+    name: 'field2',
+    type: 'varchar(255)',
+  },
+  {
+    name: 'field3',
+    type: 'varchar(255)',
+  },
+];
+
+export const gatherData = (num) => {
+  return Mock.mock({
+    [`users|${num}`]: [
+      // 根据 num 动态生成用户数量
+      {
+        'id|+1': 1,
+        address: '@county(true)',
+        create_date: '@date("yyyy-MM-dd")',
+        id: '@id',
+        name: '@name',
+      },
+    ],
+  }).users;
+};
+
+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: 'address',
+  },
+  {
+    name: '创建时间',
+    field: 'create_date',
+  },
+  {
+    name: '序列',
+    field: 'id',
+  },
+  {
+    name: '姓名',
+    field: 'name',
+  },
+];