质检统计 二维码

package.json

@@ -36,6 +36,7 @@
     "vue-countup-v2": "^4.0.0",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.27.2",
+    "vue-printjs": "^1.0.0",
     "vue-router": "^3.6.4",
     "vue2-ace-editor": "0.0.15",
     "vuedraggable": "^2.24.3",

public/fromQRCode/designDrawing.html

@@ -67,8 +67,8 @@
                 <label for="">生产厂家：</label>
                 <span>湖南宝悦新型建材有限公司</span>
             </li>
-            <li id="designDrawing">
-                <!-- <img style="width: 100%; margin-top: 20px;" src="./view.jpeg" alt=""> -->
+            <li >
+                <img id="designDrawing" style="width: 100%; margin-top: 20px;"  alt="">
             </li>
         </ul>
     </body>
@@ -106,13 +106,9 @@
         if(queryObj.createTime){
             createTime.innerHTML = decodeURIComponent(queryObj.createTime);
         }
-
-        // if(queryObj.de) {
-        //     var _img = document.createElement('img');
-        //     _img.src = window.location.origin + '/' + decodeURIComponent(queryObj.de);
-        //     // _img.src = './view.jpeg';
-        //     _img.style = 'width: 100%; margin-top: 20px;';
-        //     designDrawing.appendChild(_img);
-        // }
+        if(queryObj.designDrawingImg) {
+            designDrawing.src =decodeURIComponent(queryObj.designDrawingImg) 
+ 
+        }
     </script>
 </html>

src/App.vue

@@ -7,6 +7,7 @@
 <script>
   import { updateDocumentTitle } from '@/utils/document-title-util';
   import { getPageList } from '@/api/saleOrder';
+  import { getPathAddress } from '@/api/system/file/index';
 
   export default {
     name: 'App',
@@ -17,10 +18,10 @@
       // 恢复主题
       this.$store.dispatch('theme/recoverTheme');
       if (!sessionStorage.filePath) {
-        // getPathAddress().then((res) => {
-        //   console.log(res);
-        //   sessionStorage.filePath = res;
-        // });
+        getPathAddress().then((res) => {
+          console.log(res);
+          sessionStorage.filePath = res;
+        });
       }
     },
     methods: {

src/api/inspectionStatistics/index.js

@@ -16,7 +16,7 @@ export async function getQualityControlWorkOrder(data) {
 // 出釜质检详情列表
 
 export async function queryListDetail(parentId) {
-  const res = await request.get(`/qms/quality_work_order/query_list_detail/`+parentId)
+  const res = await request.get(`/qms/quality_work_order/query_list_detail/` + parentId)
   if (res.data.code == 0) {
     return res.data.data;
   }
@@ -25,8 +25,15 @@ export async function queryListDetail(parentId) {
 // 导出
 
 export async function exportList(data) {
-  const res = await request.post('/qms/quality_work_order/List_count/export', data, {responseType:'blob'} );
+  const res = await request.post('/qms/quality_work_order/List_count/export', data, { responseType: 'blob' });
   download(res.data, '出釜质检')
 }
+export async function savePicture(data) {
+  const res = await request.post('/qms/quality_work_order/savePicture', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
 
 

src/components/upload/WithView.vue

@@ -10,7 +10,7 @@
       <el-upload
         class="avatar-div"
         action="#"
-        accept="image/png,image/jpeg"
+        accept="image/png,image/jpeg,image/jpg"
         :show-file-list="false"
         ref="uploadRef"
         :on-exceed="handleExceed"
@@ -66,7 +66,7 @@
         }
       },
       async clearImg () {
-        await removeFile({ fileId: this.value.id });
+        // await removeFile({ fileId: this.value.id });
         this.$emit('input', {});
         this.$refs.uploadRef.clearFiles();
       },

src/main.js

@@ -15,6 +15,7 @@ import HeaderTitle from '@/components/header-title';
 import authSelection from '@/components/authSelection';
 Vue.component('HeaderTitle', HeaderTitle);
 Vue.component('authSelection', authSelection);
+import print from "vue-printjs"
 
 // // register globally
 import '@/icons';
@@ -31,6 +32,8 @@ Vue.use(EleAdmin, {
 });
 Vue.use(permission);
 Vue.use(VueClipboard);
+Vue.use(print)
+
 let instance = null;
 
 function render (props = {}) {

src/views/inspectionStatistics/qualityControlWorkOrder/components/search.vue

@@ -56,7 +56,7 @@
       >
         <el-form-item label="日期" prop="createTime">
           <el-date-picker
-            v-model="params.createTime"
+            v-model="where.createTime"
             style="width: 240px"
             value-format="yyyy-MM-dd HH:mm:ss"
             type="daterange"

src/views/inspectionStatistics/qualityControlWorkOrder/index.vue

@@ -11,7 +11,6 @@
         :selection.sync="selection"
         @expand-change="expandChange"
         class="table"
-  
       >
         <ele-toolbar>
           <!-- 默认插槽添加左边内容 -->
@@ -47,21 +46,73 @@
       title="二维码"
     >
       <div ref="printRef" class="codeDiv">
-        <div>
-          <ele-qr-code :value="text" :size="120" />
+        <div class="id-label-card">
+          <header>
+            <h6 style="font-family: '宋体'; font-size: 12px"
+              >湖南宝悦新型建材有限公司</h6
+            >
+            <h4>
+              <span style="font-family: '宋体'">{{
+                currentRow.productName
+              }}</span
+              >&emsp;<b>{{ currentRow.specification }}</b>
+            </h4>
+            <img src="@/assets/bylogo.jpg" alt="" />
+          </header>
+          <footer>
+            <aside class="left">
+              <h6 style="font-size: 12px">{{ currentRow.batchNo }}</h6>
+              <h6 style="letter-spacing: -1px">{{ currentRow.qualityTime }}</h6>
+              <h6
+                style="line-height: 18px; margin-top: 10px"
+                v-if="currentRow.designDrawingRemark"
+              >
+                备注：{{ currentRow.designDrawingRemark }}
+              </h6>
+              <h5 style="font-family: '宋体'; font-size: 16px" class="status">
+                合格
+              </h5>
+              <h4 class="level" style="font-family: '宋体'">优级</h4>
+            </aside>
+            <aside class="right">
+              <ele-qr-code :value="text" :size="120" />
+            </aside>
+          </footer>
         </div>
 
-        <div style="margin-left: 20px">
+        <!-- <div>
+          <ele-qr-code :value="text" :size="120" />
+        </div> -->
+
+        <!-- <div style="margin-left: 20px">
           <div>产品名称：{{ currentRow.productName }}</div>
           <div>产品编码：{{ currentRow.productCode }}</div>
           <div>规格：{{ currentRow.specification }}</div>
-        </div>
+        </div> -->
       </div>
 
       <template v-slot:footer>
+        <!-- <el-button @click="print">设置备注</el-button> -->
+        <el-button type="primary" @click="imgVisibleOpen">更新设计图</el-button>
         <el-button @click="print">打印预览</el-button>
       </template>
     </el-dialog>
+    <el-dialog
+      class="ele-dialog-form"
+      :visible.sync="imgVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="handleClose"
+      width="400px"
+      append-to-body
+      title="设计图"
+    >
+      <WithView v-model="imgs" :assetName="''" ref="WithViewRef"></WithView>
+      <template v-slot:footer>
+        <el-button type="primary" @click="savePicture">确认</el-button>
+        <el-button @click="handleClose">取消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
   <script>
@@ -69,15 +120,21 @@ import search from './components/search.vue';
 import EleQrCode from 'ele-admin/es/ele-qr-code';
 import {
   getQualityControlWorkOrder,
-  queryListDetail,exportList
+  queryListDetail,
+  exportList,
+  savePicture
 } from '@/api/inspectionStatistics';
 import dictMixins from '@/mixins/dictMixins';
 import { printElement } from 'ele-admin';
+import WithView from '@/components/upload/WithView.vue';
+import { getImageUrl } from '@/utils/file';
+
 export default {
   mixins: [dictMixins],
   components: {
     search,
-    EleQrCode
+    EleQrCode,
+    WithView
   },
   data() {
     return {
@@ -85,8 +142,10 @@ export default {
       text: '',
       currentRow: {},
       selection: [],
+      imgs: [],
       list: [],
       loading: false,
+      imgVisible: false,
       columns: [
         {
           width: 45,
@@ -366,9 +425,9 @@ export default {
           showOverflowTooltip: true
         }
       ],
-      where:{},
-      page:'',
-      limit:""
+      where: {},
+      page: '',
+      limit: ''
     };
   },
   created() {},
@@ -383,11 +442,25 @@ export default {
     getList(row) {
       return this.list.filter((item) => item.batchNo == row.batchNo);
     },
-
+    imgVisibleOpen() {
+      this.imgVisible = true;
+      this.imgs = (this.currentRow.picture && this.currentRow.picture[0]) || {};
+    },
+    savePicture() {
+      savePicture({
+        id: this.currentRow.id,
+        picture: [this.imgs]
+      });
+     
+      this.currentRow.picture = [this.imgs];
+      this.openEdit(this.currentRow);
+      this.handleClose()
+      this.$refs.search.search();
+    },
     datasource({ page, where, limit, parent }) {
-      this.where=where
-      this.page=page
-      this.limit=limit
+      this.where = where;
+      this.page = page;
+      this.limit = limit;
       return getQualityControlWorkOrder({
         ...where,
         pageNum: page,
@@ -399,25 +472,31 @@ export default {
         return;
       }
       const val = await queryListDetail(data.batchNo);
-      val.forEach(item=>{
-        item['batchNo']=data.batchNo
-      })
+      val.forEach((item) => {
+        item['batchNo'] = data.batchNo;
+      });
       this.list.push(...val);
     },
 
     print() {
       printElement(this.$refs.printRef);
     },
+    handleClose(){
+
+      this.$refs.WithViewRef.clearImg()
+      this.imgVisible = false;
+    },
     openEdit(row) {
       this.visible = true;
       this.currentRow = row;
+      this.imgs = (this.currentRow.picture && this.currentRow.picture[0]) || {};
       const paramsStr = this.obj_to_str({
         productName: encodeURIComponent(row.productName),
         specification: encodeURIComponent(row.specification),
         productCode: row.productCode,
         batchNo: row.batchNo,
-        createTime: row.qualityTime.split(' ')[0]
-        // de: encodeURIComponent(this.$props.currentRowData.designDrawing)
+        createTime: row.qualityTime.split(' ')[0],
+        designDrawingImg: encodeURIComponent(getImageUrl(this.imgs.storePath))
       });
       this.text =
         window.location.origin +
@@ -425,13 +504,13 @@ export default {
         '?' +
         paramsStr;
     },
-    exportList(){
+    exportList() {
       exportList({
         ...this.where,
-        stringList:this.selection.map(item=>item.batchNo),
+        stringList: this.selection.map((item) => item.batchNo),
         pageNum: this.page,
         size: this.limit
-      })
+      });
     },
     search(where) {
       this.$refs.table.reload({
@@ -458,4 +537,80 @@ export default {
     }
   }
 }
-</style>
+</style>
+<style media="print" lang="scss">
+@page {
+  size: 85mm 60mm;
+  margin: 0mm;
+}
+</style>
+<style lang="scss" scoped>
+.id-label-card {
+  width: 85mm;
+  height: 59.5mm;
+  border: 2px solid #000;
+  color: #000;
+  box-sizing: border-box;
+  > header {
+    height: 70px;
+    border-bottom: 1px solid #000;
+    padding: 12px 7px;
+    box-sizing: border-box;
+    position: relative;
+    line-height: 20px;
+    > h4 {
+      margin: 0px;
+    }
+    > h6 {
+      margin: 0px;
+    }
+    > img {
+      width: 45px;
+      height: 45px;
+      position: absolute;
+      right: 7px;
+      top: 4px;
+    }
+  }
+  > footer {
+    display: flex;
+    height: 152px;
+    > aside {
+      height: 100%;
+    }
+    > aside.left {
+      flex: 1;
+      border-right: 1px solid #000;
+      box-sizing: border-box;
+      padding: 7px;
+      position: relative;
+      > * {
+        margin: 0;
+        line-height: 30px;
+      }
+      .status {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+      }
+      .level {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        height: 100%;
+        width: 30px;
+        writing-mode: vertical-lr;
+        text-align: center;
+        font-size: 20px;
+      }
+    }
+    > aside.right {
+      width: 139px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

vue.config.js

@@ -32,7 +32,7 @@ module.exports = {
       // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
       '/api': {
         // target: 'http://124.71.68.31:50001',
-        target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.107:18086',
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite: {
           '^/api': ''