181 lines
5.0 KiB
Vue
181 lines
5.0 KiB
Vue
<template>
|
|
<el-drawer
|
|
:size="size"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:destroy-on-close="true"
|
|
:title="title"
|
|
v-model="dialogVisible"
|
|
@open="handleOpen">
|
|
<div class="signature-panel">
|
|
<template v-if="GLOBAL && GLOBAL.isMobile">
|
|
<Write
|
|
v-if="showWrite"
|
|
:module="module"
|
|
@close="closeWrite"
|
|
@save="uploadSignatureImage"></Write>
|
|
<div
|
|
class="write-wrapper"
|
|
v-else>
|
|
<el-form
|
|
:model="form"
|
|
:rules="formRules"
|
|
ref="form"
|
|
style="width: 100%; margin-bottom: 20px"
|
|
label-position="top">
|
|
<el-form-item prop="remark">
|
|
<el-input
|
|
v-model="form.remark"
|
|
class="textarea"
|
|
type="textarea"
|
|
show-word-limit
|
|
maxlength="200"
|
|
resize="none"
|
|
placeholder="请说明原因并签名确认" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button
|
|
type="primary"
|
|
@click="handleRefuse">
|
|
签名确认
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<div
|
|
class="qrCode-wrapper"
|
|
v-else>
|
|
<p style="text-align: center; font-size: 20px">
|
|
{{ text }}
|
|
</p>
|
|
<vue-qrcode
|
|
correctLevel="3"
|
|
class="qrcode"
|
|
:color="{ dark: '#000000ff', light: '#ffffffff' }"
|
|
type="image/jpeg"
|
|
:value="qrCodeValue"></vue-qrcode>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
<script>
|
|
import Write from './write.vue';
|
|
import VueQrcode from 'vue-qrcode';
|
|
|
|
export default {
|
|
name: 'signature',
|
|
components: { Write, VueQrcode },
|
|
emits: ['update:modelValue', 'uploadSignatureImage'],
|
|
props: {
|
|
modelValue: Boolean,
|
|
title: String,
|
|
size: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '该操作由于需要在线签名，请使用移动端设备扫描二维码完成',
|
|
},
|
|
module: {
|
|
type: String, //签名图片上传的所属模块
|
|
},
|
|
isNeedRemark: {
|
|
//是否需要输入备注信息功能
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
qrCodeValue: {
|
|
//二维码扫码后的地址
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
computed: {
|
|
dialogVisible: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(val) {
|
|
this.$emit('update:modelValue', val);
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
btnloading: false,
|
|
showWrite: false,
|
|
form: {
|
|
remark: null, //一般都是用于填写拒绝的理由
|
|
},
|
|
formRules: {
|
|
remark: [{ required: true, message: '请说明原因！', trigger: 'blur' }],
|
|
},
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
handleOpen() {
|
|
if (this.isNeedRemark) {
|
|
//如果需要备注的情况下，一开始先进入填写备注的界面
|
|
this.showWrite = false;
|
|
} else {
|
|
this.showWrite = true;
|
|
}
|
|
},
|
|
uploadSignatureImage(imageUrl) {
|
|
if (this.isNeedRemark) {
|
|
//需要备注原因的情况下回将备注信息一起返回去
|
|
this.$emit('uploadSignatureImage', imageUrl, this.form.remark);
|
|
} else {
|
|
this.$emit('uploadSignatureImage', imageUrl);
|
|
}
|
|
},
|
|
closeWrite() {
|
|
this.showWrite = false;
|
|
this.dialogVisible = false;
|
|
},
|
|
handleRefuse() {
|
|
this.$refs.form.validate().then((valid) => {
|
|
if (valid) {
|
|
this.showWrite = true;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.signature-panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.qrCode-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
& .qrcode {
|
|
width: 30vw;
|
|
height: 30vw;
|
|
max-width: 600px;
|
|
max-height: 600px;
|
|
}
|
|
}
|
|
.write-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
& .textarea {
|
|
height: 50vh;
|
|
}
|
|
& :deep(.el-textarea__inner) {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|