customForm
This commit is contained in:
parent
321b819312
commit
5bac47bfb0
|
|
@ -0,0 +1,537 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="checkForm"
|
||||
label-width="100px"
|
||||
:model="checkForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, $index) in formData"
|
||||
v-show="filterBlock(item.parent,item.display_expression)"
|
||||
:key="$index"
|
||||
:span="12"
|
||||
>
|
||||
<el-form-item
|
||||
v-if="item.field_type === 'string'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'int'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'float'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'date'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
/>
|
||||
<!--</el-date-picker>-->
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'datetime'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
/>
|
||||
<!--</el-date-picker>-->
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'select'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
@change="keyChange(item.field_key)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
/>
|
||||
<!--</el-option>-->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'selects'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-show="hasPicture">
|
||||
<el-form-item label="图表">
|
||||
<div>
|
||||
<img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
|
||||
<div style="position: relative;display: flex">
|
||||
<canvas id="canvas" width="300" height="200">
|
||||
您的浏览器不支持绘图，请升级或更换浏览器！
|
||||
</canvas>
|
||||
<input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
|
||||
<textarea class="hide" id="word" cols="15" rows="5" placeholder="请输入文字" autofocus></textarea>
|
||||
<input id="inputV" type="hidden" value="1">
|
||||
<div class="canvasBtnWrap">
|
||||
<div class="canvasBtn" @click="error1">标记</div>
|
||||
<div class="canvasBtn" @click="word1()">文字</div>
|
||||
<div class="canvasBtn" @click="back()">回退</div>
|
||||
<div class="canvasBtn" @click="saveTu()">保存</div>
|
||||
</div>
|
||||
<div id="res"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { upFile } from "@/api/file";
|
||||
let preDrawAry = [];
|
||||
export default {
|
||||
name: "index",
|
||||
props: {
|
||||
results:{
|
||||
type:Array,
|
||||
default: () => {
|
||||
return []
|
||||
}} ,
|
||||
formID: {
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
hasPicture:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
this.form = this.formID;
|
||||
// debugger;
|
||||
// console.log(this.results);
|
||||
this.formData=this.results;
|
||||
this.formData=[...this.formData];
|
||||
for(let i=0;i<this.results.length;i++){
|
||||
let key = this.results[i].field_key;
|
||||
that.checkForm[key]='';
|
||||
that.$set(that.checkForm,key,'')
|
||||
}
|
||||
// debugger;
|
||||
// console.log(that.checkForm);
|
||||
let listJudge = this.formData.filter(item => {
|
||||
return item.need_judge === true;
|
||||
});
|
||||
listJudge.forEach(item => {
|
||||
let obj = new Object();
|
||||
obj = item;
|
||||
obj.judge = false;
|
||||
that.judgeList.push(obj)
|
||||
});
|
||||
setTimeout(function(){
|
||||
that.canvasInit();
|
||||
},500);
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
checkForm:{},
|
||||
canvas:null,
|
||||
ctx:null,
|
||||
myCanvas_rect:null,
|
||||
Txt:null,
|
||||
word:null,
|
||||
widths:0,
|
||||
heights:0,
|
||||
lineW:3,
|
||||
colorF:"#e42343",
|
||||
imgData:'',
|
||||
canvasImg:'',
|
||||
formData:[],//表单数组
|
||||
judgeList:[],//判定数组
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
filterBlock(parent,rule){
|
||||
// debugger;
|
||||
let that = this;
|
||||
if(parent!==''&&parent!==null&&parent!==undefined){
|
||||
if(rule!==''&&rule!==null&&rule!==undefined){
|
||||
let reg = /\{(.+?)\}/g;
|
||||
//let str = rule.replace(temp,'').replace('$','');//=='有'
|
||||
//let y = that.checkForm[key];
|
||||
if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
|
||||
let tam = '', arr = [];
|
||||
if(rule.indexOf('||')>-1){
|
||||
arr = rule.split('||');
|
||||
}else{
|
||||
arr = rule.split('&&');
|
||||
}
|
||||
for (let i = 0;i<arr.length;i++){
|
||||
//获取判断依据
|
||||
let a = '';
|
||||
a = arr[i].replace(/`/g,'');
|
||||
a = '`'+ a+'`';
|
||||
let tem =a.match(reg)[0];
|
||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||
if(that.checkForm[ky]){
|
||||
//替换变量
|
||||
a = a.replace(ky, 'yyy');
|
||||
let yyy = "'"+that.checkForm[ky]+"'";
|
||||
if(eval(eval( a))){
|
||||
tam += 'true';
|
||||
}else{
|
||||
tam += 'false';
|
||||
}
|
||||
}else{
|
||||
tam += 'false';
|
||||
}
|
||||
}
|
||||
let rea = true;
|
||||
if(rule.indexOf('||')>-1){
|
||||
if( tam.indexOf('true')>-1){
|
||||
rea = true;
|
||||
}else{
|
||||
rea = false;
|
||||
}
|
||||
}else{
|
||||
if( tam.indexOf('false')>-1){
|
||||
rea = false;
|
||||
}else{
|
||||
rea = true;
|
||||
}
|
||||
}
|
||||
return rea;
|
||||
}else{
|
||||
let temp =rule.match(reg)[0];
|
||||
let key = temp.replace(/\{|\}/g, '');//qipao
|
||||
let a = rule.replace(key, 'yy');
|
||||
a = a.replace(key, 'yy');
|
||||
let yy = "'"+that.checkForm[key]+"'";
|
||||
return eval(eval(a));
|
||||
// return eval("'"+y+"'"+str);
|
||||
}
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
},
|
||||
keyChange(key){
|
||||
key;
|
||||
this.$forceUpdate();
|
||||
/* debugger;
|
||||
let y = this.checkForm[key];
|
||||
this.$set(this.checkForm,key,y);*/
|
||||
// this.filterBlock();
|
||||
},
|
||||
/* base64ToFile */
|
||||
canvasInit(){
|
||||
let that = this;
|
||||
preDrawAry = [];
|
||||
that.canvas = document.getElementById('canvas');
|
||||
that.ctx = that.canvas.getContext('2d');
|
||||
that.myCanvas_rect = that.canvas.getBoundingClientRect();
|
||||
that.Txt = document.getElementById('txt');
|
||||
that.word = document.getElementById('word');
|
||||
that.widths = that.myCanvas_rect.width;
|
||||
that.heights = that.myCanvas_rect.height;
|
||||
setTimeout(function(){
|
||||
that.draw();
|
||||
},500);
|
||||
},
|
||||
draw(){
|
||||
let canvasImg = document.getElementById("canvasImg");
|
||||
canvasImg.style.width = '300px';
|
||||
canvasImg.style.height = '200px';
|
||||
this.ctx.drawImage(canvasImg,0,0,300,200);
|
||||
},
|
||||
// 叉号
|
||||
error1(){
|
||||
let canvas1 = document.getElementById('canvas');
|
||||
let ctx1 = canvas1.getContext('2d');
|
||||
this.Txt.style.display="none";
|
||||
document.getElementById('word').style.display="none";
|
||||
ctx1.closePath();
|
||||
canvas1.onmousedown=function () {
|
||||
this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
|
||||
preDrawAry.push(this.imgData);
|
||||
ctx1.beginPath();
|
||||
ctx1.strokeStyle = "#e42343";
|
||||
ctx1.lineWidth = "3";
|
||||
ctx1.lineJoin="round";
|
||||
};
|
||||
//鼠标按下的位置
|
||||
canvas1.onmouseup=function (ev) {
|
||||
let oldX = ev.offsetX;
|
||||
let oldY = ev.offsetY;
|
||||
ctx1.moveTo(oldX,oldY);
|
||||
ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
|
||||
ctx1.moveTo(ev.offsetX+10,ev.offsetY);
|
||||
ctx1.lineTo(ev.offsetX,ev.offsetY+10);
|
||||
ctx1.stroke();
|
||||
};
|
||||
this.ctx.closePath();
|
||||
},
|
||||
// 文字先写字
|
||||
text(){
|
||||
let canvas2 = document.getElementById('canvas');
|
||||
let ctx2 = canvas2.getContext('2d');
|
||||
let Txt2 = document.getElementById('txt');
|
||||
Txt2.style.display="block";
|
||||
document.getElementById('word').style.display="none";
|
||||
ctx2.font="16px Microsoft Yahei";
|
||||
canvas2.onmousedown=function (ev) {
|
||||
this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
|
||||
preDrawAry.push(this.imgData);
|
||||
var v = Txt2.value;
|
||||
// console.log(v);
|
||||
if (v != '') {
|
||||
var oldX = ev.offsetX;
|
||||
var oldY = ev.offsetY;
|
||||
// console.log(oldX,oldY);
|
||||
ctx2.moveTo(oldX,oldY);
|
||||
canvas2.onmouseup=function () {
|
||||
ctx2.fillStyle=this.colorF;
|
||||
ctx2.fillText(v,oldX,oldY);
|
||||
canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
|
||||
// Txt.value = "";
|
||||
Txt2.style.display="none";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 文字
|
||||
word1(){
|
||||
let canvas3 = document.getElementById('canvas');
|
||||
let ctx3 = canvas3.getContext('2d');
|
||||
let Txt3 = document.getElementById('txt');
|
||||
let word3 = document.getElementById('word');
|
||||
Txt3.style.display="none";
|
||||
ctx3.font="16px Microsoft Yahei";
|
||||
canvas3.onmousedown=function () {
|
||||
ctx3.closePath();
|
||||
}
|
||||
canvas3.onmouseup=function (ev) {
|
||||
var inputV= document.getElementById('inputV').value;
|
||||
if(inputV == 1){
|
||||
document.getElementById('word').focus();
|
||||
// console.log(ev.offsetX,ev.offsetY);
|
||||
var oldX = ev.offsetX;
|
||||
var oldY = ev.offsetY;
|
||||
word3.style.display="block";
|
||||
word3.style.left=oldX+'px';
|
||||
word3.style.top =oldY+'px';
|
||||
|
||||
word3.onblur=function () {
|
||||
let v = word3.value;
|
||||
if(v != '' && v != ' '){
|
||||
this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
||||
let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
||||
// debugger;
|
||||
preDrawAry.push(img);
|
||||
ctx3.moveTo(oldX,oldY);
|
||||
ctx3.fillStyle="#e42343";
|
||||
let lineWidth = 0;
|
||||
let canvasWidth = canvas3.width;
|
||||
let lastSubStrIndex= 0;
|
||||
for(let i=0;i<v.length;i++){
|
||||
lineWidth+=ctx3.measureText(v[i]).width;
|
||||
if(lineWidth>canvasWidth-oldX){
|
||||
ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
|
||||
oldY+=20;
|
||||
lineWidth=0;
|
||||
lastSubStrIndex=i;
|
||||
}
|
||||
if(i==v.length-1){
|
||||
ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
|
||||
}
|
||||
}
|
||||
inputV ="2";
|
||||
word3.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 文字过长超出换行toDataURL()
|
||||
canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
|
||||
let ctx = canvas.getContext("2d");
|
||||
let lineWidth = 0;
|
||||
let canvasWidth = canvas.width;
|
||||
let lastSubStrIndex= 0;
|
||||
for(let i=0;i<str.length;i++){
|
||||
lineWidth+=ctx.measureText(str[i]).width;
|
||||
if(lineWidth>canvasWidth-initX){
|
||||
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
|
||||
initY+=lineHeight;
|
||||
lineWidth=0;
|
||||
lastSubStrIndex=i;
|
||||
}
|
||||
if(i==str.length-1){
|
||||
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 撤销
|
||||
back(){
|
||||
this.word.style.display="none";
|
||||
this.Txt.style.display="none";
|
||||
if(preDrawAry.length>0) {
|
||||
var popData = preDrawAry.pop();
|
||||
this.ctx.putImageData(popData, 0, 0);
|
||||
}
|
||||
},
|
||||
// 回退一次
|
||||
put(){
|
||||
this.ctx.putImageData(this.imgData,0,0);
|
||||
},
|
||||
//保存
|
||||
saveTu(){
|
||||
this.word.style.display="none";
|
||||
this.Txt.style.display="none";
|
||||
let canvas = document.getElementById('canvas');
|
||||
let image = new Image();
|
||||
image = canvas.toDataURL('image/png');
|
||||
this.canvasImg = image;
|
||||
let file = this.base64ToFile(image);
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
upFile(formData).then((res) => {
|
||||
res;
|
||||
// console.log(res);
|
||||
})
|
||||
},
|
||||
base64ToFile(baseUrl) {
|
||||
let arr = baseUrl.split(',');
|
||||
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
|
||||
let bytes = atob(arr[1]); // 解码base64
|
||||
let n = bytes .length;
|
||||
let bufferArray = new Uint8Array(n);
|
||||
while (n--) {
|
||||
bufferArray[n] = bytes.charCodeAt(n);
|
||||
}
|
||||
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
|
||||
return new File([bufferArray ],'draw.jpg');
|
||||
},
|
||||
/* base64ToFile */
|
||||
judgeForm(){
|
||||
let that = this ,
|
||||
reg = /\{(.+?)\}/g,
|
||||
judgeList = this.judgeList;
|
||||
// debugger;
|
||||
// console.log(judgeList);
|
||||
for(let i=0;i<judgeList.length;i++){
|
||||
let arr = [],str = '';
|
||||
let item = judgeList[i].rule_expression.replace(/`/g,'');
|
||||
if(item.indexOf('||')>-1){
|
||||
arr = item.split('||');
|
||||
}else if(item.indexOf('&&')>-1){
|
||||
arr = item.split('&&');
|
||||
}else{
|
||||
arr.push(item);
|
||||
}
|
||||
// debugger;
|
||||
// console.log(arr);
|
||||
//对每个条件进行判定，如果符合，
|
||||
for (let i = 0;i<arr.length;i++){
|
||||
//获取判断依据
|
||||
let a = '`'+ arr[i]+'`';
|
||||
let tem =a.match(reg)[0];
|
||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||
// debugger;
|
||||
// console.log(that.checkForm[ky]);
|
||||
//有值时进行判断
|
||||
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
|
||||
//替换变量
|
||||
a = a.replace(ky, 'yyy');
|
||||
let yyy = "'"+that.checkForm[ky]+"'";
|
||||
// debugger;
|
||||
if(eval(eval( a))){
|
||||
str += 'true';
|
||||
}else{
|
||||
str += 'false';
|
||||
}
|
||||
}
|
||||
}
|
||||
// debugger;
|
||||
// console.log(str);
|
||||
if(str.indexOf('true')>-1){
|
||||
that.judgeList[i].judge = true;
|
||||
}else{
|
||||
that.judgeList[i].judge = false;
|
||||
}
|
||||
}
|
||||
let real = that.judgeList.filter(item=>{
|
||||
return item.judge==true;
|
||||
});
|
||||
// debugger;
|
||||
// console.log(that.judgeList);
|
||||
// console.log(real);
|
||||
if(real.length>0){
|
||||
alert("检验不合格！")
|
||||
}else{
|
||||
alert("检验合格！")
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -86,109 +86,120 @@
|
|||
:visible.sync="dialogVisibleForm"
|
||||
:title="tableForm.name"
|
||||
>
|
||||
<el-form ref="Forms" label-width="80px" :model="checkForm">
|
||||
<el-row
|
||||
v-for="(item, $index) in fieldList.results"
|
||||
v-show="filterBlock(item.parent,item.rule_expression,item.need_judge)"
|
||||
:key="$index"
|
||||
>
|
||||
<!--<div v-if="item.field_type === 'img'">-->
|
||||
<el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'int'"
|
||||
:label="item.field_name"
|
||||
<customForm
|
||||
:results="fieldList.results"
|
||||
:hasPicture="hasPicture"
|
||||
:formID="formID"
|
||||
@formFunc="formFunc"
|
||||
/>
|
||||
<!--<el-form ref="Forms" label-width="100px" :model="checkForm">
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="12"
|
||||
v-for="(item, $index) in fieldList.results"
|
||||
v-show="filterBlock(item.parent,item.display_expression)"
|
||||
:key="$index"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'float'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'date'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
<!–<div v-if="item.field_type === 'img'">–>
|
||||
<el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'int'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'datetime'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'float'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'select'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
@change="keyChange(item.field_key)"
|
||||
<el-input
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="number"
|
||||
placeholder="请输入"
|
||||
@input="keyChange(item.field_key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'date'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'selects'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'datetime'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
<el-date-picker
|
||||
v-model="checkForm[item.field_key]"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 100%"
|
||||
@change="keyChange(item.field_key)"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图表" v-else-if="item.field_type === 'draw'">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'select'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
@change="keyChange(item.field_key)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.field_type === 'selects'"
|
||||
:label="item.field_name"
|
||||
>
|
||||
<el-select
|
||||
v-model="checkForm[item.field_key]"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item1 in item.field_choice"
|
||||
:key="item1"
|
||||
:label="item1"
|
||||
:value="item1"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-show="hasPicture">
|
||||
<el-form-item label="图表">
|
||||
<div>
|
||||
<img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
|
||||
<div style="position: relative;display: flex">
|
||||
|
|
@ -201,7 +212,7 @@
|
|||
<div class="canvasBtnWrap">
|
||||
<div class="canvasBtn" @click="error1">标记</div>
|
||||
<div class="canvasBtn" @click="word1()">文字</div>
|
||||
<!--<button @click="restuya()">清除批注</button>-->
|
||||
<!–<button @click="restuya()">清除批注</button>–>
|
||||
<div class="canvasBtn" @click="back()">回退</div>
|
||||
<div class="canvasBtn" @click="saveTu()">保存</div>
|
||||
</div>
|
||||
|
|
@ -210,7 +221,12 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-form>-->
|
||||
<div style="text-align: right">
|
||||
<el-button type="primary" @click="judgeForm">
|
||||
合格验证
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -450,10 +466,13 @@
|
|||
</el-form-item>
|
||||
|
||||
!-->
|
||||
<el-form-item label="表达式" v-if="field.need_judge === true">
|
||||
<el-form-item label="判定式" v-if="field.need_judge === true">
|
||||
<el-input v-model="field.rule_expression" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板图片" v-if="field.field_type === 'img'">
|
||||
<el-form-item label="展示表达式">
|
||||
<el-input v-model="field.display_expression" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板图片" v-if="field.field_type === 'draw'">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="upUrl"
|
||||
|
|
@ -463,8 +482,8 @@
|
|||
:before-upload="beforeAvatarUpload"
|
||||
:headers="upHeaders"
|
||||
>
|
||||
<img v-if="field.draw_template" :src="field.draw_template" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
<img v-if="field.draw_template" :src="field.draw_template" class="avatar"/>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
|
|
@ -494,6 +513,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import customForm from '@/components/customForm/index'
|
||||
import checkPermission from "@/utils/permission";
|
||||
import {getEquipmentAll} from "@/api/equipment";
|
||||
import vueJsonEditor from "vue-json-editor";
|
||||
|
|
@ -508,7 +528,7 @@
|
|||
updaterffield,
|
||||
deleterffield,
|
||||
} from "@/api/mtm";
|
||||
import { upFile } from "@/api/file";
|
||||
import {upFile} from "@/api/file";
|
||||
import {genTree} from "@/utils";
|
||||
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
|
|
@ -523,7 +543,7 @@
|
|||
const defaultfield = {};
|
||||
let preDrawAry = [];
|
||||
export default {
|
||||
components: {Pagination, vueJsonEditor, Treeselect},
|
||||
components: {Pagination, vueJsonEditor, Treeselect, customForm},
|
||||
data() {
|
||||
return {
|
||||
step: defaultstep,
|
||||
|
|
@ -531,6 +551,7 @@
|
|||
upHeaders: upHeaders(),
|
||||
upUrl: upUrl(),
|
||||
fileList: [],
|
||||
hasPicture: true,
|
||||
listLoading: true,
|
||||
need_judge: false,
|
||||
dialogVisibles: false,
|
||||
|
|
@ -558,8 +579,8 @@
|
|||
dialogType1: "new",
|
||||
dialogVisible1: false,
|
||||
tableForm: defaultrecordform,
|
||||
checkForm:{
|
||||
hhh:'',
|
||||
checkForm: {
|
||||
hhh: '',
|
||||
},
|
||||
listQueryrecordform: {
|
||||
page: 1,
|
||||
|
|
@ -646,17 +667,19 @@
|
|||
label: "生产记录",
|
||||
},
|
||||
],
|
||||
canvas:null,
|
||||
ctx:null,
|
||||
myCanvas_rect:null,
|
||||
Txt:null,
|
||||
word:null,
|
||||
widths:0,
|
||||
heights:0,
|
||||
lineW:3,
|
||||
colorF:"#e42343",
|
||||
imgData:'',
|
||||
canvasImg:'',
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
myCanvas_rect: null,
|
||||
Txt: null,
|
||||
word: null,
|
||||
formID: 0,
|
||||
widths: 0,
|
||||
heights: 0,
|
||||
lineW: 3,
|
||||
colorF: "#e42343",
|
||||
imgData: '',
|
||||
canvasImg: '',
|
||||
judgeList: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
@ -666,6 +689,9 @@
|
|||
this.recordformLists();
|
||||
},
|
||||
methods: {
|
||||
formFunc(value) {
|
||||
this.dialogVisibleForm = value;
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.field.draw_template = res.data.path;
|
||||
},
|
||||
|
|
@ -676,81 +702,77 @@
|
|||
}
|
||||
return isLt2M;
|
||||
},
|
||||
keyChange(key){
|
||||
keyChange(key) {
|
||||
let y = this.checkForm[key];
|
||||
this.$set(this.checkForm,key,y);
|
||||
this.fieldList.results=[...this.fieldList.results];
|
||||
this.$set(this.checkForm, key, y);
|
||||
this.fieldList.results = [...this.fieldList.results];
|
||||
this.filterBlock();
|
||||
},
|
||||
filterBlock(parent,rule,judge){
|
||||
filterBlock(parent, rule) {
|
||||
let that = this;
|
||||
if(parent!==''&&parent!==null&&parent!==undefined){
|
||||
if(judge){
|
||||
if(rule!==''&&rule!==null&&rule!==undefined){
|
||||
let reg = /\{(.+?)\}/g;
|
||||
//let str = rule.replace(temp,'').replace('$','');//=='有'
|
||||
//let y = that.checkForm[key];
|
||||
if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
|
||||
let tam = '', arr = [];
|
||||
if(rule.indexOf('||')>-1){
|
||||
arr = rule.split('||');
|
||||
}else{
|
||||
arr = rule.split('&&');
|
||||
}
|
||||
for (let i = 0;i<arr.length;i++){
|
||||
//获取判断依据
|
||||
let a = '';
|
||||
a = arr[i].replace(/`/g,'');
|
||||
a = '`'+ a+'`';
|
||||
let tem =a.match(reg)[0];
|
||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||
if(that.checkForm[ky]){
|
||||
//替换变量
|
||||
a = a.replace(ky, 'yyy');
|
||||
let yyy = "'"+that.checkForm[ky]+"'";
|
||||
if(eval(eval( a))){
|
||||
tam += 'true';
|
||||
}else{
|
||||
tam += 'false';
|
||||
}
|
||||
}else{
|
||||
tam += 'false';
|
||||
}
|
||||
}
|
||||
let rea = true;
|
||||
if(rule.indexOf('||')>-1){
|
||||
if( tam.indexOf('true')>-1){
|
||||
rea = true;
|
||||
}else{
|
||||
rea = false;
|
||||
}
|
||||
}else{
|
||||
if( tam.indexOf('false')>-1){
|
||||
rea = false;
|
||||
}else{
|
||||
rea = true;
|
||||
}
|
||||
}
|
||||
return rea;
|
||||
}else{
|
||||
let temp =rule.match(reg)[0];
|
||||
let key = temp.replace(/\{|\}/g, '');//qipao
|
||||
let a = rule.replace(key, 'yy');
|
||||
a = a.replace(key, 'yy');
|
||||
let yy = "'"+that.checkForm[key]+"'";
|
||||
return eval(eval(a));
|
||||
// return eval("'"+y+"'"+str);
|
||||
}
|
||||
debugger;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
return true;
|
||||
if (parent !== '' && parent !== null && parent !== undefined) {
|
||||
if (rule !== '' && rule !== null && rule !== undefined) {
|
||||
let reg = /\{(.+?)\}/g;
|
||||
//let str = rule.replace(temp,'').replace('$','');//=='有'
|
||||
//let y = that.checkForm[key];
|
||||
if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
|
||||
let tam = '', arr = [];
|
||||
if (rule.indexOf('||') > -1) {
|
||||
arr = rule.split('||');
|
||||
} else {
|
||||
arr = rule.split('&&');
|
||||
}
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
//获取判断依据
|
||||
let a = '';
|
||||
a = arr[i].replace(/`/g, '');
|
||||
a = '`' + a + '`';
|
||||
let tem = a.match(reg)[0];
|
||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||
if (that.checkForm[ky]) {
|
||||
//替换变量
|
||||
a = a.replace(ky, 'yyy');
|
||||
let yyy = "'" + that.checkForm[ky] + "'";
|
||||
if (eval(eval(a))) {
|
||||
tam += 'true';
|
||||
} else {
|
||||
tam += 'false';
|
||||
}
|
||||
} else {
|
||||
tam += 'false';
|
||||
}
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
let rea = true;
|
||||
if (rule.indexOf('||') > -1) {
|
||||
if (tam.indexOf('true') > -1) {
|
||||
rea = true;
|
||||
} else {
|
||||
rea = false;
|
||||
}
|
||||
} else {
|
||||
if (tam.indexOf('false') > -1) {
|
||||
rea = false;
|
||||
} else {
|
||||
rea = true;
|
||||
}
|
||||
}
|
||||
return rea;
|
||||
} else {
|
||||
let temp = rule.match(reg)[0];
|
||||
let key = temp.replace(/\{|\}/g, '');//qipao
|
||||
let a = rule.replace(key, 'yy');
|
||||
a = a.replace(key, 'yy');
|
||||
let yy = "'" + that.checkForm[key] + "'";
|
||||
return eval(eval(a));
|
||||
// return eval("'"+y+"'"+str);
|
||||
}
|
||||
debugger;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
checkValue() {
|
||||
this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, '');
|
||||
|
|
@ -770,23 +792,39 @@
|
|||
that.listQueryfield.form = that.formID;
|
||||
getrffieldList(that.listQueryfield).then((response) => {
|
||||
if (response.data) {
|
||||
debugger;
|
||||
this.hasPicture = false;
|
||||
that.fieldList = response.data;
|
||||
let list = response.data.results;
|
||||
for(let i=0;i<list.length;i++){
|
||||
let arr = list.filter(item => {
|
||||
return item.field_type === 'draw'
|
||||
});
|
||||
that.judgeList = [];
|
||||
let listJudge = list.filter(item => {
|
||||
return item.need_judge === true;
|
||||
});
|
||||
listJudge.forEach(item => {
|
||||
let obj = new Object();
|
||||
obj = item;
|
||||
obj.judge = false;
|
||||
that.judgeList.push(obj)
|
||||
});
|
||||
if (arr.length > 0) {
|
||||
this.hasPicture = true;
|
||||
}
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let key = list[i].field_key;
|
||||
that.checkForm[key]='';
|
||||
that.$set(that.checkForm,key,'')
|
||||
that.checkForm[key] = '';
|
||||
that.$set(that.checkForm, key, '')
|
||||
}
|
||||
that.dialogVisibleForm = true;
|
||||
setTimeout(function(){
|
||||
setTimeout(function () {
|
||||
that.canvasInit();
|
||||
},500);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
that.fieldLists();
|
||||
},
|
||||
canvasInit(){
|
||||
canvasInit() {
|
||||
let that = this;
|
||||
preDrawAry = [];
|
||||
that.canvas = document.getElementById('canvas');
|
||||
|
|
@ -796,9 +834,9 @@
|
|||
that.word = document.getElementById('word');
|
||||
that.widths = that.myCanvas_rect.width;
|
||||
that.heights = that.myCanvas_rect.height;
|
||||
setTimeout(function(){
|
||||
setTimeout(function () {
|
||||
that.draw();
|
||||
},500);
|
||||
}, 500);
|
||||
},
|
||||
checkPermission,
|
||||
|
||||
|
|
@ -822,7 +860,7 @@
|
|||
getrffieldList(that.listQueryfield).then((response) => {
|
||||
if (response.data) {
|
||||
that.fieldList = response.data;
|
||||
that.fieldList.results=[...that.fieldList.results]
|
||||
that.fieldList.results = [...that.fieldList.results]
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -841,50 +879,50 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
draw(){
|
||||
draw() {
|
||||
let canvasImg = document.getElementById("canvasImg");
|
||||
canvasImg.style.width = '300px';
|
||||
canvasImg.style.height = '200px';
|
||||
this.ctx.drawImage(canvasImg,0,0,300,200);
|
||||
this.ctx.drawImage(canvasImg, 0, 0, 300, 200);
|
||||
},
|
||||
// 叉号
|
||||
error1(){
|
||||
error1() {
|
||||
let canvas1 = document.getElementById('canvas');
|
||||
let ctx1 = canvas1.getContext('2d');
|
||||
this.Txt.style.display="none";
|
||||
document.getElementById('word').style.display="none";
|
||||
this.Txt.style.display = "none";
|
||||
document.getElementById('word').style.display = "none";
|
||||
ctx1.closePath();
|
||||
canvas1.onmousedown=function () {
|
||||
this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
|
||||
canvas1.onmousedown = function () {
|
||||
this.imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
|
||||
preDrawAry.push(this.imgData);
|
||||
ctx1.beginPath();
|
||||
ctx1.strokeStyle = "#e42343";
|
||||
ctx1.lineWidth = "3";
|
||||
ctx1.lineJoin="round";
|
||||
ctx1.lineJoin = "round";
|
||||
};
|
||||
//鼠标按下的位置
|
||||
canvas1.onmouseup=function (ev) {
|
||||
canvas1.onmouseup = function (ev) {
|
||||
let oldX = ev.offsetX;
|
||||
let oldY = ev.offsetY;
|
||||
ctx1.moveTo(oldX,oldY);
|
||||
ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
|
||||
ctx1.moveTo(ev.offsetX+10,ev.offsetY);
|
||||
ctx1.lineTo(ev.offsetX,ev.offsetY+10);
|
||||
ctx1.moveTo(oldX, oldY);
|
||||
ctx1.lineTo(ev.offsetX + 10, ev.offsetY + 10);
|
||||
ctx1.moveTo(ev.offsetX + 10, ev.offsetY);
|
||||
ctx1.lineTo(ev.offsetX, ev.offsetY + 10);
|
||||
ctx1.stroke();
|
||||
};
|
||||
this.ctx.closePath();
|
||||
},
|
||||
|
||||
// 文字先写字
|
||||
text(){
|
||||
text() {
|
||||
let canvas2 = document.getElementById('canvas');
|
||||
let ctx2 = canvas2.getContext('2d');
|
||||
let Txt2 = document.getElementById('txt');
|
||||
Txt2.style.display="block";
|
||||
document.getElementById('word').style.display="none";
|
||||
ctx2.font="16px Microsoft Yahei";
|
||||
canvas2.onmousedown=function (ev) {
|
||||
this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
|
||||
Txt2.style.display = "block";
|
||||
document.getElementById('word').style.display = "none";
|
||||
ctx2.font = "16px Microsoft Yahei";
|
||||
canvas2.onmousedown = function (ev) {
|
||||
this.imgData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
|
||||
preDrawAry.push(this.imgData);
|
||||
var v = Txt2.value;
|
||||
// console.log(v);
|
||||
|
|
@ -892,65 +930,65 @@
|
|||
var oldX = ev.offsetX;
|
||||
var oldY = ev.offsetY;
|
||||
// console.log(oldX,oldY);
|
||||
ctx2.moveTo(oldX,oldY);
|
||||
canvas2.onmouseup=function () {
|
||||
ctx2.fillStyle=this.colorF;
|
||||
ctx2.fillText(v,oldX,oldY);
|
||||
canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
|
||||
ctx2.moveTo(oldX, oldY);
|
||||
canvas2.onmouseup = function () {
|
||||
ctx2.fillStyle = this.colorF;
|
||||
ctx2.fillText(v, oldX, oldY);
|
||||
canvas2.TextAutoLine(v, canvas2, oldX, oldY, 20);
|
||||
// Txt.value = "";
|
||||
Txt2.style.display="none";
|
||||
Txt2.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 文字
|
||||
word1(){
|
||||
word1() {
|
||||
let canvas3 = document.getElementById('canvas');
|
||||
let ctx3 = canvas3.getContext('2d');
|
||||
let Txt3 = document.getElementById('txt');
|
||||
let word3 = document.getElementById('word');
|
||||
Txt3.style.display="none";
|
||||
ctx3.font="16px Microsoft Yahei";
|
||||
canvas3.onmousedown=function () {
|
||||
Txt3.style.display = "none";
|
||||
ctx3.font = "16px Microsoft Yahei";
|
||||
canvas3.onmousedown = function () {
|
||||
ctx3.closePath();
|
||||
}
|
||||
canvas3.onmouseup=function (ev) {
|
||||
var inputV= document.getElementById('inputV').value;
|
||||
if(inputV == 1){
|
||||
canvas3.onmouseup = function (ev) {
|
||||
var inputV = document.getElementById('inputV').value;
|
||||
if (inputV == 1) {
|
||||
document.getElementById('word').focus();
|
||||
// console.log(ev.offsetX,ev.offsetY);
|
||||
var oldX = ev.offsetX;
|
||||
var oldY = ev.offsetY;
|
||||
word3.style.display="block";
|
||||
word3.style.left=oldX+'px';
|
||||
word3.style.top =oldY+'px';
|
||||
word3.style.display = "block";
|
||||
word3.style.left = oldX + 'px';
|
||||
word3.style.top = oldY + 'px';
|
||||
|
||||
word3.onblur=function () {
|
||||
word3.onblur = function () {
|
||||
let v = word3.value;
|
||||
if(v != '' && v != ' '){
|
||||
this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
||||
let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
|
||||
if (v != '' && v != ' ') {
|
||||
this.imgData = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||||
let img = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||||
debugger;
|
||||
preDrawAry.push(img);
|
||||
ctx3.moveTo(oldX,oldY);
|
||||
ctx3.fillStyle="#e42343";
|
||||
ctx3.moveTo(oldX, oldY);
|
||||
ctx3.fillStyle = "#e42343";
|
||||
let lineWidth = 0;
|
||||
let canvasWidth = canvas3.width;
|
||||
let lastSubStrIndex= 0;
|
||||
for(let i=0;i<v.length;i++){
|
||||
lineWidth+=ctx3.measureText(v[i]).width;
|
||||
if(lineWidth>canvasWidth-oldX){
|
||||
ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
|
||||
oldY+=20;
|
||||
lineWidth=0;
|
||||
lastSubStrIndex=i;
|
||||
let lastSubStrIndex = 0;
|
||||
for (let i = 0; i < v.length; i++) {
|
||||
lineWidth += ctx3.measureText(v[i]).width;
|
||||
if (lineWidth > canvasWidth - oldX) {
|
||||
ctx3.fillText(v.substring(lastSubStrIndex, i), oldX, (oldY + 10));
|
||||
oldY += 20;
|
||||
lineWidth = 0;
|
||||
lastSubStrIndex = i;
|
||||
}
|
||||
if(i==v.length-1){
|
||||
ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
|
||||
if (i == v.length - 1) {
|
||||
ctx3.fillText(v.substring(lastSubStrIndex, i + 1), oldX, (oldY + 10));
|
||||
}
|
||||
}
|
||||
inputV ="2";
|
||||
inputV = "2";
|
||||
word3.value = "";
|
||||
}
|
||||
}
|
||||
|
|
@ -959,50 +997,50 @@
|
|||
},
|
||||
|
||||
// 文字过长超出换行toDataURL()
|
||||
canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
|
||||
canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
|
||||
let ctx = canvas.getContext("2d");
|
||||
let lineWidth = 0;
|
||||
let canvasWidth = canvas.width;
|
||||
let lastSubStrIndex= 0;
|
||||
for(let i=0;i<str.length;i++){
|
||||
lineWidth+=ctx.measureText(str[i]).width;
|
||||
if(lineWidth>canvasWidth-initX){
|
||||
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
|
||||
initY+=lineHeight;
|
||||
lineWidth=0;
|
||||
lastSubStrIndex=i;
|
||||
let lastSubStrIndex = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
lineWidth += ctx.measureText(str[i]).width;
|
||||
if (lineWidth > canvasWidth - initX) {
|
||||
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
|
||||
initY += lineHeight;
|
||||
lineWidth = 0;
|
||||
lastSubStrIndex = i;
|
||||
}
|
||||
if(i==str.length-1){
|
||||
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
|
||||
if (i == str.length - 1) {
|
||||
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* // 删除批注
|
||||
restuya(){
|
||||
this.word.style.display="none";
|
||||
this.Txt.style.display="none";
|
||||
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
|
||||
window.location.reload();
|
||||
},*/
|
||||
/* // 删除批注
|
||||
restuya(){
|
||||
this.word.style.display="none";
|
||||
this.Txt.style.display="none";
|
||||
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
|
||||
window.location.reload();
|
||||
},*/
|
||||
|
||||
// 撤销
|
||||
back(){
|
||||
this.word.style.display="none";
|
||||
this.Txt.style.display="none";
|
||||
if(preDrawAry.length>0) {
|
||||
back() {
|
||||
this.word.style.display = "none";
|
||||
this.Txt.style.display = "none";
|
||||
if (preDrawAry.length > 0) {
|
||||
var popData = preDrawAry.pop();
|
||||
this.ctx.putImageData(popData, 0, 0);
|
||||
}
|
||||
},
|
||||
|
||||
// 回退一次
|
||||
put(){
|
||||
this.ctx.putImageData(this.imgData,0,0);
|
||||
put() {
|
||||
this.ctx.putImageData(this.imgData, 0, 0);
|
||||
},
|
||||
|
||||
//保存
|
||||
saveTu(){
|
||||
saveTu() {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let image = new Image();
|
||||
image = canvas.toDataURL('image/png');
|
||||
|
|
@ -1020,15 +1058,73 @@
|
|||
let arr = baseUrl.split(',');
|
||||
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
|
||||
let bytes = atob(arr[1]); // 解码base64
|
||||
let n = bytes .length;
|
||||
let n = bytes.length;
|
||||
let bufferArray = new Uint8Array(n);
|
||||
while (n--) {
|
||||
bufferArray[n] = bytes.charCodeAt(n);
|
||||
}
|
||||
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
|
||||
return new File([bufferArray ],'draw.jpg');
|
||||
return new File([bufferArray], 'draw.jpg');
|
||||
},
|
||||
judgeForm() {
|
||||
let that = this,
|
||||
reg = /\{(.+?)\}/g,
|
||||
judgeList = this.judgeList;
|
||||
debugger;
|
||||
console.log(judgeList);
|
||||
for (let i = 0; i < judgeList.length; i++) {
|
||||
let arr = [], str = '';
|
||||
let item = judgeList[i].rule_expression.replace(/`/g, '');
|
||||
if (item.indexOf('||') > -1) {
|
||||
arr = item.split('||');
|
||||
} else if (item.indexOf('&&') > -1) {
|
||||
arr = item.split('&&');
|
||||
} else {
|
||||
arr.push(item);
|
||||
}
|
||||
debugger;
|
||||
console.log(arr);
|
||||
//对每个条件进行判定，如果符合，
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
//获取判断依据
|
||||
let a = '`' + arr[i] + '`';
|
||||
let tem = a.match(reg)[0];
|
||||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||||
debugger;
|
||||
console.log(that.checkForm[ky]);
|
||||
//有值时进行判断
|
||||
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
|
||||
//替换变量
|
||||
a = a.replace(ky, 'yyy');
|
||||
let yyy = "'" + that.checkForm[ky] + "'";
|
||||
debugger;
|
||||
if (eval(eval(a))) {
|
||||
str += 'true';
|
||||
} else {
|
||||
str += 'false';
|
||||
}
|
||||
}
|
||||
}
|
||||
debugger;
|
||||
console.log(str);
|
||||
if (str.indexOf('true') > -1) {
|
||||
that.judgeList[i].judge = true;
|
||||
} else {
|
||||
that.judgeList[i].judge = false;
|
||||
}
|
||||
}
|
||||
let real = that.judgeList.filter(item => {
|
||||
return item.judge == true;
|
||||
});
|
||||
debugger;
|
||||
console.log(that.judgeList);
|
||||
console.log(real);
|
||||
if (real.length > 0) {
|
||||
alert("检验不合格！")
|
||||
} else {
|
||||
alert("检验合格！")
|
||||
}
|
||||
},
|
||||
|
||||
//新增记录表
|
||||
handleCreate() {
|
||||
this.recordform = Object.assign({}, defaultrecordform);
|
||||
|
|
@ -1173,18 +1269,21 @@
|
|||
.my-content {
|
||||
background: #fde2e2;
|
||||
}
|
||||
canvas{
|
||||
border:1px solid #000000;
|
||||
|
||||
canvas {
|
||||
border: 1px solid #000000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.canvasBtnWrap{
|
||||
|
||||
.canvasBtnWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.canvasBtn{
|
||||
|
||||
.canvasBtn {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
|
|
@ -1192,36 +1291,43 @@
|
|||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.hide{
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
#txt{
|
||||
|
||||
#txt {
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 1%;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
border:1px solid #e42343;
|
||||
border: 1px solid #e42343;
|
||||
}
|
||||
#word{
|
||||
|
||||
#word {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
padding: 0 2px;
|
||||
background:none;
|
||||
color:#e42343;
|
||||
background: none;
|
||||
color: #e42343;
|
||||
border: 1px dashed #b9b9b9;
|
||||
}
|
||||
#word::-webkit-input-placeholder{
|
||||
color:#e42343;
|
||||
|
||||
#word::-webkit-input-placeholder {
|
||||
color: #e42343;
|
||||
}
|
||||
#word::-moz-placeholder{
|
||||
color:#e42343;
|
||||
|
||||
#word::-moz-placeholder {
|
||||
color: #e42343;
|
||||
}
|
||||
#word::placeholder{
|
||||
color:#e42343;
|
||||
|
||||
#word::placeholder {
|
||||
color: #e42343;
|
||||
}
|
||||
#res{
|
||||
|
||||
#res {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue