921 lines
29 KiB
Python
921 lines
29 KiB
Python
<template>
|
||
<div>
|
||
<el-form
|
||
id="customerForm"
|
||
ref="checkForm"
|
||
label-width="150px"
|
||
:model="checkForm"
|
||
>
|
||
<el-row>
|
||
<el-col
|
||
v-for="(item, $index) in formData"
|
||
v-show="filterBlock(item.display_expression,$index,item.field_key)"
|
||
:key="$index"
|
||
:span="12"
|
||
style="position: relative"
|
||
:class="item.need_judge&&item.is_testok===true?'adopt':item.need_judge&&item.is_testok===false?'fail':''"
|
||
>
|
||
<el-form-item
|
||
v-if="item.field_type === 'string'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-input
|
||
disabled
|
||
class="halfWidth originBlock"
|
||
v-model="item.origin_value"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
<el-input
|
||
class="halfWidth"
|
||
v-model="checkForm[item.field_key]"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'int'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-input
|
||
disabled
|
||
class="halfWidth originBlock"
|
||
v-model="item.origin_value"
|
||
type="number"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
<el-input-number
|
||
class="halfWidth"
|
||
v-model="checkForm[item.field_key]"
|
||
step-strictly
|
||
placeholder="请输入"
|
||
:min="0"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'float'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-input
|
||
disabled
|
||
class="halfWidth originBlock"
|
||
v-model="item.origin_value"
|
||
type="number"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
<el-input-number
|
||
class="halfWidth"
|
||
v-model="checkForm[item.field_key]"
|
||
:precision="2"
|
||
:step="0.1"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>
|
||
<!-- <el-input
|
||
class="halfWidth"
|
||
v-model="checkForm[item.field_key]"
|
||
type="number"
|
||
placeholder="请输入"
|
||
@input="keyChange($index,item.field_key)"
|
||
/>-->
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'date'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-date-picker
|
||
disabled
|
||
v-model="item.origin_value"
|
||
class="halfWidth originBlock"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
@input="$forceUpdate()"
|
||
@change="keyChange($index,item.field_key)"
|
||
/>
|
||
<el-date-picker
|
||
v-model="checkForm[item.field_key]"
|
||
class="halfWidth"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
@input="$forceUpdate()"
|
||
@change="keyChange($index,item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'datetime'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-date-picker
|
||
disabled
|
||
v-model="item.origin_value"
|
||
class="halfWidth originBlock"
|
||
type="datetime"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
@change="keyChange($index,item.field_key)"
|
||
/>
|
||
<el-date-picker
|
||
v-model="checkForm[item.field_key]"
|
||
class="halfWidth"
|
||
type="datetime"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
@change="keyChange($index,item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'select'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-select
|
||
disabled
|
||
v-model="item.origin_value"
|
||
class="halfWidth originBlock"
|
||
placeholder="请选择"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
/>
|
||
</el-select>
|
||
<el-select
|
||
v-model="checkForm[item.field_key]"
|
||
class="halfWidth"
|
||
placeholder="请选择"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'selects'"
|
||
:label="item.field_name"
|
||
:required="require"
|
||
>
|
||
<el-select
|
||
disabled
|
||
v-model="item.origin_value"
|
||
class="halfWidth originBlock"
|
||
multiple
|
||
placeholder="请选择"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="checkForm[item.field_key]"
|
||
class="halfWidth"
|
||
multiple
|
||
placeholder="请选择"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
@change="keyChange($index,item.field_key)"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<span v-show="item.help_text" class="helpText">说明：{{item.help_text}}</span>
|
||
<span v-if="item.need_judge&&item.is_testok===true" class="adoptTip">合格</span>
|
||
<span v-if="item.need_judge&&item.is_testok===false" class="failTip">不合格</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row v-show="hasPicture">
|
||
|
||
<el-form-item label="图表">
|
||
<div class="halfWidth">
|
||
<img :src="originImg">
|
||
</div>
|
||
<div class="halfWidth">
|
||
<img id="canvasImg" :src="img" style="width:450px;height: 300px;display: none">
|
||
<div style="position: relative;display: flex;flex-direction: column;
|
||
border: 1px solid #DCDFE6;">
|
||
<canvas id="canvas" width="450" height="300">
|
||
您的浏览器不支持绘图，请升级或更换浏览器！
|
||
</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>
|
||
<div id="res"></div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-form-item label="是否合格">
|
||
<el-radio v-model="is_testok" :label="testokTrue">检查合格</el-radio>
|
||
<el-radio v-model="is_testok" :label="testokFalse">检查不合格</el-radio>
|
||
</el-form-item>
|
||
<div class="dialog-footer" style="text-align: right">
|
||
<el-button @click="recordCancel">取 消</el-button>
|
||
<!--<el-button type="primary" @click="submitfield">提交检查项目</el-button>-->
|
||
<el-button type="primary" @click="submitfield('1')">保存</el-button>
|
||
<el-button type="warning" @click="submitfield('2')">提交</el-button>
|
||
</div>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { upFile } from "@/api/file";
|
||
let preDrawAry = [];
|
||
export default {
|
||
name: "review",
|
||
props: {
|
||
results:{
|
||
type:Array,
|
||
default: () => {
|
||
return []
|
||
}} ,
|
||
originList:{
|
||
type:Array,
|
||
default: () => {
|
||
return []
|
||
}} ,
|
||
formID: {
|
||
type:Number,
|
||
default:0
|
||
},
|
||
wproduct: {
|
||
type:Number,
|
||
default:0
|
||
},
|
||
recordId: {
|
||
type:Number,
|
||
default:0
|
||
},
|
||
hasPicture:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
isMidTesting:{
|
||
type:Boolean,
|
||
default:false
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.form = this.formID;
|
||
let formData=this.results;
|
||
// that.origins=this.originList;
|
||
that.wproductId=this.wproduct;
|
||
that.origin_test=this.origintest;
|
||
formData.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
obj.is_testok = null;//是否合格
|
||
that.formData.push(obj)
|
||
});
|
||
that.formData=[...that.formData];
|
||
// debugger;
|
||
// console.log(that.formData);
|
||
//当前表的数据存储
|
||
for(let i=0;i<this.results.length;i++){
|
||
let key = this.results[i].field_key;
|
||
//checkForm接收表单数据的对象
|
||
that.checkForm[key]=this.results[i].field_value;
|
||
that.$set(that.checkForm,key,this.results[i].field_value)
|
||
}
|
||
//判定项
|
||
let listJudge = this.formData.filter(item => {
|
||
return item.need_judge === true;
|
||
});
|
||
listJudge.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
that.judgeList.push(obj)
|
||
});
|
||
// debugger;
|
||
//图片地址
|
||
let imag= this.formData.filter(item => {
|
||
return item.field_type === 'draw';
|
||
});
|
||
that.img = new Image();
|
||
that.img.crossOrigin = '';
|
||
that.img = process.env.VUE_APP_BASE_API.replace('/api','')+imag[0].field_value;
|
||
that.originImg = process.env.VUE_APP_BASE_API.replace('/api','')+ imag[0].origin_value;
|
||
listJudge.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
that.judgeList.push(obj)
|
||
});
|
||
setTimeout(function(){
|
||
that.canvasInit();
|
||
},500);
|
||
},
|
||
data(){
|
||
return{
|
||
field:[],
|
||
origins:[],
|
||
checkForm:{},
|
||
originForm:{},
|
||
testrecord:{
|
||
// form:this.formID,
|
||
record_data:[],
|
||
is_testok:true,
|
||
// wproduct:null,
|
||
},
|
||
origin_test:null,
|
||
canvas:null,
|
||
wproductId:null,
|
||
ctx:null,
|
||
myCanvas_rect:null,
|
||
Txt:null,
|
||
word:null,
|
||
img:null,
|
||
originImg:null,
|
||
widths:0,
|
||
heights:0,
|
||
lineW:3,
|
||
colorF:"#e42343",
|
||
imgUrl:'',
|
||
imgData:'',
|
||
canvasImg:'',
|
||
checkType:'',
|
||
formData:[],//表单数组
|
||
judgeList:[],//判定数组
|
||
is_testok:true,
|
||
testokTrue:true,
|
||
testokFalse:false,
|
||
index:'1',
|
||
}
|
||
},
|
||
methods:{
|
||
filterBlock(rule,index,field_key){
|
||
// debugger;
|
||
let that = this;
|
||
if(rule!==''&&rule!==null&&rule!==undefined){
|
||
let reg = /\{(.+?)\}/g;
|
||
// debugger;
|
||
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;
|
||
}
|
||
}
|
||
if(rea){
|
||
that.formData[index].is_hidden = false;
|
||
}else{
|
||
that.formData[index].is_hidden = true;
|
||
that.checkForm[field_key] = '';
|
||
}
|
||
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]+"'";
|
||
if(eval(eval(a))){
|
||
that.formData[index].is_hidden = false;
|
||
}else{
|
||
that.formData[index].is_hidden = true;
|
||
that.checkForm[field_key] = '';
|
||
}
|
||
return eval(eval(a));
|
||
}
|
||
}else{
|
||
that.formData[index].is_hidden = false;
|
||
return true;
|
||
}
|
||
},
|
||
keyChange(index,key){
|
||
let that = this;
|
||
let reg = /\{(.+?)\}/g;
|
||
that.$forceUpdate();
|
||
that.$nextTick(()=>{
|
||
if(that.formData[index].need_judge===true){
|
||
let arr = [],str = '';
|
||
let item = that.formData[index].rule_expression.replace(/`/g,'');
|
||
if(item.indexOf('||')>-1){
|
||
arr = item.split('||');
|
||
}else if(item.indexOf('&&')>-1){
|
||
arr = item.split('&&');
|
||
}else{
|
||
arr.push(item);
|
||
}
|
||
//对每个条件进行判定，如果符合，
|
||
for (let i = 0;i<arr.length;i++){
|
||
//获取判断依据
|
||
let a = '`'+ arr[i]+'`';
|
||
let tem =a.match(reg)[0];
|
||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||
//有值时进行判断
|
||
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
|
||
//替换变量
|
||
a = a.replace(ky, 'yyy');
|
||
let yyy = "'"+that.checkForm[ky]+"'";
|
||
if(eval(eval( a))){
|
||
str += 'true';
|
||
}else{
|
||
str += 'false';
|
||
}
|
||
}
|
||
}
|
||
if(item.indexOf('&&')>-1){
|
||
if(str.indexOf('false')>-1){
|
||
that.formData[index].is_testok = true;
|
||
that.$set(that.formData[index],'is_testok',true)
|
||
}else{
|
||
that.formData[index].is_testok = false;
|
||
that.$set(that.formData[index],'is_testok',false)
|
||
}
|
||
}else{
|
||
if(str.indexOf('true')>-1){
|
||
that.formData[index].is_testok = false;
|
||
that.$set(that.formData[index],'is_testok',false)
|
||
}else{
|
||
that.formData[index].is_testok = true;
|
||
that.$set(that.formData[index],'is_testok',true)
|
||
}
|
||
}
|
||
that.$forceUpdate();
|
||
}
|
||
that.$forceUpdate();
|
||
that.judgeList = that.formData.filter(item => {
|
||
return item.need_judge === true;
|
||
});
|
||
that.judgeForm();
|
||
})
|
||
},
|
||
/* 图片保存 */
|
||
//初始化canvas
|
||
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.setAttribute("crossOrigin",'anonymous');
|
||
canvasImg.style.width = '500px';
|
||
canvasImg.style.height = '300px';
|
||
this.ctx.drawImage(canvasImg,0,0,500,300);
|
||
},
|
||
// 叉号
|
||
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(){
|
||
let that = this;
|
||
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) => {
|
||
that.imgUrl=res.data.path;
|
||
})
|
||
},
|
||
//base64ToFile
|
||
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');
|
||
},
|
||
/* 图片保存 */
|
||
//最终表格判定
|
||
judgeForm(){
|
||
let that = this ,
|
||
reg = /\{(.+?)\}/g,
|
||
judgeList = this.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);
|
||
}
|
||
//对每个条件进行判定，如果符合，
|
||
for (let i = 0;i<arr.length;i++){
|
||
//获取判断依据
|
||
let a = '`'+ arr[i]+'`';
|
||
let tem =a.match(reg)[0];
|
||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||
//有值时进行判断
|
||
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';
|
||
}
|
||
}
|
||
}
|
||
if(item.indexOf('&&')>-1){
|
||
if(str.indexOf('false')>-1){
|
||
that.judgeList[i].is_testok = true;
|
||
}else{
|
||
that.judgeList[i].is_testok = false;
|
||
}
|
||
}else{
|
||
if(str.indexOf('true')>-1){
|
||
that.judgeList[i].is_testok = false;
|
||
}else{
|
||
that.judgeList[i].is_testok = true;
|
||
}
|
||
}
|
||
}
|
||
let real = that.judgeList.filter(item=>{
|
||
return item.is_testok===false;
|
||
});
|
||
if(real.length>0){
|
||
that.is_testok = false;
|
||
// alert("检验不合格！")
|
||
}else{
|
||
that.is_testok = true;
|
||
// alert("检验合格！")
|
||
}
|
||
},
|
||
//提交检查项目
|
||
submitfield(isSubmit) {
|
||
let that = this;
|
||
that.index = isSubmit;
|
||
let drawArr = that.formData.filter(item=>{
|
||
return item.field_type==='draw';
|
||
});
|
||
if(drawArr.length>0){
|
||
that.word.style.display="none";
|
||
that.Txt.style.display="none";
|
||
let canvas = document.getElementById('canvas');
|
||
let image = new Image();
|
||
image = canvas.toDataURL('image/png');
|
||
that.canvasImg = image;
|
||
let file = that.base64ToFile(image);
|
||
let formData = new FormData();
|
||
formData.append('file', file);
|
||
upFile(formData).then((res) => {
|
||
if(res){
|
||
let key = drawArr[0].field_key;
|
||
that.imgUrl=res.data.path;
|
||
that.checkForm[key] = that.imgUrl;
|
||
that.fieldData();
|
||
}
|
||
});
|
||
}else{
|
||
that.fieldData();
|
||
}
|
||
},
|
||
fieldData(){
|
||
let that = this;
|
||
that.field = []; //检查项目
|
||
that.formData.forEach((item) => {
|
||
let field_value = null;
|
||
if(item.field_type==='int'){
|
||
field_value = parseInt(that.checkForm[item.field_key])
|
||
}else if(item.field_type==='float'){
|
||
field_value = parseFloat(that.checkForm[item.field_key])
|
||
}else{
|
||
field_value = that.checkForm[item.field_key];
|
||
}
|
||
that.field.push({
|
||
id: item.id,
|
||
field_value: field_value,
|
||
is_testok: item.is_testok,//单项检查结果
|
||
is_hidden: item.is_hidden
|
||
});
|
||
});
|
||
that.testrecord.record_data = that.field;//检查项列表
|
||
that.testrecord.is_testok = that.is_testok;//检查表检查结果
|
||
that.testrecord.id = that.recordId;
|
||
// debugger;
|
||
// if(submit&&that.isMidTesting!==true){//提交
|
||
if(that.index==='2'){//提交
|
||
this.$emit('recordSubmit',that.testrecord);
|
||
}else {//保存
|
||
this.$emit('recordSave',that.testrecord);
|
||
}
|
||
|
||
},
|
||
recordCancel(){
|
||
this.$emit('recordCancel','')
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
canvas {
|
||
width:500px!important;
|
||
/*border: 1px solid #000000;*/
|
||
cursor: crosshair;
|
||
margin: auto;
|
||
}
|
||
|
||
.canvasBtnWrap {
|
||
display: flex;
|
||
/*flex-direction: column;*/
|
||
/*width: 80px;*/
|
||
/*padding-left: 20px;*/
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.canvasBtn {
|
||
width: 70px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
border: 1px solid #aaaaaa;
|
||
text-align: center;
|
||
border-radius: 15px;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
#txt {
|
||
position: absolute;
|
||
top: 1%;
|
||
left: 1%;
|
||
width: 150px;
|
||
height: 30px;
|
||
border: 1px solid #e42343;
|
||
}
|
||
|
||
#word {
|
||
position: absolute;
|
||
width: 200px;
|
||
height: 70px;
|
||
padding: 0 2px;
|
||
background: none;
|
||
color: #e42343;
|
||
border: 1px dashed #b9b9b9;
|
||
}
|
||
|
||
#word::-webkit-input-placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#word::-moz-placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#word::placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#res {
|
||
display: inline-block;
|
||
}
|
||
.helpText{
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 100px;
|
||
}
|
||
.adoptTip{
|
||
position: absolute;
|
||
top: 38px;
|
||
right: 0;
|
||
font-size: 12px;
|
||
color: #46ce7a;
|
||
}
|
||
.failTip{
|
||
position: absolute;
|
||
top: 38px;
|
||
right: 0;
|
||
font-size: 12px;
|
||
color: #ff0000;
|
||
}
|
||
.halfWidth{
|
||
width: 49%!important;
|
||
display: inline-block!important;
|
||
}
|
||
</style>
|