修改模板库样式

src/components/print/Print.vue

@@ -181,8 +181,23 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
-    <ai-dialog :visible.sync="isShowTemplate" title="模板库" width="960" customFooter>
-      <ai-table
+    <ai-dialog :visible.sync="isShowTemplate" title="模板库" width="1060px" customFooter>
+      <div class="templateList-wrapper" v-infinite-scroll="getTemplateList" :infinite-scroll-distance="20">
+        <div class="templateList">
+          <div class="templateList-item" v-for="(item, index) in templateList" :key="index">
+            <!-- <img :src="item.previewUrl" /> -->
+            <el-image
+              style="height: 180px;"
+              fit="contain"
+              :src="item.previewUrl"
+              :preview-src-list="[item.previewUrl]">
+            </el-image>
+            <h2>{{ item.name }}</h2>
+            <el-button type="warning" size="mini" @click="updateTempate(item)">使用模板</el-button>
+          </div>
+        </div>
+      </div>
+      <!-- <ai-table
         :tableData="templateList"
         :col-configs="templateColConfigs"
         :total="templateTotal"
@@ -209,7 +224,7 @@
             </div>
           </template>
         </el-table-column>
-      </ai-table>
+      </ai-table> -->
       <div class="dialog-footer" slot="footer">
         <el-button @click="isShowTemplate = false">取消</el-button>
       </div>
@@ -320,7 +335,7 @@
         },
         searchTemplate: {
           current: 1,
-          size: 10,
+          size: 8,
           type: 1
         },
         templateTotal: 0,
@@ -331,7 +346,8 @@
           { prop: 'name', label: '模板名称', align: 'left' },
           { slot: 'img'}
         ],
-        templateLoading: false
+        templateLoading: false,
+        hasMore: true
       }
     },
 
@@ -431,12 +447,23 @@
       },
 
       getTemplateList() {
+        if (!this.hasMore) return
+        if (this.templateLoading) return
+        this.templateLoading = true
         this.$http.post(`/api/templateRecommend/getRecommendPage`, null, {
           params: this.searchTemplate
         }).then(res => {
           if (res.code === 0) {
-            this.templateList = res.data.records
+            this.templateList = [...this.templateList, ...res.data.records]
             this.templateTotal = res.data.total
+
+            if (res.data.records.length < this.searchTemplate.size) {
+              this.hasMore = false
+            } else {
+              this.searchTemplate.current = this.searchTemplate.current + 1
+            }
+
+            this.templateLoading = false
           }
         })
       },
@@ -861,5 +888,49 @@
     .print-viewer {
       color: #000;
     }
+
+    .templateList-wrapper {
+      padding-right: 10px;
+
+      .templateList {
+        display: flex;
+        flex-wrap: wrap;
+
+        .templateList-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+          width: 24%;
+          margin-bottom: 20px;
+          margin-right: 1.333%;
+          padding: 10px;
+          border-radius: 3px;
+          overflow: hidden;
+          background-color: #f4f4f4;
+
+          .el-button {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+          }
+
+          h2 {
+            margin-top: 12px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          &:nth-of-type(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
   }
 </style>