通知管理页面 修改- 增加通知主图、通知分类

src/views/modules/news/notice-add-or-update.vue

@@ -15,6 +15,35 @@
                      clearable
                      collapse-tags></el-cascader>
       </el-form-item>
+      <el-row>
+        <el-form-item label="通知主图"
+                      v-loading="loading">
+          <el-upload class="avatar-uploader"
+                     :action="uploadUrl"
+                     :show-file-list="false"
+                     :on-success="handleAvatarActSuccess"
+                     :on-error="handelError"
+                     :before-upload="beforeAvatarUpload">
+            <img v-if="dataForm.noticeImageUrl"
+                 :src="dataForm.noticeImageUrl"
+                 class="avatar">
+            <i v-else
+               class="el-icon-plus avatar-uploader-icon"></i>
+            <div slot="tip"
+                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </el-form-item>
+      </el-row>
+      <el-form-item label="通知分类" prop="noticeCategory">
+        <el-select v-model="dataForm.noticeCategory" placeholder="请选择分类">
+          <el-option
+            v-for="item in optionNoticeCategoryCode"
+            :key="item.dictValue"
+            :label="item.dictName"
+            :value="item.dictValue">
+          </el-option>
+        </el-select>
+    </el-form-item>
       <el-form-item label="通知标题"
                     prop="noticeTitle">
         <el-input v-model="dataForm.noticeTitle"
@@ -87,12 +116,14 @@ export default {
         [{ 'align': [] }],
         ['clean']
       ],
+      loading: false,
       uploadUrl: '',
       // 富文本end
       streetList: [],
       communityList: [],
       gridList: [],
-      options: []
+      options: [],
+      optionNoticeCategoryCode: []
     }
   },
   computed: {
@@ -109,6 +140,9 @@ export default {
         ],
         noticeContent: [
           { required: true, message: this.$t(' ') }
+        ],
+        noticeCategory: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       }
     }
@@ -125,6 +159,8 @@ export default {
       .catch(() => { })
     // 1169154711480528897 为市北区部门ID
     this.getDeptInfoList('street', localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))
+    // 根据数据字典类型notice_category 获取简版数据字典列表，用于页面下拉菜单
+    this.getListSimpleByDictType()
   },
   methods: {
     // 富文本编辑器
@@ -284,8 +320,50 @@ export default {
       // this.dataForm.grid = choosenItem.name
       // this.dataForm = Object.assign(this.dataForm, { gridId: item })
       console.log(this.dataForm)
+    },
+    handleAvatarActSuccess (res, file) {
+      this.loading = false
+      this.dataForm.noticeImageUrl = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+    },
+    handelError () {
+      this.loading = false
+    },
+    getListSimpleByDictType () {
+      this.$http.get(`/news/notice/listSimple/notice_category`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.optionNoticeCategoryCode = res.data
+      }).catch(() => {})
     }
-
   }
 }
 </script>
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  </style>