yuantianjiao 6 years ago
parent
commit
d558fc1641

+ 1
- 0
package.json View File

@@ -29,6 +29,7 @@
29 29
     "vuex": "^3.0.1"
30 30
   },
31 31
   "devDependencies": {
32
+    "@antv/g2": "^3.2.7",
32 33
     "autoprefixer": "^7.1.2",
33 34
     "babel-core": "^6.22.1",
34 35
     "babel-eslint": "^8.2.1",

+ 72
- 24
src/pages/system/newOrder/newOrderList/index.vue View File

@@ -10,7 +10,7 @@
10 10
     </div>
11 11
     <div class="order-list-box">
12 12
       <div v-for="(item,index) in list" :key="index">
13
-        <div class="print-area">
13
+        <div class="print-area" :class="'item' + index">
14 14
           <div style="padding:25px 20px 5px;border-bottom:2px solid #cccccc;">
15 15
             <i class="iconfont icon-yinchenglogo" style="font-size:70px;color:red;position: relative;bottom: 20px;margin-right:10px;"></i>
16 16
             <div style="display:inline-block;">
@@ -41,12 +41,34 @@
41 41
               <span style="display:inline-block;width:20%;text-align:right">x 2</span>
42 42
             </div>
43 43
           </div>
44
+          <div style="padding:10px 20px 5px;border-bottom:1px solid #cccccc;">
45
+            <div>卡布奇诺</div>
46
+            <div style="margin-top:8px;">
47
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">热</span>
48
+              <span style="display:inline-block;width:20%;text-align:right">x 1</span>
49
+            </div>
50
+            <div style="margin-top:8px;">
51
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">冷</span>
52
+              <span style="display:inline-block;width:20%;text-align:right">x 2</span>
53
+            </div>
54
+          </div>
55
+          <div style="padding:10px 20px 5px;border-bottom:1px solid #cccccc;">
56
+            <div>卡布奇诺</div>
57
+            <div style="margin-top:8px;">
58
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">热</span>
59
+              <span style="display:inline-block;width:20%;text-align:right">x 1</span>
60
+            </div>
61
+            <div style="margin-top:8px;">
62
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">冷</span>
63
+              <span style="display:inline-block;width:20%;text-align:right">x 2</span>
64
+            </div>
65
+          </div>
44 66
           <div style="padding:10px 20px;border-bottom:1px solid #cccccc">备注:请赶快制作</div>
45 67
           <div style="padding:10px 20px;">下单人:xxxxx</div>
46 68
         </div>
47 69
         <div class="btns">
48
-          <span>取消</span>
49
-          <span>确定</span>
70
+          <span @click="cancel">取消</span>
71
+          <span @click="submit(`item${index}`)">确定</span>
50 72
         </div>
51 73
       </div>
52 74
     </div>
@@ -54,6 +76,9 @@
54 76
 </template>
55 77
 
56 78
 <script>
79
+import { getLodop } from '@/util/LodopFuncs'
80
+const baseUrl = process.env.NODE_ENV === 'development' ? 'ws://192.168.0.148:8078/admin' : 'ws://cdkj.ycjcjy.com/admin' // 'ws://cdkj.ycjcjy.com/admin'
81
+var LODOP
57 82
 export default {
58 83
   name: '',
59 84
   data () {
@@ -65,37 +90,60 @@ export default {
65 90
         pagesize: 10, // 请求数据量
66 91
       },
67 92
       currentList: [],
68
-      list: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
93
+      list: [1, 2, 3, 4, 5]
69 94
     }
70 95
   },
71 96
   components: {
72 97
   },
73 98
   mounted () {
74
-    this.$nextTick(function () {
75
-      this.getList()
76
-    })
99
+
77 100
   },
78 101
   methods: {
79
-    FormatDate (date) {
80
-      return this.toolClass.dateFormat(date)
102
+    submit (cl) {
103
+      this.printPdf(cl)
81 104
     },
82
-    handleCurrentChange (val) {
83
-      this.getList()
105
+    printPdf (cl) {
106
+      this.CreateOneFormPage(cl)
107
+      //        LODOP.PRINT();
108
+      LODOP.PREVIEW()
109
+    },
110
+    CreateOneFormPage (cl) {
111
+      LODOP = getLodop()
112
+      LODOP.PRINT_INIT('订单')
113
+      LODOP.SET_PRINT_PAGESIZE(0, document.getElementsByClassName(cl)[0].offsetWidth * 10 / 4 + 100, document.getElementsByClassName(cl)[0].offsetHeight * 10 / 4 + 120, 'CreateCustomPage')
114
+      LODOP.ADD_PRINT_HTM(0, 0, document.getElementsByClassName(cl)[0].offsetWidth, document.getElementsByClassName(cl)[0].offsetHeight, document.getElementsByClassName(cl)[0].innerHTML)
115
+    },
116
+    cancel () {
117
+
84 118
     },
85
-    searchList (key) { // 搜索列表
86
-      this.postData.phone = key
87
-      this.postData.page = 1
88
-      this.getList()
119
+    initWebSocket (code) {
120
+      const wsuri = `${baseUrl}/websocket/${code}`
121
+      try {
122
+        this.websock = new WebSocket(wsuri)
123
+      } catch (e) {
124
+        console.log(e)
125
+      }
126
+      this.websock.onmessage = this.websocketonmessage
127
+      this.websock.onclose = this.websocketclose
89 128
     },
90
-    getList () {
91
-      this.$ajax(this.$api.dataStatistics.getCustomerList.url, {
92
-        method: this.$api.dataStatistics.getCustomerList.method,
93
-        queryData: this.postData
94
-      }).then(res => {
95
-        this.currentList = res.list
96
-        this.postData.page = res.page
97
-        this.total = res.pagenum
98
-      })
129
+    websocketonmessage (e) {
130
+      const redata = JSON.parse(e.data)
131
+      if (redata.code === '1') {
132
+        this.$toast({
133
+          message: '核销成功',
134
+          position: 'center',
135
+          duration: 1000
136
+        })
137
+        setTimeout(() => {
138
+          this.$router.go(-1)
139
+        }, 1000)
140
+      } else {
141
+        // this.$toast({
142
+        //   message: redata.message,
143
+        //   position: 'center',
144
+        //   duration: 1000
145
+        // })
146
+      }
99 147
     }
100 148
   }
101 149
 }

+ 7
- 4
src/pages/system/newOrder/newOrderList/page.scss View File

@@ -2,14 +2,17 @@
2 2
   padding: 50px;
3 3
   border-radius: 3px;
4 4
   overflow: scroll;
5
-  width: 95%;
6
-  height: 100%;
5
+  width: auto;
6
+  height: 600px;
7
+  display: flex;
8
+  flex-flow: column wrap;
9
+  margin-top: 10px;
7 10
   >div{
8 11
     display: inline-block;
9 12
     width:300px;
10
-    height:400px;
11
-    margin:10px;
13
+    margin:20px;
12 14
     box-shadow: 0px 2px 10px 0px rgba(193, 204, 217, 0.5);
15
+    padding-bottom: 10px;
13 16
   }
14 17
   .btns{
15 18
     display: flex;

+ 160
- 0
src/util/LodopFuncs.js View File

@@ -0,0 +1,160 @@
1
+/* eslint-disable */
2
+var CreatedOKLodop7766 = null, CLodopIsLocal
3
+
4
+// ====判断是否需要 Web打印服务CLodop:===
5
+// ===(不支持插件的浏览器版本需要用它)===
6
+export function needCLodop () {
7
+    try {
8
+        let ua = navigator.userAgent
9
+        if (ua.match(/Windows\sPhone/i)) {
10
+            return true
11
+        }
12
+        if (ua.match(/iPhone|iPod/i)) {
13
+            return true
14
+        }
15
+        if (ua.match(/Android/i)) {
16
+            return true
17
+
18
+        }
19
+        if (ua.match(/Edge\D?\d+/i)) {
20
+            return true
21
+        }
22
+
23
+        let verTrident = ua.match(/Trident\D?\d+/i)
24
+        let verIE = ua.match(/MSIE\D?\d+/i)
25
+        let verOPR = ua.match(/OPR\D?\d+/i)
26
+        let verFF = ua.match(/Firefox\D?\d+/i)
27
+        let x64 = ua.match(/x64/i)
28
+        if ((!verTrident) && (!verIE) && (x64)) {
29
+            return true
30
+        }
31
+        else if (verFF) {
32
+            verFF = verFF[0].match(/\d+/)
33
+            if ((verFF[0] >= 41) || (x64)) {
34
+                return true
35
+            }
36
+        } else if (verOPR) {
37
+            verOPR = verOPR[0].match(/\d+/)
38
+            if (verOPR[0] >= 32) {
39
+                return true
40
+            }
41
+
42
+        } else if ((!verTrident) && (!verIE)) {
43
+            let verChrome = ua.match(/Chrome\D?\d+/i)
44
+            if (verChrome) {
45
+                verChrome = verChrome[0].match(/\d+/)
46
+                if (verChrome[0] >= 41) {
47
+                    return true
48
+                }
49
+            }
50
+        }
51
+        return false
52
+    } catch (err) {
53
+        return true
54
+    }
55
+}
56
+
57
+// ====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000)避免其中某个被占用:====
58
+if (needCLodop()) {
59
+    let src1 = 'http://localhost:8000/CLodopfuncs.js?priority=1'
60
+    let src2 = 'http://localhost:18000/CLodopfuncs.js?priority=0'
61
+    let head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
62
+    let oscript = document.createElement('script')
63
+    oscript.src = src1
64
+    head.insertBefore(oscript, head.firstChild)
65
+    oscript = document.createElement('script')
66
+    oscript.src = src2
67
+    head.insertBefore(oscript, head.firstChild)
68
+    CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i))
69
+}
70
+
71
+// ====获取LODOP对象的主过程:====
72
+export function getLodop (oOBJECT, oEMBED) {
73
+    let strHtmInstall = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
74
+    let strHtmUpdate = `<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>`
75
+    let strHtm64_Install = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
76
+    let strHtm64_Update = `<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>`
77
+    let strHtmFireFox = `<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>`
78
+    let strHtmChrome = `<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>`
79
+    let strCLodopInstall_1 = `<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>`
80
+    let strCLodopInstall_2 = `<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)`
81
+    let strCLodopInstall_3 = `,成功后请刷新本页面。</font>`
82
+    // let strCLodopUpdate = `<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>`
83
+    let LODOP
84
+    try {
85
+        let ua = navigator.userAgent
86
+        let isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
87
+        if (needCLodop()) {
88
+            try {
89
+                LODOP = getCLodop()
90
+            } catch (err) { }
91
+            if (!LODOP && document.readyState !== 'complete') {
92
+                console.log(LODOP)
93
+                alert('网页还没下载完毕,请稍等一下再操作.')
94
+                return
95
+            }
96
+            if (!LODOP) {
97
+                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
98
+                return
99
+            } else {
100
+                // if (CLODOP.CVERSION < '3.0.4.8') {
101
+                //     document.body.innerHTML = strCLodopUpdate + document.body.innerHTML
102
+                // }
103
+                if (oEMBED && oEMBED.parentNode) {
104
+                    oEMBED.parentNode.removeChild(oEMBED)
105
+                }
106
+
107
+                if (oOBJECT && oOBJECT.parentNode) {
108
+                    oOBJECT.parentNode.removeChild(oOBJECT)
109
+                }
110
+            }
111
+        } else {
112
+            let is64IE = isIE && !!(ua.match(/x64/i))
113
+            // =====如果页面有Lodop就直接使用,没有则新建:==========
114
+            if (oOBJECT || oEMBED) {
115
+                if (isIE) {
116
+                    LODOP = oOBJECT
117
+                } else {
118
+                    LODOP = oEMBED
119
+                }
120
+            } else if (!CreatedOKLodop7766) {
121
+                LODOP = document.createElement('object')
122
+                LODOP.setAttribute('width', 0)
123
+                LODOP.setAttribute('height', 0)
124
+                LODOP.setAttribute('style', 'position:absoluteleft:0pxtop:-100pxwidth:0pxheight:0px')
125
+                if (isIE) {
126
+                    LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA')
127
+                } else {
128
+                    LODOP.setAttribute('type', 'application/x-print-lodop')
129
+                }
130
+                document.documentElement.appendChild(LODOP)
131
+                CreatedOKLodop7766 = LODOP
132
+            } else {
133
+                LODOP = CreatedOKLodop7766
134
+            }
135
+            // =====Lodop插件未安装时提示下载地址:==========
136
+            if ((!LODOP) || (!LODOP.VERSION)) {
137
+                if (ua.indexOf('Chrome') >= 0) {
138
+                    document.body.innerHTML = strHtmChrome + document.body.innerHTML
139
+                }
140
+                if (ua.indexOf('Firefox') >= 0) {
141
+                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML
142
+                }
143
+                document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML
144
+                return LODOP
145
+            }
146
+        }
147
+        if (LODOP.VERSION < '6.2.2.3') {
148
+            if (!needCLodop()) {
149
+                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML
150
+            }
151
+            return LODOP
152
+        }
153
+        // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
154
+
155
+        // =======================================================
156
+        return LODOP
157
+    } catch (err) {
158
+        alert('getLodop出错:' + err)
159
+    }
160
+}