From 995649ad25ce47d1d6f40744b367ebb0f75ea1ae Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 23 Nov 2021 13:59:09 +0800
Subject: [PATCH] glassPicture

---
 hb_client/src/api/file.js              |  9 ++-
 hb_client/src/views/mtm/materialdo.vue | 76 ++++++++++++++------------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/hb_client/src/api/file.js b/hb_client/src/api/file.js
index 01c683e..9ad01c7 100644
--- a/hb_client/src/api/file.js
+++ b/hb_client/src/api/file.js
@@ -15,4 +15,11 @@ export function getFileList(query) {
     method: 'get',
     params: query
   })
-}
\ No newline at end of file
+}
+export function upFile(data) {
+  return request({
+    url: '/file/',
+    method: 'post',
+    data
+  })
+}
diff --git a/hb_client/src/views/mtm/materialdo.vue b/hb_client/src/views/mtm/materialdo.vue
index 029abea..421edae 100644
--- a/hb_client/src/views/mtm/materialdo.vue
+++ b/hb_client/src/views/mtm/materialdo.vue
@@ -87,32 +87,6 @@
               :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)"
@@ -214,6 +188,27 @@
                       </el-option>
                     </el-select>
                   </el-form-item>
+                  <el-form-item label="图表" v-else-if="item.field_type === 'draw'">
+                    <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>
+                        </div>
+                        <div id="res"></div>
+                      </div>
+                    </div>
+                  </el-form-item>
                 </el-row>
               </el-form>
             </el-dialog>
@@ -458,7 +453,7 @@
                 <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="模板图片" v-if="field.field_type === 'img'">
                   <el-upload
                     class="avatar-uploader"
                     :action="upUrl"
@@ -468,7 +463,7 @@
                     :before-upload="beforeAvatarUpload"
                     :headers="upHeaders"
                   >
-                    <img v-if="field.TempPicture" :src="field.TempPicture" class="avatar" />
+                    <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>
@@ -513,6 +508,7 @@
     updaterffield,
     deleterffield,
   } from "@/api/mtm";
+  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'
@@ -546,7 +542,7 @@
           field_name: "",
           sort: "",
           parent: "",
-          TempPicture: "",
+          draw_template: "",//图片模板
           field_choice: [""],
         },
         field_choice: [""],
@@ -604,7 +600,7 @@
           datetime: "日期时间",
           select: "单选",
           selects: "多选",
-          img: "图片",
+          draw: "绘图模板",
         },
         fieldtypeoptions: [
           {
@@ -640,8 +636,8 @@
             label: "多选",
           },
           {
-            value: "img",
-            label: "图片",
+            value: "draw",
+            label: "绘图模板",
           },
         ],
         typeoptions: [
@@ -671,8 +667,7 @@
     },
     methods: {
       handleAvatarSuccess(res, file) {
-        this.field.TempPicture = res.data.path;
-
+        this.field.draw_template = res.data.path;
       },
       beforeAvatarUpload(file) {
         const isLt2M = file.size / 1024 / 1024 < 2;
@@ -1012,10 +1007,21 @@
         let image = new Image();
         image = canvas.toDataURL('image/png');
         this.canvasImg = image;
+        let img = image.split(";")[1];
+        debugger;
+        console.log(image);
+        debugger;
+        let imgData = {mime:'base64',file:img,type:'图片'};
+        upFile(imgData).then((res) => {
+          debugger;
+          console.log(res);
+          debugger;
+        })
+
+
         // document.getElementById('res').innerHTML = '<img style="border: 1px solid #666666;" src="'+image+'">';
       },
 
-
       //新增记录表
       handleCreate() {
         this.recordform = Object.assign({}, defaultrecordform);