fix bug

src/api/resource/index.js

@@ -50,5 +50,18 @@ export default {
   fileList(params) {
     // 文件夹里包含文件列表
     return fetch('/blade-project-manage-v2/folder/v2/getListByFolderId', params)
+  },
+  /**
+   * 文件引用接口
+   * @param params
+   * @returns {Promise<unknown>}
+   */
+  filePicker(params) {
+    return fetch(
+      '/blade-project-manage-v2/folder/v2/queryPage',
+      params,
+      'post',
+      'json'
+    )
   }
 }

src/components/filepicker/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-button type="primary" @click="show = true">文件上传</el-button>
+    <el-dialog
+      v-model="show"
+      width="900"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <template #header>
+        <div class="full-width flex flex-center flex-justify-between">
+          <h4>选择文件</h4>
+          <div class="flex flex-center flex-justify-end">
+            <span class="mr-20" style="width: 120px">项目阶段</span>
+            <el-select
+              v-model="stageId"
+              remote
+              filterable
+              clearable
+              placeholder="筛选项目阶段"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in stageList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <upload-file class="ml-10" btn-text="本地上传" />
+          </div>
+        </div>
+      </template>
+      <div>
+        <div class="flex">
+          <el-tabs
+            v-model="activeName"
+            class="demo-tabs"
+            tab-position="left"
+            @tab-change="tabClick"
+          >
+            <el-tab-pane label="最近上传" name="1"></el-tab-pane>
+            <el-tab-pane label="全部文件" name="2"></el-tab-pane>
+            <el-tab-pane label="要件" name="3"></el-tab-pane>
+            <el-tab-pane label="合同" name="4"></el-tab-pane>
+          </el-tabs>
+          <div class="area">
+            <div class="files">
+              <xtable :data="list" :option="option" />
+            </div>
+          </div>
+        </div>
+        <div class="full-width flex flex-center flex-justify-between mt-20">
+          <span class="bold">已选择 8/9 项</span>
+          <div>
+            <el-button type="primary" plain @click="show = false"
+              >取 消</el-button
+            >
+            <el-button type="primary">确 定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import xtable from '@/views/resource/component/xtable.vue'
+import uploadFile from '@/components/upload-file/index.vue'
+export default {
+  components: {
+    xtable,
+    uploadFile
+  },
+  props: {
+    projectId: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    show: {
+      handler(val) {
+        if (val) {
+          this.getStage()
+          this.fetchData()
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      stageId: '',
+      stageList: [],
+      show: false,
+      activeName: '1',
+      list: [],
+      option: {
+        showMenu: false,
+        column: [
+          {
+            label: '名称',
+            prop: 'title',
+            display: false
+          },
+          {
+            label: '上传人2',
+            prop: 'createUserName'
+          },
+          {
+            label: '上传时间',
+            prop: 'createUserName'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    tabClick(res) {
+      console.log(this.activeName)
+    },
+    getStage() {
+      this.$api.project
+        .includeStage({ projectId: this.projectId })
+        .then(res => {
+          if (res.code === 200) {
+            this.stageList = res.data
+            this.stageId = this.stageList[0].id
+          }
+        })
+    },
+    fetchData() {
+      const data = {
+        projectId: this.projectId,
+        stageId: this.stageId,
+        isLatest: 0
+      }
+      this.$api.resource.filePicker(data).then(res => {
+        if (res.code === 200) {
+          this.list = res.data.records
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.area {
+  height: 600px;
+  width: 88%;
+}
+.files {
+  overflow-y: scroll;
+  padding: 0 10px;
+}
+</style>

src/components/upload-file/index.vue

@@ -11,7 +11,7 @@
         :on-success="success"
         :show-file-list="false"
       >
-        <el-button type="primary" icon="Plus">文件上传</el-button>
+        <el-button type="primary" icon="Plus">{{ btnText }}</el-button>
       </el-upload>
     </div>
     <div class="upload" v-if="drawer">
@@ -42,6 +42,10 @@ import { Base64 } from 'js-base64'
 
 export default {
   props: {
+    btnText: {
+      type: String,
+      default: '文件上传'
+    },
     accept: {
       type: String,
       default: ''

src/views/resource/component/move.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-button type="primary" text @click="show = true">移动</el-button>
+    <el-dialog v-model="show" width="800">
+      <div class="full-width content">
+        <div v-for="i in 20" class="padding light-green-bg mb-5">333</div>
+      </div>
+      <div class="full-width flex flex-justify-end flex-center mt-20">
+        <el-button type="primary" plain>取 消</el-button>
+        <el-button type="primary">移动到此</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 500px;
+  overflow-y: scroll;
+  background-color: red;
+}
+</style>

src/views/resource/component/row1.vue

@@ -4,10 +4,17 @@
       v-if="index === 0"
       class="flex flex-align-center flex-justify-start full-height"
     >
-      <img src="../../../assets/svg/folder/invisible.svg" />
+      <img
+        v-if="row.type === 2"
+        src="../../../assets/svg/folder/invisible.svg"
+      />
+      <img v-else src="../../../assets/svg/folder/pdf.svg" />
       {{ row[column.prop] }}
     </div>
-    <div v-else class="flex flex-align-center flex-center full-height">
+    <div
+      v-else
+      class="flex flex-align-center flex-center full-height flex-child-average"
+    >
       {{ row[column.prop] }}
     </div>
   </div>
@@ -34,7 +41,7 @@ export default {
 
 <style lang="scss" scoped>
 .row {
-  height: 45px;
+  height: 55px;
   border-bottom: #f7f8fa solid 1px;
   img {
     width: 40px;

src/views/resource/component/xtable.vue

@@ -3,14 +3,18 @@
     <div class="flex flex-center flex-justify-between border-bottom">
       <div v-for="header in headers" :key="header.id" class="mt-20 full-width">
         <div
-          v-if="header.label !== '操作'"
+          v-if="header.label === '操作' && showMenu"
           class="padding-top padding-bottom"
-          :style="`min-width:` + header.width + `px`"
+          style="width: 280px"
         >
-          {{ header.label }}
+          {{ header.label }}{{ showMenu }}
         </div>
-        <div v-else class="menu flex flex-center">
-          {{ header.label }}{{ header.width }}
+        <div
+          v-else
+          class="menu flex flex-center"
+          :style="header.width ? `width:` + header.width + `px` : ''"
+        >
+          {{ header.label }}
         </div>
       </div>
     </div>
@@ -27,12 +31,14 @@
             class="flex-child-average flex"
           >
             <div
-              v-if="prop.label === '操作'"
-              class="nowrap menu flex flex-center"
+              v-if="prop.label === '操作' && showMenu"
+              class="nowrap menu flex flex-center light-blue-bg"
+              style="width: 280px"
             >
               <el-button type="primary" size="small" text>查看</el-button>
               <el-button type="primary" size="small" text>归档</el-button>
               <el-button type="primary" size="small" text>重命名</el-button>
+              <move />
             </div>
             <div
               v-else
@@ -61,9 +67,12 @@
 
 <script>
 import row1 from '@/views/resource/component/row1.vue'
+import move from '@/views/resource/component/move.vue'
+
 export default {
   components: {
-    row1
+    row1,
+    move
   },
   props: {
     data: {
@@ -86,6 +95,8 @@ export default {
         const menu = {
           label: '操作'
         }
+        console.log(this.option.showMenu)
+        this.showMenu = this.option.showMenu
         this.headers = val.column
         if (this.headers.findIndex(e => e.label === '操作') === -1) {
           this.headers.push(menu)
@@ -96,6 +107,7 @@ export default {
   },
   data() {
     return {
+      showMenu: true,
       headers: []
     }
   },
@@ -122,7 +134,8 @@ export default {
 }
 
 .menu {
-  width: 280px;
+  display: flex;
+  flex: 1;
   height: 45px;
   border-bottom: #f7f8fa solid 1px;
 }

src/views/resource/index.vue

@@ -39,6 +39,11 @@
               >新建文件夹
             </el-button>
             <el-button type="primary" plain icon="User">批量授权</el-button>
+            <filepicker
+              class="ml-10"
+              :project-id="folderInfo.projectId"
+              :stage-id="folderInfo.stageId"
+            />
           </div>
           <div class="flex flex-center">
             <span class="nowrap mr-10">文件搜索</span>
@@ -86,13 +91,15 @@ import tipsCustom from '@/components/tips-custom/index.vue'
 import xtable from '@/views/resource/component/xtable.vue'
 import floder from '@/views/resource/component/floder.vue'
 import uploadFile from '@/components/upload-file/index.vue'
+import filepicker from '@/components/filepicker/index.vue'
 
 export default {
   components: {
     tipsCustom,
     xtable,
     floder,
-    uploadFile
+    uploadFile,
+    filepicker
   },
 
   data() {