1.提交

loulijun2021

2022-07-27 04519262eda541e49799cb5188b62603240b0d33

1.提交

 src/api/utils.js

@@ -15,3 +15,11 @@
    data
  })
}

export function PrintOrder(data) {
  return request({
    url: 'GridReport/PrintOrder',
    method: 'post',
    data
  })
}

 src/router/index.js

@@ -31,11 +31,19 @@
 * all roles can be accessed
 */
export const commonRoutes = [
  /*
  * çœ‹æ¿éƒ¨åˆ†è·¯ç”±
  * */
  {
    path: '/kb',
    component: () => import('@/views/kb/index'),
    hidden: true
  }, {
    path: '/kb2',
    component: () => import('@/views/kb/index2'),
    hidden: true
  },

  {
    path: '/login',
    component: () => import('@/views/login/index'),

 src/views/kb/index.vue

@@ -1,42 +1,437 @@
<template>
  <div>
    <div style="margin: 100px;">
      <el-button type="primary" @click="click">请点击我</el-button>
      <import-picker ref="importPickerFunc" :shows.sync="shows" :title="title_value" :colos="colos" :code="code" />
    </div>

    <el-button type="primary" @click="clickMe">点击我</el-button>

    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="1140"
    >
      <!-- è¦æ‰“印的区域 -->
      <div id="printMe" style="padding: 30px">

        <div style="display: flex;justify-content: space-around;">
          <!--          äºŒç»´ç éƒ¨åˆ†-->
          <div>
            <div id="qrCode" ref="qrCodeDiv" />
            <!--            <img :src="QRImgUrl">-->

            <div style="font-size: 18px;width: 100px;text-align: center;margin-top: 10px">MO-79601</div>
          </div>
          <!--          å…¬å¸åç§°åŠæ‰“印单类型-->
          <div
            style="height: 100px;display: flex;justify-content:space-between;align-items: center;flex-direction: column;font-weight: bolder"
          >
            <div style="font-size: 26px;">永康新凯迪工业互联有限公司</div>
            <div style="font-size: 22px;">委外派单</div>
          </div>
          <!--右侧水印及姓名日期-->
          <div>
            <!--            <div ref="watermark" style="width: 100px;height:100px;" />-->
            <div style="color:#0f0f0f;;width: 100px;margin-top:40px;height: 50px;text-align: center">凯迪制造</div>
            <div style="font-weight: bolder">
              <div>姓名：张三</div>
              <div>日期：2022-07-05</div>
            </div>
          </div>
        </div>
        <!--        <el-divider />-->
        <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />
        <el-table
          id="table"
          :data="tableData"
          border
          class="elTable"
          style="width: 100%;"
        >
          <el-table-column
            id="column0"
            prop="date"
            label="日期"
            width="100"
          />
          <el-table-column
            id="column1"
            prop="name"
            label="姓名"
            width="100"
          />
          <el-table-column
            id="column2"
            prop="address"
            label="地址"
            width="150"
          />
          <el-table-column
            id="column3"
            prop="address"
            label="地址"
            width="150"
          />
          <el-table-column
            id="column4"
            prop="address"
            width="150"

            label="地址"
          />
          <el-table-column
            id="column5"
            width="150"

            prop="address"
            label="地址"
          />
          <el-table-column
            id="column6"
            prop="address"
            width="120"

            label="地址"
          />
          <el-table-column
            id="column7"
            width="119"

            prop="address"
            label="地址"
          />
        </el-table>
      </div>

      <!--      <vue-easy-print ref="printRef" :button-show="true">-->
      <!--        x-->
      <!--      </vue-easy-print>-->

      <!-- æ‰“印的按钮，显示打印预览 -->
      <!--    <el-button v-print="'#printMe'">打印</el-button>-->
      <el-button v-print="printObj">打印</el-button>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="dialogVisible = false">ç¡® å®š</el-button>
      </span>
    </el-dialog>

    <!--2222-->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible2"
      width="1140"
    >
      <!-- è¦æ‰“印的区域 -->
      <div id="printMe2" style="padding: 30px;">
        <!--        <div style="width: 500px; height: 300px;">-->

        <div
          style="display: flex;width: 300px;height: 200px;border: 1px solid #000;text-align: center;font-size: 16px;"
        >
          <div style="width: 100px;display: flex;flex-direction: column;border-right: 1px solid #000">
            <div
              style="display: flex;height: 75%;border-bottom:1px solid #000;justify-content: center;align-items: center "
            >
              <div id="qrCode2" ref="qrCodeDiv2" />
            </div>
            <div style="display: flex;height: 25%;justify-content: center;align-items: center">
              æ•°é‡ï¼š100
            </div>
          </div>
          <div style="width:200px;display: flex;flex-direction: column">
            <div
              style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center "
            >
              å·¥å•ç¼–号：1403-001-0001
            </div>
            <div
              style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center "
            >
              å·¥å•ç¼–号：1403-001-0001
            </div>
            <div
              style="display: flex;height: 25%;border-bottom:1px solid #000 ;justify-content: center;align-items: center"
            >
              å·¥å•ç¼–号：1403-001-0001
            </div>
            <div style="display: flex;height: 25%;justify-content: center;align-items: center">
              å·¥å•ç¼–号：1403-001-0001
            </div>

          </div>

        </div>

        <!--        </div>-->
      </div>

      <!--      <vue-easy-print ref="printRef" :button-show="true">-->
      <!--        x-->
      <!--      </vue-easy-print>-->

      <!-- æ‰“印的按钮，显示打印预览 -->
      <!--    <el-button v-print="'#printMe'">打印</el-button>-->
      <el-button v-print="printObj2">打印</el-button>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">ç¡® å®š</el-button>
      </span>
    </el-dialog>

    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>

    <el-button type="primary" @click="ws_ajax_preview">jhjhjh</el-button>

  </div>
</template>

<script>
import ImportPicker from '@/components/ImportPicker'
// import vueEasyPrint from 'vue-easy-print'
import QRCode from 'qrcodejs2'
import { MesOrderPrintSearch, MesOrderPrintSearch1 } from '@/api/utils'
import { urlAddRandomNo, webapp_ws_ajax_run, webapp_urlprotocol_startup } from '@/utils/grwebapp'
import { getCookie } from '@/utils/auth'
// import QRCode from 'qrcode'

export default {
  name: 'Wljy',
  components: {
    ImportPicker
  },
  name: 'Gdpg',
  // components: {
  //   vueEasyPrint
  // },
  data() {
    return {
      title_value: '数据导入 / ç”¨æˆ·è§’色',
      code: '2',
      shows: false
      outerVisible: false,
      innerVisible: false,
      dialogVisible2: false,
      printObj2: {
        id: 'printMe2',
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
          console.log()
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }

      },
      firstWatermark: true, // ç¬¬ä¸€æ¬¡æ˜¾ç¤ºæ°´å°
      firstbindQRCode: true, // ç¬¬ä¸€æ¬¡æ˜¾ç¤ºäºŒç»´ç 
      form: {
        describle: ''
      },
      QRImgUrl: '',
      QRlink: 'www.xxx.com',
      dialogVisible: false,
      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
        preview: false,
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        previewBeforeOpenCallback() {
        }, // é¢„览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {
        }, // é¢„览窗口打开之后的callback（开启预览模式调用）
        beforeEntryIframe() {
          const widthArr = ['10%', '10%', '15%', '15%', '15%', '15%', '10%', '10%']
          // const tables = document.getElementById('table').getElementsByTagName('el-table') // èŽ·å–打印的表格
          const tables = document.getElementById('table') // èŽ·å–打印的表格
          // const headcolgroupCol0 = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
          // const headcolgroupCol0 = document.getElementById('column0').style.width = '400px'
          // const headcolgroupCol1 = document.getElementById('column1')
          // const headcolgroupCol2 = document.getElementById('column2')
          // const headcolgroupCol3 = document.getElementById('column3')
          // const headcolgroupCol4 = document.getElementById('column4')
          // const headcolgroupCol5 = document.getElementById('column5')
          // const headcolgroupCol6 = document.getElementById('column6')
          // const headcolgroupCol7 = document.getElementById('column7')
          // const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
          // widthArr.forEach((val, index) => {
          //   headcolgroupCol0[index].width = val
          //   headcolgroupCol1[index].width = val
          //   headcolgroupCol2[index].width = val
          //   headcolgroupCol3[index].width = val
          //   headcolgroupCol4[index].width = val
          //   headcolgroupCol5[index].width = val
          //   headcolgroupCol6[index].width = val
          //   headcolgroupCol7[index].width = val
          // })
        },
        openCallback() {

        }, // è°ƒç”¨æ‰“印之后的回调事件
        closeCallback() {
        } // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）

        // id: 'printMe',
        // popTitle: '打印', // æ‰“印配置页上方标题
        // extraHead: '', // æœ€ä¸Šæ–¹çš„头部文字，附加在head标签上的额外标签,使用逗号分隔
        // preview: '', // æ˜¯å¦å¯åŠ¨é¢„览模式，默认是false（开启预览模式，可以先预览后打印）
        // previewTitle: '', // æ‰“印预览的标题（开启预览模式后出现）,
        // previewPrintBtnLabel: '', // æ‰“印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        // zIndex: '', // é¢„览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        // previewBeforeOpenCallback() {}, // é¢„览窗口打开之前的callback（开启预览模式调用）
        // previewOpenCallback() {}, // é¢„览窗口打开之后的callback（开启预览模式调用）
        // beforeOpenCallback() {}, // å¼€å¯æ‰“印前的回调事件
        // openCallback() {}, // è°ƒç”¨æ‰“印之后的回调事件
        // closeCallback() {}, // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）
        // url: '',
        // standard: '',
        // extraCss: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 å¼„'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 å¼„'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }],
      printContentObj: {}
    }
  },
  mounted() {
    // this.TestClick()

    // function window_onload() {
    //* è¿™å¥ç‰¹åˆ«é‡è¦*：只有在WEB报表客户端程序后，才能进行WebSocket通讯
    // å¦‚æžœWEB报表客户端程序为开机自启动，以下调用应该去掉。更多说明请参考帮助“WEB报表(B/S报表)->WEB报表客户端->部署与安装”部分中与谷歌Chrome浏览器的相关说明
    webapp_urlprotocol_startup() // å¯åŠ¨WEB报表客户端程序，以便侦听接受 WebSocket æ•°æ®
    // }
    // this.$nextTick(() => {
    //   this.bindQRCode()
    // })
  },
  methods: {
    click() {
      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    // addWatermark() {
    //   if (this.firstWatermark) {
    //     console.log(this.firstWatermark)
    //     this.$watermark.set('凯迪制造', this.$refs.watermark)
    //     this.firstWatermark = false
    //   }
    // },
    clickMe() {
    //   this.dialogVisible = true
    //   this.$nextTick(() => {
    //     this.bindQRCode()
    //     this.addWatermark()
    //     console.log(document.getElementById('column0').style.width = '200px', 0)
    //     console.log(document.getElementById('column7'), 7)
    //     console.log(document.getElementById('table'), 2)
    //     console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
    //   })
      this.dialogVisible = true
    },
    colos() {
      this.shows = false
    // bindQRCode() {
    //   if (this.firstbindQRCode) {
    //     const text = 'PO202206280001;Step02'
    //     new QRCode(this.$refs.qrCodeDiv2, {
    //       // text: 'Vue实现生成二维码！',
    //       text: text,
    //       width: 80,
    //       height: 80,
    //       colorDark: '#333333', // äºŒç»´ç é¢œè‰²
    //       colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²
    //       correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H
    //     })
    //     this.firstbindQRCode = false
    //   }
    // },
    async TestClick() {
      const data = {
        mesordercode: 'PO202206280001_4',
        username: getCookie('admin')
      }
      // const res = await MesOrderPrintSearch(data)
      const res = await MesOrderPrintSearch1(data)
      console.log(res, 1)
    },
    ws_ajax_preview() {
      // å‚数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
      var args = {
        type: 'preview',
        showOptionDlg: true,
        report: urlAddRandomNo('../grf/报工产出标签.grf'),

        // report: urlAddRandomNo('https://www.gridreport.cn/demos/grf/1a.grf'),
        // data: 'http://www.gridreport.cn/demos/data/DataCenter.ashx?data=Customer'
        data:
          {
            'recordset': [
              {
                'wo_code': 'PO202206280001_1',
                'partcode': '1403-001-0001',
                'partname': '圆钢F45MnVSφ20',
                'qty': '100',
                'next_stepname': '测试工序2',
                'qrcode': 'PO202206280001_1;Step02'
              },
              {
                'wo_code': 'PO202206280001_1',
                'partcode': '1403-001-0001',
                'partname': '圆钢F45MnVSφ20',
                'qty': '100',
                'next_stepname': '测试工序2',
                'qrcode': 'PO202206280001_1;Step02'
              }
            ]
          }

      }
      console.log(args)
      webapp_ws_ajax_run(args)
    }

  }
}
</script>

<style scoped>
<style media="print">
/*@media print {*/
@page {
  /*size: auto;*/
  size: auto;
  margin: 3mm;
  /*margin: 0mm;*/
  /*padding: 0;*/
}

/*}*/
/*.elTable {*/

/*::v-deep .el-table {*/
/*  margin-top: 10px;*/
/*}*/
/*table {*/
/*  width: 100% !important;*/
/*}*/

/*.el-table__body,*/
/*.el-table__header {*/
/*  width: 100% !important;*/
/*}*/

/*.el-table__body {*/
/*  width: 100% !important;*/
/*}*/

/*}*/

/*/deep/.el-table__body-wrapper::-webkit-scrollbar{*/
/*  width: 0;*/
/*}*/
</style>


 src/views/kb/index2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,42 @@
<template>
  <div>
    <div class="kb_dashboard">
      <div class="kb_header flex_c_c">新凯迪数字车间看板</div>
      <div class="kb_content">
        <div class="kb_left flex_c_s">
          <div class="kb_block">1</div>
          <div class="kb_block">2</div>
        </div>
        <div class="kb_center">3</div>
        <div class="kb_right flex_c_s">
          <div class="kb_block">1</div>
          <div class="kb_block">2</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './kbCommon.css'
export default {
  name: 'Index2',
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

 src/views/kb/kbCommon.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
.kb_dashboard {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-color: lightblue;
  font-size: 20px;
  font-family: Microsoft YaHei;
}

.kb_header {
  background-color: #00a79d;
  height: 90px;
  line-height: 90px;
  font-size: 40px;

}

.kb_content {
  display: flex;
  position: relative;
  height: 990px;
}

.kb_left {
  width: 30%;
  height: 100%;
}

.kb_center {
  width: 40%;
  background-color: #00a79d;
  height: 100%;
}

.kb_right {
  width: 30%;
  height: 100%;
}

.flex_c_c {
  display: flex;
  justify-content: center;
  align-content: center;
}

.flex_c_s {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /*align-content: center;*/
}

.kb_block{
  display: flex;
  align-content: center;
  justify-content: center;
  width: 556px;
  height: 400px;
  line-height: 400px;
  background-image: linear-gradient(to bottom right, red , yellow);
  /*background-image: repeating-radial-gradient(red, yellow 10%, green 15%);*/

  /*background-color: #5a5e66;*/
  margin: 10px;
}

 src/views/scgl/gd.vue

@@ -563,7 +563,7 @@
import { PartSelect } from '@/api/zzmx'
import { handleDatetime } from '@/utils/global'
import { getCookie } from '@/utils/auth'
import { MesOrderPrintSearch1 } from '@/api/utils'
import { MesOrderPrintSearch1, PrintOrder } from '@/api/utils'
import { urlAddRandomNo, webapp_ws_ajax_run, webapp_ws_autoupdate } from '@/utils/grwebapp'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
@@ -990,10 +990,12 @@
    // æ´¾å‘打印
    async sendPrint() {
      const data = {
        username: getCookie('admin'),
        // username: getCookie('admin'),
        username: getCookie('username'),
        mesordercode: this.dialogForm.mesordercode
      }
      const res = await MesOrderPrintSearch1(data)
      // const res = await MesOrderPrintSearch1(data)
      const res = await PrintOrder(data)
      if (res.code === '200') {
        // å‚数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
        var args = {