youhua

src/views/monthly/components/createdMonthly.vue

@@ -6,13 +6,13 @@
         <el-input v-model="monthly_form.name" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="缩略图">
-        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
           <i class="el-icon-plus" />
           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
         </el-upload>
       </el-form-item>
       <el-form-item label="素材">
-        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
           <i class="el-icon-plus" />
           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
         </el-upload>
@@ -22,6 +22,9 @@
       <el-button @click="monthly_show = false">取 消</el-button>
       <el-button type="primary" @click="monthly_dialog">创 建</el-button>
     </span>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="monthly_form.content" alt="">
+    </el-dialog>
   </el-dialog>
 </template>
 
@@ -34,7 +37,8 @@ export default {
   data() {
     return {
       monthly_show: this.show,
-      monthly_form: {}
+      monthly_form: {},
+      dialogVisible: false
     }
   },
   watch: {
@@ -56,7 +60,7 @@ export default {
       console.log(file, fileList)
     },
     handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
+      this.monthly_form.content = 'http:' + file.url
       this.dialogVisible = true
     }
   }

src/views/monthly/index.vue

@@ -11,8 +11,8 @@
     <el-container>
       <el-aside width="215px">
         <div class="monthly-aside-header">
-          <el-input v-model="monthly_nav_query" size="mini" style="width: 80%; margin-right: 15px;" />
-          <i class="el-icon-circle-plus-outline monthly-hover" @click="addMonthly" />
+          <el-input v-model="monthly_nav_query" suffix-icon="el-icon-search" size="mini" style="width: 80%; margin-right: 15px;" @blur="monthly_query(monthly_nav_query)" />
+          <i class="el-icon-circle-plus-outline monthly_icon" @click="addMonthly" />
         </div>
         <div v-for="item in monthly_nav_list" :key="item.id">
           <div class="monthly-nav-center">
@@ -50,7 +50,7 @@ export default {
       logo: logoUrl,
       title: '',
       show: false,
-      monthly_nav_query: 's',
+      monthly_nav_query: '',
       monthly_main_image: '',
       monthly_nav_list: []
     }
@@ -61,7 +61,7 @@ export default {
   methods: {
     async materialGetMaterialList() {
       const num = this.$route.query.id
-      const res = await materialGetMaterialList({ pageSize: 5 })
+      const res = await materialGetMaterialList({})
       if (res.code === 200) {
         this.monthly_nav_list = res.data
         this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(num))[0]
@@ -70,6 +70,12 @@ export default {
     monthlyGetData(val) {
       this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(val.id))[0]
     },
+    async monthly_query(val) {
+      const res = await materialGetMaterialList({ title: val })
+      if (res.code === 200) {
+        this.monthly_nav_list = res.data
+      }
+    },
     handleSelect(key, keyPath) {
       switch (key) {
         case '1':
@@ -182,4 +188,11 @@ export default {
   color: #1e89f7;
   cursor: pointer;
 }
+.monthly_icon {
+  color: #1e89f7;
+  cursor: pointer;
+  font-size: 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
 </style>