pref: attachment search param.

src/api/attachment.js

@@ -53,6 +53,13 @@ attachmentApi.getMediaTypes = () => {
   })
 }
 
+attachmentApi.getTypes = () => {
+  return service({
+    url: `${baseUrl}/types`,
+    method: 'get'
+  })
+}
+
 attachmentApi.CancelToken = axios.CancelToken
 attachmentApi.isCancel = axios.isCancel
 
@@ -80,31 +87,31 @@ attachmentApi.uploads = (formDatas, uploadProgress, cancelToken) => {
 
 attachmentApi.type = {
   LOCAL: {
-    type: 'local',
+    type: 'LOCAL',
     text: '本地'
   },
   SMMS: {
-    type: 'smms',
+    type: 'SMMS',
     text: 'SM.MS'
   },
   UPOSS: {
-    type: 'uposs',
+    type: 'UPOSS',
     text: '又拍云'
   },
   QINIUOSS: {
-    type: 'qiniuoss',
+    type: 'QINIUOSS',
     text: '七牛云'
   },
   ALIOSS: {
-    type: 'alioss',
+    type: 'ALIOSS',
     text: '阿里云'
   },
   BAIDUBOS: {
-    type: 'baidubos',
+    type: 'BAIDUBOS',
     text: '百度云'
   },
   TENCENTCOS: {
-    type: 'tencentcos',
+    type: 'TENCENTCOS',
     text: '腾讯云'
   }
 }

src/views/attachment/AttachmentList.vue

@@ -1,52 +1,117 @@
 <template>
   <page-view>
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
-      <a-col :span="24" style="padding-bottom: 12px;">
+      :gutter="12"
-        <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
+      type="flex"
+      align="middle"
+    >
+      <a-col
+        :span="24"
+        style="padding-bottom: 12px;"
+      >
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="关键词">
-                    <a-input v-model="queryParam.keyword" @keyup.enter="handleQuery()" />
+                    <a-input
+                      v-model="queryParam.keyword"
+                      @keyup.enter="handleQuery()"
+                    />
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="存储位置">
-                    <a-select v-model="queryParam.attachmentType" @change="handleQuery()">
+                    <a-select
-                      <a-select-option v-for="item in Object.keys(attachmentType)" :key="item" :value="item">{{
+                      v-model="queryParam.attachmentType"
+                      @change="handleQuery()"
+                    >
+                      <a-select-option
+                        v-for="item in types"
+                        :key="item"
+                        :value="item"
+                      >{{
                         attachmentType[item].text
                       }}</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="文件类型">
-                    <a-select v-model="queryParam.mediaType" @change="handleQuery()">
+                    <a-select
-                      <a-select-option v-for="(item, index) in mediaTypes" :key="index" :value="item">{{
+                      v-model="queryParam.mediaType"
+                      @change="handleQuery()"
+                    >
+                      <a-select-option
+                        v-for="(item, index) in mediaTypes"
+                        :key="index"
+                        :value="item"
+                      >{{
                         item
                       }}</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <span class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="handleQuery()">查询</a-button>
+                    <a-button
-                    <a-button style="margin-left: 8px;" @click="handleResetParam()">重置</a-button>
+                      type="primary"
+                      @click="handleQuery()"
+                    >查询</a-button>
+                    <a-button
+                      style="margin-left: 8px;"
+                      @click="handleResetParam()"
+                    >重置</a-button>
                   </span>
                 </a-col>
               </a-row>
             </a-form>
           </div>
-          <div class="table-operator" style="margin-bottom: 0;">
+          <div
-            <a-button type="primary" icon="cloud-upload" @click="() => (uploadVisible = true)">上传</a-button>
+            class="table-operator"
-            <a-button icon="select" v-show="!supportMultipleSelection" @click="handleMultipleSelection">
+            style="margin-bottom: 0;"
+          >
+            <a-button
+              type="primary"
+              icon="cloud-upload"
+              @click="() => (uploadVisible = true)"
+            >上传</a-button>
+            <a-button
+              icon="select"
+              v-show="!supportMultipleSelection"
+              @click="handleMultipleSelection"
+            >
               批量操作
             </a-button>
-            <a-button type="danger" icon="delete" v-show="supportMultipleSelection" @click="handleDeleteAttachmentInBatch">
+            <a-button
+              type="danger"
+              icon="delete"
+              v-show="supportMultipleSelection"
+              @click="handleDeleteAttachmentInBatch"
+            >
               删除
             </a-button>
-            <a-button icon="close" v-show="supportMultipleSelection" @click="handleCancelMultipleSelection">
+            <a-button
+              icon="close"
+              v-show="supportMultipleSelection"
+              @click="handleCancelMultipleSelection"
+            >
               取消
             </a-button>
           </div>
@@ -58,14 +123,30 @@
           :dataSource="formattedDatas"
           :loading="listLoading"
         >
-          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+          <a-list-item
-            <a-card :bodyStyle="{ padding: 0 }" hoverable @click="handleShowDetailDrawer(item)">
+            slot="renderItem"
+            slot-scope="item, index"
+            :key="index"
+          >
+            <a-card
+              :bodyStyle="{ padding: 0 }"
+              hoverable
+              @click="handleShowDetailDrawer(item)"
+            >
               <div class="attach-thumb">
                 <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
-                <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
+                <img
+                  :src="item.thumbPath"
+                  v-show="handleJudgeMediaType(item)"
+                  loading="lazy"
+                />
               </div>
               <a-card-meta style="padding: 0.8rem;">
-                <ellipsis :length="isMobile() ? 12 : 16" tooltip slot="description">{{ item.name }}</ellipsis>
+                <ellipsis
+                  :length="isMobile() ? 12 : 16"
+                  tooltip
+                  slot="description"
+                >{{ item.name }}</ellipsis>
               </a-card-meta>
               <a-checkbox
                 class="select-attachment-checkbox"
@@ -91,8 +172,17 @@
         @showSizeChange="handlePaginationChange"
       />
     </div>
-    <a-modal title="上传附件" v-model="uploadVisible" :footer="null" :afterClose="onUploadClose" destroyOnClose>
+    <a-modal
-      <FilePondUpload ref="upload" :uploadHandler="uploadHandler"></FilePondUpload>
+      title="上传附件"
+      v-model="uploadVisible"
+      :footer="null"
+      :afterClose="onUploadClose"
+      destroyOnClose
+    >
+      <FilePondUpload
+        ref="upload"
+        :uploadHandler="uploadHandler"
+      ></FilePondUpload>
     </a-modal>
     <AttachmentDetailDrawer
       v-model="drawerVisible"
@@ -128,6 +218,7 @@ export default {
       selectAttachment: {},
       attachments: [],
       mediaTypes: [],
+      types: [],
       editable: false,
       pagination: {
         page: 1,
@@ -162,6 +253,7 @@ export default {
   created() {
     this.loadAttachments()
     this.loadMediaTypes()
+    this.loadTypes()
   },
   destroyed: function() {
     if (this.drawerVisible) {
@@ -192,6 +284,11 @@ export default {
         this.mediaTypes = response.data.data
       })
     },
+    loadTypes() {
+      attachmentApi.getTypes().then(response => {
+        this.types = response.data.data
+      })
+    },
     handleShowDetailDrawer(attachment) {
       this.selectAttachment = attachment
       if (this.supportMultipleSelection) {
@@ -212,6 +309,7 @@ export default {
       this.queryParam.attachmentType = null
       this.handlePaginationChange(1, this.pagination.size)
       this.loadMediaTypes()
+      this.loadTypes()
     },
     handleQuery() {
       this.handlePaginationChange(1, this.pagination.size)
@@ -220,6 +318,7 @@ export default {
       this.$refs.upload.handleClearFileList()
       this.handlePaginationChange(1, this.pagination.size)
       this.loadMediaTypes()
+      this.loadTypes()
     },
     handleJudgeMediaType(attachment) {
       var mediaType = attachment.mediaType