搜索v2

src/layout/search/index.vue

@@ -15,7 +15,11 @@
               <Search />
             </el-icon>
           </div>
-          <el-input v-model="keyword" placeholder="搜索"></el-input>
+          <el-input
+            v-model="keyword"
+            placeholder="搜索"
+            @keyup.enter="search"
+          ></el-input>
           <el-button type="primary" class="ml-20" @click="search"
             >搜 索</el-button
           >
@@ -25,12 +29,19 @@
           <div class="flex mt-20">
             <div
               v-if="list.length > 0"
-              class="flex flex-center flex-justify-between full-width"
+              class="flex flex-align-start flex-justify-between full-width"
             >
               <div class="full-width mt-10 list">
-                <div v-for="i in list" :key="i">
-                  <div class="padding border-bottom">
-                    (初设批复)云县火车站站前广场及综合配套工程.pdf
+                <div v-for="(i, index) in list" :key="i">
+                  <div
+                    class="padding border-bottom"
+                    @click="changeDoc(i, index)"
+                  >
+                    <el-tooltip :content="i.fileName" placement="bottom">
+                      <div :class="fileIndex === index ? 'bold' : ''">
+                        {{ i.fileName }}
+                      </div>
+                    </el-tooltip>
                   </div>
                 </div>
               </div>
@@ -39,27 +50,51 @@
                   class="full-height full-width preview flex flex-center"
                   v-if="current"
                 >
-                  <img
-                    class="img"
-                    :src="current.contents[0].imagePath"
-                    alt="img"
-                  />
+                  <el-tooltip placement="right">
+                    <template #content>
+                      <div
+                        style="width: 200px"
+                        v-html="current.contents[pageIndex].content"
+                      ></div>
+                    </template>
+                    <img
+                      class="img"
+                      :src="current.contents[pageIndex].imagePath"
+                      alt="img"
+                      @click="showImage = true"
+                    />
+                  </el-tooltip>
                 </div>
                 <div class="flex flex-center flex-justify-between padding">
                   <div>
-                    <el-button type="primary" icon="ArrowLeftBold" circle />
-                    <el-button type="primary" icon="ArrowRightBold" circle />
+                    <el-button
+                      type="primary"
+                      icon="ArrowLeftBold"
+                      circle
+                      @click="pageChange(1)"
+                    />
+                    <el-button
+                      type="primary"
+                      icon="ArrowRightBold"
+                      circle
+                      @click="pageChange(2)"
+                    />
                   </div>
-                  <el-button type="primary">查看</el-button>
+                  <el-button type="primary" @click="goDoc">查看</el-button>
                 </div>
-                <div class="full-width flex flex-justify-start flex-col">
+                <div
+                  class="full-width flex flex-justify-start flex-col"
+                  style="width: 360px"
+                >
+                  <span class="lines-1"
+                    >名称：{{ current.contents[pageIndex].fileName }}</span
+                  >
                   <span class="lines-1"
-                    >名称：(初设批复)云县火车站站前广场及综合配套工程。pdf</span
+                    >所属项目：{{ current.projectName }}</span
                   >
                   <span class="lines-1"
-                    >所属项目：(初设批复)云县火车站站前广场及综合配套工程</span
+                    >所属文件夹：{{ current.stageName }}</span
                   >
-                  <span class="lines-1">所属文件夹：谋划阶段-文件</span>
                 </div>
               </div>
             </div>
@@ -75,6 +110,12 @@
         </div>
       </div>
     </el-dialog>
+    <el-image-viewer
+      v-if="showImage"
+      :url-list="imgList"
+      @close="showImage = false"
+      :initial-index="pageIndex"
+    />
   </div>
 </template>
 
@@ -89,25 +130,33 @@ export default {
   data() {
     return {
       keyword: '',
+      showImage: false,
+      imgList: [],
       page: { current: 1, size: 10 },
       list: [],
       current: null,
       count: '',
-      loading: false
+      loading: '333',
+      fileIndex: 0,
+      pageIndex: 0,
+      pageList: []
     }
   },
   methods: {
     search() {
+      if (this.keyword.length === 0) {
+        return
+      }
       this.loading = true
       const data = Object.assign(this.page, { keyword: this.keyword })
       this.$api.search.searchList(data).then(res => {
         this.loading = false
         if (res.code === 200) {
-          console.log(res.data)
           this.list = res.data.records
           this.count = res.data.total
           if (this.list.length > 0) {
             this.current = this.list[0]
+            this.fetchData()
           } else {
             this.$message.error('暂无数据')
           }
@@ -116,9 +165,60 @@ export default {
         }
       })
     },
+    /**
+     * 对数据进行初始化
+     */
+    fetchData() {
+      this.current.contents.map(sub => {
+        sub.content = sub.content.replace(
+          this.keyword,
+          `<span
+                          style="color: red"
+                          >` +
+            this.keyword +
+            `</span
+                        >`
+        )
+        return sub
+      })
+      this.pageList = this.current.contents.map(sub => sub.currentPage)
+      this.imgList = this.current.contents.map(sub => sub.imagePath)
+    },
     closed() {
       this.keyword = ''
       this.$emit('close', false)
+    },
+    /**
+     * type 1 前一页 后一页
+     */
+    pageChange(type) {
+      console.log(type)
+      if (type === 1) {
+        if (this.pageIndex === 0) {
+          return
+        }
+        this.pageIndex = this.pageIndex - 1
+      } else {
+        if (this.pageIndex < this.pageList.length) {
+          this.pageIndex = this.pageIndex + 1
+        }
+      }
+    },
+    /**
+     * 查看文档
+     * */
+    goDoc() {
+      const routeData = this.$router.resolve({
+        path: '/home/file_detail',
+        query: { id: this.current.fileId }
+      })
+      window.open(routeData.href, '_blank')
+    },
+    changeDoc(item, index) {
+      this.current = item
+      this.pageIndex = 0
+      this.fileIndex = index
+      this.fetchData()
     }
   }
 }
@@ -142,12 +242,18 @@ export default {
   overflow: hidden;
 }
 
-.preview {
+.preview-content {
   width: 360px;
+  background-color: aqua;
+}
+
+.preview {
+  width: 260px;
   height: 460px;
   border: #eeeeee solid 1px;
   padding: 10px;
   margin: 10px;
+  background-color: red;
   border-radius: 8px;
 
   .img {

src/layout/top.vue

@@ -51,11 +51,6 @@
       </el-col>
     </el-row>
     <search :show="show" @close="show = false" />
-    <el-image-viewer
-      v-if="showImage"
-      :url-list="imgList"
-      @close="showImage = false"
-    />
   </div>
 </template>
 

src/views/home/component/files_list.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col">
       <div class="flex flex-align-center padding border-bottom bold title-sp">
         <span class="flex-05"></span>
-        <span style="flex: 1.5;text-align: left">文件/文件夹名称</span>
+        <span style="flex: 1.5; text-align: left">文件/文件夹名称</span>
         <span class="flex-1">更新（上传）时间</span>
         <span class="flex-05">文件大小(数量)</span>
         <!--        <span class="flex-05">是否同步</span>-->
@@ -11,85 +11,160 @@
         <span class="flex-1">上传机构</span>
         <span style="flex: 1.5">操作</span>
       </div>
-      <el-empty v-if="files && files.length === 0"/>
-      <div v-for="item in files" v-else :key='item.id' class="flex flex-center border-bottom padding content-sp">
+      <el-empty v-if="files && files.length === 0" />
+      <div
+        v-for="item in files"
+        v-else
+        :key="item.id"
+        class="flex flex-center border-bottom padding content-sp"
+      >
         <div v-if="item.type === 1" class="flex-05">
-          <img v-if="item.suffix === 'docx'" class="icon" src="../../../assets/svg/folder/doc.svg">
-          <img v-else-if="item.suffix === 'pdf'" class="icon" src="../../../assets/svg/folder/pdf.svg">
-          <img v-else-if="item.suffix === 'xls'" class="icon" src="../../../assets/svg/folder/xls.svg">
-          <img v-else class="icon" src="../../../assets/svg/folder/other.svg">
+          <img
+            v-if="item.suffix === 'docx'"
+            class="icon"
+            src="../../../assets/svg/folder/doc.svg"
+          />
+          <img
+            v-else-if="item.suffix === 'pdf'"
+            class="icon"
+            src="../../../assets/svg/folder/pdf.svg"
+          />
+          <img
+            v-else-if="item.suffix === 'xls'"
+            class="icon"
+            src="../../../assets/svg/folder/xls.svg"
+          />
+          <img v-else class="icon" src="../../../assets/svg/folder/other.svg" />
         </div>
         <div v-else class="flex-05 pointer" @click="View(item)">
-          <img v-if="item.isAccess === 1" src="../../../assets/svg/folder/see.svg" class="icon-1">
-          <img v-if="item.isAccess === 2" src="../../../assets/svg/folder/edit.svg" class="icon-1">
-          <img v-if="item.isAccess === 3" src="../../../assets/svg/folder/invisible.svg" class="icon-1">
+          <img
+            v-if="item.isAccess === 1"
+            src="../../../assets/svg/folder/see.svg"
+            class="icon-1"
+          />
+          <img
+            v-if="item.isAccess === 2"
+            src="../../../assets/svg/folder/edit.svg"
+            class="icon-1"
+          />
+          <img
+            v-if="item.isAccess === 3"
+            src="../../../assets/svg/folder/invisible.svg"
+            class="icon-1"
+          />
         </div>
-        <span style="flex: 1.5;text-align: left">{{ item.title }}</span>
+        <span style="flex: 1.5; text-align: left">{{ item.title }}</span>
         <span class="flex-1">{{ item.updateTime }}</span>
         <span v-if="item.type === 1" class="flex-05">{{ item.size }}</span>
-        <span v-if="item.type === 2" class="flex-05">{{ item.fileAmount }}个</span>
-        <span v-if="item.type === 1" class="flex-05">{{ item.createUserName }}</span>
+        <span v-if="item.type === 2" class="flex-05"
+          >{{ item.fileAmount }}个</span
+        >
+        <span v-if="item.type === 1" class="flex-05">{{
+          item.createUserName
+        }}</span>
         <span v-if="item.type === 2" class="flex-05">-</span>
-        <span v-if="item.type === 1" class="flex-1">{{ item.createDeptName }}</span>
+        <span v-if="item.type === 1" class="flex-1">{{
+          item.createDeptName
+        }}</span>
         <span v-if="item.type === 2" class="flex-1">-</span>
         <div class="flex flex-center" style="flex: 1.5">
-          <main-button icon="View" title="详情" width="85" @click="View(item)"/>
-          <main-button v-if="item.type === 1 && item.isAccess ===2 " icon="Download" title="下载" width="85"
-                       @click="downFile(item)"/>
-          <main-button v-else-if="item.type === 2 && item.isAccess === 2" icon="Upload" title="上传文件" width="85"
-                       @click="upload(item)"/>
-          <main-button v-else-if="item.type === 2 && item.isAccess === 3" icon="Position"
-                       title="授权申请" width="85" @click="folderApply(item)"/>
-          <main-button v-if='permission && permission.permissions.home_folder_del && item.isAccess === 2 '
-                       icon="Delete" title="删除" width="85"
-                       @click="removeFile(item)"/>
+          <main-button
+            icon="View"
+            title="详情"
+            width="85"
+            @click="View(item)"
+          />
+          <main-button
+            v-if="item.type === 1 && item.isAccess === 2"
+            icon="Download"
+            title="下载"
+            width="85"
+            @click="downFile(item)"
+          />
+          <main-button
+            v-else-if="item.type === 2 && item.isAccess === 2"
+            icon="Upload"
+            title="上传文件"
+            width="85"
+            @click="upload(item)"
+          />
+          <main-button
+            v-else-if="item.type === 2 && item.isAccess === 3"
+            icon="Position"
+            title="授权申请"
+            width="85"
+            @click="folderApply(item)"
+          />
+          <main-button
+            v-if="
+              permission &&
+              permission.permissions.home_folder_del &&
+              item.isAccess === 2
+            "
+            icon="Delete"
+            title="删除"
+            width="85"
+            @click="removeFile(item)"
+          />
         </div>
       </div>
     </div>
     <!-------分页----->
-    <div v-if="files && files.length !== 0" class="mt-20 flex flex-center flex-justify-end" style="margin-right: 50px">
+    <div
+      v-if="files && files.length !== 0"
+      class="mt-20 flex flex-center flex-justify-end"
+      style="margin-right: 50px"
+    >
       <span class="mr-20">共{{ data.total }}条</span>
-      <el-pagination :total="data.total" background layout="prev, pager, next" @current-change='changePage'/>
+      <el-pagination
+        :total="data.total"
+        background
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
     </div>
 
     <el-image-viewer
-        v-if='showImage'
-        :url-list="imgList"
-        @close='viewerClose'
+      v-if="showImage"
+      :url-list="imgList"
+      @close="viewerClose"
     />
-    <el-dialog v-model="show"
-               append-to-body
-               center
-               title="附件上传（可批量）">
+    <el-dialog v-model="show" append-to-body center title="附件上传（可批量）">
       <div class="flex flex-col" style="margin-top: -20px">
         <span class="bold main-color font-16 mb-10">{{ folderName }}</span>
-        <uploadFile :data='{type:1,toStatus:0}' :max='20'
-                    @close='show = false'
-                    accept='.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.ppt,pptx'
-                    @success='success'/>
+        <uploadFile
+          :data="{ type: 1, toStatus: 0 }"
+          :max="20"
+          @close="show = false"
+          accept=".doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.ppt,pptx"
+          @success="success"
+        />
       </div>
     </el-dialog>
     <!--    申请授权-->
-    <el-dialog title='申请授权' v-model='applyShow' width='35%'>
-      <div class='full-width flex flex-center flex-col'>
-        <text class='full-width black text-left font-14 bold'>确认向业主申请{{ currentFolder.folderName }}的管理权限？
+    <el-dialog title="申请授权" v-model="applyShow" width="35%">
+      <div class="full-width flex flex-center flex-col">
+        <text class="full-width black text-left font-14 bold"
+          >确认向业主申请{{ currentFolder.folderName }}的管理权限？
         </text>
-        <div class='full-width flex flex-align-center mt-20'>
-          <span class='font-14 bold'>授权时长</span>
+        <div class="full-width flex flex-align-center mt-20">
+          <span class="font-14 bold">授权时长</span>
           <el-date-picker
-              v-model="applyTime"
-              class='ml-20'
-              end-placeholder="截止日期"
-              range-separator="至"
-              start-placeholder="开始日期"
-              type="daterange"
-              value-format='YYYY-MM-DD'
+            v-model="applyTime"
+            class="ml-20"
+            end-placeholder="截止日期"
+            range-separator="至"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD"
           />
         </div>
-        <el-divider/>
-        <div class='full-width flex flex-center'>
-          <el-button type='danger' plain @click="applyShow = false">取 消</el-button>
-          <el-button type='primary' @click='submit'>确 定</el-button>
+        <el-divider />
+        <div class="full-width flex flex-center">
+          <el-button type="danger" plain @click="applyShow = false"
+            >取 消</el-button
+          >
+          <el-button type="primary" @click="submit">确 定</el-button>
         </div>
       </div>
     </el-dialog>
@@ -111,7 +186,7 @@ export default {
   },
   watch: {
     data: {
-      handler (val) {
+      handler(val) {
         if (val === '' || val === null) {
           return
         }
@@ -138,12 +213,12 @@ export default {
       immediate: true
     }
   },
-  setup () {
+  setup() {
     const user = useStore()
     const permission = permissionStore()
     return { user, permission }
   },
-  data () {
+  data() {
     return {
       show: false,
       applyShow: false,
@@ -165,12 +240,12 @@ export default {
       folderName: ''
     }
   },
-  created () {
+  created() {
     this.query = this.$route.query
     this.isHistory()
   },
   methods: {
-    isHistory () {
+    isHistory() {
       const data = { folderId: this.query.id, projectId: this.query.projectId }
       const _this = this
       this.$api.project.isHistory(data).then(res => {
@@ -180,7 +255,7 @@ export default {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
-            }).then((res) => {
+            }).then(res => {
               if (res === 'confirm') {
                 _this.doHistory(data)
               }
@@ -191,7 +266,7 @@ export default {
         }
       })
     },
-    doHistory (data) {
+    doHistory(data) {
       this.$api.project.doneHistory(data).then(res => {
         if (res.code === 200) {
           this.$message.success(res.msg)
@@ -200,7 +275,7 @@ export default {
         }
       })
     },
-    View (item) {
+    View(item) {
       console.log(item)
       if (item.type === 1) {
         if (['png', 'jpg'].includes(item.suffix)) {
@@ -208,7 +283,10 @@ export default {
           this.imgList.push(item.url)
           return
         }
-        const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: item.fileId } })
+        const routeData = this.$router.resolve({
+          path: '/home/file_detail',
+          query: { id: item.fileId }
+        })
         window.open(routeData.href, '_blank')
       } else {
         this.query.id = item.id
@@ -229,13 +307,13 @@ export default {
         })
       }
     },
-    upload (item) {
+    upload(item) {
       this.show = true
       this.fileFolderId = item.id
       this.folderName = item.title
       this.currentFolder = item
     },
-    success (res) {
+    success(res) {
       this.fileList = res.fileList.map(res => {
         const item = {}
         item.title = res.response.data.originalFileName
@@ -252,7 +330,11 @@ export default {
       })
       this.fileList.forEach(sub => {
         this.saveCount++
-        if (['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(sub.suffix)) {
+        if (
+          ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(
+            sub.suffix
+          )
+        ) {
           this.saveLibrary(sub)
         }
         if (this.saveCount === this.fileList.length) {
@@ -261,7 +343,7 @@ export default {
         }
       })
     },
-    saveLibrary (sub) {
+    saveLibrary(sub) {
       const data = { category: 4, content: '' }
       this.$api.common.submit(Object.assign(sub, data)).then(res => {
         if (res.code === 200) {
@@ -272,7 +354,7 @@ export default {
         }
       })
     },
-    addFile () {
+    addFile() {
       this.$api.project.fileAdd(this.fileList).then(res => {
         if (res.code === 200) {
           this.show = false
@@ -283,10 +365,9 @@ export default {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
+            }).then(() => {
+              this.SendMsg()
             })
-              .then(() => {
-                this.SendMsg()
-              })
           }
         } else {
           this.show = false
@@ -294,7 +375,7 @@ export default {
         }
       })
     },
-    SendMsg () {
+    SendMsg() {
       this.sendParams.ids = this.fileList.map(e => e.fileId).join(',')
       this.sendParams.projectId = this.$route.query.projectId
       this.sendParams.ownerId = this.$route.query.ownerId
@@ -308,85 +389,91 @@ export default {
         }
       })
     },
-    downFile (item) {
+    downFile(item) {
       window.open(item.url, '')
     },
-    viewerClose () {
+    viewerClose() {
       this.showImage = false
       this.imgList = []
     },
-    removeFile (item) {
+    removeFile(item) {
       if (item.type === 1) {
         this.$confirm('确认是否删除所选文件/文件夹？', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
-        })
-          .then(() => {
-            this.$api.project.fileRemove({ ids: item.id }).then(res => {
-              if (res.code === 200) {
-                this.$bus.emit('delete')
-                this.$message.success(res.msg)
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
+        }).then(() => {
+          this.$api.project.fileRemove({ ids: item.id }).then(res => {
+            if (res.code === 200) {
+              this.$bus.emit('delete')
+              this.$message.success(res.msg)
+            } else {
+              this.$message.error(res.msg)
+            }
           })
+        })
       } else if (item.type === 2) {
         this.$confirm('确认是否删除所选文件/文件夹？', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
-        })
-          .then(() => {
-            this.$api.project.folderRemove({ ids: item.id }).then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.msg)
-                this.$bus.emit('delete')
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
+        }).then(() => {
+          this.$api.project.folderRemove({ ids: item.id }).then(res => {
+            if (res.code === 200) {
+              this.$message.success(res.msg)
+              this.$bus.emit('delete')
+            } else {
+              this.$message.error(res.msg)
+            }
           })
+        })
       }
     },
-    folderApply (item) {
+    folderApply(item) {
       this.currentFolder = item
       this.applyShow = true
     },
-    submit () {
+    submit() {
       if (this.applyTime.length !== 2) {
         this.$message.error('请选择授权时间')
         return
       }
       console.log(this.currentFolder)
-      const tmp = { projectId: this.$route.query.projectId, ownerId: this.$route.query.ownerId }
-      const item = { startTime: this.applyTime[0], endTime: this.applyTime[1], folderId: this.currentFolder.id }
+      const tmp = {
+        projectId: this.$route.query.projectId,
+        ownerId: this.$route.query.ownerId
+      }
+      const item = {
+        startTime: this.applyTime[0],
+        endTime: this.applyTime[1],
+        folderId: this.currentFolder.id
+      }
       const list = [item]
-      this.$api.project.apply(Object.assign(tmp, { folders: list })).then(res => {
-        if (res.code === 200) {
-          this.applyShow = false
-          this.$confirm(res.data, {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          })
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
+      this.$api.project
+        .apply(Object.assign(tmp, { folders: list }))
+        .then(res => {
+          if (res.code === 200) {
+            this.applyShow = false
+            this.$confirm(res.data, {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
     },
-    changePage (page) {
+    changePage(page) {
       this.$emit('change', page)
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .title-sp {
-  color: #596A8A;
+  color: #596a8a;
 }
 
 .content-sp {
@@ -408,6 +495,6 @@ export default {
 
 .icon-1 {
   width: 50px;
-  height: 46px
+  height: 46px;
 }
 </style>