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

hb_client/src/views/mtm/materialdo.vue

@@ -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
+        that.tableForm = Object.assign({}, scope.row); // copy obj
-        this.formID = this.tableForm.id;
+        that.formID = that.tableForm.id;
-        this.listQueryfield.form = this.formID;
+        that.listQueryfield.form = that.formID;
-        getrffieldList(this.listQueryfield).then((response) => {
+        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;
+            that.dialogVisibleForm = true;
-            console.log(that.checkForm);
+            setTimeout(function(){
-            debugger;
+              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>