商城资源开发-衍生标签

src/views/mallResourceDevelopment/labelDevelop/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/labelDevelop/createLabel/createData.ts

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

src/views/mallResourceDevelopment/labelDevelop/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(item, 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/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/labelDevelop/index.vue

 <template>
-  <PageWrapper dense>
+  <PageWrapper dense contentFullHeight fixedHeight>
     <template #footer>
       <div class="flex">
         <!--树-->
@@ -18,8 +18,8 @@
               <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" :disabled="selectDisabled">导出</a-button>
+              <a-button type="primary" :disabled="selectDisabled">移动</a-button>
               <a-button type="primary">新建文件夹</a-button>
               <a-button type="primary" @click="handleAtomLabel">生成原子标签</a-button>
             </template>
@@ -27,7 +27,9 @@
               <BasicTable @register="tabTable" ref="tabTableRef">
                 <template #toolbar>
                   <a-button type="primary">批量创建</a-button>
-                  <a-button type="primary">新建标签</a-button>
+                  <a-button type="primary" @click="handleAddLabel" :disabled="!tabName"
+                    >新建标签</a-button
+                  >
                 </template>
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'action'">
@@ -38,7 +40,7 @@
                           icon: 'ant-design:line-chart-outlined',
                         },
                         {
-                          //关系<DeploymentUnitOutlined />
+                          //关系
                           icon: 'ant-design:deployment-unit-outlined',
                         },
                       ]"
@@ -71,16 +73,24 @@
   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 {computed, 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';
+  import { cloneDeep } from 'lodash-es';
 
   const treeData = ref(null);
+  const tabTableRef = ref(null);
+  const selectDisabled = computed(() => {
+    if (tabTableRef.value) {
+      return tabGetRowSelection().selectedRowKeys <= 0;
+    } else {
+      return true;
+    }
+  });
   function handleSelect() {
     const keys = unref(treeData).getSelectedKeys();
     const node = unref(treeData).getSelectedNode(keys[0]);
@@ -88,7 +98,7 @@
     // 获取标题
     tabName.value = node.title;
     if (node.children) {
-      const list = JSON.parse(JSON.stringify(node.children));
+      const list = cloneDeep(node.children);
       list.forEach((item) => {
         item.children = null;
       });
@@ -110,6 +120,14 @@
       path: '/mallResourceDevelopment/labelDevelop/atomLabel',
     });
   }
+  function handleAddLabel() {
+    router.push({
+      path: '/mallResourceDevelopment/labelDevelop/createLabel',
+      query: {
+        name: tabName.value,
+      },
+    });
+  }
   function handleRemove(record) {
     createMessage.success('删除成功!');
   }
@@ -131,7 +149,7 @@
         return { ...response };
       },
 
-      rowKey: 'businessId',
+      rowKey: 'key',
       columns: tabTableColumn,
       rowSelection: true,
       showIndexColumn: false,