9/5收發文資料管理

src/content/Homepage/DocumentManagement/Post/Manage/List/index.vue

@@ -1,122 +1,103 @@
-<!-- 發文資料管理 -->
 <template>
+  <!-- 發文資料管理 -->
   <div>
+    <!-- 功能欄 -->
+    <functionBar class="F_bar" @getList="getFileList"></functionBar>
     <div>
-      <functionBar class="F_bar" @getList="getFileList" />
-    </div>
-    <b-container fluid>
-      <div style="margin-top: 80px">
-        <b-row style="margin-top: 11px">
-          <b-col cols="12">
-            <div style="margin-left: 11.8vw; margin-top: 1.5vh; color: black; width: 55vw">
-              <b-form-group
-                label="關鍵字:"
-                label-for="filter-input"
-                label-cols="2"
-                label-align="right"
-                label-size="1px"
-              >
-                <b-input-group size="1px">
-                  <b-form-input
-                    id="filter-input"
-                    v-model="filter"
-                    type="search"
-                    placeholder="請輸入關鍵字"
-                  ></b-form-input>
-                </b-input-group>
-              </b-form-group>
-            </div>
+      <div class="container" fluid></div>
+      <div style="margin-left: 12%; margin-top: 15px; color: black; width: 80%">
+        <b-row>
+          <!-- 篩選條件選項 -->
+          <b-col cols="2">
+            <div style="margin-top: 9px; text-align: right">篩選條件:</div>
+          </b-col>
+          <b-col cols="6">
+            <!-- 多選下拉框 -->
+            <multiselect
+              v-model="searchCondition.keyword"
+              tag-placeholder="加入欄位"
+              placeholder="可輸入檔案名稱或單位名稱"
+              :options="keywords"
+              :multiple="true"
+              :showNoOptions="false"
+              :taggable="true"
+              @tag="addTagKeyword"
+            ></multiselect>
+          </b-col>
+          <b-col cols="2">
+            <!-- 運算子選項 -->
+            <b-form-select v-model="searchCondition.operator" :options="operators"></b-form-select>
+          </b-col>
+          <b-col cols="2" style="padding: 0">
+            <b-button class="btn_search" style="float: left; margin-top: 4px" @click="filterList">篩選</b-button>
           </b-col>
         </b-row>
-        <div>
-          <b-row>
-            <b-col>
-              <!-- TABLE -->
-              <b-table
-                :items="relateFileList"
-                :fields="fields"
-                :filter="filter"
-                thead-class="thClass"
-                class="text-center"
-                responsive="sm"
-                striped
-                bordered
-                fixed
-                :per-page="perPage"
-                :current-page="currentPage"
-                :sort-desc.sync="sortDesc"
-                :sort-by.sync="sortBy"
-              >
-                <!-- HEAD -->
-                <template #head()="{label, field: { key, sortable } }">
-                  <span
-                    style="font-weight: normal; color: white; font-size: 15px"
-                    >{{ label }}</span
-                  >
-                  <template v-if="sortable">
-                     <b-icon font-scale="1.3" v-if="sortBy !== key" icon="arrow-down-up"></b-icon>
-                     <b-icon font-scale="1.3" v-else-if="sortDesc" icon="arrow-down"></b-icon>
-                     <b-icon font-scale="1.3" v-else icon="arrow-up"></b-icon>
-                  </template>
-                </template>
-                <!-- BODY -->
-                <!-- 序號 -->
-                <template #cell(serial_number)="data">
-                  <span
-                    style="font-weight: normal; color: black; font-size: 15px"
-                  >
-                    {{ ( currentPage - 1 ) * perPage + data.index + 1  }}
-                  </span>
-                </template>
-                <!-- 檔案名稱 -->
-                <template #cell(name)="data">
-                  <a
-                    style="font-weight: normal; color: blue; font-size: 15px"
-                    :href="data.item.src"
-                    target="_blank"
-                  >
-                    {{ data.value }}
-                  </a>
-                </template>
-                <!-- 上傳日期 -->
-                <template #cell(postDay)="data">
-                  <span
-                    style="font-weight: normal; color: black; font-size: 15px"
-                  >
-                    {{ getFormattedDate(data.value) }}
-                  </span>
-                </template>
-                <!-- 類型 -->
-                <template #cell(icon)="data">
-
-                  <img class="ml-3 m-0" style="width:30px;height:auto;display:inline-block" :src="data.item.icon">
-                </template>
-                <!-- 大小 -->
-                <template #cell(size)="data">
-                  <span
-                    style="font-weight: normal; color: black; font-size: 15px"
-                    v-if="data.value / 1024 / 1024 > 1"
-                    >{{ (data.value / 1024 / 1024).toFixed(1) }}&nbsp;MB</span
-                  >
-                  <span v-else
-                    >{{ (data.value / 1024).toFixed(1) }}&nbsp;KB</span
-                  >
-                </template>
-              </b-table>
-              <!-- 分頁符號 -->
-              <b-pagination
-                v-model="currentPage"
-                pills
-                :total-rows="rows"
-                :per-page="perPage"
-                aria-controls="my-table"
-              >
-              </b-pagination>
-            </b-col>
-          </b-row>
-        </div>
       </div>
-    </b-container>
+      <div style="width:90%;overflow: auto;margin-left:80px;height:600px;margin-top: 50px;">
+        <!-- 表格 -->
+        <b-table
+          :items="relateFileList"
+          :fields="fields"
+          :filter="filter"
+          thead-class="thClass"
+          class="text-center"
+          ref="selectableTable"
+          responsive="sm"
+          striped
+          bordered
+          fixed
+          :per-page="perPage"
+          :current-page="currentPage"
+          :sort-desc.sync="sortDesc"
+          :sort-by.sync="sortBy"
+          sticky-header="577px"
+        >
+          <!-- 表頭 -->
+          <template #head()="{ label, field: { key, sortable } }">
+            <span style="font-weight: normal; color: white; font-size: 15px">{{ label }}</span>
+            <template v-if="sortable">
+              <b-icon font-scale="1.3" v-if="sortBy !== key" icon="arrow-down-up"></b-icon>
+              <b-icon font-scale="1.3" v-else-if="sortDesc" icon="arrow-down"></b-icon>
+              <b-icon font-scale="1.3" v-else icon="arrow-up"></b-icon>
+            </template>
+          </template>
+          <!-- 表身 -->
+          <!-- 序號 -->
+          <template #cell(serial_number)="data">
+            <span style="font-weight: normal; color: black; font-size: 15px">
+              {{ (currentPage - 1) * perPage + data.index + 1 }}
+            </span>
+          </template>
+          <!-- 檔案名稱 -->
+          <template #cell(name)="data">
+            <a style="font-weight: normal; color: blue; font-size: 15px" :href="data.item.src" target="_blank">
+              {{ data.value }}
+            </a>
+          </template>
+          <!-- 發文日期 -->
+          <template #cell(postDay)="data">
+            <span style="font-weight: normal; color: black; font-size: 15px">{{ getFormattedDate(data.value) }}</span>
+          </template>
+          <!-- 單位名稱 -->
+          <template #cell(department_classification)="data">
+            <span style="font-weight: normal; color: black; font-size: 15px">{{ data.value }}</span>
+          </template>
+          <!-- 類型 -->
+          <template #cell(icon)="data">
+            <img class="ml-3 m-0" style="width:30px;height:auto;display:inline-block" :src="data.item.icon">
+          </template>
+          <!-- 大小 -->
+          <template #cell(size)="data">
+            <span style="font-weight: normal; color: black; font-size: 15px" v-if="data.value / 1024 / 1024 > 1">
+              {{ (data.value / 1024 / 1024).toFixed(1) }}&nbsp;MB
+            </span>
+            <span v-else>{{ (data.value / 1024).toFixed(1) }}&nbsp;KB</span>
+          </template>
+        </b-table>
+      </div>
+      <!-- 分頁符號 -->
+      <b-pagination v-model="currentPage" pills :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
+    </div>
   </div>
 </template>
 
@@ -126,6 +107,7 @@ import { mapState, mapActions } from 'vuex'
 import Multiselect from 'vue-multiselect'
 import moment from 'moment'
 import fileType from '@/util/fileType.js'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 export default {
   components: {
     functionBar,
@@ -134,6 +116,7 @@ export default {
   },
   data () {
     return {
+      keywords: [],
       filter: null,
       selected: [],
       perPage: 8,
@@ -146,49 +129,66 @@ export default {
           label: '序號',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '10%' }
         },
         {
           key: 'name',
           label: '檔案名稱',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '30%' }
         },
         {
           key: 'postDay',
           label: '發文日期',
           sortable: true,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '15%' }
+        },
+        {
+          key: 'department_classification',
+          label: '單位名稱',
+          sortable: true,
+          tdClass: 'align-middle',
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '20%' }
         },
         {
           key: 'icon',
           label: '類型',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '15%' }
         },
         {
           key: 'size',
           label: '檔案大小',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '10%' }
         }
       ],
+      operators: [
+        { value: 'and', text: 'and' },
+        { value: 'or', text: 'or' }
+      ],
+      searchCondition: {
+        operator: 'and',
+        keyword: []
+      },
       relateFileList: []
     }
   },
   async mounted () {
     await this.getPostFileManagement(this.currentUser.defaultTender)
+    await this.lookupTender(this.currentUser.defaultTender)
     await this.getOtherList(this.currentUser.defaultTender)
     this.getFileList()
     console.log(this.relateFileList)
   },
   methods: {
-    ...mapActions('tenders', ['getPostFileManagement', 'getOtherList']),
+    ...mapActions('tenders', ['getPostFileManagement', 'getOtherList', 'lookupPostFileSearch', 'lookupTender']),
     getFormattedDate (date) {
+      // 轉換日期格式
       let d = null
       if (date) {
         return moment(date).format('YYYY-MM-DD')
@@ -196,23 +196,50 @@ export default {
         return d
       }
     },
+    addTagKeyword (newTag) {
+      this.searchCondition.keyword.push(newTag)
+    },
+    async filterList () {
+      if (this.searchCondition.keyword.length === 0) {
+        alert('輸入關鍵字')
+      } else {
+        let searchList = await this.lookupPostFileSearch({
+          operator: this.searchCondition.operator,
+          keyword:
+            this.searchCondition.keyword.length === 0
+              ? []
+              : this.searchCondition.keyword
+        })
+        if (searchList.length !== 0) {
+          this.relateFileList = searchList.map(item => ({
+            ...item,
+            icon: fileType(item.mime)
+          }))
+        } else {
+          this.relateFileList = []
+        }
+      }
+    },
     async getFileList () {
       this.relateFileList = []
       for (let i = 0; i < this.postFileManagementList.length; i++) {
         const element = this.postFileManagementList[i]
         const docFile = element.docFile
+        const { name, mime, size, src } = docFile[0]
         if (docFile && docFile.length > 0 && docFile[0].name) {
           this.relateFileList.push({
             _id: element._id,
-            name: docFile[0].name,
             postDay: element.postDay,
-            mime: docFile[0].mime,
-            size: docFile[0].size,
-            src: docFile[0].src,
-            icon: fileType(docFile[0].mime)
+            department_classification: element.department_classification,
+            name,
+            mime,
+            size,
+            src,
+            icon: fileType(mime)
           })
         }
       }
+      console.log(this.relateFileList)
     }
   },
   computed: {
@@ -228,11 +255,12 @@ export default {
     })
   },
   watch: {
+    // 監視 postFileManagementList 的變動，當資料變動時，自動更新檔案列表
     postFileManagementList: {
       handler () {
         this.getFileList()
       },
-      deep: true
+      deep: true // 監視所有層級的變動，如果檔案列表是嵌套的也會監視到
     }
   }
 }
@@ -243,7 +271,6 @@ export default {
   z-index: 999;
 }
 .thClass {
-  font-size: 16px;
   background-color: #1d325f;
   color: white;
 }
@@ -254,6 +281,77 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+/deep/.popover{
+  padding: 10px;
+  max-width: 450px;
+  text-align: left;
+  background-color: white;
+}
+/deep/ .popover-header{
+  font-size: 18px;
+  color: black;
+}
+/deep/ .popover-body{
+  font-size: 16px;
+  color: black;
+}
+/deep/ .align-middle {
+  max-width: 200px;
+  white-space: normal !important;
+}
+/deep/ .truncate {
+  width: 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.container {
+  height: 50px;
+  margin-top: 10px;
+  margin-left: 5%;
+  padding-top: 10px;
+  padding-left: 1%;
+  padding-right: 1%;
+}
+.text-center {
+  width: 100%;
+  height: 100%;
+}
+.btns2 {
+  float: right;
+  margin-right: 5%;
+}
+.btn_refresh {
+  background-color: #f7fafc;
+  font-size: 14px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-left: 10px;
+  color: #1d325f;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.btn_refresh:hover {
+  color: black;
+  background-color: rgb(228, 228, 228);
+  transform: scale(1.1);
+}
+.btn_search {
+  background-color: rgb(75, 102, 255);
+  font-size: 15px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  color: white;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.btn_search:hover {
+  color: black;
+  background-color: rgb(228, 228, 228);
+  transform: translateY(1);
+}
 .pagination {
   display: flex;
   align-items: center;
@@ -262,14 +360,12 @@ export default {
   margin-top: 20px;
   color: #383838;
 }
-/deep/ .align-middle {
-  max-width: 400px;
-  white-space: normal !important;
+.form-control {
+  color: black;
 }
-/deep/ .truncate {
-  width: 400px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.custom-select {
+  color: black;
 }
+.table thead th {
+  font-size: 15px;}
 </style>

src/content/Homepage/DocumentManagement/Receive/Manage/List/index.vue

@@ -1,43 +1,48 @@
-<!-- 收文資料管理 -->
 <template>
+  <!-- 收文資料管理 -->
   <div>
-    <div>
-      <functionBar class="F_bar" @getList="getFileList" />
-    </div>
-    <b-container fluid>
-      <div style="margin-top: 80px">
-        <b-row style="margin-top: 11px">
-          <b-col cols="12">
-            <div style="margin-left: 11.8vw; margin-top: 1.5vh; color: black; width: 55vw">
-              <b-form-group
-                label="關鍵字:"
-                label-for="filter-input"
-                label-cols="2"
-                label-align="right"
-                label-size="1px"
-              >
-                <b-input-group size="1px">
-                  <b-form-input
-                    id="filter-input"
-                    v-model="filter"
-                    type="search"
-                    placeholder="請輸入關鍵字"
-                  ></b-form-input>
-                </b-input-group>
-              </b-form-group>
-            </div>
+    <!-- 功能欄 -->
+      <functionBar class="F_bar" @getList="getFileList"></functionBar>
+      <div>
+      <div class="container" fluid></div>
+      <div style="margin-left: 12%; margin-top: 15px; color: black; width: 80%">
+        <b-row>
+          <!-- 篩選條件選項 -->
+          <b-col cols="2">
+              <div style="margin-top: 9px; text-align: right">篩選條件:</div>
+          </b-col>
+          <b-col cols="6">
+            <!-- 多選下拉框 -->
+            <multiselect
+              v-model="searchCondition.keyword"
+              tag-placeholder="加入欄位"
+              placeholder="可輸入檔案名稱或單位名稱"
+              :options="keywords"
+              :multiple="true"
+              :showNoOptions="false"
+              :taggable="true"
+              @tag="addTagKeyword"
+            >
+            </multiselect>
+          </b-col>
+          <b-col cols="2">
+            <!-- 運算子選項 -->
+            <b-form-select v-model="searchCondition.operator" :options="operators"></b-form-select>
+          </b-col>
+          <b-col cols="2" style="padding: 0">
+            <b-button class="btn_search" style="float:left; margin-top: 4px" @click="filterList">篩選</b-button>
           </b-col>
         </b-row>
-        <div>
-          <b-row>
-            <b-col>
-              <!-- TABLE -->
+        </div>
+        <div style="width:90%;overflow: auto;margin-left:80px;height:600px;margin-top: 50px;">
+              <!-- 表格 -->
               <b-table
                 :items="relateFileList"
                 :fields="fields"
                 :filter="filter"
                 thead-class="thClass"
                 class="text-center"
+                ref="selectableTable"
                 responsive="sm"
                 striped
                 bordered
@@ -46,8 +51,9 @@
                 :current-page="currentPage"
                 :sort-desc.sync="sortDesc"
                 :sort-by.sync="sortBy"
+                sticky-header="577px"
               >
-                <!-- HEAD -->
+                <!-- 表頭 -->
                 <template #head()="{label, field: { key, sortable } }">
                   <span
                     style="font-weight: normal; color: white; font-size: 15px"
@@ -59,7 +65,7 @@
                      <b-icon font-scale="1.3" v-else icon="arrow-up"></b-icon>
                   </template>
                 </template>
-                <!-- BODY -->
+                <!-- 表身 -->
                 <!-- 序號 -->
                 <template #cell(serial_number)="data">
                   <span
@@ -78,7 +84,7 @@
                     {{ data.value }}
                   </a>
                 </template>
-                <!-- 上傳日期 -->
+                <!-- 收文日期 -->
                 <template #cell(receiveDay)="data">
                   <span
                     style="font-weight: normal; color: black; font-size: 15px"
@@ -86,6 +92,14 @@
                     {{ getFormattedDate(data.value) }}
                   </span>
                 </template>
+                <!-- 單位名稱 -->
+                <template #cell(department_classification)="data">
+                  <span
+                    style="font-weight: normal; color: black; font-size: 15px"
+                  >
+                    {{ data.value }}
+                  </span>
+                </template>
                 <!-- 類型 -->
                 <template #cell(icon)="data">
 
@@ -103,20 +117,10 @@
                   >
                 </template>
               </b-table>
+              </div>
               <!-- 分頁符號 -->
-              <b-pagination
-                v-model="currentPage"
-                pills
-                :total-rows="rows"
-                :per-page="perPage"
-                aria-controls="my-table"
-              >
-              </b-pagination>
-            </b-col>
-          </b-row>
-        </div>
-      </div>
-    </b-container>
+      <b-pagination v-model="currentPage" pills :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
+    </div>
   </div>
 </template>
 
@@ -126,6 +130,7 @@ import Multiselect from 'vue-multiselect'
 import { mapState, mapActions } from 'vuex'
 import moment from 'moment'
 import fileType from '@/util/fileType.js'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 export default {
   components: {
     functionBar,
@@ -134,6 +139,7 @@ export default {
   },
   data () {
     return {
+      keywords: [],
       filter: null,
       selected: [],
       perPage: 8,
@@ -146,49 +152,65 @@ export default {
           label: '序號',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '10%' }
         },
         {
           key: 'name',
           label: '檔案名稱',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '30%' }
         },
         {
           key: 'receiveDay',
           label: '收文日期',
           sortable: true,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '15%' }
+        },
+        {
+          key: 'department_classification',
+          label: '單位名稱',
+          sortable: true,
+          tdClass: 'align-middle',
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '20%' }
         },
         {
           key: 'icon',
           label: '類型',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '15%' }
         },
         {
           key: 'size',
           label: '檔案大小',
           sortable: false,
           tdClass: 'align-middle',
-          thStyle: { background: '#1d325f', color: '#ffffff' }
+          thStyle: { background: '#1d325f', color: '#ffffff', width: '10%' }
         }
       ],
+      operators: [
+        { value: 'and', text: 'and' },
+        { value: 'or', text: 'or' }
+      ],
+      searchCondition: {
+        operator: 'and',
+        keyword: []
+      },
       relateFileList: []
     }
   },
   async mounted () {
     await this.getReceiveFileManagement(this.currentUser.defaultTender)
+    await this.lookupTender(this.currentUser.defaultTender)
     await this.getOtherList(this.currentUser.defaultTender)
-    await this.getFileList()
-    console.log(this.relateFileList)
+    this.getFileList()
   },
   methods: {
-    ...mapActions('tenders', ['getReceiveFileManagement', 'getOtherList']),
+    ...mapActions('tenders', ['getReceiveFileManagement', 'getOtherList', 'lookupReceiveFileSearch', 'lookupTender']),
     getFormattedDate (date) {
+      // 轉換日期格式
       let d = null
       if (date) {
         return moment(date).format('YYYY-MM-DD')
@@ -196,20 +218,47 @@ export default {
         return d
       }
     },
+    addTagKeyword (newTag) {
+      this.searchCondition.keyword.push(newTag)
+    },
+    async filterList () {
+      if (this.searchCondition.keyword.length === 0) {
+        alert('輸入關鍵字')
+      } else {
+        let searchList = await this.lookupReceiveFileSearch({
+          operator: this.searchCondition.operator,
+          keyword:
+            this.searchCondition.keyword.length === 0
+              ? []
+              : this.searchCondition.keyword
+        })
+        if (searchList.length !== 0) {
+          this.relateFileList = searchList.map(item => ({
+            ...item,
+            icon: fileType(item.mime)
+          }))
+        } else {
+          this.relateFileList = []
+        }
+      }
+    },
     async getFileList () {
       this.relateFileList = []
       for (let i = 0; i < this.receiveFileManagementList.length; i++) {
         const element = this.receiveFileManagementList[i]
         const docFile = element.docFile
+        const { name, mime, size, src } = docFile[0]
+        // 檢查 docFile 是否存在以及是否有數據
         if (docFile && docFile.length > 0 && docFile[0].name) {
           this.relateFileList.push({
             _id: element._id,
-            name: docFile[0].name,
             receiveDay: element.receiveDay,
-            mime: docFile[0].mime,
-            size: docFile[0].size,
-            src: docFile[0].src,
-            icon: fileType(docFile[0].mime)
+            department_classification: element.department_classification,
+            name,
+            mime,
+            size,
+            src,
+            icon: fileType(mime)
           })
         }
       }
@@ -230,11 +279,12 @@ export default {
     })
   },
   watch: {
+    // 監視 receiveFileManagementList 的變動，當資料變動時，自動更新檔案列表
     receiveFileManagementList: {
       handler () {
         this.getFileList()
       },
-      deep: true
+      deep: true // 監視所有層級的變動，如果檔案列表是嵌套的也會監視到
     }
   }
 }
@@ -245,7 +295,6 @@ export default {
   z-index: 999;
 }
 .thClass {
-  font-size: 16px;
   background-color: #1d325f;
   color: white;
 }
@@ -256,6 +305,77 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+/deep/.popover{
+  padding: 10px;
+  max-width: 450px;
+  text-align: left;
+  background-color: white;
+}
+/deep/ .popover-header{
+  font-size: 18px;
+  color: black;
+}
+/deep/ .popover-body{
+  font-size: 16px;
+  color: black;
+}
+/deep/ .align-middle {
+  max-width: 200px;
+  white-space: normal !important;
+}
+/deep/ .truncate {
+  width: 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.container {
+  height: 50px;
+  margin-top: 10px;
+  margin-left: 5%;
+  padding-top: 10px;
+  padding-left: 1%;
+  padding-right: 1%;
+}
+.text-center {
+  width: 100%;
+  height: 100%;
+}
+.btns2 {
+  float: right;
+  margin-right: 5%;
+}
+.btn_refresh {
+  background-color: #f7fafc;
+  font-size: 14px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-left: 10px;
+  color: #1d325f;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.btn_refresh:hover {
+  color: black;
+  background-color: rgb(228, 228, 228);
+  transform: scale(1.1);
+}
+.btn_search {
+  background-color: rgb(75, 102, 255);
+  font-size: 15px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  color: white;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.btn_search:hover {
+  color: black;
+  background-color: rgb(228, 228, 228);
+  transform: translateY(1);
+}
 .pagination {
   display: flex;
   align-items: center;
@@ -264,14 +384,13 @@ export default {
   margin-top: 20px;
   color: #383838;
 }
-/deep/ .align-middle {
-  max-width: 400px;
-  white-space: normal !important;
+.form-control {
+  color: black;
 }
-/deep/ .truncate {
-  width: 400px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.custom-select {
+  color: black;
 }
+.table thead th {
+  font-size: 15px;}
+
 </style>

src/store/tenders.js

@@ -484,14 +484,28 @@ export default {
       let result = await axios.get(`/tenders/${id}/tender/relatedManagement`)
       commit('setRelatedList', result.data)
     },
-    async lookupPostFileManagement ({ state, commit }, {tenderId, postFileManagementId}) { // 查看發文文件
-      let result = await axios.get(`/tenders/lookup/${tenderId}/postFileManagement/${postFileManagementId}`)
-      commit('setPostFileManagement', result.data)
+    async lookupPostFileSearch ({state}, {operator, keyword}) { // 發文文件搜尋
+      let result = await axios.post('/tenders/postFileSearch', {
+        tenderName: state.tenders.tender,
+        operator,
+        keyword
+      })
+      if (result.data.length === 0) alert('查無資料')
+      return result.data
     },
     async getPostFileManagement ({state, commit}, id) { // 查看發文文件檔案
       let result = await axios.get(`/tenders/${id}/tender/postFileManagement`)
       commit('setPostFileManagementList', result.data)
     },
+    async lookupReceiveFileSearch ({state}, {operator, keyword}) { // 收文文件搜尋
+      let result = await axios.post('/tenders/receiveFileSearch', {
+        tenderName: state.tenders.tender,
+        operator,
+        keyword
+      })
+      if (result.data.length === 0) alert('查無資料')
+      return result.data
+    },
     async getReceiveFileManagement ({state, commit}, id) { // 查看收文文件檔案
       let result = await axios.get(`/tenders/${id}/tender/receiveFileManagement`)
       commit('setReceiveFileManagementList', result.data)

src/views/DocumentManagement/MainPage/functionBar.vue

@@ -37,7 +37,16 @@
       >
         <b-icon-trash-fill></b-icon-trash-fill>&ensp;刪除檔案
       </b-button>
+      <!-- 發文參數設置 -->
+      <b-button
+        class="btn"
+        @click="AddPostFileTypeModalOpen = true"
+      >
+      <!-- :disabled = "this.sendReceivePostManagement.permission === 1" -->
+      <b-icon-tools></b-icon-tools> 單位類表
+      </b-button>
     </div>
+
     <!-- 收文列表 -->
     <div
       class="shadow"
@@ -55,6 +64,7 @@
         ><b-icon-list-check></b-icon-list-check> 匯出列表</b-button
       >
     </div>
+
     <!-- 收文資料管理列表 -->
     <div class="shadow" v-show="$route.name === 'ManageReceiveList'">
     <b-button
@@ -76,6 +86,14 @@
       >
         <b-icon-trash-fill></b-icon-trash-fill>&ensp;刪除檔案
       </b-button>
+      <!-- 收文參數設置 -->
+      <b-button
+        class="btn"
+        @click="AddReceiveFileTypeModalOpen = true"
+      >
+      <!-- :disabled = "this.sendReceivePostManagement.permission === 1" -->
+      <b-icon-tools></b-icon-tools> 單位類表
+      </b-button>
     </div>
 
     <!-- 檔管作業 -->
@@ -117,7 +135,24 @@
     >
       <deleteReceiveManagement @closeEvent="DeleteReceiveManagementModalOpen = false" />
     </modal>
+    <!-- 發文單位類別modal -->
+    <modal
+      :isOpen="AddPostFileTypeModalOpen"
+      title="單位類別"
+      v-on:closeEvent="AddPostFileTypeModalOpen = false"
+    >
+      <addPostFileType @closeEvent="AddPostFileTypeModalOpen = false" />
+    </modal>
+     <!-- 收文單位類別modal -->
+     <modal
+      :isOpen="AddReceiveFileTypeModalOpen"
+      title="單位類別"
+      v-on:closeEvent="AddReceiveFileTypeModalOpen = false"
+    >
+      <addReceiveFileType @closeEvent="AddReceiveFileTypeModalOpen = false" />
+    </modal>
     <!-- 匯出列表modal -->
+
     <modal
       :isOpen="ExportListModalOpen"
       title="匯出列表"
@@ -135,7 +170,8 @@ import receiveManagementList from '@/views/DocumentManagement/ModalContent/recei
 import deletePostManagement from '@/views/DocumentManagement/ModalContent/deletePostManagement.vue'
 import deleteReceiveManagement from '@/views/DocumentManagement/ModalContent/deleteReceiveManagement.vue'
 import { mapState, mapMutations, mapActions } from 'vuex'
-
+import addPostFileType from '@/views/DocumentManagement/ModalContent/addPostFileType.vue'
+import addReceiveFileType from '@/views/DocumentManagement/ModalContent/addReceiveFileType.vue'
 export default {
   data () {
     return {
@@ -144,6 +180,8 @@ export default {
       ReceiveManagementListModalOpen: false,
       DeletePostManagementModalOpen: false,
       DeleteReceiveManagementModalOpen: false,
+      AddPostFileTypeModalOpen: false,
+      AddReceiveFileTypeModalOpen: false,
       initialOfficialDoc: {},
       initialList: [],
       officialDocument: {},
@@ -157,10 +195,15 @@ export default {
   methods: {
     ...mapMutations('officialDocument', ['setOfficialDoc', 'setRecordList', 'setFileList', 'setScanFile', 'resetList']),
     ...mapActions('tenders', ['initPostFileManagement']),
+    ...mapActions('tenders', ['initReceiveFileManagement']),
     async postManagementList () {
       await this.initPostFileManagement()
       this.PostManagementListModalOpen = true
     },
+    async receiveManagementList () {
+      await this.initReceiveFileManagement()
+      this.ReceiveManagementListModalOpen = true
+    },
     paperIssue () {
       this.resetList()
       this.setOfficialDoc(this.initialOfficialDoc)
@@ -204,7 +247,9 @@ export default {
     postManagementList,
     receiveManagementList,
     deletePostManagement,
-    deleteReceiveManagement
+    deleteReceiveManagement,
+    addPostFileType,
+    addReceiveFileType
   }
 }
 </script>

src/views/DocumentManagement/ModalContent/addPostFileType.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="container">
+      <b-row>
+        <b-col cols="2" style="margin-top: 10px">
+          <span>單位名稱:</span>
+        </b-col>
+        <!-- 類別輸入框 -->
+        <b-col cols="8" style="margin-left: -20px; margin-top: 5px">
+          <b-form-input
+            style="width: 400px; height:36px"
+            v-model="type"
+          >
+          </b-form-input>
+        </b-col>
+        <!-- 按鈕 -->
+        <b-col cols="2">
+          <b-button class="btn1" @click="addType">新增</b-button>
+        </b-col>
+      </b-row>
+      <div style="margin-top: -20px">
+        <div style="margin-top: 40px">單位列表</div>
+        <hr style="border-top: 1px solid gray; margin-top: 0; " />
+      </div>
+      <!-- 類別列表 -->
+      <div style="height: 290px; width: 100%; overflow: auto; margin-top: -20px">
+            <ul
+              class="list-group list-group-flush"
+              style="list-style-type: none; font-weight: 600; font-size: 16px"
+            >
+              <b-card
+              v-for="(type, index) in department.paramsValue"
+              :key="index"
+              style="margin-top:4px"
+              class="card-body"
+              >
+                <span>
+                  {{ type }}
+                </span>
+                <b-button
+                  size="sm"
+                  variant="danger"
+                  class="float-right"
+                  @click="deleteType(index)"
+                >
+                  <b-icon icon="trash-fill"></b-icon>
+                </b-button>
+              </b-card>
+            </ul>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapState, mapActions } from 'vuex'
+  
+  export default {
+    data () {
+      return {
+        type: '',
+        department: {
+          _id: '',
+          paramsValue: []
+        }
+      }
+    },
+    async mounted () {
+      this.department = await this.lookupParam('department')
+    },
+    methods: {
+      ...mapActions('paramsSetting', ['lookupParam', 'updateParam']),
+      async addType () {
+        var wasNull = false
+        if (this.type === '') { wasNull = true }
+        if (wasNull) alert('單位類別未輸入!')
+        else {
+          if (this.department.paramsValue.includes(this.type)) {
+            alert('此類別已經存在!')
+            this.type = ''
+          } else {
+            this.department.paramsValue.push(this.type)
+            this.type = ''
+            await this.updateParam({
+              id: this.department._id,
+              paramsValue: this.department.paramsValue
+            })
+          }
+        }
+      },
+      async deleteType (data) {
+        var yes = confirm('類別已再使用，確定刪除?')
+        if (yes) {
+          this.department.paramsValue.splice(data, 1)
+          await this.updateParam({
+            id: this.department._id,
+            paramsValue: this.department.paramsValue
+          })
+        }
+      }
+    },
+    computed: {
+      ...mapState({
+        currentUser: state => state.user.current
+      })
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .btn1 {
+    background-color: rgb(75, 102, 255);
+    font-size: 16px;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: #ffffff;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+    border: none;
+    float: center;
+    text-align: justify;
+    margin-top: 5px;
+    margin-left: 10px;
+  }
+  .container {
+    /* margin-right: 20px; */
+    width: 600px;
+    height: 420px;
+  }
+  .card-body {
+    padding: 5px;
+  }
+  .form-control {
+    color: black !important;
+  }
+  </style>
+  

src/views/DocumentManagement/ModalContent/addReceiveFileType.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="container">
+      <b-row>
+        <b-col cols="2" style="margin-top: 10px">
+          <span>單位名稱:</span>
+        </b-col>
+        <!-- 類別輸入框 -->
+        <b-col cols="8" style="margin-left: -20px; margin-top: 5px">
+          <b-form-input
+            style="width: 400px; height:36px"
+            v-model="type"
+          >
+          </b-form-input>
+        </b-col>
+        <!-- 按鈕 -->
+        <b-col cols="2">
+          <b-button class="btn1" @click="addType">新增</b-button>
+        </b-col>
+      </b-row>
+      <div style="margin-top: -20px">
+        <div style="margin-top: 40px">單位列表</div>
+        <hr style="border-top: 1px solid gray; margin-top: 0; " />
+      </div>
+      <!-- 類別列表 -->
+      <div style="height: 290px; width: 100%; overflow: auto; margin-top: -20px">
+            <ul
+              class="list-group list-group-flush"
+              style="list-style-type: none; font-weight: 600; font-size: 16px"
+            >
+              <b-card
+              v-for="(type, index) in department.paramsValue"
+              :key="index"
+              style="margin-top:4px"
+              class="card-body"
+              >
+                <span>
+                  {{ type }}
+                </span>
+                <b-button
+                  size="sm"
+                  variant="danger"
+                  class="float-right"
+                  @click="deleteType(index)"
+                >
+                  <b-icon icon="trash-fill"></b-icon>
+                </b-button>
+              </b-card>
+            </ul>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapState, mapActions } from 'vuex'
+  
+  export default {
+    data () {
+      return {
+        type: '',
+        department: {
+          _id: '',
+          paramsValue: []
+        }
+      }
+    },
+    async mounted () {
+      this.department = await this.lookupParam('department')
+    },
+    methods: {
+      ...mapActions('paramsSetting', ['lookupParam', 'updateParam']),
+      async addType () {
+        var wasNull = false
+        if (this.type === '') { wasNull = true }
+        if (wasNull) alert('單位類別未輸入!')
+        else {
+          if (this.department.paramsValue.includes(this.type)) {
+            alert('此類別已經存在!')
+            this.type = ''
+          } else {
+            this.department.paramsValue.push(this.type)
+            this.type = ''
+            await this.updateParam({
+              id: this.department._id,
+              paramsValue: this.department.paramsValue
+            })
+          }
+        }
+      },
+      async deleteType (data) {
+        var yes = confirm('類別已再使用，確定刪除?')
+        if (yes) {
+          this.department.paramsValue.splice(data, 1)
+          await this.updateParam({
+            id: this.department._id,
+            paramsValue: this.department.paramsValue
+          })
+        }
+      }
+    },
+    computed: {
+      ...mapState({
+        currentUser: state => state.user.current
+      })
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .btn1 {
+    background-color: rgb(75, 102, 255);
+    font-size: 16px;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: #ffffff;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+    border: none;
+    float: center;
+    text-align: justify;
+    margin-top: 5px;
+    margin-left: 10px;
+  }
+  .container {
+    /* margin-right: 20px; */
+    width: 600px;
+    height: 420px;
+  }
+  .card-body {
+    padding: 5px;
+  }
+  .form-control {
+    color: black !important;
+  }
+  </style>
+  

src/views/DocumentManagement/ModalContent/postManagementList.vue

@@ -6,7 +6,7 @@
         <span>警示:發文日期和上傳檔案部分皆須填寫</span>
       </b-col>
     </b-row>
-    <!-- 收文日期 -->
+    <!-- 發文日期 -->
     <b-row style="margin-top: 5px">
       <b-col class="label_col" cols="3">
        <span style="color: red">*</span>
@@ -15,12 +15,39 @@
       <b-col cols="9">
         <div style="width: 98%; margin-left: -20px">
           <b-form-datepicker
-          v-model="postFileManagement.postDay"
+          v-model="postFile.postDay"
           placeholder="請選擇日期"
           style="font-size: 16px; width: 95%"
           />
         </div>
       </b-col>
+    </b-row>
+     <!-- 來文單位 -->
+     <b-row style="margin-top: 15px">
+      <b-col class="label_col" cols="3">
+       <span style="color: red">*</span>
+        <span>來文單位:</span>
+      </b-col>
+      <b-col cols="9">
+        <div style="width: 98%; margin-left: -20px">
+          <multiselect
+            style="width: 95%"
+            v-model="postFile.department_classification"
+            tag-placeholder="加入欄位"
+            caret="openSelect"
+            placeholder="請輸入或選擇單位"
+            deselect-label="已選擇"
+            :options="department.paramsValue"
+            :multiple="false"
+            :taggable="true"
+            @tag="addTagCompany"
+            selectLabel="請選擇"
+            selectedLabel="已選擇"
+            deselectLabel="取消選擇"
+          >
+          </multiselect>
+        </div>
+      </b-col>
     </b-row>
     <!-- 上傳檔案 -->
     <b-row style="margin-top: 15px">
@@ -55,13 +82,15 @@
     <div style="float: right; padding-top: 15px">
       <div v-if="isSaveLoading" class="loading">處理中請稍後...</div>
       <b-button class="btn1" style="margin-left: 10px" @click="addOne" v-else>
-        儲存
+        確認
       </b-button>
     </div>
   </div>
 </template>
 
 <script>
+import Multiselect from 'vue-multiselect'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 import { mapActions, mapState } from 'vuex'
 export default {
   data () {
@@ -72,28 +101,42 @@ export default {
       addOneButtonClicked: false,
       filesToBeUploaded: [],
       relateFileList: [],
-      docs: []
+      docs: [],
+      postFileManagement: {
+        department_classification: ''
+      },
+      department: {
+        _id: '',
+        paramsValue: []
+      }
     }
   },
   async mounted () {
     await this.getOtherList(this.currentUser.defaultTender)
+    this.department = await this.lookupParam('department')
+  },
+  components: {
+    Multiselect
   },
   methods: {
     ...mapActions('tenders', ['getOtherList', 'addPostFileManagement']),
+    ...mapActions('paramsSetting', ['updateParam', 'lookupParam']),
     async addOne () {
       var wasNull = false
       if (
-        this.postFileManagement.postDay === undefined ||
-        this.$refs.inputPostFiles.files.length === 0
+        this.postFile.postDay === undefined ||
+        this.$refs.inputPostFiles.files.length === 0 ||
+        this.postFile.department_classification === undefined
       ) {
         wasNull = true
       }
-      if (wasNull) alert('發文日期未填或是未上傳檔案!')
+      if (wasNull) alert('請檢查是否有未填項目!')
       else {
         var yes = confirm('確定上傳檔案?')
         if (yes) {
           await this.uploadPostFile()
           this.$emit('closeEvent')
+          console.log(this.postFile.department_classification)
         } else {
           alert('取消新增')
         }
@@ -149,13 +192,26 @@ export default {
     // 取消modal
     closeModal () {
       this.$emit('closeEvent')
+    },
+    async addTagCompany (newTag) {
+      if (!this.department.paramsValue.includes(newTag)) {
+        this.department.paramsValue.push(newTag)
+        await this.updateParam({
+          id: this.department._id,
+          paramsValue: this.department.paramsValue
+        })
+        this.department = await this.lookupParam(
+          'department'
+        )
+      }
+      this.postFileManagement.department_classification = newTag
     }
   },
   computed: {
     ...mapState({
       tenders: state => state.officialDocument,
       currentUser: state => state.user.current,
-      postFileManagement: state => state.tenders.postFileManagement,
+      postFile: state => state.tenders.postFileManagement,
       postFileList: (state) => state.tenders.postFileManagementList
     })
   }

src/views/DocumentManagement/ModalContent/receiveManagementList.vue

@@ -15,12 +15,39 @@
       <b-col cols="9">
         <div style="width: 98%; margin-left: -20px">
           <b-form-datepicker
-            v-model="receiveFileManagement.receiveDay"
+            v-model="receiveFile.receiveDay"
             placeholder="請選擇日期"
             style="font-size: 16px; width: 95%"
           />
         </div>
       </b-col>
+    </b-row>
+     <!-- 來文單位 -->
+     <b-row style="margin-top: 15px">
+      <b-col class="label_col" cols="3">
+       <span style="color: red">*</span>
+        <span>來文單位:</span>
+      </b-col>
+      <b-col cols="9">
+        <div style="width: 98%; margin-left: -20px">
+          <multiselect
+            style="width: 95%"
+            v-model="receiveFile.department_classification"
+            tag-placeholder="加入欄位"
+            caret="openSelect"
+            placeholder="請輸入或選擇單位"
+            deselect-label="已選擇"
+            :options="department.paramsValue"
+            :multiple="false"
+            :taggable="true"
+            @tag="addTagCompany"
+            selectLabel="請選擇"
+            selectedLabel="已選擇"
+            deselectLabel="取消選擇"
+          >
+          </multiselect>
+        </div>
+      </b-col>
     </b-row>
     <!-- 上傳檔案 -->
     <b-row style="margin-top: 15px">
@@ -31,10 +58,11 @@
       <b-col cols="3">
         <div class="upload-wrapper" style="margin-left: -35px">
           <b-button
-            ref="uploadButton"
-            class="btn1"
-            v-b-popover.hover.bottom="{title:'支援上傳類型', content:'JPG, PNG, PDF, DOCX, DOC, XLSX 檔案'}"
-            @click="checkSave"
+             ref="uploadButton"
+             class="btn1"
+             v-b-popover.hover="'JPG, PNG, PDF, DOCX, DOC, XLSX 檔案'"
+             title="支援上傳類型 "
+             @click="checkSave"
           >
             <b-icon-file-earmark-plus />選擇檔案
           </b-button>
@@ -54,13 +82,15 @@
     <div style="float: right; padding-top: 15px">
       <div v-if="isSaveLoading" class="loading">處理中請稍後...</div>
       <b-button class="btn1" style="margin-left: 10px" @click="addOne" v-else>
-        儲存
+        確認
       </b-button>
     </div>
   </div>
 </template>
 
 <script>
+import Multiselect from 'vue-multiselect'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 import { mapActions, mapState } from 'vuex'
 export default {
   data () {
@@ -71,29 +101,42 @@ export default {
       addOneButtonClicked: false,
       filesToBeUploaded: [],
       relateFileList: [],
-      docs: []
+      docs: [],
+      receiveFileManagement: {
+        department_classification: ''
+      },
+      department: {
+        _id: '',
+        paramsValue: []
+      }
     }
   },
   async mounted () {
     await this.getOtherList(this.currentUser.defaultTender)
+    this.department = await this.lookupParam('department')
+  },
+  components: {
+    Multiselect
   },
   methods: {
     ...mapActions('tenders', ['getOtherList', 'addReceiveFileManagement']),
+    ...mapActions('paramsSetting', ['updateParam', 'lookupParam']),
     async addOne () {
       var wasNull = false
       if (
-        this.receiveFileManagement.receiveDay === undefined ||
-        this.$refs.inputReceiveFiles.files.length === 0
+        this.receiveFile.receiveDay === undefined ||
+        this.$refs.inputReceiveFiles.files.length === 0 ||
+        this.receiveFile.department_classification === undefined
       ) {
         wasNull = true
       }
-      if (wasNull) alert('發文日期未填或是未上傳檔案!')
+      if (wasNull) alert('請檢查是否有未填項目!')
       else {
         var yes = confirm('確定上傳檔案?')
         if (yes) {
-          this.isSaveLoading = true
           await this.uploadReceiveFile()
           this.$emit('closeEvent')
+          console.log(this.receiveFile.department_classification)
         } else {
           alert('取消新增')
         }
@@ -151,13 +194,26 @@ export default {
     // 取消modal
     closeModal () {
       this.$emit('closeEvent')
+    },
+    async addTagCompany (newTag) {
+      if (!this.department.paramsValue.includes(newTag)) {
+        this.department.paramsValue.push(newTag)
+        await this.updateParam({
+          id: this.department._id,
+          paramsValue: this.department.paramsValue
+        })
+        this.department = await this.lookupParam(
+          'department'
+        )
+      }
+      this.receiveFileManagement.department_classification = newTag
     }
   },
   computed: {
     ...mapState({
       tenders: (state) => state.officialDocument,
       currentUser: (state) => state.user.current,
-      receiveFileManagement: (state) => state.tenders.receiveFileManagement,
+      receiveFile: (state) => state.tenders.receiveFileManagement,
       receiveFileList: (state) => state.tenders.receiveFileManagementList
     })
   }
@@ -179,29 +235,29 @@ export default {
 .container {
   margin-right: 20px;
   width: 30vw;
-  height: 3vh;
+  height:3vh;
 }
-.btn1 {
+.btn1{
   background-color: rgb(75, 102, 255);
-  font-size: 16px;
+  font-size:16px;
   margin-top: 15px;
   margin-left: 15px;
-  padding-left: 7px;
+  padding-left:7px;
   padding-right: 7px;
   padding-top: 5px;
   padding-bottom: 5px;
   color: #ffffff;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-  border: none;
+  border:none;
 }
-.btn1:hover {
+.btn1:hover{
   color: rgb(255, 255, 255);
   background-color: rgb(49, 68, 175);
 }
 .hint_label {
   padding-left: 10px;
   color: red;
-  font-size: 10px;
+  font-size:10px;
 }
 
 .file_title {