附件管理tab

src/components/Form/src/components/upload/UploadFile.vue

@@ -7,6 +7,7 @@
         :maxNumber="fileNum"
         @change="handleChange"
         :api="uploadApi"
+        :accept="['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'xls', 'xlsx']"
         class="my-3"
       />
       <a-button

src/views/general/attachment/index.vue

@@ -5,10 +5,24 @@
     :canExpan="false"
     helpMessage="主要用于管理上传到服务器或第三方存储的数据"
   >
-    <a-button type="default" class="mr-2"> 全部 </a-button>
-    <a-button type="default" class="mr-2"> 图片 </a-button>
-    <a-button type="default" class="mr-2"> 文本 </a-button>
-    <BasicTable ref="tableRef" :canResize="true" @register="registerTable" showTableSetting>
+    <a-button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="default"
+      class="mr-2"
+      :id="current_tab.id === tab.id ? 'current-btn' : ''"
+      @click="handleTabChange(tab)"
+    >
+      {{ tab.title }}
+    </a-button>
+    <BasicTable
+      ref="tableRef"
+      :canResize="true"
+      @register="registerTable"
+      @rowClick="rowClick"
+      @selectionChange="selectionChange"
+      showTableSetting
+    >
       <template #action="{ record }">
         <TableAction :actions="createActions(record)" stopButtonPropagation />
       </template>
@@ -19,12 +33,13 @@
             :multiple="false"
             :before-upload="beforeUpload"
             @change="handleChange"
+            accept=".jpg,.gif,.png,.txt,.pdf,.xls,.xlsx,.jpeg,.webp"
           >
             <a-button type="primary" :disabled="disabled">
               {{ t('component.upload.upload') }}
             </a-button>
           </a-upload>
-          <a-button color="error" @click="deleteBatches">
+          <a-button color="error" :disabled="disable_btn" @click="deleteBatches">
             {{ t('common.delText') }}
           </a-button>
         </div>
@@ -34,7 +49,7 @@
 </template>
 <script lang="ts">
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { defineComponent, nextTick, reactive, ref, toRefs, unref, createVNode } from 'vue';
+  import { defineComponent, reactive, ref, toRefs, unref, createVNode } from 'vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { Upload, Progress, Modal } from 'ant-design-vue';
   import { CollapseContainer } from '/@/components/Container/index';
@@ -52,6 +67,17 @@
   import { getAttachmentList, deleteAttachment, deleteBatchesAttachment } from '/@/api/sys/general';
   import { uploadApi } from '/@/api/sys/upload';
 
+  interface Tab {
+    id: number;
+    title: string;
+  }
+
+  interface State {
+    tabs: Tab[];
+    current_tab: Tab;
+    disabled: boolean;
+    disable_btn: boolean;
+  }
   export default defineComponent({
     name: 'Attchment',
     components: {
@@ -67,9 +93,14 @@
       const { createMessage } = useMessage();
       const { success, error } = createMessage;
       const tableHeight = adapt().tableHeight;
-      const state = reactive({
-        groupList: [] as object[],
-        group: 'basic',
+      const state = reactive<State>({
+        tabs: [
+          { id: 0, title: '全部' },
+          { id: 1, title: '图片' },
+          { id: 2, title: '文本' },
+        ],
+        current_tab: { id: 0, title: '全部' },
+        disable_btn: true,
         disabled: false,
       });
       const tableRef = ref<Nullable<TableActionType>>(null);
@@ -121,9 +152,30 @@
         params.limit = params.pageSize;
         delete params.page;
         delete params.pageSize;
+        // tab切换 暂时方法 图片
+        if (state.current_tab.id === 1) {
+          if (!params.filter) {
+            params.filter = {};
+          }
+          params.op = {};
+          params.filter.imagetype = 'png,jpg,jpeg,gif';
+          params.op.imagetype = 'in';
+        } else if (state.current_tab.id === 2) {
+          if (!params.filter) {
+            params.filter = {};
+          }
+          params.op = {};
+          params.filter.imagetype = 'txt,pdf,xls,xlsx,.webp';
+          params.op.imagetype = 'in';
+        }
       }
 
       function beforeUpload(file) {
+        const isLt2M = file.size / 1024 / 1024 < 10;
+        if (!isLt2M) {
+          error('文件必须小于10MB!');
+          return false;
+        }
         uploadApi({ file })
           .then((res) => {
             console.log(`res`, res);
@@ -141,10 +193,27 @@
         console.log(`info`, info);
       }
 
-      async function handleGroupBtn(group) {
-        await nextTick();
+      async function handleTabChange(tab) {
+        state.current_tab = tab;
         getTableAction().reload();
-        state.group = group.toLowerCase();
+      }
+
+      function selectionChange() {
+        const keys = getTableAction().getSelectRowKeys();
+        if (keys.length) {
+          state.disable_btn = false;
+        } else {
+          state.disable_btn = true;
+        }
+      }
+
+      function rowClick() {
+        const keys = getTableAction().getSelectRowKeys();
+        if (keys.length) {
+          state.disable_btn = false;
+        } else {
+          state.disable_btn = true;
+        }
       }
 
       // async function handleEdit(record: Recordable) {
@@ -211,13 +280,15 @@
       }
       return {
         t,
+        selectionChange,
+        rowClick,
         createActions,
         tableRef,
         deleteBatches,
         registerTable,
         beforeUpload,
         handleChange,
-        handleGroupBtn,
+        handleTabChange,
         ...toRefs(state),
       };
     },
@@ -228,6 +299,11 @@
     position: relative;
   }
 
+  #current-btn {
+    color: #3785cc;
+    border: 1px solid #3785cc;
+  }
+
   .vben-collapse-container__body > .mr-2 {
     margin-top: 5px;
     font-weight: 550 !important;

src/views/general/config/customComponents/UploadFile.vue

@@ -8,6 +8,7 @@
         @change="handleChange"
         :api="uploadApi"
         class="my-3"
+        :accept="['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'xls', 'xlsx']"
       />
       <a-button
         @click="openChooseModal"