zcdsj
/
hberp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://e.coding.net/ctcdevteam/hberp/hberp into develop

This commit is contained in:
caoqianming 2021-12-02 16:32:40 +08:00
parent a7f10b2767 90586a7d7d
commit 2cf91c2a0e
2 changed files with 936 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

537
hb_client/src/components/customForm/index.vue Normal file
View File

@ -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>

692
hb_client/src/views/mtm/materialdo.vue
View File

@ -89,109 +89,120 @@
:close-on-click-modal="false" :close-on-click-modal="false"
:title="tableForm.name" :title="tableForm.name"
> >
<el-form ref="Forms" label-width="80px" :model="checkForm"> <customForm
<el-row :results="fieldList.results"
v-for="(item, $index) in fieldList.results" :hasPicture="hasPicture"
v-show="filterBlock(item.parent,item.rule_expression,item.need_judge)" :formID="formID"
:key="$index" @formFunc="formFunc"
> />
<!--<div v-if="item.field_type === 'img'">--> <!--<el-form ref="Forms" label-width="100px" :model="checkForm">
<el-form-item v-if="item.field_type === 'string'" :label="item.field_name"> <el-row>
<el-input <el-col
v-model="checkForm[item.field_key]" :span="12"
placeholder="请输入" v-for="(item, $index) in fieldList.results"
@input="keyChange(item.field_key)" v-show="filterBlock(item.parent,item.display_expression)"
/> :key="$index"
</el-form-item>
<el-form-item
v-else-if="item.field_type === 'int'"
:label="item.field_name"
> >
<el-input &lt;!&ndash;<div v-if="item.field_type === 'img'">&ndash;&gt;
v-model="checkForm[item.field_key]" <el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
type="number" <el-input
placeholder="请输入" v-model="checkForm[item.field_key]"
@input="keyChange(item.field_key)" placeholder="请输入"
/> @input="keyChange(item.field_key)"
</el-form-item> />
<el-form-item </el-form-item>
v-else-if="item.field_type === 'float'" <el-form-item
:label="item.field_name" 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 === '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-input
</el-form-item> v-model="checkForm[item.field_key]"
<el-form-item type="number"
v-else-if="item.field_type === 'datetime'" placeholder="请输入"
:label="item.field_name" @input="keyChange(item.field_key)"
> />
<el-date-picker </el-form-item>
v-model="checkForm[item.field_key]" <el-form-item
type="datetime" v-else-if="item.field_type === 'float'"
placeholder="选择日期" :label="item.field_name"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
@change="keyChange(item.field_key)"
> >
</el-date-picker> <el-input
</el-form-item> v-model="checkForm[item.field_key]"
<el-form-item type="number"
v-else-if="item.field_type === 'select'" placeholder="请输入"
:label="item.field_name" @input="keyChange(item.field_key)"
> />
<el-select </el-form-item>
v-model="checkForm[item.field_key]" <el-form-item
style="width: 100%" v-else-if="item.field_type === 'date'"
placeholder="请选择" :label="item.field_name"
@change="keyChange(item.field_key)"
> >
<el-option <el-date-picker
v-for="item1 in item.field_choice" v-model="checkForm[item.field_key]"
:key="item1" type="date"
:label="item1" placeholder="选择日期"
:value="item1" value-format="yyyy-MM-dd"
style="width: 100%"
@change="keyChange(item.field_key)"
> >
</el-option> </el-date-picker>
</el-select> </el-form-item>
</el-form-item> <el-form-item
<el-form-item v-else-if="item.field_type === 'datetime'"
v-else-if="item.field_type === 'selects'" :label="item.field_name"
:label="item.field_name"
>
<el-select
v-model="checkForm[item.field_key]"
style="width: 100%"
multiple
placeholder="请选择"
> >
<el-option <el-date-picker
v-for="item1 in item.field_choice" v-model="checkForm[item.field_key]"
:key="item1" type="datetime"
:label="item1" placeholder="选择日期"
:value="item1" value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
@change="keyChange(item.field_key)"
> >
</el-option> </el-date-picker>
</el-select> </el-form-item>
</el-form-item> <el-form-item
<el-form-item label="图表" v-else-if="item.field_type === 'draw'"> 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> <div>
<img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none"> <img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
<div style="position: relative;display: flex"> <div style="position: relative;display: flex">
@ -204,7 +215,7 @@
<div class="canvasBtnWrap"> <div class="canvasBtnWrap">
<div class="canvasBtn" @click="error1">标记</div> <div class="canvasBtn" @click="error1">标记</div>
<div class="canvasBtn" @click="word1()">文字</div> <div class="canvasBtn" @click="word1()">文字</div>
<!--<button @click="restuya()">清除批注</button>--> &lt;!&ndash;<button @click="restuya()">清除批注</button>&ndash;&gt;
<div class="canvasBtn" @click="back()">回退</div> <div class="canvasBtn" @click="back()">回退</div>
<div class="canvasBtn" @click="saveTu()">保存</div> <div class="canvasBtn" @click="saveTu()">保存</div>
</div> </div>
@ -213,7 +224,12 @@
</div> </div>
</el-form-item> </el-form-item>
</el-row> </el-row>
</el-form> </el-form>-->
<div style="text-align: right">
<el-button type="primary" @click="judgeForm">
合格验证
</el-button>
</div>
</el-dialog> </el-dialog>
</el-card> </el-card>
</el-col> </el-col>
@ -454,10 +470,13 @@
</el-form-item> </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-input v-model="field.rule_expression" type="textarea"/>
</el-form-item> </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 <el-upload
class="avatar-uploader" class="avatar-uploader"
:action="upUrl" :action="upUrl"
@ -467,8 +486,8 @@
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:headers="upHeaders" :headers="upHeaders"
> >
<img v-if="field.draw_template" :src="field.draw_template" class="avatar" /> <img v-if="field.draw_template" :src="field.draw_template" class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon" /> <i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">
@ -498,6 +517,7 @@
</template> </template>
<script> <script>
import customForm from '@/components/customForm/index'
import checkPermission from "@/utils/permission"; import checkPermission from "@/utils/permission";
import {getEquipmentAll} from "@/api/equipment"; import {getEquipmentAll} from "@/api/equipment";
import vueJsonEditor from "vue-json-editor"; import vueJsonEditor from "vue-json-editor";
@ -512,7 +532,7 @@
updaterffield, updaterffield,
deleterffield, deleterffield,
} from "@/api/mtm"; } from "@/api/mtm";
import { upFile } from "@/api/file"; import {upFile} from "@/api/file";
import {genTree} from "@/utils"; import {genTree} from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
@ -527,7 +547,7 @@
const defaultfield = {}; const defaultfield = {};
let preDrawAry = []; let preDrawAry = [];
export default { export default {
components: {Pagination, vueJsonEditor, Treeselect}, components: {Pagination, vueJsonEditor, Treeselect, customForm},
data() { data() {
return { return {
step: defaultstep, step: defaultstep,
@ -535,6 +555,7 @@
upHeaders: upHeaders(), upHeaders: upHeaders(),
upUrl: upUrl(), upUrl: upUrl(),
fileList: [], fileList: [],
hasPicture: true,
listLoading: true, listLoading: true,
need_judge: false, need_judge: false,
dialogVisibles: false, dialogVisibles: false,
@ -562,8 +583,8 @@
dialogType1: "new", dialogType1: "new",
dialogVisible1: false, dialogVisible1: false,
tableForm: defaultrecordform, tableForm: defaultrecordform,
checkForm:{ checkForm: {
hhh:'', hhh: '',
}, },
listQueryrecordform: { listQueryrecordform: {
page: 1, page: 1,
@ -650,17 +671,19 @@
label: "生产记录", label: "生产记录",
}, },
], ],
canvas:null, canvas: null,
ctx:null, ctx: null,
myCanvas_rect:null, myCanvas_rect: null,
Txt:null, Txt: null,
word:null, word: null,
widths:0, formID: 0,
heights:0, widths: 0,
lineW:3, heights: 0,
colorF:"#e42343", lineW: 3,
imgData:'', colorF: "#e42343",
canvasImg:'', imgData: '',
canvasImg: '',
judgeList: [],
}; };
}, },
computed: {}, computed: {},
@ -670,6 +693,9 @@
this.recordformLists(); this.recordformLists();
}, },
methods: { methods: {
formFunc(value) {
this.dialogVisibleForm = value;
},
handleAvatarSuccess(res, file) { handleAvatarSuccess(res, file) {
this.field.draw_template = res.data.path; this.field.draw_template = res.data.path;
}, },
@ -680,81 +706,77 @@
} }
return isLt2M; return isLt2M;
}, },
keyChange(key){ keyChange(key) {
let y = this.checkForm[key]; let y = this.checkForm[key];
this.$set(this.checkForm,key,y); this.$set(this.checkForm, key, y);
this.fieldList.results=[...this.fieldList.results]; this.fieldList.results = [...this.fieldList.results];
this.filterBlock(); this.filterBlock();
}, },
filterBlock(parent,rule,judge){ filterBlock(parent, rule) {
let that = this; let that = this;
if(parent!==''&&parent!==null&&parent!==undefined){ if (parent !== '' && parent !== null && parent !== undefined) {
if(judge){ if (rule !== '' && rule !== null && rule !== undefined) {
if(rule!==''&&rule!==null&&rule!==undefined){ let reg = /\{(.+?)\}/g;
let reg = /\{(.+?)\}/g; //let str = rule.replace(temp,'').replace('$','');//=='有'
//let str = rule.replace(temp,'').replace('$','');//=='有' //let y = that.checkForm[key];
//let y = that.checkForm[key]; 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;
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;
} }
}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() { checkValue() {
this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, ''); this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, '');
@ -774,23 +796,39 @@
that.listQueryfield.form = that.formID; that.listQueryfield.form = that.formID;
getrffieldList(that.listQueryfield).then((response) => { getrffieldList(that.listQueryfield).then((response) => {
if (response.data) { if (response.data) {
debugger; this.hasPicture = false;
that.fieldList = response.data; that.fieldList = response.data;
let list = response.data.results; 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; let key = list[i].field_key;
that.checkForm[key]=''; that.checkForm[key] = '';
that.$set(that.checkForm,key,'') that.$set(that.checkForm, key, '')
} }
that.dialogVisibleForm = true; that.dialogVisibleForm = true;
setTimeout(function(){ setTimeout(function () {
that.canvasInit(); that.canvasInit();
},500); }, 500);
} }
}); });
that.fieldLists(); that.fieldLists();
}, },
canvasInit(){ canvasInit() {
let that = this; let that = this;
preDrawAry = []; preDrawAry = [];
that.canvas = document.getElementById('canvas'); that.canvas = document.getElementById('canvas');
@ -800,9 +838,9 @@
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);
}, },
checkPermission, checkPermission,
@ -826,7 +864,7 @@
getrffieldList(that.listQueryfield).then((response) => { getrffieldList(that.listQueryfield).then((response) => {
if (response.data) { if (response.data) {
that.fieldList = response.data; that.fieldList = response.data;
that.fieldList.results=[...that.fieldList.results] that.fieldList.results = [...that.fieldList.results]
} }
}); });
}, },
@ -845,50 +883,50 @@
} }
}); });
}, },
draw(){ draw() {
let canvasImg = document.getElementById("canvasImg"); let canvasImg = document.getElementById("canvasImg");
canvasImg.style.width = '300px'; canvasImg.style.width = '300px';
canvasImg.style.height = '200px'; 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 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);
@ -896,65 +934,65 @@
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);
debugger; debugger;
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 = "";
} }
} }
@ -963,50 +1001,50 @@
}, },
// 文字过长超出换行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);
} }
} }
}, },
/* // 删除批注 /* // 删除批注
restuya(){ restuya(){
this.word.style.display="none"; this.word.style.display="none";
this.Txt.style.display="none"; this.Txt.style.display="none";
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
window.location.reload(); window.location.reload();
},*/ },*/
// 撤销 // 撤销
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 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');
@ -1024,15 +1062,73 @@
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() {
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() { handleCreate() {
this.recordform = Object.assign({}, defaultrecordform); this.recordform = Object.assign({}, defaultrecordform);
@ -1177,18 +1273,21 @@
.my-content { .my-content {
background: #fde2e2; background: #fde2e2;
} }
canvas{
border:1px solid #000000; canvas {
border: 1px solid #000000;
cursor: crosshair; cursor: crosshair;
} }
.canvasBtnWrap{
.canvasBtnWrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80px; width: 80px;
padding-left: 20px; padding-left: 20px;
justify-content: space-between; justify-content: space-between;
} }
.canvasBtn{
.canvasBtn {
width: 70px; width: 70px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
@ -1196,36 +1295,43 @@
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
} }
.hide{
.hide {
display: none; display: none;
} }
#txt{
#txt {
position: absolute; position: absolute;
top: 1%; top: 1%;
left: 1%; left: 1%;
width: 150px; width: 150px;
height: 30px; height: 30px;
border:1px solid #e42343; border: 1px solid #e42343;
} }
#word{
#word {
position: absolute; position: absolute;
width: 150px; width: 150px;
height: 70px; height: 70px;
padding: 0 2px; padding: 0 2px;
background:none; background: none;
color:#e42343; color: #e42343;
border: 1px dashed #b9b9b9; 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; display: inline-block;
} }
</style> </style>