0525bugFixed
This commit is contained in:
parent
274503442f
commit
be095ce94f
|
|
@ -133,7 +133,7 @@
|
||||||
<el-row v-show="hasPicture">
|
<el-row v-show="hasPicture">
|
||||||
<el-form-item label="图表">
|
<el-form-item label="图表">
|
||||||
<div>
|
<div>
|
||||||
<img id="canvasImg" :src="img" style="width:500px;height: 300px;position: absolute;top: -1000px;">
|
<img id="canvasImg" :src="img" alt="tupian">
|
||||||
<div style="position: relative;display: flex;flex-direction: column;
|
<div style="position: relative;display: flex;flex-direction: column;
|
||||||
border: 1px solid #DCDFE6;">
|
border: 1px solid #DCDFE6;">
|
||||||
<canvas id="canvas" width="500" height="300">
|
<canvas id="canvas" width="500" height="300">
|
||||||
|
|
@ -169,65 +169,67 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { upFile } from "@/api/file";
|
import {upFile} from "@/api/file";
|
||||||
|
|
||||||
let preDrawAry = [];
|
let preDrawAry = [];
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
props: {
|
props: {
|
||||||
results:{
|
results: {
|
||||||
type:Array,
|
type: Array,
|
||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}} ,
|
}
|
||||||
|
},
|
||||||
formID: {
|
formID: {
|
||||||
type:Number,
|
type: Number,
|
||||||
default:0
|
default: 0
|
||||||
},
|
},
|
||||||
wproduct: {
|
wproduct: {
|
||||||
type:Number,
|
type: Number,
|
||||||
default:0
|
default: 0
|
||||||
},
|
},
|
||||||
recordId: {
|
recordId: {
|
||||||
type:Number,
|
type: Number,
|
||||||
default:null
|
default: null
|
||||||
},
|
},
|
||||||
hasPicture:{
|
hasPicture: {
|
||||||
type:Boolean,
|
type: Boolean,
|
||||||
default:false
|
default: false
|
||||||
},
|
},
|
||||||
isDisabled:{
|
isDisabled: {
|
||||||
type:Boolean,
|
type: Boolean,
|
||||||
default:false
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.checkForm = {};
|
that.checkForm = {};
|
||||||
this.form = this.formID;
|
this.form = this.formID;
|
||||||
let formData=this.results;
|
let formData = this.results;
|
||||||
that.wproductId=this.wproduct;
|
that.wproductId = this.wproduct;
|
||||||
formData.forEach(item => {
|
formData.forEach(item => {
|
||||||
let obj = new Object();
|
let obj = new Object();
|
||||||
obj = item;
|
obj = item;
|
||||||
if(item.field_type === 'draw'){
|
if (item.field_type === 'draw') {
|
||||||
obj.is_testok = true;
|
obj.is_testok = true;
|
||||||
}else{
|
} else {
|
||||||
obj.is_testok = null;
|
obj.is_testok = null;
|
||||||
}
|
}
|
||||||
that.formData.push(obj)
|
that.formData.push(obj)
|
||||||
});
|
});
|
||||||
that.formData=[...formData];
|
that.formData = [...formData];
|
||||||
for(let i=0;i<this.results.length;i++){
|
for (let i = 0; i < this.results.length; i++) {
|
||||||
let key = this.results[i].field_key;
|
let key = this.results[i].field_key;
|
||||||
//checkForm接收表单数据的对象
|
//checkForm接收表单数据的对象
|
||||||
let valu = this.results[i].field_value;
|
let valu = this.results[i].field_value;
|
||||||
if(valu!==null&&valu!==''&&valu!==undefined){
|
if (valu !== null && valu !== '' && valu !== undefined) {
|
||||||
that.checkForm[key]=valu;
|
that.checkForm[key] = valu;
|
||||||
that.$set(that.checkForm,key,valu);
|
that.$set(that.checkForm, key, valu);
|
||||||
that.is_save = true;
|
that.is_save = true;
|
||||||
}else{
|
} else {
|
||||||
that.checkForm[key]='';
|
that.checkForm[key] = '';
|
||||||
that.$set(that.checkForm,key,null)
|
that.$set(that.checkForm, key, null)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let listJudge = this.formData.filter(item => {
|
let listJudge = this.formData.filter(item => {
|
||||||
|
|
@ -238,173 +240,173 @@
|
||||||
obj = item;
|
obj = item;
|
||||||
that.judgeList.push(obj)
|
that.judgeList.push(obj)
|
||||||
});
|
});
|
||||||
let imag= this.formData.filter(item => {
|
let imag = this.formData.filter(item => {
|
||||||
return item.field_type === 'draw';
|
return item.field_type === 'draw';
|
||||||
});
|
});
|
||||||
if(imag.length>0){
|
if (imag.length > 0) {
|
||||||
that.img = new Image();
|
that.img = new Image();
|
||||||
that.img.crossOrigin = 'anonymous';
|
that.img.crossOrigin = 'anonymous';
|
||||||
let value = imag[0].field_value?imag[0].field_value:imag[0].draw_template;
|
let value = imag[0].field_value!==null ? imag[0].field_value : imag[0].draw_template;
|
||||||
that.img = value;
|
that.img =process.env.VUE_APP_BASE_API.replace('/api','')+ value;
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
that.canvasInit();
|
that.canvasInit();
|
||||||
},500);
|
}, 1000);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
field:[],
|
field: [],
|
||||||
checkForm:{},
|
checkForm: {},
|
||||||
testrecord:{
|
testrecord: {
|
||||||
form:this.formID,
|
form: this.formID,
|
||||||
record_data:[],
|
record_data: [],
|
||||||
is_testok:true,
|
is_testok: true,
|
||||||
wproduct:null,
|
wproduct: null,
|
||||||
},
|
},
|
||||||
canvas:null,
|
canvas: null,
|
||||||
wproductId:null,
|
wproductId: null,
|
||||||
ctx:null,
|
ctx: null,
|
||||||
myCanvas_rect:null,
|
myCanvas_rect: null,
|
||||||
Txt:null,
|
Txt: null,
|
||||||
word:null,
|
word: null,
|
||||||
img:null,
|
img: null,
|
||||||
widths:0,
|
widths: 0,
|
||||||
heights:0,
|
heights: 0,
|
||||||
lineW:3,
|
lineW: 3,
|
||||||
colorF:"#e42343",
|
colorF: "#e42343",
|
||||||
imgUrl:'',
|
imgUrl: '',
|
||||||
imgData:'',
|
imgData: '',
|
||||||
canvasImg:'',
|
canvasImg: '',
|
||||||
formData:[],//表单数组
|
formData: [],//表单数组
|
||||||
judgeList:[],//判定数组
|
judgeList: [],//判定数组
|
||||||
is_testok:true,
|
is_testok: true,
|
||||||
testokTrue:true,
|
testokTrue: true,
|
||||||
is_save:false,
|
is_save: false,
|
||||||
require:false,
|
require: false,
|
||||||
testokFalse:false,
|
testokFalse: false,
|
||||||
index:'1',
|
index: '1',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
filterBlock(rule,index,field_key){
|
filterBlock(rule, index, field_key) {
|
||||||
let that = this;
|
let that = this;
|
||||||
if(rule!==''&&rule!==null&&rule!==undefined){
|
if (rule !== '' && rule !== null && rule !== undefined) {
|
||||||
let reg = /\{(.+?)\}/g;
|
let reg = /\{(.+?)\}/g;
|
||||||
if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
|
if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
|
||||||
let tam = '', arr = [];
|
let tam = '', arr = [];
|
||||||
if(rule.indexOf('||')>-1){
|
if (rule.indexOf('||') > -1) {
|
||||||
arr = rule.split('||');
|
arr = rule.split('||');
|
||||||
}else{
|
} else {
|
||||||
arr = rule.split('&&');
|
arr = rule.split('&&');
|
||||||
}
|
}
|
||||||
for (let i = 0;i<arr.length;i++){
|
for (let i = 0; i < arr.length; i++) {
|
||||||
//获取判断依据
|
//获取判断依据
|
||||||
let a = '';
|
let a = '';
|
||||||
a = arr[i].replace(/`/g,'');
|
a = arr[i].replace(/`/g, '');
|
||||||
a = '`'+ a+'`';
|
a = '`' + a + '`';
|
||||||
let tem =a.match(reg)[0];
|
let tem = a.match(reg)[0];
|
||||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||||
if(that.checkForm[ky]){
|
if (that.checkForm[ky]) {
|
||||||
//替换变量
|
//替换变量
|
||||||
a = a.replace(ky, 'yyy');
|
a = a.replace(ky, 'yyy');
|
||||||
let yyy = "'"+that.checkForm[ky]+"'";
|
let yyy = "'" + that.checkForm[ky] + "'";
|
||||||
if(eval(eval( a))){
|
if (eval(eval(a))) {
|
||||||
tam += 'true';
|
tam += 'true';
|
||||||
}else{
|
} else {
|
||||||
tam += 'false';
|
tam += 'false';
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
tam += 'false';
|
tam += 'false';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let rea = true;
|
let rea = true;
|
||||||
if(rule.indexOf('||')>-1){
|
if (rule.indexOf('||') > -1) {
|
||||||
if( tam.indexOf('true')>-1){
|
if (tam.indexOf('true') > -1) {
|
||||||
rea = true;
|
rea = true;
|
||||||
}else{
|
} else {
|
||||||
rea = false;
|
rea = false;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
if( tam.indexOf('false')>-1){
|
if (tam.indexOf('false') > -1) {
|
||||||
rea = false;
|
rea = false;
|
||||||
}else{
|
} else {
|
||||||
rea = true;
|
rea = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(rea){
|
if (rea) {
|
||||||
that.formData[index].is_hidden = false;
|
that.formData[index].is_hidden = false;
|
||||||
}else{
|
} else {
|
||||||
that.formData[index].is_hidden = true;
|
that.formData[index].is_hidden = true;
|
||||||
that.checkForm[field_key] = null;
|
that.checkForm[field_key] = null;
|
||||||
}
|
}
|
||||||
return rea;
|
return rea;
|
||||||
}else{
|
} else {
|
||||||
let temp =rule.match(reg)[0];
|
let temp = rule.match(reg)[0];
|
||||||
let key = temp.replace(/\{|\}/g, '');//qipao
|
let key = temp.replace(/\{|\}/g, '');//qipao
|
||||||
let a = rule.replace(key, 'yy');
|
let a = rule.replace(key, 'yy');
|
||||||
a = a.replace(key, 'yy');
|
a = a.replace(key, 'yy');
|
||||||
let yy = "'"+that.checkForm[key]+"'";
|
let yy = "'" + that.checkForm[key] + "'";
|
||||||
if(eval(eval(a))){
|
if (eval(eval(a))) {
|
||||||
that.formData[index].is_hidden = false;
|
that.formData[index].is_hidden = false;
|
||||||
}else{
|
} else {
|
||||||
that.formData[index].is_hidden = true;
|
that.formData[index].is_hidden = true;
|
||||||
that.checkForm[field_key] = null;
|
that.checkForm[field_key] = null;
|
||||||
}
|
}
|
||||||
return eval(eval(a));
|
return eval(eval(a));
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
that.formData[index].is_hidden = false;
|
that.formData[index].is_hidden = false;
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
keyChange(index,key){
|
keyChange(index, key) {
|
||||||
let that = this;
|
let that = this;
|
||||||
let reg = /\{(.+?)\}/g;
|
let reg = /\{(.+?)\}/g;
|
||||||
that.$forceUpdate();
|
that.$forceUpdate();
|
||||||
that.$nextTick(()=>{
|
that.$nextTick(() => {
|
||||||
if(that.formData[index].need_judge===true){
|
if (that.formData[index].need_judge === true) {
|
||||||
let arr = [],str = '';
|
let arr = [], str = '';
|
||||||
let item = that.formData[index].rule_expression.replace(/`/g,'');
|
let item = that.formData[index].rule_expression.replace(/`/g, '');
|
||||||
if(item.indexOf('||')>-1){
|
if (item.indexOf('||') > -1) {
|
||||||
arr = item.split('||');
|
arr = item.split('||');
|
||||||
}else if(item.indexOf('&&')>-1){
|
} else if (item.indexOf('&&') > -1) {
|
||||||
arr = item.split('&&');
|
arr = item.split('&&');
|
||||||
}else{
|
} else {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
}
|
}
|
||||||
//对每个条件进行判定，如果符合，
|
//对每个条件进行判定，如果符合，
|
||||||
for (let i = 0;i<arr.length;i++){
|
for (let i = 0; i < arr.length; i++) {
|
||||||
//获取判断依据
|
//获取判断依据
|
||||||
let a = '`'+ arr[i]+'`';
|
let a = '`' + arr[i] + '`';
|
||||||
let tem =a.match(reg)[0];
|
let tem = a.match(reg)[0];
|
||||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||||
//有值时进行判断
|
//有值时进行判断
|
||||||
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
|
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
|
||||||
//替换变量
|
//替换变量
|
||||||
a = a.replace(ky, 'yyy');
|
a = a.replace(ky, 'yyy');
|
||||||
let yyy = "'"+that.checkForm[ky]+"'";
|
let yyy = "'" + that.checkForm[ky] + "'";
|
||||||
if(eval(eval( a))){
|
if (eval(eval(a))) {
|
||||||
str += 'true';
|
str += 'true';
|
||||||
}else{
|
} else {
|
||||||
str += 'false';
|
str += 'false';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(item.indexOf('&&')>-1){
|
if (item.indexOf('&&') > -1) {
|
||||||
if(str.indexOf('false')>-1){
|
if (str.indexOf('false') > -1) {
|
||||||
that.formData[index].is_testok = true;
|
that.formData[index].is_testok = true;
|
||||||
that.$set(that.formData[index],'is_testok',true)
|
that.$set(that.formData[index], 'is_testok', true)
|
||||||
}else{
|
} else {
|
||||||
that.formData[index].is_testok = false;
|
that.formData[index].is_testok = false;
|
||||||
that.$set(that.formData[index],'is_testok',false)
|
that.$set(that.formData[index], 'is_testok', false)
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
if(str.indexOf('true')>-1){
|
if (str.indexOf('true') > -1) {
|
||||||
that.formData[index].is_testok = false;
|
that.formData[index].is_testok = false;
|
||||||
that.$set(that.formData[index],'is_testok',false)
|
that.$set(that.formData[index], 'is_testok', false)
|
||||||
}else{
|
} else {
|
||||||
that.formData[index].is_testok = true;
|
that.formData[index].is_testok = true;
|
||||||
that.$set(that.formData[index],'is_testok',true)
|
that.$set(that.formData[index], 'is_testok', true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
that.$forceUpdate();
|
that.$forceUpdate();
|
||||||
|
|
@ -418,7 +420,7 @@
|
||||||
},
|
},
|
||||||
/* 图片保存 */
|
/* 图片保存 */
|
||||||
//初始化canvas
|
//初始化canvas
|
||||||
canvasInit(){
|
canvasInit() {
|
||||||
let that = this;
|
let that = this;
|
||||||
preDrawAry = [];
|
preDrawAry = [];
|
||||||
that.canvas = document.getElementById('canvas');
|
that.canvas = document.getElementById('canvas');
|
||||||
|
|
@ -428,55 +430,55 @@
|
||||||
that.word = document.getElementById('word');
|
that.word = document.getElementById('word');
|
||||||
that.widths = that.myCanvas_rect.width;
|
that.widths = that.myCanvas_rect.width;
|
||||||
that.heights = that.myCanvas_rect.height;
|
that.heights = that.myCanvas_rect.height;
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
that.draw();
|
that.draw();
|
||||||
},500);
|
}, 500);
|
||||||
},
|
},
|
||||||
//画布添加背景模板图
|
//画布添加背景模板图
|
||||||
draw(){
|
draw() {
|
||||||
|
debugger;
|
||||||
|
this.ctx = document.getElementById('canvas').getContext('2d');
|
||||||
let canvasImg = document.getElementById("canvasImg");
|
let canvasImg = document.getElementById("canvasImg");
|
||||||
canvasImg.setAttribute("crossOrigin",'anonymous');
|
// canvasImg.setAttribute("crossOrigin", 'anonymous');
|
||||||
// canvasImg.style.width = '500px';
|
this.ctx.drawImage(canvasImg, 0, 0, 500, 300);
|
||||||
// canvasImg.style.height = '300px';
|
|
||||||
this.ctx.drawImage(canvasImg,0,0,500,300);
|
|
||||||
},
|
},
|
||||||
// 叉号
|
// 叉号
|
||||||
error1(){
|
error1() {
|
||||||
let canvas1 = document.getElementById('canvas');
|
let canvas1 = document.getElementById('canvas');
|
||||||
let ctx1 = canvas1.getContext('2d');
|
let ctx1 = canvas1.getContext('2d');
|
||||||
this.Txt.style.display="none";
|
this.Txt.style.display = "none";
|
||||||
document.getElementById('word').style.display="none";
|
document.getElementById('word').style.display = "none";
|
||||||
ctx1.closePath();
|
ctx1.closePath();
|
||||||
canvas1.onmousedown=function () {
|
canvas1.onmousedown = function () {
|
||||||
this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
|
this.imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
|
||||||
preDrawAry.push(this.imgData);
|
preDrawAry.push(this.imgData);
|
||||||
ctx1.beginPath();
|
ctx1.beginPath();
|
||||||
ctx1.strokeStyle = "#e42343";
|
ctx1.strokeStyle = "#e42343";
|
||||||
ctx1.lineWidth = "3";
|
ctx1.lineWidth = "3";
|
||||||
ctx1.lineJoin="round";
|
ctx1.lineJoin = "round";
|
||||||
};
|
};
|
||||||
//鼠标按下的位置
|
//鼠标按下的位置
|
||||||
canvas1.onmouseup=function (ev) {
|
canvas1.onmouseup = function (ev) {
|
||||||
let oldX = ev.offsetX;
|
let oldX = ev.offsetX;
|
||||||
let oldY = ev.offsetY;
|
let oldY = ev.offsetY;
|
||||||
ctx1.moveTo(oldX,oldY);
|
ctx1.moveTo(oldX, oldY);
|
||||||
ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
|
ctx1.lineTo(ev.offsetX + 10, ev.offsetY + 10);
|
||||||
ctx1.moveTo(ev.offsetX+10,ev.offsetY);
|
ctx1.moveTo(ev.offsetX + 10, ev.offsetY);
|
||||||
ctx1.lineTo(ev.offsetX,ev.offsetY+10);
|
ctx1.lineTo(ev.offsetX, ev.offsetY + 10);
|
||||||
ctx1.stroke();
|
ctx1.stroke();
|
||||||
};
|
};
|
||||||
this.ctx.closePath();
|
this.ctx.closePath();
|
||||||
},
|
},
|
||||||
// 文字先写字
|
// 文字先写字
|
||||||
text(){
|
text() {
|
||||||
let canvas2 = document.getElementById('canvas');
|
let canvas2 = document.getElementById('canvas');
|
||||||
let ctx2 = canvas2.getContext('2d');
|
let ctx2 = canvas2.getContext('2d');
|
||||||
let Txt2 = document.getElementById('txt');
|
let Txt2 = document.getElementById('txt');
|
||||||
Txt2.style.display="block";
|
Txt2.style.display = "block";
|
||||||
document.getElementById('word').style.display="none";
|
document.getElementById('word').style.display = "none";
|
||||||
ctx2.font="16px Microsoft Yahei";
|
ctx2.font = "16px Microsoft Yahei";
|
||||||
canvas2.onmousedown=function (ev) {
|
canvas2.onmousedown = function (ev) {
|
||||||
this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
|
this.imgData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
|
||||||
preDrawAry.push(this.imgData);
|
preDrawAry.push(this.imgData);
|
||||||
var v = Txt2.value;
|
var v = Txt2.value;
|
||||||
// console.log(v);
|
// console.log(v);
|
||||||
|
|
@ -484,63 +486,63 @@
|
||||||
var oldX = ev.offsetX;
|
var oldX = ev.offsetX;
|
||||||
var oldY = ev.offsetY;
|
var oldY = ev.offsetY;
|
||||||
// console.log(oldX,oldY);
|
// console.log(oldX,oldY);
|
||||||
ctx2.moveTo(oldX,oldY);
|
ctx2.moveTo(oldX, oldY);
|
||||||
canvas2.onmouseup=function () {
|
canvas2.onmouseup = function () {
|
||||||
ctx2.fillStyle=this.colorF;
|
ctx2.fillStyle = this.colorF;
|
||||||
ctx2.fillText(v,oldX,oldY);
|
ctx2.fillText(v, oldX, oldY);
|
||||||
canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
|
canvas2.TextAutoLine(v, canvas2, oldX, oldY, 20);
|
||||||
// Txt.value = "";
|
// Txt.value = "";
|
||||||
Txt2.style.display="none";
|
Txt2.style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 文字
|
// 文字
|
||||||
word1(){
|
word1() {
|
||||||
let canvas3 = document.getElementById('canvas');
|
let canvas3 = document.getElementById('canvas');
|
||||||
let ctx3 = canvas3.getContext('2d');
|
let ctx3 = canvas3.getContext('2d');
|
||||||
let Txt3 = document.getElementById('txt');
|
let Txt3 = document.getElementById('txt');
|
||||||
let word3 = document.getElementById('word');
|
let word3 = document.getElementById('word');
|
||||||
Txt3.style.display="none";
|
Txt3.style.display = "none";
|
||||||
ctx3.font="16px Microsoft Yahei";
|
ctx3.font = "16px Microsoft Yahei";
|
||||||
canvas3.onmousedown=function () {
|
canvas3.onmousedown = function () {
|
||||||
ctx3.closePath();
|
ctx3.closePath();
|
||||||
}
|
}
|
||||||
canvas3.onmouseup=function (ev) {
|
canvas3.onmouseup = function (ev) {
|
||||||
var inputV= document.getElementById('inputV').value;
|
var inputV = document.getElementById('inputV').value;
|
||||||
if(inputV == 1){
|
if (inputV == 1) {
|
||||||
document.getElementById('word').focus();
|
document.getElementById('word').focus();
|
||||||
// console.log(ev.offsetX,ev.offsetY);
|
// console.log(ev.offsetX,ev.offsetY);
|
||||||
var oldX = ev.offsetX;
|
var oldX = ev.offsetX;
|
||||||
var oldY = ev.offsetY;
|
var oldY = ev.offsetY;
|
||||||
word3.style.display="block";
|
word3.style.display = "block";
|
||||||
word3.style.left=oldX+'px';
|
word3.style.left = oldX + 'px';
|
||||||
word3.style.top =oldY+'px';
|
word3.style.top = oldY + 'px';
|
||||||
|
|
||||||
word3.onblur=function () {
|
word3.onblur = function () {
|
||||||
let v = word3.value;
|
let v = word3.value;
|
||||||
if(v != '' && v != ' '){
|
if (v != '' && v != ' ') {
|
||||||
this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
this.imgData = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||||||
let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
let img = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||||||
preDrawAry.push(img);
|
preDrawAry.push(img);
|
||||||
ctx3.moveTo(oldX,oldY);
|
ctx3.moveTo(oldX, oldY);
|
||||||
ctx3.fillStyle="#e42343";
|
ctx3.fillStyle = "#e42343";
|
||||||
let lineWidth = 0;
|
let lineWidth = 0;
|
||||||
let canvasWidth = canvas3.width;
|
let canvasWidth = canvas3.width;
|
||||||
let lastSubStrIndex= 0;
|
let lastSubStrIndex = 0;
|
||||||
for(let i=0;i<v.length;i++){
|
for (let i = 0; i < v.length; i++) {
|
||||||
lineWidth+=ctx3.measureText(v[i]).width;
|
lineWidth += ctx3.measureText(v[i]).width;
|
||||||
if(lineWidth>canvasWidth-oldX){
|
if (lineWidth > canvasWidth - oldX) {
|
||||||
ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
|
ctx3.fillText(v.substring(lastSubStrIndex, i), oldX, (oldY + 10));
|
||||||
oldY+=20;
|
oldY += 20;
|
||||||
lineWidth=0;
|
lineWidth = 0;
|
||||||
lastSubStrIndex=i;
|
lastSubStrIndex = i;
|
||||||
}
|
}
|
||||||
if(i==v.length-1){
|
if (i == v.length - 1) {
|
||||||
ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
|
ctx3.fillText(v.substring(lastSubStrIndex, i + 1), oldX, (oldY + 10));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
inputV ="2";
|
inputV = "2";
|
||||||
word3.value = "";
|
word3.value = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -548,42 +550,42 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 文字过长超出换行toDataURL()
|
// 文字过长超出换行toDataURL()
|
||||||
canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
|
canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
|
||||||
let ctx = canvas.getContext("2d");
|
let ctx = canvas.getContext("2d");
|
||||||
let lineWidth = 0;
|
let lineWidth = 0;
|
||||||
let canvasWidth = canvas.width;
|
let canvasWidth = canvas.width;
|
||||||
let lastSubStrIndex= 0;
|
let lastSubStrIndex = 0;
|
||||||
for(let i=0;i<str.length;i++){
|
for (let i = 0; i < str.length; i++) {
|
||||||
lineWidth+=ctx.measureText(str[i]).width;
|
lineWidth += ctx.measureText(str[i]).width;
|
||||||
if(lineWidth>canvasWidth-initX){
|
if (lineWidth > canvasWidth - initX) {
|
||||||
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
|
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
|
||||||
initY+=lineHeight;
|
initY += lineHeight;
|
||||||
lineWidth=0;
|
lineWidth = 0;
|
||||||
lastSubStrIndex=i;
|
lastSubStrIndex = i;
|
||||||
}
|
}
|
||||||
if(i==str.length-1){
|
if (i == str.length - 1) {
|
||||||
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
|
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 撤销
|
// 撤销
|
||||||
back(){
|
back() {
|
||||||
this.word.style.display="none";
|
this.word.style.display = "none";
|
||||||
this.Txt.style.display="none";
|
this.Txt.style.display = "none";
|
||||||
if(preDrawAry.length>0) {
|
if (preDrawAry.length > 0) {
|
||||||
var popData = preDrawAry.pop();
|
var popData = preDrawAry.pop();
|
||||||
this.ctx.putImageData(popData, 0, 0);
|
this.ctx.putImageData(popData, 0, 0);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 回退一次
|
// 回退一次
|
||||||
put(){
|
put() {
|
||||||
this.ctx.putImageData(this.imgData,0,0);
|
this.ctx.putImageData(this.imgData, 0, 0);
|
||||||
},
|
},
|
||||||
//保存
|
//保存
|
||||||
saveTu(){
|
saveTu() {
|
||||||
let that = this;
|
let that = this;
|
||||||
this.word.style.display="none";
|
this.word.style.display = "none";
|
||||||
this.Txt.style.display="none";
|
this.Txt.style.display = "none";
|
||||||
let canvas = document.getElementById('canvas');
|
let canvas = document.getElementById('canvas');
|
||||||
let image = new Image();
|
let image = new Image();
|
||||||
image = canvas.toDataURL('image/png');
|
image = canvas.toDataURL('image/png');
|
||||||
|
|
@ -592,7 +594,7 @@
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
formData.append('file', file);
|
formData.append('file', file);
|
||||||
upFile(formData).then((res) => {
|
upFile(formData).then((res) => {
|
||||||
that.imgUrl=res.data.path;
|
that.imgUrl = res.data.path;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//base64ToFile
|
//base64ToFile
|
||||||
|
|
@ -600,69 +602,69 @@
|
||||||
let arr = baseUrl.split(',');
|
let arr = baseUrl.split(',');
|
||||||
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
|
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
|
||||||
let bytes = atob(arr[1]); // 解码base64
|
let bytes = atob(arr[1]); // 解码base64
|
||||||
let n = bytes .length;
|
let n = bytes.length;
|
||||||
let bufferArray = new Uint8Array(n);
|
let bufferArray = new Uint8Array(n);
|
||||||
while (n--) {
|
while (n--) {
|
||||||
bufferArray[n] = bytes.charCodeAt(n);
|
bufferArray[n] = bytes.charCodeAt(n);
|
||||||
}
|
}
|
||||||
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
|
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
|
||||||
return new File([bufferArray ],'draw.jpg');
|
return new File([bufferArray], 'draw.jpg');
|
||||||
},
|
},
|
||||||
/* 图片保存 */
|
/* 图片保存 */
|
||||||
//最终表格判定
|
//最终表格判定
|
||||||
judgeForm(){
|
judgeForm() {
|
||||||
let that = this ,
|
let that = this,
|
||||||
reg = /\{(.+?)\}/g,
|
reg = /\{(.+?)\}/g,
|
||||||
judgeList = this.judgeList;
|
judgeList = this.judgeList;
|
||||||
for(let i=0;i<judgeList.length;i++){
|
for (let i = 0; i < judgeList.length; i++) {
|
||||||
let arr = [],str = '';
|
let arr = [], str = '';
|
||||||
let item = judgeList[i].rule_expression.replace(/`/g,'');
|
let item = judgeList[i].rule_expression.replace(/`/g, '');
|
||||||
if(item.indexOf('||')>-1){
|
if (item.indexOf('||') > -1) {
|
||||||
arr = item.split('||');
|
arr = item.split('||');
|
||||||
}else if(item.indexOf('&&')>-1){
|
} else if (item.indexOf('&&') > -1) {
|
||||||
arr = item.split('&&');
|
arr = item.split('&&');
|
||||||
}else{
|
} else {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
}
|
}
|
||||||
//对每个条件进行判定，如果符合，
|
//对每个条件进行判定，如果符合，
|
||||||
for (let i = 0;i<arr.length;i++){
|
for (let i = 0; i < arr.length; i++) {
|
||||||
//获取判断依据
|
//获取判断依据
|
||||||
let a = '`'+ arr[i]+'`';
|
let a = '`' + arr[i] + '`';
|
||||||
let tem =a.match(reg)[0];
|
let tem = a.match(reg)[0];
|
||||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||||
//有值时进行判断
|
//有值时进行判断
|
||||||
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
|
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
|
||||||
//替换变量
|
//替换变量
|
||||||
a = a.replace(ky, 'yyy');
|
a = a.replace(ky, 'yyy');
|
||||||
let yyy = "'"+that.checkForm[ky]+"'";
|
let yyy = "'" + that.checkForm[ky] + "'";
|
||||||
if(eval(eval( a))){
|
if (eval(eval(a))) {
|
||||||
str += 'true';
|
str += 'true';
|
||||||
}else{
|
} else {
|
||||||
str += 'false';
|
str += 'false';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(item.indexOf('&&')>-1){
|
if (item.indexOf('&&') > -1) {
|
||||||
if(str.indexOf('false')>-1){
|
if (str.indexOf('false') > -1) {
|
||||||
that.judgeList[i].is_testok = true;
|
that.judgeList[i].is_testok = true;
|
||||||
}else{
|
} else {
|
||||||
that.judgeList[i].is_testok = false;
|
that.judgeList[i].is_testok = false;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
if(str.indexOf('true')>-1){
|
if (str.indexOf('true') > -1) {
|
||||||
that.judgeList[i].is_testok = false;
|
that.judgeList[i].is_testok = false;
|
||||||
}else{
|
} else {
|
||||||
that.judgeList[i].is_testok = true;
|
that.judgeList[i].is_testok = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let real = that.judgeList.filter(item=>{
|
let real = that.judgeList.filter(item => {
|
||||||
return item.is_testok===false;
|
return item.is_testok === false;
|
||||||
});
|
});
|
||||||
if(real.length>0){
|
if (real.length > 0) {
|
||||||
that.is_testok = false;
|
that.is_testok = false;
|
||||||
// alert("检验不合格！")
|
// alert("检验不合格！")
|
||||||
}else{
|
} else {
|
||||||
that.is_testok = true;
|
that.is_testok = true;
|
||||||
// alert("检验合格！")
|
// alert("检验合格！")
|
||||||
}
|
}
|
||||||
|
|
@ -671,12 +673,12 @@
|
||||||
submitfield(isSubmit) {
|
submitfield(isSubmit) {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.index = isSubmit;
|
that.index = isSubmit;
|
||||||
let drawArr = that.formData.filter(item=>{
|
let drawArr = that.formData.filter(item => {
|
||||||
return item.field_type==='draw';
|
return item.field_type === 'draw';
|
||||||
});
|
});
|
||||||
if(drawArr.length>0){
|
if (drawArr.length > 0) {
|
||||||
that.word.style.display="none";
|
that.word.style.display = "none";
|
||||||
that.Txt.style.display="none";
|
that.Txt.style.display = "none";
|
||||||
let canvas = document.getElementById('canvas');
|
let canvas = document.getElementById('canvas');
|
||||||
let image = new Image();
|
let image = new Image();
|
||||||
image = canvas.toDataURL('image/png');
|
image = canvas.toDataURL('image/png');
|
||||||
|
|
@ -685,27 +687,27 @@
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
formData.append('file', file);
|
formData.append('file', file);
|
||||||
upFile(formData).then((res) => {
|
upFile(formData).then((res) => {
|
||||||
if(res){
|
if (res) {
|
||||||
let key = drawArr[0].field_key;
|
let key = drawArr[0].field_key;
|
||||||
that.imgUrl=res.data.path;
|
that.imgUrl = res.data.path;
|
||||||
that.checkForm[key] = res.data.path;
|
that.checkForm[key] = res.data.path;
|
||||||
that.fieldData();
|
that.fieldData();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}else{
|
} else {
|
||||||
that.fieldData();
|
that.fieldData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fieldData(){
|
fieldData() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.field = []; //检查项目
|
that.field = []; //检查项目
|
||||||
that.formData.forEach((item) => {
|
that.formData.forEach((item) => {
|
||||||
let field_value;
|
let field_value;
|
||||||
if(item.field_type==='int'){
|
if (item.field_type === 'int') {
|
||||||
field_value = parseInt(that.checkForm[item.field_key])
|
field_value = parseInt(that.checkForm[item.field_key])
|
||||||
}else if(item.field_type==='float'){
|
} else if (item.field_type === 'float') {
|
||||||
field_value = parseFloat(that.checkForm[item.field_key])
|
field_value = parseFloat(that.checkForm[item.field_key])
|
||||||
}else{
|
} else {
|
||||||
field_value = that.checkForm[item.field_key];
|
field_value = that.checkForm[item.field_key];
|
||||||
}
|
}
|
||||||
that.field.push({
|
that.field.push({
|
||||||
|
|
@ -718,14 +720,14 @@
|
||||||
that.testrecord.record_data = that.field;//检查项列表
|
that.testrecord.record_data = that.field;//检查项列表
|
||||||
that.testrecord.is_testok = that.is_testok;//检查表检查结果
|
that.testrecord.is_testok = that.is_testok;//检查表检查结果
|
||||||
that.testrecord.id = that.recordId;//记录id
|
that.testrecord.id = that.recordId;//记录id
|
||||||
if(that.index==='2'){//提交
|
if (that.index === '2') {//提交
|
||||||
this.$emit('recordSubmit',that.testrecord);
|
this.$emit('recordSubmit', that.testrecord);
|
||||||
}else {//保存
|
} else {//保存
|
||||||
this.$emit('recordSave',that.testrecord);
|
this.$emit('recordSave', that.testrecord);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
recordCancel(){
|
recordCancel() {
|
||||||
this.$emit('recordCancel','')
|
this.$emit('recordCancel', '')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -733,7 +735,7 @@
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
canvas {
|
canvas {
|
||||||
width:500px!important;
|
width: 500px !important;
|
||||||
/*border: 1px solid #000000;*/
|
/*border: 1px solid #000000;*/
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
@ -757,6 +759,7 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -795,23 +798,33 @@
|
||||||
#res {
|
#res {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.helpText{
|
|
||||||
|
.helpText {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
left: 100px;
|
left: 100px;
|
||||||
}
|
}
|
||||||
.adoptTip{
|
|
||||||
|
.adoptTip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 38px;
|
top: 38px;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #46ce7a;
|
color: #46ce7a;
|
||||||
}
|
}
|
||||||
.failTip{
|
|
||||||
|
.failTip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 38px;
|
top: 38px;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ff0000;
|
color: #ff0000;
|
||||||
}
|
}
|
||||||
|
#canvasImg{
|
||||||
|
width:500px;
|
||||||
|
height: 300px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%)
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue