fix

src/layout/search/index.vue

@@ -1,76 +1,125 @@
 <template>
-  <div class="content">
-    <div class="search flex flex-center">
-      <div class="icon flex flex-center main-bg-color">
-        <el-icon size="30px"><Search /></el-icon>
-      </div>
-      <el-input v-model="keyword" placeholder="搜索"></el-input>
-      <el-button type="primary" class="ml-20" @click="search">搜 索</el-button>
-    </div>
-    <div class="mt-20 padding">
-      <span class="bold font-16">文档（393030）</span>
-      <div class="flex mt-20">
-        <div class="full-width mt-10 list" v-if="list.length > 0">
-          <div v-for="i in list" :key="i">
-            <div class="padding border-bottom">
-              (初设批复)云县火车站站前广场及综合配套工程.pdf
-            </div>
+  <div>
+    <el-dialog
+      v-model="show"
+      append-to-body
+      width="1200px"
+      :close-on-click-modal="false"
+      @close="close"
+      @closed="closed"
+    >
+      <div class="content">
+        <div class="search flex flex-center">
+          <div class="icon flex flex-center main-bg-color">
+            <el-icon size="30px">
+              <Search />
+            </el-icon>
           </div>
+          <el-input v-model="keyword" placeholder="搜索"></el-input>
+          <el-button type="primary" class="ml-20" @click="search"
+            >搜 索</el-button
+          >
         </div>
-        <div>
-          <div class="full-height full-width preview" v-if="current">
-            <img class="img" :src="current.images[0].imagePath" />
-          </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 />
-            </div>
-            <el-button type="primary">查看</el-button>
-          </div>
-          <div class="full-width flex flex-justify-start flex-col">
-            <span class="lines-1"
-              >名称：(初设批复)云县火车站站前广场及综合配套工程。pdf</span
-            >
-            <span class="lines-1"
-              >所属项目：(初设批复)云县火车站站前广场及综合配套工程</span
+        <div class="mt-20 padding">
+          <span class="bold font-16">文档（{{ count }}）</span>
+          <div class="flex mt-20">
+            <div
+              v-if="list.length > 0"
+              class="flex flex-center flex-justify-between full-width"
             >
-            <span class="lines-1">所属文件夹：谋划阶段-文件</span>
+              <div class="full-width mt-10 list">
+                <div v-for="i in list" :key="i">
+                  <div class="padding border-bottom">
+                    (初设批复)云县火车站站前广场及综合配套工程.pdf
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="full-height full-width preview flex flex-center"
+                  v-if="current"
+                >
+                  <img
+                    class="img"
+                    :src="current.contents[0].imagePath"
+                    alt="img"
+                  />
+                </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 />
+                  </div>
+                  <el-button type="primary">查看</el-button>
+                </div>
+                <div class="full-width flex flex-justify-start flex-col">
+                  <span class="lines-1"
+                    >名称：(初设批复)云县火车站站前广场及综合配套工程。pdf</span
+                  >
+                  <span class="lines-1"
+                    >所属项目：(初设批复)云县火车站站前广场及综合配套工程</span
+                  >
+                  <span class="lines-1">所属文件夹：谋划阶段-文件</span>
+                </div>
+              </div>
+            </div>
+            <div v-else class="full-width full-height">
+              <el-empty
+                :description="
+                  loading ? '请稍后，加载中' : '请输入关键词进行搜索'
+                "
+              >
+              </el-empty>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       // fixme  测试
       keyword: '禄丰',
       page: { current: 1, size: 10 },
       list: [],
-      current: null
+      current: null,
+      count: '',
+      loading: false
     }
   },
   methods: {
-    search(params) {
+    search() {
+      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]
           } else {
-            console.log('33')
+            this.$message.error('暂无数据')
           }
-          console.log(this.current)
         } else {
-          console.log(res.msg)
+          this.$message.error(res.msg)
         }
       })
+    },
+    closed() {
+      this.keyword = ''
+      this.$emit('close', false)
     }
   }
 }
@@ -87,11 +136,13 @@ export default {
     }
   }
 }
+
 .list {
   height: 560px;
   overflow-y: scroll;
   overflow: hidden;
 }
+
 .preview {
   width: 360px;
   height: 460px;
@@ -99,11 +150,13 @@ export default {
   padding: 10px;
   margin: 10px;
   border-radius: 8px;
+
   .img {
-    width: 100px;
-    height: 120px;
+    width: auto;
+    height: 420px;
   }
 }
+
 .tips {
   width: 260px;
 }

src/layout/top.vue

@@ -50,9 +50,7 @@
         </div>
       </el-col>
     </el-row>
-    <el-dialog v-model="show" append-to-body width="1200px" @close="close">
-      <search />
-    </el-dialog>
+    <search :show="show" @close="show = false" />
     <el-image-viewer
       v-if="showImage"
       :url-list="imgList"
@@ -80,8 +78,7 @@ export default {
     return {
       showImage: false,
       imgList: [],
-      // FIXME 测你
-      show: true,
+      show: false,
       keywords: '',
       active: 0,
       type: [
@@ -239,6 +236,7 @@ export default {
      */
     close() {
       this.params.keyword = ''
+      this.show = false
     }
   }
 }