131 lines
3.9 KiB
Vue
131 lines
3.9 KiB
Vue
|
<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>
|