修改商城文件页面

src/views/mallResourceDevelopment/dataFile/addFileModal.vue

+<template>
+  <BasicModal
+    width="35%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { addFileFormSchema } from './data';
+  import { TreeData } from './dataFileData';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: addFileFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  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 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>

src/views/mallResourceDevelopment/dataFile/data.ts

@@ -130,3 +130,124 @@ export const formSchemaNewFolder: any = [
     },
   },
 ];
+export const addFileFormSchema: any = [
+  {
+    field: 'path',
+    label: '文件路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'name',
+    label: '文件名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入文件名称',
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'remark',
+    label: '描述',
+    component: 'InputTextArea',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'workGroup',
+    label: '权属机构',
+    component: 'TreeSelect',
+    componentProps: {
+      placeholder: '请选择权属机构',
+      treeData: [
+        {
+          title: '部门',
+          businessId: '1',
+          parentId: '0',
+          children: [
+            {
+              title: '测试功能部',
+              businessId: '11',
+              parentId: '1',
+            },
+            {
+              title: '开发部',
+              businessId: '12',
+              parentId: '1',
+            },
+            {
+              title: '市场部',
+              businessId: '13',
+              parentId: '1',
+            },
+            {
+              title: '财务部',
+              businessId: '14',
+              parentId: '1',
+            },
+          ],
+        },
+      ],
+      fieldNames: {
+        label: 'title',
+        value: 'businessId',
+      },
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'tag',
+    label: '业务标签',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择业务标签',
+      options: [
+        { label: '测试', value: '测试' },
+        { label: '开发', value: '开发' },
+        { label: '市场', value: '市场' },
+        { label: '财务', value: '财务' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'sensitive',
+    label: '敏感状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择敏感状态',
+      options: [
+        { label: '是', value: '是' },
+        { label: '否', value: '否' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'security',
+    label: '安全分级',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择安全分级',
+      options: [
+        { label: 'A级', value: 'A级' },
+        { label: 'B级', value: 'B级' },
+        { label: 'C级', value: 'C级' },
+        { label: 'D级', value: 'D级' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/mallResourceDevelopment/dataFile/dataFileData.ts

 export const tableList: any[] = [
   {
+    businessId: 1,
     name: 'test1',
     remark: '这是第一个测试文件的备注信息。',
     workgroup: '测试功能部',
@@ -8,6 +9,7 @@ export const tableList: any[] = [
     uploadStatus: '0',
   },
   {
+    businessId: 2,
     name: 'test2',
     remark: '第二个测试文件，用于测试不同状态的效果。',
     workgroup: '开发部',
@@ -16,6 +18,7 @@ export const tableList: any[] = [
     uploadStatus: '0',
   },
   {
+    businessId: 3,
     name: 'test3',
     remark: '第三个测试文件，模拟已完成所有流程的情况。',
     workgroup: '测试功能部',
@@ -24,6 +27,7 @@ export const tableList: any[] = [
     uploadStatus: '1',
   },
   {
+    businessId: 4,
     name: 'test4',
     remark: '第四个测试文件，检查创建时间排序。',
     workgroup: '市场部',
@@ -32,6 +36,7 @@ export const tableList: any[] = [
     uploadStatus: '1',
   },
   {
+    businessId: 5,
     name: 'test5',
     remark: '第五个测试文件，用于验证不同部门的数据展示。',
     workgroup: '财务部',
@@ -45,8 +50,8 @@ export const TreeData: any[] = [
     delFlag: '0',
     flag: '1',
     businessId: 100,
-    parentWorkSpaceName: '整合',
-    workSpaceName: '整合',
+    parentWorkSpaceName: '我创建的',
+    workSpaceName: '我创建的',
     parentId: 0,
     'code:': '001',
     ancestors: '0',
@@ -59,11 +64,11 @@ export const TreeData: any[] = [
   {
     delFlag: '0',
     flag: '1',
-    businessId: 101,
-    parentWorkSpaceName: '数据加载',
-    workSpaceName: '数据加载',
+    businessId: 201,
+    parentWorkSpaceName: 'test1',
+    workSpaceName: 'test1',
     parentId: 100,
-    'code:': '002',
+    'code:': '003',
     ancestors: '0,100',
     orderNum: 1,
     children: [],
@@ -74,13 +79,13 @@ export const TreeData: any[] = [
   {
     delFlag: '0',
     flag: '1',
-    businessId: 201,
-    parentWorkSpaceName: '数据加载',
-    workSpaceName: '个人工作区',
-    parentId: 101,
-    'code:': '003',
+    businessId: 202,
+    parentWorkSpaceName: 'test2',
+    workSpaceName: 'test2',
+    parentId: 100,
+    'code:': '004',
     ancestors: '0,100',
-    orderNum: 1,
+    orderNum: 2,
     children: [],
     selectType: null,
     createTime: '2024-10-24 10:04:04',
@@ -89,10 +94,10 @@ export const TreeData: any[] = [
   {
     delFlag: '0',
     flag: '1',
-    businessId: 202,
-    parentWorkSpaceName: '数据加载',
-    workSpaceName: '共享工作区',
-    parentId: 101,
+    businessId: 203,
+    parentWorkSpaceName: 'test3',
+    workSpaceName: 'test3',
+    parentId: 100,
     'code:': '004',
     ancestors: '0,100',
     orderNum: 2,
@@ -104,10 +109,10 @@ export const TreeData: any[] = [
   {
     delFlag: '0',
     flag: '1',
-    businessId: 301,
-    parentWorkSpaceName: '个人工作区',
-    workSpaceName: '图标验收',
-    parentId: 201,
+    businessId: 204,
+    parentWorkSpaceName: 'test4',
+    workSpaceName: 'test4',
+    parentId: 100,
     'code:': '004',
     ancestors: '0,100',
     orderNum: 2,
@@ -119,10 +124,10 @@ export const TreeData: any[] = [
   {
     delFlag: '0',
     flag: '1',
-    businessId: 302,
-    parentWorkSpaceName: '共享工作区',
-    workSpaceName: '学生成绩',
-    parentId: 202,
+    businessId: 205,
+    parentWorkSpaceName: 'test5',
+    workSpaceName: 'test5',
+    parentId: 100,
     'code:': '004',
     ancestors: '0,100',
     orderNum: 2,

src/views/mallResourceDevelopment/dataFile/index.vue

@@ -3,18 +3,8 @@
     <GroupTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
       <template #toolbar>
-        <a-button
-          :disabled="getRowSelection().selectedRowKeys <= 0"
-          type="primary"
-          @click="deleteButton"
-          >删除</a-button
-        >
-        <a-button
-          :disabled="getRowSelection().selectedRowKeys <= 0"
-          type="primary"
-          @click="handleMove(1)"
-          >移动</a-button
-        >
+        <a-button type="primary" @click="deleteButton">删除</a-button>
+        <a-button type="primary" @click="handleMove(1)">移动</a-button>
         <a-button type="primary" @click="batchUploading">批量上架</a-button>
         <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
         <a-button type="primary" @click="handleDataEntry">新建文件</a-button>
@@ -41,11 +31,11 @@
             :actions="[
               {
                 label: '上架',
-                onClick: handleMove.bind(null, 0, record),
+                onClick: handleUpload.bind(null, 0, record),
               },
               {
                 label: '删除',
-                onClick: deleteButton.bind(null),
+                onClick: handDelete.bind(null),
               },
             ]"
           />
@@ -54,6 +44,7 @@
     </BasicTable>
     <MoveFile @register="registerMoveFile" />
     <NewFolder @register="registerNewFolder" />
+    <AddFileModal @register="registerAddFileModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -68,10 +59,12 @@
   import NewFolder from './newFolder.vue';
   import GroupTree from './GroupTree.vue';
   import Icon from '@/components/Icon/Icon.vue';
+  import AddFileModal from './addFileModal.vue';
 
   const { createMessage, createConfirm } = useMessage();
   const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
   const [registerNewFolder, { openModal: openNewFolderModal }] = useModal();
+  const [registerAddFileModal, { openModal: openAddFileModal }] = useModal();
   const [registerTable, { reload, getRowSelection }] = useTable({
     api: async () => {
       const response = {
@@ -108,7 +101,9 @@
   });
 
   function handleDataEntry() {
-    openSceneSelectionModal(true);
+    openAddFileModal(true, {
+      title: '新建文件',
+    });
   }
 
   function handleNewFolder() {
@@ -138,6 +133,12 @@
     });
   }
 
+  function handleUpload() {
+    createMessage.success('上架成功!');
+  }
+  function handDelete() {
+    createMessage.success('删除成功!');
+  }
   /**删除按钮*/
   function deleteButton() {
     createConfirm({