Merge branch 'develop' of https://e.coding.net/ctcdevteam/hberp/hberp into develop
This commit is contained in:
commit
5d726228ed
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -87,11 +87,38 @@
|
|||
:title="tableForm.name"
|
||||
>
|
||||
<el-form ref="Forms" label-width="80px" :model="checkForm">
|
||||
<el-row>
|
||||
<!--canvas 不能与v-if同用-->
|
||||
<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>
|
||||
<!--<button @click="restuya()">清除批注</button>-->
|
||||
<div class="canvasBtn" @click="back()">回退</div>
|
||||
<div class="canvasBtn" @click="saveTu()">保存</div>
|
||||
<!--<p>保存的图片</p>-->
|
||||
</div>
|
||||
<div id="res"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-row>
|
||||
<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]"
|
||||
|
|
@ -189,10 +216,6 @@
|
|||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!--<div style="text-align: right">-->
|
||||
<!--<el-button type="danger">取消</el-button>-->
|
||||
<!--<el-button type="primary">确认</el-button>-->
|
||||
<!--</div>-->
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -200,7 +223,7 @@
|
|||
<el-col :span="18">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-size: 16px; font-weight: 700">记录字段</span>
|
||||
<span style="font-size: 16px; font-weight: 300">记录字段</span>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
|
|
@ -432,10 +455,23 @@
|
|||
</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-upload
|
||||
class="avatar-uploader"
|
||||
:action="upUrl"
|
||||
accept="image/jpeg, image/gif, image/png, image/bmp"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:headers="upHeaders"
|
||||
>
|
||||
<img v-if="field.TempPicture" :src="field.TempPicture" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="field.sort"
|
||||
|
|
@ -489,6 +525,7 @@
|
|||
|
||||
const defaultrecordform = {};
|
||||
const defaultfield = {};
|
||||
let preDrawAry = [];
|
||||
export default {
|
||||
components: {Pagination, vueJsonEditor, Treeselect},
|
||||
data() {
|
||||
|
|
@ -509,6 +546,7 @@
|
|||
field_name: "",
|
||||
sort: "",
|
||||
parent: "",
|
||||
TempPicture: "",
|
||||
field_choice: [""],
|
||||
},
|
||||
field_choice: [""],
|
||||
|
|
@ -566,6 +604,7 @@
|
|||
datetime: "日期时间",
|
||||
select: "单选",
|
||||
selects: "多选",
|
||||
img: "图片",
|
||||
},
|
||||
fieldtypeoptions: [
|
||||
{
|
||||
|
|
@ -600,6 +639,10 @@
|
|||
value: "selects",
|
||||
label: "多选",
|
||||
},
|
||||
{
|
||||
value: "img",
|
||||
label: "图片",
|
||||
},
|
||||
],
|
||||
typeoptions: [
|
||||
{
|
||||
|
|
@ -607,6 +650,17 @@
|
|||
label: "生产记录",
|
||||
},
|
||||
],
|
||||
canvas:null,
|
||||
ctx:null,
|
||||
myCanvas_rect:null,
|
||||
Txt:null,
|
||||
word:null,
|
||||
widths:0,
|
||||
heights:0,
|
||||
lineW:3,
|
||||
colorF:"#e42343",
|
||||
imgData:'',
|
||||
canvasImg:'',
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
@ -616,6 +670,17 @@
|
|||
this.recordformLists();
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.field.TempPicture = res.data.path;
|
||||
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
keyChange(key){
|
||||
let y = this.checkForm[key];
|
||||
this.$set(this.checkForm,key,y);
|
||||
|
|
@ -704,28 +769,41 @@
|
|||
this.field_choice.splice(index, 1);
|
||||
},
|
||||
handleLook(scope) {
|
||||
debugger;
|
||||
// console.log(scope);
|
||||
let that = this;
|
||||
this.tableForm = Object.assign({}, scope.row); // copy obj
|
||||
this.formID = this.tableForm.id;
|
||||
this.listQueryfield.form = this.formID;
|
||||
getrffieldList(this.listQueryfield).then((response) => {
|
||||
that.tableForm = Object.assign({}, scope.row); // copy obj
|
||||
that.formID = that.tableForm.id;
|
||||
that.listQueryfield.form = that.formID;
|
||||
getrffieldList(that.listQueryfield).then((response) => {
|
||||
if (response.data) {
|
||||
debugger;
|
||||
this.fieldList = response.data;
|
||||
that.fieldList = response.data;
|
||||
let list = response.data.results;
|
||||
for(let i=0;i<list.length;i++){
|
||||
let key = list[i].field_key;
|
||||
that.checkForm[key]='';
|
||||
that.$set(that.checkForm,key,'')
|
||||
}
|
||||
this.dialogVisibleForm = true;
|
||||
console.log(that.checkForm);
|
||||
debugger;
|
||||
that.dialogVisibleForm = true;
|
||||
setTimeout(function(){
|
||||
that.canvasInit();
|
||||
},500);
|
||||
}
|
||||
});
|
||||
this.fieldLists();
|
||||
that.fieldLists();
|
||||
},
|
||||
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);
|
||||
},
|
||||
checkPermission,
|
||||
|
||||
|
|
@ -768,6 +846,176 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* // 删除批注
|
||||
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) {
|
||||
var popData = preDrawAry.pop();
|
||||
this.ctx.putImageData(popData, 0, 0);
|
||||
}
|
||||
},
|
||||
|
||||
// 回退一次
|
||||
put(){
|
||||
this.ctx.putImageData(this.imgData,0,0);
|
||||
},
|
||||
|
||||
//保存
|
||||
saveTu(){
|
||||
let canvas = document.getElementById('canvas');
|
||||
let image = new Image();
|
||||
image = canvas.toDataURL('image/png');
|
||||
this.canvasImg = image;
|
||||
// document.getElementById('res').innerHTML = '<img style="border: 1px solid #666666;" src="'+image+'">';
|
||||
},
|
||||
|
||||
|
||||
//新增记录表
|
||||
handleCreate() {
|
||||
this.recordform = Object.assign({}, defaultrecordform);
|
||||
|
|
@ -912,4 +1160,55 @@
|
|||
.my-content {
|
||||
background: #fde2e2;
|
||||
}
|
||||
canvas{
|
||||
border:1px solid #000000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.canvasBtnWrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.canvasBtn{
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border: 1px solid #aaaaaa;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
#txt{
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 1%;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
border:1px solid #e42343;
|
||||
}
|
||||
#word{
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue