客户定制功能图标

epmet-oper-web/src/views/modules/customize/function-add-or-update.vue

@@ -14,6 +14,17 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item prop="functionIcon" label="功能图标">
+        <el-upload
+          class="avatar-uploader"
+          :action="uploadUlr"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <img v-if="dataForm.functionIcon" :src="dataForm.functionIcon" class="function-icon">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
       <el-form-item label="上架状态" prop="shoppingStatus">
         <el-select v-model="dataForm.shoppingStatus"
                placeholder="请选择" clearable>
@@ -48,10 +59,12 @@ export default {
       iconListVisible: false,
       dataForm: {
         functionName: '',
+        functionIcon: '',
         functionGroup: 0,
         shoppingStatus: 1,
         functionExplain: ''
       },
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload',
       functionGroupList: [
         {
           'dictName': '默认功能',
@@ -81,6 +94,9 @@ export default {
         functionName: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
+        functionIcon: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
         functionGroup: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
@@ -116,10 +132,24 @@ export default {
         }
       }).catch(() => {})
     },
-    // 图标, 选中
-    iconListCurrentChangeHandle (icon) {
-      this.dataForm.functionIcon = icon
-      this.iconListVisible = false
+    handleAvatarSuccess (res, file) {
+      if (res.code === 0 && res.msg === 'success') {
+        this.dataForm.functionIcon = res.data.url
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+    beforeAvatarUpload (file) {
+      const isPNG = file.type === 'image/png'
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      if (!isPNG) {
+        this.$message.error('上传头像图片只能是 PNG 格式!')
+      }
+      if (!isLt1M) {
+        this.$message.error('上传头像图片大小不能超过 1MB!')
+      }
+      return isPNG && isLt1M
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
@@ -146,3 +176,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .function-icon {
+    width: 28px;
+  }
+</style>