初始化

src/views/poverty/updateSign.vue

@@ -0,0 +1,131 @@
+<template>
+
+    <!--签名更新 -->
+    <div class="container">
+
+        <el-form ref="form" :model="formData" label-width="80px" >
+            <el-form-item label="个人签名">
+
+                <div class="flex-box">
+                    <el-upload
+                        class="upload-demo"
+                        :action="uploadImgUrl"
+                        :on-success="handleUploadSuccess"
+                        :show-file-list="false"
+                        :limit="1"
+                       >
+                        <el-button size="small" type="primary">点击上传</el-button>
+                        
+                    </el-upload>
+                    <signature ref="sign"  @save-success="saveSuccessHandle"></signature>
+                </div>
+                
+            </el-form-item>
+            <el-row>
+                <el-form-item label="签名预览">
+                    <el-image class="img"  :src="formData.qmShow"  style="width: 300px; height: 120px" fit="fill">
+
+                        <div slot="error" class="image-slot">
+                            <i class="el-icon-picture-outline"></i>
+                        </div>
+                    </el-image>
+                    <div class="tip">
+                        注意：只能改当前登录的账号提交或审核的记录！
+                    </div>
+                </el-form-item>
+            </el-row>
+            
+            <el-row>
+                <el-form-item >
+                    <el-button size="small" @click="confirmSubmit" v-loading="loading">确定修改</el-button>    
+                </el-form-item>
+            </el-row>
+            
+        </el-form>
+        
+    </div>
+
+</template>
+
+<script>
+  import signature from '@/components/signature/index.vue';
+  import {updateSignature} from "@/api/zxj/poverty/apply";
+import { Row } from 'element-ui';
+export default {
+    components: {
+        signature
+    },
+    data(){
+        return {
+            baseurl: process.env.VUE_APP_BASE_API,
+            uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+            formData:{},
+            loading:false,
+        }
+    },
+    methods:{
+        //手写签名保存成功回调
+        saveSuccessHandle(url){
+
+            this.formData.qm = url;
+            this.formData.qmShow = this.baseurl + url
+            this.$forceUpdate();
+            this.$refs.sign.clearAll();
+        },
+         // 上传成功回调
+        handleUploadSuccess(res, file) {
+      
+            if (res.code === 200) {
+        
+                this.formData.qm = res.fileName;
+                 this.formData.qmShow = this.baseurl +  res.fileName
+                this.$forceUpdate()
+            } else {
+                this.$modal.msgError(res.msg);
+            }
+        },
+        //提交签名
+        confirmSubmit(){
+            this.loading = true;
+            updateSignature(this.formData).then(res=>{
+                if(res.code == 200){
+                    if(res.data != 0){
+                        this.$message.success("操作成功，更新" + res.data + "条记录！");
+                    }else{
+                        this.$message.error("操作失败，未修改任何记录！");
+                    }
+                  
+                }
+                this.loading = false;
+            });
+        }
+    }
+}
+</script>
+
+<style lang="css" scoped>
+    .flex-box{
+        display: flex;
+        flex-direction: row;
+        justify-content: start;
+        gap: 10px;
+    }
+    .img>>>.image-slot{
+        width: 300px;
+        height: 120px!important;
+        background-color: #f5f7fa;
+        color: #909399;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-content: center;
+    }
+     .img>>>.image-slot i {
+        font-size: 28px;
+        line-height: 120px;
+     }
+     .tip{
+        color: red;
+        font-weight: bold;
+     }
+</style>