数据共享交换 上架商城

src/views/mallResourceDevelopment/label/labelDevelop/index.vue

@@ -16,7 +16,7 @@
           <PageWrapper :title="tabName">
             <template #extra>
               <a-button type="primary">下架商城</a-button>
-              <a-button type="primary">上架商城</a-button>
+              <a-button type="primary" @click="handleUpStop">上架商城</a-button>
               <a-button type="primary">导入</a-button>
               <a-button type="primary" :disabled="selectDisabled">导出</a-button>
               <a-button type="primary" :disabled="selectDisabled">移动</a-button>
@@ -128,6 +128,12 @@
       },
     });
   }
+
+  function handleUpStop() {
+    router.push({
+      path: '/mallResourceDevelopment/label/labelDevelop/upShop',
+    });
+  }
   function handleRemove(record) {
     createMessage.success('删除成功!');
   }

src/views/mallResourceDevelopment/label/labelDevelop/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/label/labelDevelop/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/label/labelDevelop/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',
+  },
+];