Merge remote-tracking branch 'origin/master'

src/views/mallResourceDevelopment/labelDevelop/group/addGroup/add.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',
+    component: 'DatePicker',
+  },
+  {
+    label: '可见范围',
+    field: 'visibleRange',
+    required: true,
+    slot: 'visibleRange',
+  },
+  {
+    label: '共享类型',
+    field: 'shareType',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '有条件共享',
+          value: '有条件共享',
+        },
+        {
+          label: '无条件共享',
+          value: '无条件共享',
+        },
+      ],
+    },
+  },
+];
+export const bottomFormSchema: FormSchema[] = [
+  {
+    label: '资源名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '描述',
+    field: 'des',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: '2',
+    },
+  },
+  {
+    label: '权属机构',
+    field: 'dept',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      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: {
+      options: [
+        {
+          label: '敏感',
+          value: '敏感',
+        },
+        {
+          label: '不敏感',
+          value: '不敏感',
+        },
+      ],
+    },
+  },
+];
+export const rangeTableColumn: BasicColumn[] = [
+  {
+    title: '字段名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+  },
+];

src/views/mallResourceDevelopment/labelDevelop/group/addGroup/addData.ts

+export const rangeTableData = [
+  {
+    name: 'field1',
+    type: 'varchar(255)',
+  },
+  {
+    name: 'field2',
+    type: 'varchar(255)',
+  },
+  {
+    name: 'field3',
+    type: 'varchar(255)',
+  },
+];

src/views/mallResourceDevelopment/labelDevelop/group/addGroup/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>
+      <div style="border: 1px solid #dde1ee" class="flex">
+        <div class="w-1/4">
+          <div class="flex" style="padding: 5px 0; background-color: #f5f7fc">
+            <span style="padding: 5px 15px">群组</span>
+            <Input style="width: 200px" placeholder="搜索名称" />
+          </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>
+            <div class="flex">
+              <div class="bottom-label">下载</div>
+              <Switch v-model:checked="authority.downLoad" />
+            </div>
+            <Divider />
+            <div class="flex">
+              <div class="bottom-label">API调用-拉取</div>
+              <Switch v-model:checked="authority.apiPull" />
+            </div>
+            <Divider />
+            <div>
+              <div class="title">选择字段范围</div>
+              <BasicTable @register="rangeTable" />
+            </div>
+          </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, Switch, Divider, DatePicker } from 'ant-design-vue';
+  import { useForm } from '@/components/Form';
+  import { formSchema } from '@/views/auditLog/audi.data';
+  import { TagOutlined, RollbackOutlined, CheckOutlined } from '@ant-design/icons-vue';
+  import {
+    bottomFormSchema,
+    rangeTableColumn,
+    topFormSchema,
+  } from '@/views/mallResourceDevelopment/labelDevelop/group/addGroup/add.data';
+  import { BaseFormatProps } from 'vue-i18n';
+  import { ref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { getMetadataColumns } from '@/views/dataIntegration/dataLoading/dataEntryLake/offlineLoading.data';
+  import { rangeTableData } from '@/views/mallResourceDevelopment/labelDevelop/group/addGroup/addData';
+
+  const visibleRangeOptions = [
+    {
+      label: '所有人',
+      value: '所有人',
+    },
+    {
+      label: '部分人',
+      value: '部分人',
+    },
+  ];
+
+  function handlePathSelect() {}
+
+  const [topForm] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 12 },
+    schemas: topFormSchema,
+    showActionButtonGroup: false,
+  });
+  const tagList = ['员工类型信息缺失的男员工'];
+  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,
+  });
+</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/labelDevelop/group/group.data.ts

+import {BasicColumn, FormSchema} from '@/components/Table';
+import {InputProps} from "ant-design-vue";
+
+export const gourpTableFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    } as InputProps,
+  },
+];
+export const groupTableColumn: BasicColumn[] = [
+  {
+    title: '群组名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+  },
+  {
+    title: '执行时间',
+    dataIndex: 'runTime',
+  },
+  {
+    title: '执行状态',
+    dataIndex: 'runStatus',
+  },
+  {
+    title: '数据量',
+    dataIndex: 'dataNum',
+  },
+  {
+    title: '新建数据集状态',
+    dataIndex: 'newDataGroupStatus',
+  },
+];

src/views/mallResourceDevelopment/labelDevelop/group/groupData.ts

+export const groupTreeData = [
+  {
+    title: '群组管理',
+    key: '0',
+    name: '群组管理',
+    list: [
+      {
+        businessId: 1,
+        name: '共享工作区',
+        updateTime: '2023/06/08 20:19:33',
+      },
+    ],
+    children: [
+      {
+        title: '共享工作区',
+        name: '共享工作区',
+        key: '0-0',
+        list: [
+          {
+            businessId: 2,
+            name: '员工主体',
+            updateTime: '2023/06/08 20:19:33',
+          },
+        ],
+        children: [
+          {
+            title: '员工主体',
+            key: '0-0-0',
+            name: '员工主体',
+            list: [
+              {
+                businessId: 3,
+                name: '员工类型信息',
+                owner: 'admin',
+                updateTime: '2023/06/08 20:19:33',
+                runTime: '2023/06/08 20:19:33',
+                runStatus: '执行成功',
+                dataNum: '41',
+                newDataGroupStatus: '未新建',
+              },
+              {
+                businessId: 4,
+                name: '特殊退役人员',
+                owner: 'admin',
+                updateTime: '2023/06/08 17:43:11',
+                runTime: '2023/06/08 17:43:11',
+                runStatus: '执行成功',
+                dataNum: '0',
+                newDataGroupStatus: '已新建',
+              },
+            ],
+          },
+        ],
+      },
+    ]
+  }
+]

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

+<template>
+  <PageWrapper dense>
+    <template #footer>
+      <div class="flex">
+        <div class="w-1/6">
+          <BasicTree
+            class="flex-1"
+            :treeData="groupTreeData"
+            @select="handleSelect"
+            ref="treeData"
+          />
+        </div>
+        <div class="w-5/6">
+          <PageWrapper dense contentFullHeight fixedHeight>
+            <template #extra>
+              <a-button type="primary" :disabled="selectDisabled" @click="handleNewDataGroup">新建数据集</a-button>
+              <a-button type="primary" :disabled="selectDisabled">删除</a-button>
+              <a-button type="primary">新建群组</a-button>
+            </template>
+            <template #footer>
+              <BasicTable @register="groupTable" :searchInfo="searchInfo" ref="basicTable">
+                <template #bodyCell="{ column }">
+                  <template v-if="column.key === 'action'">
+                    <TableAction
+                      :actions="[
+                        {
+                          //编辑
+                          icon: 'ant-design:edit-outlined',
+                        },
+                        {
+                          //运行
+                          icon: 'ion:play-outline',
+                        },
+                        {
+                          //终止
+                          icon: 'ion:power-outline',
+                        },
+                        {
+                          //下载
+                          icon: 'ant-design:download-outlined',
+                        },
+                        {
+                          //删除
+                          icon: 'ant-design:delete-outlined',
+                        },
+                        {
+                          //添加表格
+                          icon: 'ant-design:file-add-outlined',
+                        },
+                        {
+                          //表格详情查询
+                          icon: 'ant-design:file-search-outlined',
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+              </BasicTable>
+            </template>
+          </PageWrapper>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
+  import BasicTree from '../../../../components/Tree/src/BasicTree.vue';
+  import { groupTreeData } from './groupData';
+  import { BasicTableProps, useTable, BasicTable, TableAction } from '@/components/Table';
+  import { labelTableData } from '@/views/dataStandards/labelDropInspection/labelData';
+  import {
+    labelColumn,
+    labelFormSchemas,
+  } from '@/views/dataStandards/labelDropInspection/label.data';
+  import {computed, reactive, ref, unref} from 'vue';
+  import {
+    gourpTableFormSchema,
+    groupTableColumn,
+  } from '@/views/mallResourceDevelopment/labelDevelop/group/group.data';
+  import { FormProps } from 'ant-design-vue';
+  import { cloneDeep } from 'lodash-es';
+  import {useRouter} from "vue-router";
+
+  const treeData = ref();
+  const tabName = ref();
+  const basicTable = ref(null);
+  const selectDisabled = computed(() => {
+    if (tabName.value) {
+      return getGroupRowSelection().selectedRowKeys <= 0;
+    } else {
+      return true;
+    }
+  });
+  const router = useRouter();
+  function handleNewDataGroup() {
+    router.push({
+      path: '/mallResourceDevelopment/labelDevelop/group/addGroup',
+    });
+  }
+  function handleSelect() {
+    const keys = unref(treeData).getSelectedKeys();
+    const node = unref(treeData).getSelectedNode(keys[0]);
+    console.log('node', node);
+    // 获取标题
+    tabName.value = node.title;
+    if (node.list) {
+      const list = cloneDeep(node.list);
+      console.log('children', list);
+      setGroupData(list);
+    } else {
+      setGroupData([]);
+    }
+    // 获取列表
+    // console.log('key', key);
+    // tabName.value = findTitleById(labelTreeData[0], key[0]);
+    // console.log('tabName', tabName.value);
+  }
+  const searchInfo = reactive<Recordable>({});
+  const [groupTable, { setTableData: setGroupData, getRowSelection: getGroupRowSelection }] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: [].length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: groupTableColumn,
+    showIndexColumn: false,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    formConfig: {
+      labelWidth: 120,
+      baseColProps: { span: 6 },
+      schemas: gourpTableFormSchema,
+      autoSubmitOnEnter: true,
+    } as FormProps,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    actionColumn: {
+      width: 300,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  } as BasicTableProps);
+</script>
+
+<style scoped></style>