修改数据集

src/views/mallResourceDevelopment/dataSet/datasetByCreate/addFileModal.vue

@@ -7,23 +7,24 @@
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm" />
+    <EditFileModal @register="registerEditFile" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
   import { addFileFormSchema } from './data';
   import { TreeData } from './dataFileData';
-  import { useMessage } from '@/hooks/web/useMessage';
+  import EditFileModal from './editFileModal.vue';
 
   defineOptions({ name: 'AccountModal' });
 
   const emit = defineEmits(['success', 'register']);
   const isUpdate = ref(true);
-  const { createMessage } = useMessage();
   const title = ref();
-  const rowId = ref('');
+
+  const [registerEditFile, { openModal: openEditFileModal }] = useModal();
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
   const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
@@ -93,7 +94,9 @@
       const values = await validate();
       setModalProps({ confirmLoading: true });
       closeModal();
-      createMessage.success('提交成功');
+      openEditFileModal(true, {
+        title: '编辑文件',
+      });
     } finally {
       setModalProps({ confirmLoading: false });
     }

src/views/mallResourceDevelopment/dataSet/datasetByCreate/data.ts

@@ -154,7 +154,7 @@ export const formSchemaNewFolder: any = [
 export const addFileFormSchema: any = [
   {
     field: 'path',
-    label: '文件路径',
+    label: '数据集路径',
     component: 'TreeSelect',
     rules: [
       {
@@ -173,18 +173,40 @@ export const addFileFormSchema: any = [
   },
   {
     field: 'name',
-    label: '文件名称',
+    label: '数据集名称',
     component: 'Input',
     componentProps: {
       placeholder: '输入文件名称',
     },
     colProps: { lg: 24, md: 24 },
   },
+];
+export const editFileFormSchema: any = [
+  {
+    field: 'name',
+    label: '资源名称',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 10, md: 10 },
+  },
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    colProps: { lg: 10, md: 10 },
+  },
   {
     field: 'remark',
     label: '描述',
-    component: 'InputTextArea',
-    colProps: { lg: 24, md: 24 },
+    component: 'Input',
+    colProps: { lg: 10, md: 10 },
   },
   {
     field: 'workGroup',
@@ -226,7 +248,7 @@ export const addFileFormSchema: any = [
         value: 'businessId',
       },
     },
-    colProps: { lg: 24, md: 24 },
+    colProps: { lg: 10, md: 10 },
   },
   {
     field: 'tag',
@@ -241,34 +263,246 @@ export const addFileFormSchema: any = [
         { label: '财务', value: '财务' },
       ],
     },
+    colProps: { lg: 10, md: 10 },
+  },
+  {
+    field: 'source',
+    label: '来源',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    defaultValue: '元数据',
+    colProps: { lg: 10, md: 10 },
+  },
+];
+export const editFilePermissionsFormSchema: any = [
+  {
+    field: 'download',
+    label: '下载权限',
+    component: 'Switch',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'encrypt',
+    label: '文件加密',
+    component: 'Switch',
+    required: true,
+    ifShow: ({ model }) => model.download === true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'push',
+    label: '推送权限',
+    component: 'Switch',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'hdfs',
+    label: 'HDFS数据源',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择HDFS数据源',
+      options: [
+        { label: 'Hive', value: 'Hive' },
+        { label: 'Hbase', value: 'Hbase' },
+        { label: 'Kafka', value: 'Kafka' },
+      ],
+    },
+    required: true,
+    colProps: { lg: 24, md: 24 },
+    ifShow: ({ model }) => model.push === true,
+  },
+  {
+    field: 'pushType',
+    label: '推送类型',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '增量', value: '1' },
+        { label: '全量', value: '2' },
+      ],
+    },
+    ifShow: ({ model }) => model.push === true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'schedulePush',
+    label: '定时推送',
+    component: 'Switch',
+    required: true,
+    ifShow: ({ model }) => model.push === true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'api',
+    label: 'API调用',
+    component: 'Switch',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'filterType',
+    label: '数据过滤方式',
+    component: 'CheckboxGroup',
+    componentProps: {
+      options: [
+        { label: '自定义条件', value: '1' },
+        { label: '按机构过滤', value: '2' },
+        { label: '按时间过滤', value: '3' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'filterAlter',
+    label: ' ',
+    slot: 'filterAlter',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const editFileOptionsFormSchema: any = [
+  {
+    field: 'autoOffShelfDate',
+    label: '自动下架日期',
+    component: 'Input',
+    required: true,
     colProps: { lg: 24, md: 24 },
   },
   {
-    field: 'sensitive',
-    label: '敏感状态',
+    field: 'shareType',
+    label: '共享方式',
     component: 'Select',
     componentProps: {
-      placeholder: '请选择敏感状态',
+      placeholder: '请选择共享方式',
       options: [
-        { label: '是', value: '是' },
-        { label: '否', value: '否' },
+        { label: '公开', value: '公开' },
+        { label: '私有', value: '私有' },
       ],
     },
+    required: true,
     colProps: { lg: 24, md: 24 },
   },
   {
-    field: 'security',
-    label: '安全分级',
+    field: 'visibleRange',
+    label: '可见范围',
     component: 'Select',
     componentProps: {
-      placeholder: '请选择安全分级',
+      placeholder: '请选择可见范围',
       options: [
-        { label: 'A级', value: 'A级' },
-        { label: 'B级', value: 'B级' },
-        { label: 'C级', value: 'C级' },
-        { label: 'D级', value: 'D级' },
+        { label: '公开', value: '公开' },
+        { label: '私有', value: '私有' },
       ],
     },
+    required: true,
     colProps: { lg: 24, md: 24 },
   },
+  {
+    field: 'filterCondition',
+    label: '数据过滤条件',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const editSourceTableFormSchema: any = [
+  {
+    field: 'source',
+    label: '数据源',
+    component: 'Select',
+    defaultValue: 'Hive',
+    componentProps: {
+      placeholder: '请选择数据源',
+      options: [{ label: 'Hive', value: 'Hive' }],
+      disabled: true,
+    },
+    required: true,
+    colProps: { lg: 10, md: 10 },
+  },
+  {
+    field: 'database',
+    label: '数据库',
+    component: 'Select',
+    defaultValue: 'default',
+    componentProps: {
+      placeholder: '请选择数据源',
+      options: [{ label: 'default', value: 'default' }],
+      disabled: true,
+    },
+    required: true,
+    colProps: { lg: 10, md: 10 },
+  },
+  {
+    field: 'table',
+    label: '数据源表',
+    component: 'Input',
+    defaultValue: 'blood_table',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { lg: 10, md: 10 },
+  },
+  {
+    field: 'size',
+    label: '大小',
+    component: 'Input',
+    defaultValue: '1.8KB',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { lg: 10, md: 10 },
+  },
+];
+export const editColumns: BasicColumn[] = [
+  {
+    title: '字段',
+    dataIndex: 'field',
+    width: 120,
+  },
+  {
+    title: '中文名',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '字段描述',
+    dataIndex: 'remark',
+    width: 120,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+  {
+    title: '安全分级',
+    dataIndex: 'security',
+    width: 150,
+  },
+  {
+    title: '敏感状态',
+    dataIndex: 'status',
+    width: 150,
+  },
+  {
+    title: '敏感类型',
+    dataIndex: 'sensitiveType',
+    width: 100,
+  },
+];
+export const searchEditFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索名称',
+    },
+  },
 ];

src/views/mallResourceDevelopment/dataSet/datasetByCreate/dataFileData.ts

@@ -142,3 +142,68 @@ export const TreeData: any[] = [
     createBy: 'admin',
   },
 ];
+export const editTableList: any[] = [
+  {
+    field: 'user_id',
+    name: '用户ID',
+    remark: '唯一标识每个用户的编号',
+    type: 'INT',
+    security: '高',
+    status: '敏感',
+    sensitiveType: '身份信息',
+  },
+  {
+    field: 'username',
+    name: '用户名',
+    remark: '用户选择的名字，可能不唯一',
+    type: 'VARCHAR(50)',
+    security: '中',
+    status: '非敏感',
+    sensitiveType: '普通信息',
+  },
+  {
+    field: 'email',
+    name: '电子邮箱',
+    remark: '用户的联系邮箱地址',
+    type: 'VARCHAR(100)',
+    security: '高',
+    status: '敏感',
+    sensitiveType: '联系方式',
+  },
+  {
+    field: 'phone_number',
+    name: '电话号码',
+    remark: '用户的联系电话',
+    type: 'VARCHAR(20)',
+    security: '高',
+    status: '敏感',
+    sensitiveType: '联系方式',
+  },
+  {
+    field: 'address',
+    name: '家庭住址',
+    remark: '用户的居住地址',
+    type: 'TEXT',
+    security: '中',
+    status: '敏感',
+    sensitiveType: '位置信息',
+  },
+  {
+    field: 'birth_date',
+    name: '出生日期',
+    remark: '用户的生日',
+    type: 'DATE',
+    security: '低',
+    status: '非敏感',
+    sensitiveType: '个人信息',
+  },
+  {
+    field: 'last_login',
+    name: '最后登录时间',
+    remark: '用户最近一次登录的时间戳',
+    type: 'DATETIME',
+    security: '低',
+    status: '非敏感',
+    sensitiveType: '活动记录',
+  },
+];

src/views/mallResourceDevelopment/dataSet/datasetByCreate/editFileModal.vue

+<template>
+  <BasicModal
+    width="60%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <Description size="middle" title="基本信息" :bordered="false" />
+    <div>
+      <BasicForm @register="registerForm" />
+    </div>
+    <Description size="middle" title="源表信息" :bordered="false" />
+    <div>
+      <BasicForm @register="registerSourceTableForm" />
+    </div>
+    <Description size="middle" title="列信息" :bordered="false" />
+    <div>
+      <BasicTable @register="registerTable">
+        <template #bodyCell="{ column }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  label: '编辑',
+                },
+                {
+                  label: '删除',
+                  onClick: deleteButton.bind(null),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <Description size="middle" title="开放权限" :bordered="false" />
+    <div>
+      <BasicForm @register="registerPermissionsForm">
+        <template #filterAlter>
+          <Alert
+            show-icon
+            message="数据过滤配置仅在开放下载或推送权限后生效，用户在下载或推送资源时可以选择对应的数据过滤方式。"
+            type="info"
+            style="font-size: 14px"
+          />
+        </template>
+      </BasicForm>
+    </div>
+    <Description size="middle" title="默认上架配置" :bordered="false" />
+    <div>
+      <BasicForm @register="registerOptionsForm" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    editColumns,
+    editFileFormSchema,
+    editFileOptionsFormSchema,
+    editFilePermissionsFormSchema,
+    editSourceTableFormSchema,
+    searchEditFormSchema,
+  } from './data';
+  import { editTableList, TreeData } from './dataFileData';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Description } from '@/components/Description';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { Alert } from 'ant-design-vue';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const { createMessage } = useMessage();
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 120,
+    schemas: editFileFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const [registerSourceTableForm] = useForm({
+    labelWidth: 120,
+    schemas: editSourceTableFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const [registerPermissionsForm] = useForm({
+    labelWidth: 120,
+    schemas: editFilePermissionsFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const [registerOptionsForm] = useForm({
+    labelWidth: 120,
+    schemas: editFileOptionsFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const [registerTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: editTableList.length,
+        code: '',
+        message: '',
+        data: editTableList,
+      };
+      return { ...response };
+    },
+    columns: editColumns,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchEditFormSchema,
+      autoSubmitOnEnter: true,
+      showActionButtonGroup: false,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 通过id获取行详情信息
+      // 塞值
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    title.value = data.title;
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'path',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+  });
+
+  function deleteButton() {
+    createMessage.success('删除成功');
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      closeModal();
+      createMessage.success('提交成功');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modalRow {
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .clearAll {
+      padding-right: 10px;
+      font-size: 16px;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .addDialogBG {
+    margin: 10px;
+    border-radius: 10px;
+    padding: 20px;
+    background-color: #e8ecf7;
+    width: 98%;
+    height: 400px;
+  }
+</style>