Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
f1d0443b by renchao@pashanhoo.com
Options

电子签名

1 parent d4edf572
Inline Side-by-side
Showing 3 changed files with 80 additions and 122 deletions
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-09-15 09:32:40 4 * @LastEditTime: 2024-05-16 09:23:43
5 */ 5 */
6 import request from '@/utils/request' 6 import request from '@/utils/request'
7 import { log } from 'bpmn-js-token-simulation'
8 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) 7 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
9 /** 8 /**
10 * @description: 添加补录记录 9 * @description: 添加补录记录
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-16 13:36:44 4 * @LastEditTime: 2024-05-16 09:23:47
5 */ 5 */
6 6 import request from '@/utils/request'
7 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) 7 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
8 export function uploadUrl () {
9 return process.env.VUE_APP_BASE_API + SERVER.SERVERAPI + '/system/dzqm/upload'
10 }
11
12
13 /** 8 /**
14 * @description: 上传电子签名 9 * @description: 上传电子签名
15 * @param {*} data 10 * @param {*} data
16 * @author: renchao 11 * @author: renchao
17 */ 12 */
18 export function uploaddzqm (data) { 13 export function dzqmUpload (data) {
19 return request({ 14 return request({
20 url: SERVER.SERVERAPI + '/rest/system/dzqm', 15 url: SERVER.SERVERAPI + '/rest/system/dzqm/upload',
21 method: 'post', 16 method: 'post',
22 data 17 data
23 }) 18 })
24 } 19 }
25
26 /**
27 * @description: 电子签名信息
28 * @param {*} data
29 * @author: renchao
30 */
31
32 /**
33 * @description: 删除电子签名
34 * @param {*} data
35 * @author: renchao
36 */
37
38
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="ruleForm" label-width="80px"> 5 <el-form :model="ruleForm" label-width="80px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="电子签名"> 8 <el-form-item label="电子签名">
9 <el-input></el-input> 9 <el-input v-model="ruleForm.dzqm"></el-input>
10 </el-form-item> 10 </el-form-item>
11 </el-col> 11 </el-col>
12 <el-col :span="19" class="btnColRight"> 12 <el-col :span="19" class="btnColRight">
13 <el-form-item> 13 <el-form-item>
14 <el-button type="primary" native-type="submit">查询</el-button> 14 <el-button type="primary" native-type="submit">查询</el-button>
15 </el-form-item> 15 </el-form-item>
16 </el-col> 16 </el-col>
17 </el-row> 17 </el-row>
18 </el-form> 18 </el-form>
19 </div>
20
21 <di>
22 <el-upload
23 class="upload-demo"
24 :action="requestUrl"
25 :on-success="handleSuccess"
26 :on-error="handleError"
27 :before-upload="beforeUpload"
28 :file-list="fileList"
29 :limit="limitCount"
30 :on-exceed="handleExceed"
31 list-type="picture"
32 drag
33 >
34 <i class="el-icon-upload"></i>
35 <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
36 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
37 </el-upload>
38
39 </di>
40 <!-- 表格 -->
41 </div> 19 </div>
42 </template> 20 <el-upload
43 <script> 21 class="upload-demo"
44 import { uploadUrl } from '@/api/dzqm' 22 action=""
45 23 :limit="1"
46 export default { 24 multiple
47 name: "dzqm", 25 :auto-upload="false"
48 components: {}, 26 accept=".jpg, .png"
49 mounted () { 27 :on-change="handleChange"
50 }, 28 :before-upload="beforeUpload"
51 data () { 29 :file-list="fileList"
52 return { 30 list-type="picture"
53 dialogImageUrl: '', 31 drag>
54 dialogVisible: false, 32 <i class="el-icon-upload"></i>
55 disabled: false, 33 <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
56 34 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5MB</div>
57 yourHeaders: { /* 你的请求头信息 */ }, 35 </el-upload>
58 fileList: [], // 已上传文件列表 36 <!-- 表格 -->
59 limitCount: 3, // 限制上传文件的个数 37 </div>
60 38 </template>
61 39 <script>
62 requestUrl: uploadUrl(), 40 import { dzqmUpload } from '@/api/dzqm'
63 41 export default {
64 } 42 name: "dzqm",
65 }, 43 data () {
66 methods: { 44 return {
67 handleSuccess(response, file, fileList) { 45 ruleForm: {
68 // 文件上传成功后的回调 46 dzqm: ""
69 console.log('上传成功:', response);
70 this.fileList = fileList; // 更新已上传文件列表
71 },
72 handleError(error, file, fileList) {
73 // 文件上传失败后的回调
74 console.error('上传失败:', error);
75 }, 47 },
76 beforeUpload(file) { 48 fileList: [], // 已上传文件列表
77 // 上传文件之前的钩子，返回false则停止上传 49 }
78 const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; 50 },
79 const isLt2M = file.size / 1024 / 1024 < 2; 51 methods: {
80 if (!isJPGorPNG) { 52 beforeUpload (file) {
81 this.$message.error('上传图片只能是 JPG/PNG 格式!'); 53 // 上传文件之前的钩子，返回false则停止上传
82 return false; 54 const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
83 } 55 const isLt2M = file.size / 1024 / 1024 < 5;
84 if (!isLt2M) { 56 if (!isJPGorPNG) {
85 this.$message.error('上传图片大小不能超过 2MB!'); 57 this.$message.error('上传图片只能是 JPG/PNG 格式!');
86 return false; 58 return false;
87 } 59 }
88 return true; 60 if (!isLt2M) {
89 }, 61 this.$message.error('上传图片大小不能超过 5MB!');
90 handleExceed(files, fileList) { 62 return false;
91 // 文件超出个数限制时的回调 63 }
92 this.$message.warning(`当前限制选择 ${this.limitCount} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); 64 return true;
93 },
94
95 }, 65 },
96 }; 66 async handleChange (file) {
97 </script> 67 var formdata = new FormData();
98 <style scoped lang="scss"> 68 formdata.append("file", file.raw);
99 @import "~@/styles/public.scss"; 69 dzqmUpload(formdata).then(res => {
100 </style> 70 console.log(res);
71 })
72 }
73 }
74 };
75 </script>
76 <style scoped lang="scss">
77 @import "~@/styles/public.scss";
78 </style>
101 79
...\ No newline at end of file ...\ No newline at end of file
......