标签-图像分析

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

@@ -11,7 +11,7 @@
           />
         </div>
         <div class="w-5/6">
-          <PageWrapper dense contentFullHeight fixedHeight>
+          <PageWrapper :title="tabName" dense contentFullHeight fixedHeight>
             <template #extra>
               <a-button type="primary" :disabled="selectDisabled" @click="handleNewDataGroup">新建数据集</a-button>
               <a-button type="primary" :disabled="selectDisabled">删除</a-button>

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

@@ -119,10 +119,11 @@
     tabTableFormSchema,
   } from '@/views/mallResourceDevelopment/label/label/label.data';
   import { searchFormSchema } from '@/views/auditLog/audi.data';
-  import { useMessage } from '@/hooks/web/useMessage';
+  import {ModalOptionsEx, useMessage} from '@/hooks/web/useMessage';
   import { useRoute, useRouter } from 'vue-router';
   import { useModal } from '@/components/Modal';
   import AddLabelModel from './addLabelModal.vue';
+  import {cloneDeep} from "lodash-es";
 
   const [addLabelModal, { openModal: openAddLabelModel }] = useModal();
   const tabName = ref('');
@@ -134,8 +135,12 @@
     // 获取标题
     tabName.value = node.title;
     if (node.children) {
-      console.log('children', node.children);
-      tabSetTableData(node.children);
+      const list = cloneDeep(node.children);
+      list.forEach((item) => {
+        item.children = null;
+      });
+      console.log('children', list);
+      tabSetTableData(list);
     } else {
       tabSetTableData([node]);
     }
@@ -175,7 +180,7 @@
       onOk() {
         createMessage.success('批量删除成功!');
       },
-    });
+    } as ModalOptionsEx);
   }
   function handleAddLabel() {
     openAddLabelModel(true, {
@@ -193,7 +198,8 @@
       query: { ...record },
     });
   }
-  const [tabTable, { setTableData: tabSetTableData, getRowSelection: tabGetRowSelection }] = useTable({
+  const [tabTable, { setTableData: tabSetTableData, getRowSelection: tabGetRowSelection }] =
+    useTable({
       title: '',
       api: async (params) => {
         console.log(params);

src/views/mallResourceDevelopment/label/portraitAnalysis/detail/detail.data.ts

+import { FormSchema } from '@/components/Form';
+import {BasicColumn} from "@/components/Table";
+
+export const detailFormSchema: FormSchema[] = [
+  {
+    label: '画像名称',
+    field: 'PortraitName',
+    component: 'Input',
+  },
+  {
+    label: '主体名称',
+    field: 'bodyName',
+    component: 'Input',
+  },
+  {
+    label: '描述',
+    field: 'des',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+  },
+  {
+    label: '画像样式',
+    field: 'style',
+    slot: 'style',
+  },
+];
+export const fieldFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+  },
+];
+export const fieldTableColumn: BasicColumn[] = [
+  {
+    title: '字段名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '字段中文名',
+    dataIndex: 'cnName',
+  },
+  {
+    title: '字段分类',
+    dataIndex: 'fieldType',
+  },
+];
+export const tagFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+  },
+];
+export const tagTableColumn: BasicColumn[] = [
+  {
+    title: '标签名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '标签路径',
+    dataIndex: 'path',
+  },
+  {
+    title: '权重值',
+    dataIndex: 'width',
+    slots: { customRender: 'width' },
+  },
+];
+

src/views/mallResourceDevelopment/label/portraitAnalysis/detail/detailData.ts

+export const fieldTableData = [
+  {
+    name: 'em_name',
+    cnName: '姓名',
+    fieldType: '默认分类',
+  },
+  {
+    name: 'em_sex',
+    cnName: '性别',
+    fieldType: '默认分类',
+  },
+  {
+    name: 'em_typework',
+    cnName: '岗位类型',
+    fieldType: '默认分类',
+  },
+  {
+    name: 'em_afterschool',
+    cnName: '毕业学校',
+    fieldType: '默认分类',
+  },
+  {
+    name: 'em_age',
+    cnName: '年龄',
+    fieldType: '默认分类',
+  },
+];
+export const tagTableData = [
+  {
+    name: '毕业于上海',
+    path: '员工主体备份/员工基本信息/毕业于上海',
+    width: 100,
+  },
+  {
+    name: '现金奖励',
+    path: '员工主体备份/员工基本信息/现金奖励',
+    width: 100,
+  },
+  {
+    name: '罚款惩罚',
+    path: '员工主体备份/员工基本信息/罚款惩罚',
+    width: 100,
+  },
+  {
+    name: '优秀员工',
+    path: '员工主体备份/员工基本信息/优秀员工',
+    width: 100,
+  },
+  {
+    name: '考察员工',
+    path: '员工主体备份/员工基本信息/考察员工',
+    width: 100,
+  },
+];

src/views/mallResourceDevelopment/label/portraitAnalysis/detail/index.vue

+<template>
+  <PageWrapper :title="title" dense>
+    <template #extra>
+      <a-button type="primary">预览</a-button>
+      <a-button type="primary">保存</a-button>
+    </template>
+    <template #footer>
+      <div>基本信息</div>
+      <BasicForm @register="registerForm">
+        <template #style="{ field, model }">
+          <div class="flex" style="text-align: center; gap: 10px">
+            <div style="cursor: pointer" @click="model[field] = 0">
+              <AlignLeftOutlined class="style-icon" :class="model[field] === 0 ? 'check-class' : null" />
+              <div>默认</div>
+            </div>
+            <div style="cursor: pointer" @click="model[field] = 1">
+              <Icon icon="ion:body-outline" class="style-icon" :class="model[field] === 1 ? 'check-class' : null" style="font-size: 50px" />
+              <div>人物</div>
+            </div>
+            <div style="cursor: pointer" @click="model[field] = 2">
+              <BankOutlined class="style-icon" :class="model[field] === 2 ? 'check-class' : null" />
+              <div>企业画像</div>
+            </div>
+          </div>
+        </template>
+      </BasicForm>
+      <Divider />
+      <div class="flex">
+        <div class="w-1/2">
+          <div class="flex justify-between" style="padding: 16px 16px 0 32px">
+            <div style="font-size: 16px; font-weight: bolder">属性</div>
+            <a-button type="primary"><PlusOutlined />添加字段</a-button>
+          </div>
+          <BasicTable @register="fieldTable">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      // 删除<DeleteOutlined />
+                      icon: 'ant-design:delete-outlined',
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </div>
+        <div class="w-1/2">
+          <div class="flex justify-between" style="padding: 16px 16px 0 32px">
+            <div style="font-size: 16px; font-weight: bolder">标签</div>
+            <a-button type="primary"><PlusOutlined />添加标签</a-button>
+          </div>
+          <BasicTable @register="tagTable">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      // 删除<DeleteOutlined />
+                      icon: 'ant-design:delete-outlined',
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+            <template #width="{ text, record }">
+              <Input v-model:value="record.width" />
+            </template>
+          </BasicTable>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import { ref } from 'vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Divider, Input } from 'ant-design-vue';
+  import { AlignLeftOutlined, BankOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { useForm } from '@/components/Form';
+  import { editFormSchema } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/model.data';
+  import { useRoute } from 'vue-router';
+  import {
+    detailFormSchema,
+    fieldFormSchema,
+    fieldTableColumn,
+    tagFormSchema,
+    tagTableColumn,
+  } from '@/views/mallResourceDevelopment/label/portraitAnalysis/detail/detail.data';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { ruleData } from '@/views/dataQuality/dataSheet/rule/ruleData';
+  import { ruleFormSchema, ruleTable } from '@/views/dataQuality/dataSheet/rule/rule.data';
+  import {
+    fieldTableData,
+    tagTableData,
+  } from '@/views/mallResourceDevelopment/label/portraitAnalysis/detail/detailData';
+  import TableAction from '@/components/Table/src/components/TableAction.vue';
+
+  const route = useRoute();
+  const title = route.query.title;
+  const [registerForm] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 12 },
+    schemas: detailFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [fieldTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: fieldTableData.length,
+        code: '',
+        message: '',
+        data: fieldTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: fieldTableColumn,
+    striped: false,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      baseColProps: { span: 12 },
+      schemas: fieldFormSchema,
+      autoSubmitOnEnter: true,
+    } as BasicTableProps,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [tagTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tagTableData.length,
+        code: '',
+        message: '',
+        data: tagTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: tagTableColumn,
+    striped: false,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      baseColProps: { span: 12 },
+      schemas: tagFormSchema,
+      autoSubmitOnEnter: true,
+    } as BasicTableProps,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+</script>
+
+<style scoped>
+  .style-icon {
+    font-size: 50px;
+    border: 3px solid #e2e5f1;
+    border-radius: 10px;
+  }
+  .check-class {
+    color: #3b8cf7;
+    border: 3px solid #3b8cf7;
+  }
+</style>

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

+<template>
+  <PageWrapper dense>
+    <template #footer>
+      <div class="flex">
+        <div class="flex w-2/11">
+          <BasicTree
+            class="flex-1"
+            :treeData="labelTreeData"
+            defaultExpandLevel="1"
+            @select="handleSelect"
+            ref="treeData"
+          />
+          <!-- 刷新 -->
+          <a-button type="link" style="padding: 0"><SyncOutlined /></a-button>
+        </div>
+        <div class="w-9/11">
+          <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()"
+                >移动</a-button
+              >
+              <a-button class="top-button" type="primary">新建文件夹</a-button>
+              <a-button class="top-button" type="primary" @click="handleAddPortrait">新建画像</a-button>
+            </template>
+            <template #footer>
+              <BasicTable @register="portraitTable" 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>
+  </PageWrapper>
+</template>
+
+<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 '../label/labelData';
+  import { h, ref, unref } from 'vue';
+  import { Divider } from 'ant-design-vue';
+  import type { BasicTableProps, TableActionType } 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 '@/views/mallResourceDevelopment/label/label/label.data';
+  import { searchFormSchema } from '@/views/auditLog/audi.data';
+  import { ModalOptionsEx, useMessage } from '@/hooks/web/useMessage';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useModal } from '@/components/Modal';
+  import AddLabelModel from '../label/addLabelModal.vue';
+  import { cloneDeep } from 'lodash-es';
+  import {
+    portraitTableColumn,
+    portraitTableFormSchema,
+  } from '@/views/mallResourceDevelopment/label/portraitAnalysis/portrait.data';
+
+  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) {
+      const list = cloneDeep(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);
+  }
+  // 嵌套 -获取树title
+  const tabTableRef = ref(null);
+  function topButtonDisabled() {
+    if (tabTableRef.value) {
+      return tabGetRowSelection().selectedRowKeys <= 0;
+    } else {
+      return false;
+    }
+  }
+  const { createMessage, createConfirm } = useMessage();
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
+  const router = useRouter();
+  function handleBody(record) {
+    console.log('recode', record);
+    router.push({
+      path: '/mallResourceDevelopment/label/label/labelDetail',
+      query: { ...record },
+    });
+  }
+  function handleAddPortrait() {
+    router.push({
+      path: '/mallResourceDevelopment/label/portraitAnalysis/detail',
+      query: {
+        title: tabName.value,
+      },
+    });
+  }
+  const [portraitTable, { 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: 'key',
+      rowSelection: true,
+      columns: portraitTableColumn,
+      showIndexColumn: false,
+      showTableSetting: false,
+      bordered: true,
+      useSearchForm: true,
+      formConfig: {
+        labelWidth: 80,
+        baseColProps: { span: 6 },
+        schemas: portraitTableFormSchema,
+        autoSubmitOnEnter: true,
+      },
+    } as BasicTableProps);
+</script>
+
+<style scoped>
+  .top-button {
+    padding: 0 5px;
+  }
+</style>

src/views/mallResourceDevelopment/label/portraitAnalysis/portrait.data.ts

+import {BasicColumn, FormSchema} from '@/components/Table';
+import {InputProps} from "ant-design-vue";
+
+export const portraitTableFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    } as InputProps,
+  },
+];
+export const portraitTableColumn: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 100,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 100,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 100,
+  },
+];