菜单icon变更base64

src/components/BaseImage/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="base-image" @click="upload">
+      <i v-if="!base64Data" class="el-icon-plus"></i>
+      <img v-else :src="base64Data" alt="">
+      <input id="fileUpload" type="file" accept="image/png,image/jpg,image/jpeg" @change="handleFileChange" />
+    </div>
+    <span style="font-size: 12px;color:#ccc;">仅支持png，jpg，jpeg，大小限制为10kb</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseImage",
+  data() {
+    return {
+      base64Data: null,
+    };
+  },
+  props: {
+    value: {
+      type: String,
+      default: '',
+    }
+  },
+  watch:{
+    value:{
+      handler(v){
+        if(!v) return;
+        this.base64Data = v;
+      },
+      immediate:true
+    }
+  },
+  methods:{
+    upload(){
+      let el = document.getElementById('fileUpload');
+      el.click();
+    },
+    handleFileChange(event) {
+      const file = event.target.files[0];
+      //console.log(file,file.type != 'image/png','file')
+      //if(file.type != 'image/png' || file.type != 'image/jpg' || file.type != 'image/jpeg') return this.$message.warning('文件类型错误');
+      if(file.size > 1024 * 10) return this.$message.warning('图标限制大小10kb')
+      if (file) {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.base64Data = reader.result;
+          this.$emit('change',reader.result)
+        };
+      }
+    },
+  },
+  model:{
+    props:'value',
+    event:'change'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-image{
+  width: 100px;
+  height: 100px;
+  border: 1px solid #eaeaea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  >input{
+    display: none;
+  }
+  >i{
+    font-size: 30px;
+    color:#f1f1f1;
+  }
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+  &:hover{
+    border: 1px solid #6ab7e1;
+    >i{
+      color:#eaeaea;
+    }
+  }
+}
+</style>

src/views/question/list/dialog.vue

@@ -50,6 +50,7 @@
         data.confirm.description
       }}</el-descriptions-item>
     </el-descriptions>
+
     <el-descriptions :column="2" class="contentArea" v-if="data.confirmDissent">
       <el-descriptions-item label="审核结果">{{
         data.confirmDissent.executeStatus == 0 ? "同意" : "不同意"
@@ -61,6 +62,7 @@
         data.confirmDissent.description
       }}</el-descriptions-item>
     </el-descriptions>
+
     <el-descriptions :column="2" class="contentArea" v-if="data.reform">
       <el-descriptions-item label="整改时间">{{
         dayjs(data.reform.executeTime).format("YYYY-MM-DD")
@@ -82,6 +84,7 @@
           </el-image></div
       ></el-descriptions-item>
     </el-descriptions>
+
     <el-form
       ref="confirmForm"
       :model="confirmData"
@@ -166,7 +169,7 @@
         ></imgUpload>
       </el-form-item>
     </el-form>
-  
+
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm" v-if="type!='detail'">确 定</el-button>
@@ -252,7 +255,7 @@ export default {
         this.data = r.data;
         this.data.confirmDissent = r.data.flows.find((d) => d.executeStep == 2);
         this.data.confirm = r.data.flows.find((d) => d.executeStep == 1);
-        this.data.reform = r.data.flows.find((d) => d.executeStep == 11);   
+        this.data.reform = r.data.flows.find((d) => d.executeStep == 11);
         if(this.data.reform && this.data.reform.images)     {
           this.data.reform.images=this.data.reform.images.split(",")
         }

src/views/question/list/index.vue

@@ -207,8 +207,7 @@
                 @click="handleConfirm(scope.row)"
                 v-hasPermi="['question:list:confirm']"
                 v-if="scope.row.orgId==orgId && scope.row.confirmStatus==0"
-                >隐患确认</el-button
-              >
+                >隐患确认</el-button>
               <el-button
                 size="mini"
                 type="text"

src/views/system/menu/index.vue

@@ -110,8 +110,7 @@
       </el-table-column>
       <el-table-column prop="icon" v-if="activeName==0" label="图标" align="center" width="100">
         <template slot-scope="scope">
-          <img :src="scope.row.icon" alt="">
-
+          <img v-if="scope.row.icon != '#'" style="width: 20px;height: 20px;" :src="scope.row.icon" alt="">
         </template>
       </el-table-column>
       <el-table-column
@@ -245,9 +244,8 @@
                   />
                 </el-input>
               </el-popover>
-
-                <imgUpload  v-else  type="radioIcon" :value="form.icon" @input="inputHandler"></imgUpload>
-
+<!--                <imgUpload type="radioIcon" :value="form.icon" @input="inputHandler"></imgUpload>-->
+                <base-image v-else v-model="form.icon" ></base-image>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -426,10 +424,11 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 import imgUpload from "@/components/ImageUpload/index.vue";
+import  BaseImage from "@/components/BaseImage"
 export default {
   name: "Menu",
   dicts: ["sys_show_hide", "sys_normal_disable", "sys_platform_type"],
-  components: { Treeselect, IconSelect, imgUpload },
+  components: { Treeselect, IconSelect, imgUpload,BaseImage },
   data() {
     return {
       // platformType 平台类型 0APP 1PC
@@ -501,7 +500,6 @@ export default {
         this.menuList = this.handleTree(
           response.data.filter((item) => item.platformType == this.activeName)
         );
-
         this.loading = false;
       });
     },

src/views/system/user/index.vue

@@ -40,7 +40,7 @@
               />
             </el-form-item>
             <el-form-item label="用户角色" prop="roleIds">
-             
+
               <!-- @visible-change="selectAllRoles" -->
               <el-select
                 style="width: 200px"
@@ -672,17 +672,16 @@ export default {
       this.form.roleIds=null;
     },
     formatter(content){
-        if(content){
-          const strArr = content.toString().split(',');
-        let rel = "";
-        strArr.forEach(function(item,index,arr){
-          let ops = `<span style="color: #008CD6;"> ${item} </span> `;
-          rel = rel == "" ? ops: rel +" || "+ops;
-        })
-        return rel;
-        }
-        return "";
-
+      if(content){
+        const strArr = content.toString().split(',');
+      let rel = "";
+      strArr.forEach(function(item,index,arr){
+        let ops = `<span style="color: #008CD6;"> ${item} </span> `;
+        rel = rel == "" ? ops: rel +" || "+ops;
+      })
+      return rel;
+      }
+      return "";
     },
     getPageIndex($index) {
       //表格序号