Merge remote-tracking branch 'origin/master'

src/router/routes/index.ts

@@ -231,7 +231,30 @@ export const DatasetByCreateDetailRoute: AppRouteRecordRaw = {
       component: () =>
         import('@/views/mallResourceDevelopment/dataSet/datasetByCreate/datasetByCreateDetail.vue'),
       meta: {
-        title: '数据集详情',
+        title: '我创建的数据集详情',
+        icon: '',
+      },
+    },
+  ],
+};
+/**商城资源开发-文件*/
+export const MallSourceFileRoute: AppRouteRecordRaw = {
+  path: '/file',
+  name: '/file',
+  component: LAYOUT,
+  meta: {
+    title: '文件',
+    icon: '',
+    hidden: true,
+    currentActiveMenu: '/file',
+  },
+  children: [
+    {
+      path: 'fileByApply/fileByApplyDetail',
+      name: 'fileByApplyDetail',
+      component: () => import('@/views/mallResourceDevelopment/file/fileByApply/fileByApplyDetail.vue'),
+      meta: {
+        title: '我申请的文件详情',
         icon: '',
       },
     },
@@ -1093,6 +1116,7 @@ export const basicRoutes = [
   dataBaseToDataBaseRoute,
   RootRoute,
   sqlExecuteRoute,
+  MallSourceFileRoute,
   shellExecuteRoute,
   DatasetByCreateDetailRoute,
   SyncMaintenanceRoute,

src/views/dataIntegration/dataLoading/fileLoading/addDataConversionRuleModal.vue

+<template>
+  <BasicModal width="40%" v-bind="$attrs" @register="registerModal" @ok="handleSubmit">
+    <template #title>
+      <span style="font-size: 23px; font-weight: lighter">新建规则</span>
+    </template>
+    <Span style="font-size: 18px">
+      <Icon
+        style="margin-right: 5px; font-size: 18px"
+        :color="'#5cb3ff'"
+        icon="material-symbols:table-convert-outline"
+      />数据转换规则
+    </Span>
+    <List>
+      <Row :gutter="16">
+        <template v-for="item in cardRuleList" :key="item.title">
+          <Col :span="12">
+            <ListItem>
+              <Card :hoverable="true" class="sceneSelectionCard" @click="handleNewModal(item.type)">
+                <div class="sceneSelectionTitle">
+                  {{ item.title }}
+                </div>
+                <div class="sceneSelectionDescription">
+                  {{ item.description }}
+                </div>
+              </Card>
+            </ListItem>
+          </Col>
+        </template>
+      </Row>
+    </List>
+  </BasicModal>
+  <NewFieldRuleModal @register="registerNewFieldRuleModal" />
+  <DataTransformationRuleModal @register="registerDataTransformationRuleModal" />
+  <DataFilterRuleModal @register="dataFilterRuleModal" />
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { Card, Row, Col, List, ListItem } from 'ant-design-vue';
+  import { cardRuleList } from './fileData';
+  import NewFieldRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/newFieldRuleModal.vue';
+  import DataTransformationRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataTransformationRuleModal.vue';
+  import SingleTableFieldMappingRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/singleTableFieldMappingRuleModal.vue';
+  import DataFilterRuleModal from './dataFilterRuleModal.vue';
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {});
+
+  const [registerNewFieldRuleModal, { openModal: openNewFieldRuleModal }] = useModal();
+  const [registerDataTransformationRuleModal, { openModal: openDataTransformationRuleModal }] =
+    useModal();
+  const [dataFilterRuleModal, { openModal: openDataFilterRuleModal }] = useModal();
+
+  function handleNewModal(type) {
+    console.log(type);
+    switch (type) {
+      case 'newFieldRule':
+        openNewFieldRuleModal(true);
+        break;
+      case 'dataTransformationRule':
+        openDataTransformationRuleModal(true);
+        break;
+      case 'dataFilterRule':
+        openDataFilterRuleModal(true);
+        break;
+      default:
+        console.log('Unknown rule type');
+    }
+  }
+
+  function handleSubmit() {
+    closeModal();
+  }
+
+  onMounted(() => {
+    setModalProps({ canFullscreen: false, okText: '下一步' });
+  });
+</script>
+<style lang="scss" scoped>
+  .sceneSelectionCard {
+    height: 120px;
+    flex-direction: column;
+  }
+
+  .sceneSelectionIcon {
+    font-size: 40px !important;
+    margin-bottom: 16px;
+  }
+
+  .sceneSelectionTitle {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .sceneSelectionDescription {
+    font-size: 14px;
+    color: #78787c;
+    text-align: left;
+    line-height: 1.2;
+  }
+</style>

src/views/dataIntegration/dataLoading/fileLoading/dataFilterRuleModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <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 { dataFilterRuleModalFormSchema } from '@/views/dataIntegration/dataLoading/fileLoading/file.data';
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  const getTitle = '数据过滤规则';
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate, clearValidate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { span: 24 },
+      schemas: dataFilterRuleModalFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+  function handleCancel() {
+    clearValidate();
+  }
+</script>

src/views/dataIntegration/dataLoading/fileLoading/file.data.ts

 import {FormSchema} from "@/components/Form";
 import {BasicColumn} from "@/components/Table";
+import {InputProps} from "ant-design-vue";
 
 export const fileUploadSchema: FormSchema[] = [
   {
@@ -51,19 +52,7 @@ export const fileUploadSchema: FormSchema[] = [
       return model.type === '文件系统';
     },
     defaultValue: '全量文件加载',
-    component: 'RadioGroup',
-    componentProps: {
-      options: [
-        {
-          label: '全量文件加载',
-          value: '全量文件加载',
-        },
-        {
-          label: '增量文件加载',
-          value: '增量文件加载',
-        },
-      ],
-    },
+    slot: 'loadingType',
   },
   {
     label: '数据源',
@@ -475,3 +464,20 @@ export const showTableColumn: BasicColumn[] = [
     slots: { customRender: 'targetColumnName' },
   },
 ];
+export const dataFilterRuleModalFormSchema: FormSchema[] = [
+  {
+    label: '规则名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '自定义规则',
+    field: 'rule',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入自定义过滤规则',
+      rows: 4,
+    } as InputProps,
+  },
+];

src/views/dataIntegration/dataLoading/fileLoading/fileData.ts

-export const fileData = [
-  {
-    c1: '100',
-    c2: '1132',
-    c3: '',
-    c4: '',
-    c5: '1.1',
-    c6: '',
-    c7: '',
-    c8: '',
-    c9: '',
-    c10: '',
-  },
-  {
-    c1: '101',
-    c2: '1200',
-    c3: '',
-    c4: '',
-    c5: '1.1',
-    c6: '',
-    c7: '',
-    c8: '',
-    c9: '',
-    c10: '',
-  },
-  {
-    c1: '102',
-    c2: '1200',
-    c3: '',
-    c4: '',
-    c5: '1.1',
-    c6: '',
-    c7: '',
-    c8: '',
-    c9: '',
-    c10: '',
-  },
-  {
-    c1: '103',
-    c2: '1200',
-    c3: '',
-    c4: '',
-    c5: '1.1',
-    c6: '',
-    c7: '',
-    c8: '',
-    c9: '',
-    c10: '',
-  },
-];
+import Mock, { Random } from 'mockjs';
+
+// 自定义函数：生成在指定日期范围内的随机日期
+function getRandomDate(start, end) {
+  const startTime = new Date(start).getTime();
+  const endTime = new Date(end).getTime();
+  const randomTime = new Date(startTime + Math.random() * (endTime - startTime));
+  return randomTime.toISOString().slice(0, 19).replace('T', ' '); // 格式化为 "yyyy-MM-dd HH:mm:ss"
+}
+const startDate = '2023-01-01 00:00:00'; // 起始日期
+const endDate = '2024-12-31 23:59:59'; // 结束日期
+
+export const fileData = (num) => {
+  return Mock.mock({
+    [`list|${num}`]: [
+      // 根据 num 动态生成用户数量
+      {
+        'c1|+1': 1,
+        'c2|18-60': 1,
+        c3: '@cname',
+        c4: '@pick(["男", "女"])',
+        'c5|170-190': 1,
+        c6: function () {
+          return getRandomDate(startDate, endDate);
+        },
+        c7: function () {
+          return getRandomDate(startDate, endDate);
+        },
+        c8: '@cname',
+        c9: '@cname',
+        c10: '@sentence(5, 10)',
+      },
+    ],
+  }).list;
+};
 export const dataSourceData = [
   {
     businessId: 1,
@@ -77,3 +62,37 @@ export const dataSourceFieldData = [
     fieldRemark: null,
   },
 ];
+export const cardRuleList = [
+  {
+    title: '【全局】新增字段规则',
+    type: 'newFieldRule',
+    description: '为源端所有数据表都新增一个字段，例如为每张表增加一个入库时间列',
+  },
+  {
+    title: '数据转换规则',
+    type: 'dataTransformationRule',
+    description: '根据业务需求，对源端单张数据表的单个字段进行数据转换操作',
+  },
+  {
+    title: '数据过滤规则',
+    type: 'dataFilterRule',
+    description: '根据业务需求，对源端单张数据表的数据进行过滤操作',
+  },
+];
+export const mappingRuleConfigurationTableList = [
+  {
+    businessId: 1,
+    ruleName: '[全局] 新增字段规则',
+    ruleContent: '新增字段名称:a, 字段类型:string, 字段表达式:asd',
+  },
+  {
+    businessId: 2,
+    ruleName: '数据转换规则',
+    ruleContent: '数据表: table1, 已有字段: field1, 转换规则: 配置规则',
+  },
+  {
+    businessId: 3,
+    ruleName: '数据过滤规则',
+    ruleContent: "自定义规则:field1 != 'axxc'",
+  },
+];

src/views/dataIntegration/dataLoading/fileLoading/index.vue

@@ -3,7 +3,7 @@
     <template #footer>
       <Tabs v-model:activeKey="activeKey">
         <TabPane key="1" tab="源端配置">
-          <div style="display: flex">
+          <div style="display: flex; padding-top: 20px; gap: 20px">
             <BasicForm class="w-1/3" @register="fileForm">
               <template #file="{ field, model }">
                 <Upload
@@ -20,6 +20,15 @@
                 </Upload>
                 <span style="color: #dbdcdd; font-size: 12px">仅支持上传单个文件或zip包</span>
               </template>
+              <template #loadingType="{ field, model }">
+                <RadioGroup v-model:value="model[field]" :options="loadingTypeOptions" />
+                <Alert
+                  v-if="model[field] === '增量文件加载'"
+                  show-icon
+                  message="仅支持HDFS类型的文件系统"
+                  style="margin-top: 15px"
+                />
+              </template>
               <template #path="{ field, model }">
                 <div style="display: flex">
                   <Input v-model:value="model[field]" />
@@ -59,8 +68,12 @@
             </BasicForm>
             <div class="w-2/3">
               <Alert show-icon message="由于数据量太大，只展示前10行数据" />
-              <Alert show-icon message="当前服务将会表头中把除了下划线以外其他特殊字符转为下划线" />
-              <BasicTable v-if="showFileTable" @register="fileTable">
+              <Alert
+                style="margin-top: 10px"
+                show-icon
+                message="当前服务将会表头中把除了下划线以外其他特殊字符转为下划线"
+              />
+              <BasicTable style="margin-top: 15px" v-if="showFileTable" @register="fileTable">
                 <template #toolbar>
                   <div style="flex: 1; display: flex; justify-content: space-between">
                     <Input style="width: 200px" v-model:value="key" placeholder="关键字搜索" />
@@ -400,7 +413,8 @@
   import {
     compareColumns,
     compareSearchFormSchema,
-    getMetadataColumns, mappingRuleConfigurationColumns,
+    getMetadataColumns,
+    mappingRuleConfigurationColumns,
     tabularPresentationColumns,
     tabularPresentationSearchFormSchema,
   } from '@/views/dataIntegration/dataLoading/dataEntryLake/offlineLoading.data';
@@ -412,18 +426,19 @@
     dataSourceData,
     dataSourceFieldData,
     fileData,
+    mappingRuleConfigurationTableList,
   } from '@/views/dataIntegration/dataLoading/fileLoading/fileData';
   import { useMessage } from '@/hooks/web/useMessage';
   import type { UploadChangeParam } from 'ant-design-vue';
   import {
-    compareTableList, mappingRuleConfigurationTableList,
+    compareTableList,
     tabularPresentationTableList,
   } from '@/views/dataIntegration/dataLoading/dataEntryLake/mock';
   import ViewLogModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue';
   import PartitionedDataProcessingModal from '@/views/dataIntegration/dataLoading/dataEntryLake/PartitionedDataProcessingModal.vue';
   import ClearConfigurationModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ClearConfigurationModal.vue';
   import BatchScaleNameMappingModal from '@/views/dataIntegration/dataLoading/dataEntryLake/BatchScaleNameMappingModal.vue';
-  import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue';
+  import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/fileLoading/addDataConversionRuleModal.vue';
 
   const key = ref('');
   const activeKey = ref('1');
@@ -444,6 +459,16 @@
     model.fileName = fileList.value[0].name;
     model.sheetName = 'Sheet1,Sheet2,Sheet3';
   };
+  const loadingTypeOptions = [
+    {
+      label: '全量文件加载',
+      value: '全量文件加载',
+    },
+    {
+      label: '增量文件加载',
+      value: '增量文件加载',
+    },
+  ];
   const [fileForm, { validate: fileValidate, getFieldsValue: getFileFormValue }] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 24, md: 24 },
@@ -461,6 +486,7 @@
               content: '确认覆盖之前的解析结果吗？',
               onOk() {
                 createMessage.success('覆盖成功!');
+                fileReload();
               },
             });
           }
@@ -668,16 +694,16 @@
     },
   ];
   const showFileTable = ref(false);
-  const [fileTable] = useTable({
+  const [fileTable, { reload: fileReload }] = useTable({
     api: async () => {
       const response = {
         pageNu: '1',
         pageSize: '5',
         pages: '1',
-        total: fileData.length,
+        total: fileData(10).length,
         code: '',
         message: '',
-        data: fileData,
+        data: fileData(10),
       };
       return { ...response };
     },

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

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const applyColumns: BasicColumn[] = [
+  {
+    title: '资源名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '编目',
+    dataIndex: 'cataloging',
+    width: 120,
+  },
+  {
+    title: '权属机构',
+    dataIndex: 'workGroup',
+    width: 120,
+  },
+  {
+    title: '发布者',
+    dataIndex: 'publisher',
+    width: 120,
+  },
+  {
+    title: '发布时间',
+    dataIndex: 'publishTime',
+    width: 120,
+  },
+  {
+    title: '我的权限',
+    dataIndex: 'permission',
+    width: 120,
+  },
+];
+export const applyFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索资源名称',
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'workGroup',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '权属机构',
+      options: [
+        { label: '测试功能部', value: '11' },
+        { label: '开发部', value: '12' },
+        { label: '市场部', value: '13' },
+        { label: '财务部', value: '14' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'permission',
+    label: '',
+    component: 'Select',
+    componentProps: {
+      placeholder: '我的权限',
+      options: [
+        { label: '全部', value: '1' },
+        { label: '创建', value: '2' },
+        { label: '编辑', value: '3' },
+        { label: '删除', value: '4' },
+        { label: '查看', value: '5' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+];

src/views/mallResourceDevelopment/dataSet/dataSetByApply/datasetByApplyData.ts

+export const applySuccessData: any[] = [
+  {
+    name: '年度财务报告',
+    cataloging: '财务部/2024/12',
+    workGroup: '财务管理部',
+    publisher: '张伟',
+    publishTime: '2024-12-01',
+    permission: '可编辑',
+  },
+  {
+    name: '市场分析报告',
+    cataloging: '市场部/2024/11',
+    workGroup: '市场营销部',
+    publisher: '李娜',
+    publishTime: '2024-11-30',
+    permission: '只读',
+  },
+  {
+    name: '人力资源规划',
+    cataloging: '人事部/2024/10',
+    workGroup: '人力资源部',
+    publisher: '王芳',
+    publishTime: '2024-10-15',
+    permission: '可编辑',
+  },
+];
+export const applyData: any[] = [
+  {
+    name: '产品开发进度',
+    cataloging: '研发部/2024/09',
+    workGroup: '产品研发部',
+    publisher: '赵强',
+    publishTime: '2024-09-28',
+    permission: '只读',
+  },
+];
+export const applyFailedData: any[] = [
+  {
+    name: 'IT系统维护日志',
+    cataloging: '技术部/2024/08',
+    workGroup: '信息技术部',
+    publisher: '孙丽',
+    publishTime: '2024-08-20',
+    permission: '可编辑',
+  },
+];

src/views/mallResourceDevelopment/dataSet/dataSetByApply/index.vue

 <template>
-  <div>11111</div>
+  <PageWrapper class="content-padding" contentBackground>
+    <template #headerContent>
+      <div class="modal_top">
+        <div>
+          <Icon icon="hugeicons:file-euro" :size="50" :color="'#64c6e9'" />
+        </div>
+        <div>
+          <div class="title">我申请的</div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <a-tabs v-model:activeKey="currentKey">
+        <a-tab-pane key="1" tab="申请成功" />
+        <a-tab-pane key="2" tab="申请中" />
+        <a-tab-pane key="3" tab="申请失败" />
+      </a-tabs>
+    </template>
+    <div class="pt-4 m-4 desc-wrap">
+      <template v-if="currentKey == '1'">
+        <BasicTable @register="registerApplySuccessTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+      <template v-if="currentKey == '2'">
+        <BasicTable @register="registerApplyTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+      <template v-if="currentKey == '3'">
+        <BasicTable @register="registerApplyFailedTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+    </div>
+  </PageWrapper>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
-</script>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { useTabs } from '@/hooks/web/useTabs';
+  import { Tabs } from 'ant-design-vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import {
+    applyColumns,
+    applyFormSchema,
+  } from '@/views/mallResourceDevelopment/dataSet/dataSetByApply/data';
+  import {
+    applyData,
+    applyFailedData,
+    applySuccessData,
+  } from '@/views/mallResourceDevelopment/dataSet/dataSetByApply/datasetByApplyData';
+  import { router } from '@/router';
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const { createMessage } = useMessage();
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+  const currentKey = ref('1');
+  const { setTitle } = useTabs();
+  setTitle('我申请的');
+
+  const [registerApplySuccessTable] = useTable({
+    dataSource: applySuccessData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
 
-<style scoped>
+  const [registerApplyTable] = useTable({
+    dataSource: applyData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
+
+  const [registerApplyFailedTable] = useTable({
+    dataSource: applyFailedData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
+
+  function handleDetail(record: Recordable) {
+    router.push({
+      path: '/file/fileByApply/fileByApplyDetail',
+      query: {
+        name: record.name,
+      },
+    });
+  }
+
+  onMounted(() => {});
+</script>
 
+<style lang="scss" scoped>
+  .content-padding {
+    background-color: white;
+  }
+  .modal_top {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 25px;
+      font-weight: 500;
+      margin-left: 10px;
+      margin-top: 20px;
+    }
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+  .selected-row {
+    background-color: #5cb3ff; /* 可以根据需要调整颜色 */
+  }
 </style>

src/views/mallResourceDevelopment/file/commonFile/index.vue

@@ -5,7 +5,7 @@
       <template #headerContent>
         <div class="headerContent">
           <div>
-            <Icon icon="fluent:document-folder-16-regular" :size="40" :color="'#61aaff'" />
+            <Icon icon="solar:file-bold" :size="40" :color="'#61aaff'" />
           </div>
           <div>
             <div class="title">{{ workSpaceName }}</div>

src/views/mallResourceDevelopment/file/commonFile/mock.ts

@@ -279,7 +279,7 @@ export const cardList = [
     title: '基本信息',
     scene: 'databaseOfflineLoading',
     parentWorkSpaceName: '党建建设',
-    icon: 'majesticons:table',
+    icon: 'tabler:file-3d',
     color: '#71c8d5',
     dept: '数据资源管理部',
     description: '集团党委会、党委理论学习中心的学习会的组织实操、集团党委、纪委换届选举',
@@ -294,7 +294,7 @@ export const cardList = [
     title: '党员发展计划',
     scene: 'partyDevelopmentPlan',
     parentWorkSpaceName: '党建建设',
-    icon: 'majesticons:table',
+    icon: 'tabler:file-3d',
     color: '#71c8d5',
     dept: '组织人事部',
     description: '制定年度党员发展计划，开展入党积极分子培训',
@@ -309,7 +309,7 @@ export const cardList = [
     title: '主题教育活动',
     scene: 'themeEducationActivity',
     parentWorkSpaceName: '党建建设',
-    icon: 'majesticons:table',
+    icon: 'tabler:file-3d',
     color: '#71c8d5',
     dept: '宣传部',
     description: '举办各类主题教育活动，增强党员意识',
@@ -324,7 +324,7 @@ export const cardList = [
     title: '党建工作总结',
     scene: 'partyWorkSummary',
     parentWorkSpaceName: '党建建设',
-    icon: 'majesticons:table',
+    icon: 'tabler:file-3d',
     color: '#71c8d5',
     dept: '办公室',
     description: '撰写季度党建工作总结报告',
@@ -339,7 +339,7 @@ export const cardList = [
     title: '党史知识竞赛',
     scene: 'partyHistoryQuiz',
     parentWorkSpaceName: '党建建设',
-    icon: 'majesticons:table',
+    icon: 'tabler:file-3d',
     color: '#71c8d5',
     dept: '宣传教育中心',
     description: '组织党史知识竞赛，提升党员历史素养',

src/views/mallResourceDevelopment/file/fileByApply/downloadModal.vue

+<template>
+  <BasicModal
+    width="55%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicTable @register="registerTable" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { downloadColumns } from '@/views/mallResourceDevelopment/file/fileByApply/data';
+  import { downloadData } from '@/views/mallResourceDevelopment/file/fileByApply/fileByApplyData';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerTable, { reload }] = useTable({
+    title: '选择下载范围',
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      //过滤data中的数据，取出等于params.deptId的数据
+      var data = [];
+      data = tableData.value;
+      return { ...response, data: data };
+    },
+    rowSelection: {
+      type: 'radio',
+    },
+    striped: false,
+    pagination: false,
+    columns: downloadColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await reload();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+  }
+  onMounted(() => {
+    tableData.value = downloadData;
+  });
+</script>

src/views/mallResourceDevelopment/file/fileByApply/index.vue

 <template>
-  <div>11111</div>
+  <PageWrapper class="content-padding" contentBackground>
+    <template #headerContent>
+      <div class="modal_top">
+        <div>
+          <Icon icon="hugeicons:file-euro" :size="50" :color="'#64c6e9'" />
+        </div>
+        <div>
+          <div class="title">我申请的</div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <a-tabs v-model:activeKey="currentKey">
+        <a-tab-pane key="1" tab="申请成功" />
+        <a-tab-pane key="2" tab="申请中" />
+        <a-tab-pane key="3" tab="申请失败" />
+      </a-tabs>
+    </template>
+    <div class="pt-4 m-4 desc-wrap">
+      <template v-if="currentKey == '1'">
+        <BasicTable @register="registerApplySuccessTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+      <template v-if="currentKey == '2'">
+        <BasicTable @register="registerApplyTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+      <template v-if="currentKey == '3'">
+        <BasicTable @register="registerApplyFailedTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handleDetail.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
+    </div>
+  </PageWrapper>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
-</script>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { useTabs } from '@/hooks/web/useTabs';
+  import { Tabs } from 'ant-design-vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import {
+    applyColumns,
+    applyFormSchema,
+  } from '@/views/mallResourceDevelopment/file/fileByApply/data';
+  import {
+    applyData,
+    applyFailedData,
+    applySuccessData,
+  } from '@/views/mallResourceDevelopment/file/fileByApply/fileByApplyData';
+  import { router } from '@/router';
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const { createMessage } = useMessage();
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+  const currentKey = ref('1');
+  const { setTitle } = useTabs();
+  setTitle('我申请的');
+
+  const [registerApplySuccessTable] = useTable({
+    dataSource: applySuccessData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
 
-<style scoped>
+  const [registerApplyTable] = useTable({
+    dataSource: applyData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
+
+  const [registerApplyFailedTable] = useTable({
+    dataSource: applyFailedData,
+    columns: applyColumns,
+    useSearchForm: true,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: applyFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    pagination: true,
+    showIndexColumn: false,
+  });
+
+  function handleDetail(record: Recordable) {
+    router.push({
+      path: '/file/fileByApply/fileByApplyDetail',
+      query: {
+        name: record.name,
+      },
+    });
+  }
+
+  onMounted(() => {});
+</script>
 
+<style lang="scss" scoped>
+  .content-padding {
+    background-color: white;
+  }
+  .modal_top {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 25px;
+      font-weight: 500;
+      margin-left: 10px;
+      margin-top: 20px;
+    }
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+  .selected-row {
+    background-color: #5cb3ff; /* 可以根据需要调整颜色 */
+  }
 </style>