|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<!-- 做使用el-dialog做签字的弹框 -->
|
|
|
- <el-dialog title="签字" :visible.sync="dialogVisible" width="800px" append-to-body>
|
|
|
+ <el-dialog title="签字" v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" append-to-body>
|
|
|
<!-- 使用这个签名组件 -->
|
|
|
<vue-esign
|
|
|
ref="esign"
|
|
@@ -13,18 +13,18 @@
|
|
|
:lineColor="lineColor"
|
|
|
:bgColor.sync="bgColor"
|
|
|
/>
|
|
|
- <span slot="footer" class="dialog-footer fx-row jc-between">
|
|
|
- <el-popover
|
|
|
- placement="top-start"
|
|
|
- title="协议"
|
|
|
- width="200"
|
|
|
- trigger="click"
|
|
|
- content="协议内容">
|
|
|
- <el-button slot="reference">协议</el-button>
|
|
|
- </el-popover>
|
|
|
+ <span slot="footer" class="dialog-footer fx-row jc-end">
|
|
|
+<!-- <el-popover-->
|
|
|
+<!-- placement="top-start"-->
|
|
|
+<!-- title="协议"-->
|
|
|
+<!-- width="200"-->
|
|
|
+<!-- trigger="click"-->
|
|
|
+<!-- content="协议内容">-->
|
|
|
+<!-- <el-button slot="reference">协议</el-button>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
|
|
|
<div>
|
|
|
- <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
|
|
|
+ <el-button @click="handleGenerate" type="primary">保存</el-button>
|
|
|
<el-button @click="handleReset">清空画板</el-button>
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
</div>
|
|
@@ -32,11 +32,12 @@
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
+import { submitElectiveModels,saveEsign } from '@/api/webApi/elective/selected-subject'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ selectedList: [],
|
|
|
dialogVisible: false, // 弹框是否开启
|
|
|
lineWidth: 3, // 画笔的线条粗细
|
|
|
lineColor: "#000000", // 画笔的颜色
|
|
@@ -46,38 +47,51 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- open() {
|
|
|
+ open(selectedList) {
|
|
|
+ this.selectedList = selectedList
|
|
|
this.dialogVisible = true
|
|
|
},
|
|
|
// 清空画板
|
|
|
handleReset() {
|
|
|
this.$refs.esign.reset();
|
|
|
},
|
|
|
+ saveELective() {
|
|
|
+ submitElectiveModels({
|
|
|
+ models:this.selectedList}).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
// 生成签字图
|
|
|
handleGenerate() {
|
|
|
this.$refs.esign
|
|
|
.generate() // 使用生成器调用把签字的图片转换成为base64图片格式
|
|
|
.then((res) => {
|
|
|
+ console.log(this.selectedList)
|
|
|
this.resultImg = res;
|
|
|
+ this.saveELective()
|
|
|
+ //
|
|
|
+ // 在这里向后端发请求把转换后的base64文件传给后端,后端接收以后再转换成图片做静态图片存储
|
|
|
+ // 当然也可以把base64转成流文件blob格式的,类似上传给后端这样,具体哪种方式看后端要求
|
|
|
+ console.log(this.resultImg);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // // 这里要使用定时器稍微延后以后就能取到base64数据了,当然也可以再加一个确认按钮,如:确认使用这张base64签名图片
|
|
|
+ // // 点击确认以后,在其回调函数中,再把base64的签名图片传给后端用于存储
|
|
|
+ // console.log(this.resultImg);
|
|
|
+ // }, 200);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
// 画布没有签字时会执行这里提示一下
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
- message: "请签名后再生成签字图片",
|
|
|
+ message: "请先签名",
|
|
|
});
|
|
|
+ return
|
|
|
});
|
|
|
|
|
|
- // 在这里向后端发请求把转换后的base64文件传给后端,后端接收以后再转换成图片做静态图片存储
|
|
|
- // 当然也可以把base64转成流文件blob格式的,类似上传给后端这样,具体哪种方式看后端要求
|
|
|
- setTimeout(() => {
|
|
|
- // 这里要使用定时器稍微延后以后就能取到base64数据了,当然也可以再加一个确认按钮,如:确认使用这张base64签名图片
|
|
|
- // 点击确认以后,在其回调函数中,再把base64的签名图片传给后端用于存储
|
|
|
- console.log('我是签字后的base64图片',this.resultImg);
|
|
|
- }, 200);
|
|
|
- this.dialogVisible = false;
|
|
|
+
|
|
|
+ this.dialogVisible = true;
|
|
|
},
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|