104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
|
<el-drawer
|
|
:size="size"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:title="title"
|
|
v-model="dialogVisible"
|
|
>
|
|
<div class="signature-panel">
|
|
<div v-if="false">
|
|
<vue-qrcode
|
|
correctLevel="3"
|
|
style="padding: 2rem"
|
|
:color="{ dark: '#000000ff', light: '#ffffffff' }"
|
|
type="image/jpeg"
|
|
:value="qrCodeValue"
|
|
:width="300"
|
|
></vue-qrcode>
|
|
<p>请使用移动端设备扫描二维码进行电子签名</p>
|
|
</div>
|
|
<Write v-else @close="closeWrite" @save="uploadSignatureImage"></Write>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
<script>
|
|
import Write from "./write.vue";
|
|
import ArtSystem from "../../artSystem.js";
|
|
import { base64toFile } from "../../utils/utils.js";
|
|
|
|
export default {
|
|
name: "signature",
|
|
components: { Write },
|
|
emits: ["update:modelValue", "uploadSignatureImage"],
|
|
props: {
|
|
modelValue: Boolean,
|
|
title: String,
|
|
size: {
|
|
type: String,
|
|
default: "100%",
|
|
},
|
|
module: {
|
|
type: String, //签名图片上传的所属模块
|
|
},
|
|
qrCodeValue: {
|
|
//二维码扫码后的地址
|
|
type: String,
|
|
},
|
|
},
|
|
computed: {
|
|
dialogVisible: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(val) {
|
|
this.$emit("update:modelValue", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
uploadSignatureImage(signatureData) {
|
|
let base64Url = signatureData.data;
|
|
let files = base64toFile(base64Url);
|
|
ArtSystem.uploadImage({
|
|
files: files,
|
|
module: this.module,
|
|
})
|
|
.then((res) => {
|
|
let { code, data, message } = res;
|
|
if (code !== 200) {
|
|
this.$message({
|
|
message: "签名图片提交失败！原因：" + message,
|
|
type: "error",
|
|
});
|
|
return;
|
|
}
|
|
const imageUrl = data.img_path;
|
|
this.$emit("uploadSignatureImage", imageUrl);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
this.$emit("error", error);
|
|
this.$message({
|
|
message: error,
|
|
type: "error",
|
|
});
|
|
})
|
|
.finally(() => {
|
|
this.close();
|
|
});
|
|
},
|
|
closeWrite() {
|
|
this.dialogVisible = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.signature-panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|