商城资源开发-原子标签

src/views/mallResourceDevelopment/labelDevelop/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/labelDevelop/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/labelDevelop/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/labelDevelop/atomLabel/atom.data';
+  import { atomTableData } from '@/views/mallResourceDevelopment/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/labelDevelop/index.vue

+<template>
+  <PageWrapper dense>
+    <template #footer>
+      <div class="flex">
+        <!--树-->
+        <div class="w-1/4">
+          <BasicTree
+            class="flex-1"
+            :treeData="labelTreeData"
+            @select="handleSelect"
+            ref="treeData"
+          />
+        </div>
+        <!--表格-->
+        <div class="w-3/4">
+          <PageWrapper :title="tabName">
+            <template #extra>
+              <a-button type="primary">下架商城</a-button>
+              <a-button type="primary">上架商城</a-button>
+              <a-button type="primary">导入</a-button>
+              <a-button type="primary" :disabled="true">导出</a-button>
+              <a-button type="primary" :disabled="true">移动</a-button>
+              <a-button type="primary">新建文件夹</a-button>
+              <a-button type="primary" @click="handleAtomLabel">生成原子标签</a-button>
+            </template>
+            <template #footer>
+              <BasicTable @register="tabTable" ref="tabTableRef">
+                <template #toolbar>
+                  <a-button type="primary">批量创建</a-button>
+                  <a-button type="primary">新建标签</a-button>
+                </template>
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'action'">
+                    <TableAction
+                      :actions="[
+                        {
+                          //指标
+                          icon: 'ant-design:line-chart-outlined',
+                        },
+                        {
+                          //关系<DeploymentUnitOutlined />
+                          icon: 'ant-design:deployment-unit-outlined',
+                        },
+                      ]"
+                      :dropDownActions="[
+                        {
+                          // 删除
+                          icon: 'ant-design:delete-outlined',
+                          label: '删除',
+                          popConfirm: {
+                            title: '是否确认删除',
+                            placement: 'left',
+                            confirm: handleRemove.bind(null, record),
+                          },
+                          color: 'error',
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+              </BasicTable>
+            </template>
+          </PageWrapper>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../components/Page/src/PageWrapper.vue';
+  import BasicTable from '../../../components/Table/src/BasicTable.vue';
+  import BasicTree from '../../../components/Tree/src/BasicTree.vue';
+  import { useTree } from '@/components/Tree/src/hooks/useTree';
+  import { ref, unref } from 'vue';
+  import { labelTreeData } from './labelData';
+  import TableAction from '@/components/Table/src/components/TableAction.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { tabTableColumn, tabTableFormSchema } from './label.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useRouter } from 'vue-router';
+
+  const treeData = ref(null);
+  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) {
+      const list = JSON.parse(JSON.stringify(node.children));
+      list.forEach((item) => {
+        item.children = null;
+      });
+      console.log('children', list);
+      tabSetTableData(list);
+    } else {
+      tabSetTableData([node]);
+    }
+    // 获取列表
+    // console.log('key', key);
+    // tabName.value = findTitleById(labelTreeData[0], key[0]);
+    // console.log('tabName', tabName.value);
+  }
+  const tabName = ref();
+  const { createMessage } = useMessage();
+  const router = useRouter();
+  function handleAtomLabel() {
+    router.push({
+      path: '/mallResourceDevelopment/labelDevelop/atomLabel',
+    });
+  }
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
+  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: true,
+      showIndexColumn: false,
+      showTableSetting: false,
+      bordered: true,
+      useSearchForm: true,
+      formConfig: {
+        labelWidth: 80,
+        baseColProps: { span: 6 },
+        schemas: tabTableFormSchema,
+        autoSubmitOnEnter: true,
+      },
+      actionColumn: {
+        width: 120,
+        title: '操作',
+        dataIndex: 'action',
+      },
+    } as BasicTableProps);
+</script>
+
+<style scoped></style>

src/views/mallResourceDevelopment/labelDevelop/label.data.ts

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+export const tabTableFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const tabTableColumn: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '关联主体',
+    dataIndex: 'relationBody',
+    width: 120,
+  },
+  {
+    title: '标签类型',
+    dataIndex: 'labelType',
+    width: 120,
+  },
+  {
+    title: '发布状态',
+    dataIndex: 'uploadFlag',
+    width: 120,
+  },
+  {
+    title: '上架状态',
+    dataIndex: 'putFlag',
+    width: 120,
+  },
+  {
+    title: '更新结果',
+    dataIndex: 'updateResult',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 120,
+  },
+];