'首页动态图标添加'

src/views/caseManagement/caseList.vue

@@ -284,14 +284,21 @@ export default {
                 }
                 this.caseStausArr.push(item);
             });
-            if (this.$route.query.caseFlowId) {
+            // if (this.$route.query.caseFlowId) {
+            //     let querydata = Number(this.$route.query.caseFlowId);
+            //     if (querydata > 0) {
+            //         this.$set(this.queryParams, 'caseFlowId', querydata)
+            //     }
+            // }
+            // this.getList(this.queryParams);
+        });
+        if (this.$route.query.caseFlowId) {
                 let querydata = Number(this.$route.query.caseFlowId);
                 if (querydata > 0) {
                     this.$set(this.queryParams, 'caseFlowId', querydata)
                 }
             }
             this.getList(this.queryParams);
-        });
     },
     methods: {
         /**所有按钮事件 */

src/views/caseprocessManagement/caseprocessManage.vue

@@ -33,6 +33,12 @@
             <el-table-column label="案件状态" align="center" prop="caseStatusName" :show-overflow-tooltip="true" />
             <el-table-column label="驳回节点" align="center" prop="backFlowName" :show-overflow-tooltip="true" />
             <el-table-column label="关联角色" align="center" prop="roleNames" :show-overflow-tooltip="true" />
+            <el-table-column label="节点图标" align="center" prop="nodeIcon" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                    <img v-if="scope.row.fileName" class="nodeIcon" :src="iconHead+scope.row.fileName"/>
+                    <span v-else>暂无图标</span>
+                </template>
+            </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
                     <el-button size="mini" @click="moveDown(scope.row)" type="text" icon="el-icon-arrow-down"></el-button>
@@ -80,10 +86,14 @@ export default {
             dataList: [],
             addvisiable: false,//新增弹窗
             editData: {},
+            iconHead: process.env.VUE_APP_BASE_API
         };
     },
     created() {
-        this.getList(this.queryParams)
+        this.getList(this.queryParams);
+    },
+    computed: {
+        
     },
     methods: {
         // 删除
@@ -160,4 +170,9 @@ export default {
 };
 </script>
   
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nodeIcon {
+    width: 20%;
+    height: 20%;
+}
+</style>

src/views/caseprocessManagement/components/addNodeprocess.vue

@@ -28,6 +28,20 @@
                 <el-form-item label="权限字符" prop="buttonAuthFlag">
                     <el-input v-model="ruleForm.buttonAuthFlag" placeholder="请输入"></el-input>
                 </el-form-item>
+                <el-form-item label="节点图标" prop="nodeIcon">
+                    <el-upload
+                      class="avatar-uploader"
+                      :action="uploadImgUrl"
+                      :show-file-list="false"
+                      :headers="headers"
+                      :data="filedata" 
+                      :on-success="handleAvatarSuccess"
+                      :before-upload="beforeAvatarUpload">
+                      <img v-if="imageUrl" :src="imgSvgUrl" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                      <div slot="tip" class="el-upload__tip">只能上传SVG图片</div>
+                    </el-upload>
+                </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
@@ -39,6 +53,7 @@
 <script>
 import { queryCaseFlowInfo, saveCaseFlow } from "@/api/caseprocessManagement/caseprocessManagement.js";
 import { listRole } from "@/api/system/role";
+import { getToken } from "@/utils/auth";
 export default {
     props: ["addvisiable", "editData", "queryParams"],
     dicts: ["case_flow_node"],
@@ -49,7 +64,9 @@ export default {
             backflowArr: [],//驳回节点
             roleArr: [],//关联角色
             isImg: false,
-            filedata: {},
+            filedata: {
+                annexType: 11,
+            },
             flagBtn: false,
             ruleForm: {},
             rules: {
@@ -67,16 +84,38 @@ export default {
                 ]
             },
             dealvalue: [],
+            imageUrl: '',
+            uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+            headers: {
+                Authorization: "Bearer " + getToken(),
+            },
+            fileName: '',
+            imgSvgUrl: ''
         };
     },
     watch: {
         addvisiable(val) {
             if (val) {
                 this.ruleForm = this.editData;
+                console.log(this.ruleForm,'this.ruleForm');
                 this.getRoles();
-                this.getbackflowArr()
+                this.getbackflowArr();
+                if (this.ruleForm && this.ruleForm.fileName) {
+                    this.imgSvgUrl = process.env.VUE_APP_BASE_API + this.ruleForm.fileName;
+                } else {
+                    this.imgSvgUrl = ''
+                }
             }
+        },
+        fileName: {
+            handler(val) {
+                if (val) {
+                    this.imgSvgUrl = this.imageUrl
+                }
+            },
+            deep: true
         }
+
     },
     created() {
 
@@ -119,6 +158,22 @@ export default {
         cancel() {
             this.$emit("cancelAdd");
         },
+        // 图标上传
+        handleAvatarSuccess(res, file) {
+        this.fileName = ''
+        console.log(file.response.fileName,'上传成功的file');
+            this.imageUrl = URL.createObjectURL(file.raw);
+            this.fileName = file.response.fileName
+        console.log(this.imageUrl,'上传成功的this.imageUrl');
+        },
+        beforeAvatarUpload(file) {
+        console.log(file,'file');
+            const isSvg = file.type === 'image/svg+xml';
+            if (!isSvg) {
+            this.$message.error('上传图片只能是 SVG 格式!');
+            }
+            return isSvg;
+        },
         // 提交
         submitForm() {
             this.$refs['ruleForm'].validate((valid) => {
@@ -141,7 +196,8 @@ export default {
                             backFlowId: this.ruleForm.backFlowId,
                             roleIds: this.ruleForm.roleIds,
                             sort: this.ruleForm.sort,
-                            buttonAuthFlag: this.ruleForm.buttonAuthFlag
+                            buttonAuthFlag: this.ruleForm.buttonAuthFlag,
+                            fileName: this.fileName
                         }
                     } else {
                         let nodevalue = this.dict.type.case_flow_node;
@@ -158,7 +214,8 @@ export default {
                             caseStatusName: this.ruleForm.caseStatusName,
                             backFlowId: this.ruleForm.backFlowId,
                             roleIds: this.ruleForm.roleIds,
-                            buttonAuthFlag: this.ruleForm.buttonAuthFlag
+                            buttonAuthFlag: this.ruleForm.buttonAuthFlag,
+                            fileName: this.fileName
                         }
                     }
                     if (params.backFlowId == undefined) {
@@ -181,4 +238,31 @@ export default {
 ::v-deep .el-select {
     width: 100%;
 }
+.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 {
+    border: 1px dashed #d9d9d9;
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
+  .avatar-uploader-icon:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
 </style>

src/views/index.vue

@@ -5,12 +5,17 @@
       <div class="headerMain">我的待办</div>
     </div>
     <div class="homeMain">
-      <div class="cardList" v-for="(item, index) in pendingTasks" :key="index" @click="pushPage(item.caseFlowId)">
-        <div class="badge">{{item.caseCount}}</div>
+      <div
+        class="cardList"
+        v-for="(item, index) in pendingTasks"
+        :key="index"
+        @click="pushPage(item.caseFlowId)"
+      >
+        <div class="badge">{{ item.caseCount }}</div>
         <div class="cardMain">
-          <img class="iconImg" src="@/assets/images/daiban.png" alt="" />
+          <img class="iconImg" :src="iconHead + item.fileName" alt="" />
         </div>
-        <div class="cardMain">
+        <div class="cardMain1">
           <div class="imgTitle">{{ item.caseStatusName }}</div>
         </div>
       </div>
@@ -27,6 +32,7 @@ export default {
       // 版本号
       version: "3.8.6",
       pendingTasks: [], //案件代办状态
+      iconHead: process.env.VUE_APP_BASE_API
     };
   },
   created() {
@@ -39,14 +45,17 @@ export default {
     // 查询代办状态
     gettodoCount() {
       todoCount({}).then((res) => {
-      this.pendingTasks = res.data.toDoCountList
-      console.log(res.data.toDoCountList, "this.pendingTasks");
+        this.pendingTasks = res.data.toDoCountList;
+        console.log(res.data.toDoCountList, "this.pendingTasks");
       });
     },
     // 点击待办按钮跳转
     pushPage(status) {
-      this.$router.push({ path: '/caseManagement/caseManagement/caseList', query: { caseFlowId: status + '' } })
-    }
+      this.$router.push({
+        path: "/caseManagement/caseManagement/caseList",
+        query: { caseFlowId: status + "" },
+      });
+    },
   },
 };
 </script>
@@ -99,9 +108,9 @@ export default {
         line-height: 30px;
         font-size: 18px;
         font-weight: 500;
-        color: #e32a4f;
+        color: red;
         border-radius: 10px 30px 10px 30px;
-        background-color: #05baf1;
+        background-color: #1296DB;
         position: absolute;
         right: 0;
       }
@@ -110,13 +119,16 @@ export default {
         width: 100%;
         display: flex;
         justify-content: center;
-        margin-top: 20px;
-
+        margin-top: 40px;
         .iconImg {
           width: 100px;
           height: 110px;
         }
-
+      }
+      .cardMain1 {
+        width: 100%;
+        display: flex;
+        justify-content: center;
         .imgTitle {
           font-size: 15px;
           font-weight: 900;