index.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <div class="subPage">
  3. <div class="system-table-search">
  4. <div class="flex-h">
  5. <div class="flex-item flex-h">
  6. <el-button size="mini" v-if="!businessStatus" type="danger" @click="open">营业</el-button>
  7. <el-button size="mini" v-else type="submit" @click="close">歇业</el-button>
  8. </div>
  9. <ul>
  10. <li>
  11. <el-select v-model="caseid" placeholder="请选择案场">
  12. <el-option
  13. v-for="item in cases"
  14. :key="item.CaseId"
  15. :label="item.CaseName"
  16. :value="item.CaseId">
  17. </el-option>
  18. </el-select>
  19. </li>
  20. </ul>
  21. <el-button
  22. size="mini"
  23. type="primary" @click="init">搜索</el-button>
  24. </div>
  25. <div class="moreFilter"></div>
  26. </div>
  27. <div class="order-list-box">
  28. <div style='position:relative;' v-for="(item,index) in list" :key="index">
  29. <div>
  30. <div style="padding:25px 20px 5px;border-bottom:2px solid #cccccc;">
  31. <i class="iconfont icon-yinchenglogo" style="font-size:70px;color:red;position: relative;bottom: 20px;margin-right:10px;"></i>
  32. <div style="display:inline-block;">
  33. <span style="display:block;font-size:20px;font-weight:700;width:180px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.AreaName + item.TableNo}}</span>
  34. <span style="display:block;margin-top:10px">下单时间:{{toolClass.dateFormat(item.CreateDate)}}</span>
  35. <span style="display:block;margin-top:10px">已等待:<span style="color:red;font-weight:700;">{{leftTimes[item.OrdersId]}}</span></span>
  36. </div>
  37. </div>
  38. <div style="padding:10px 20px 5px;border-bottom:1px solid #cccccc;" v-for='(item1,index1) in item.Goods' :key='index1'>
  39. <div style="display:flex;justify-content: space-between;align-items: center;padding-right: 10px;"><span>{{item1.GoodsName}}</span><span style="display:inline-block;width:20%;text-align:right" v-if='!item1.SpecName'>× {{item1.Number}}</span></div>
  40. <div style="margin-top:8px;" v-if='item1.SpecName'>
  41. <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">{{item1.SpecName}}</span>
  42. <span style="display:inline-block;width:20%;text-align:right">× {{item1.Number}}</span>
  43. </div>
  44. </div>
  45. <!-- <div style="padding:10px 20px;border-bottom:1px solid #cccccc">备注:{{item.Remark}}</div> -->
  46. <div style="padding:10px 20px;" @click="printPdf(`item${index}`)">下单人:{{item.UserName}}</div>
  47. </div>
  48. <div class="print-area" :class="'item' + index" style="width:180px;">
  49. <div style="padding:0px 10px 5px;border-bottom:2px solid #cccccc;">
  50. <div style="display:inline-block;">
  51. <img class="topIcon" style="display:block;width:60%;margin:0 0 20px 0px;" src="http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/111101940020.png" alt="">
  52. <span style="display:block;font-size:20px;font-weight:700;text-align: center;"> <img width='25px' height="25px" :src='item.AreaIconWhite' alt=""> {{item.AreaName}}</span>
  53. </div>
  54. </div>
  55. <div style="padding:10px 10px 5px;border-bottom:1px solid #cccccc;" v-for='(item1,index1) in item.Goods' :key='index1'>
  56. <div style="font-size:12px;"><span style="display:inline-block;width:75%;text-align:left;">{{item1.GoodsName}}</span><span style="display:inline-block;width:22%;text-align:right;font-size:12px;" v-if='!item1.SpecName'>× {{item1.Number}}</span></div>
  57. <div style="margin-top:8px;" v-if='item1.SpecName'>
  58. <span style="display:inline-block;width:75%;text-align:left;color:#cccccc;font-size:12px;">{{item1.SpecName}}</span>
  59. <span style="display:inline-block;width:20%;text-align:right;font-size:12px;">× {{item1.Number}}</span>
  60. </div>
  61. </div>
  62. <div style="padding:10px 10px 5px;border-bottom:1px solid #cccccc;">
  63. <div style="font-size:12px;">下单人:{{item.UserName}}</div>
  64. <span style="display:block;margin-top:10px;font-size:12px;">下单时间:{{toolClass.dateFormat(item.CreateDate)}}</span>
  65. </div>
  66. <!-- <div style="padding:10px 10px;font-size:12px;">备注:{{item.Remark}}</div> -->
  67. <div style="text-align: right;font-size: 12px;">城的空间.诚咖啡</div>
  68. <div style="height:10px"></div>
  69. </div>
  70. <div class="btns">
  71. <span @click="cancel(item.OrdersId)">取消</span>
  72. <span @click="submit(item.OrdersId)">确定</span>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import { createNamespacedHelpers, mapState, mapActions } from 'vuex'
  80. import { getLodop } from '@/util/LodopFuncs'
  81. import { formatTimeBySeconds } from '@/util/util'
  82. const { mapState: mapOrderState, mapActions: mapOrderActions } = createNamespacedHelpers('goodsorder')
  83. var LODOP
  84. export default {
  85. name: '',
  86. data () {
  87. return {
  88. total: 0,
  89. postData: { // 表格搜索条件
  90. phone: '', // 手机号
  91. page: 1, // 当前页码
  92. pagesize: 10, // 请求数据量
  93. },
  94. currentList: [],
  95. leftTimes: {},
  96. business: false,
  97. caseid: '',
  98. interval: () => { }
  99. }
  100. },
  101. computed: {
  102. ...mapOrderState({
  103. list: x => (x.ordersList || {}).list || [],
  104. businessStatus: x => x.businessStatus
  105. }),
  106. ...mapState({
  107. cases: x => x.app.cases.list,
  108. defaultCaseId: x => x.app.cases.default,
  109. userInfo: x => x.app.user
  110. }),
  111. CaseId: {
  112. get () {
  113. return this.caseid || this.defaultCaseId
  114. },
  115. set (val) {
  116. this.caseid = val
  117. }
  118. }
  119. },
  120. created () {
  121. this.updateSystemInfo().then(() => {
  122. if (this.caseid) {
  123. this.init()
  124. }
  125. })
  126. },
  127. methods: {
  128. init () {
  129. if (!this.caseid) {
  130. this.$message({
  131. type: 'info',
  132. message: '请先选择案场'
  133. })
  134. return
  135. }
  136. clearInterval(this.interval)
  137. this.GetOrdersList({ caseid: this.caseid }).then(() => {
  138. this.getBusinessStatus(this.caseid).then(() => {
  139. if (this.businessStatus) {
  140. this.initWebSocket()
  141. }
  142. })
  143. this.interval = setInterval(() => {
  144. const now = (new Date()).valueOf()
  145. this.leftTimes = this.list.reduce((acc, it) => {
  146. const showDT = now - ((new Date(it.CreateDate)).valueOf())
  147. return { ...acc, [`${it.OrdersId}`]: formatTimeBySeconds(showDT) }
  148. }, {})
  149. }, 1000)
  150. })
  151. },
  152. timeOut (c) {
  153. let cTime = new Date(c).valueOf()
  154. let time = new Date().valueOf()
  155. let s = parseInt((time - cTime) / 1000)
  156. let m = parseInt(s / 60)
  157. s = s - m * 60
  158. m = m < 10 ? '0' + m : m
  159. s = s < 10 ? '0' + s : s
  160. return `${m} : ${s}`
  161. },
  162. ...mapOrderActions([
  163. 'GetOrdersList',
  164. 'openBusiness',
  165. 'closeBusiness',
  166. 'checkOrder',
  167. 'cancelOrder',
  168. 'getBusinessStatus',
  169. 'updateList'
  170. ]),
  171. ...mapActions([
  172. 'updateSystemInfo'
  173. ]),
  174. submit (id) {
  175. this.$confirm('确定完成此饮品?', '提示', {
  176. confirmButtonText: '确定',
  177. cancelButtonText: '取消',
  178. type: 'warning'
  179. }).then((res) => {
  180. this.checkOrder({ id: id }).then(() => {
  181. this.$message({
  182. type: 'success',
  183. message: '确认订单成功'
  184. })
  185. this.init()
  186. })
  187. }).catch((res) => {
  188. this.$message({
  189. type: 'info',
  190. message: '已取消操作'
  191. })
  192. })
  193. },
  194. cancel (id) {
  195. this.$confirm('确定取消此饮品?', '提示', {
  196. confirmButtonText: '确定',
  197. cancelButtonText: '取消',
  198. type: 'warning'
  199. }).then((res) => {
  200. this.cancelOrder({ id: id }).then(() => {
  201. this.$message({
  202. type: 'success',
  203. message: '取消订单成功'
  204. })
  205. this.init()
  206. })
  207. }).catch((res) => {
  208. this.$message({
  209. type: 'info',
  210. message: '已取消操作'
  211. })
  212. })
  213. },
  214. printPdf (cl) {
  215. this.CreateOneFormPage(cl)
  216. LODOP.PRINT()
  217. // LODOP.PREVIEW()
  218. },
  219. CreateOneFormPage (cl) {
  220. LODOP = getLodop()
  221. LODOP.PRINT_INIT('订单')
  222. LODOP.SET_PRINT_PAGESIZE(3, 480, 40, '')
  223. LODOP.ADD_PRINT_HTM(0, 0, document.getElementsByClassName(cl)[0].offsetWidth, document.getElementsByClassName(cl)[0].offsetHeight, document.getElementsByClassName(cl)[0].innerHTML)
  224. },
  225. initWebSocket () {
  226. console.log(this.user)
  227. let caseid = this.caseid
  228. let id = this.userInfo.UserId
  229. const wsuri = `${window.location.origin.replace('http', 'ws')}/api-v2/common/MQ/websocket/${caseid}/${id}?token=${localStorage.getItem('JWT')}`
  230. // const wsuri = `ws://192.168.0.11/api/guest/MQ/websocket/${caseid}/${id}`
  231. try {
  232. this.websock = new WebSocket(wsuri)
  233. } catch (e) {
  234. console.log(e)
  235. }
  236. this.websock.onopen = console.log
  237. this.websock.onmessage = this.websocketonmessage
  238. this.websock.onclose = console.log
  239. },
  240. websocketonmessage (e) {
  241. console.log(e)
  242. let lengthOld = this.list.length
  243. let lengthNew = JSON.parse(e.data).data.refreshOnlineGoodsOrders.length
  244. let newData = JSON.parse(e.data).data.refreshOnlineGoodsOrders.slice(lengthOld - lengthNew)
  245. this.updateList(JSON.parse(e.data).data.refreshOnlineGoodsOrders).then(() => {
  246. for (let i = 0; i < newData.length; i++) {
  247. let index = newData[i].indexOf(this.list)
  248. this.printPdf(`item${index}`)
  249. }
  250. })
  251. },
  252. open () {
  253. if (!this.caseid) {
  254. this.$message({
  255. type: 'info',
  256. message: '请先选择案场'
  257. })
  258. return
  259. }
  260. this.openBusiness(this.caseid).then(() => {
  261. this.init()
  262. })
  263. },
  264. close () {
  265. if (!this.caseid) {
  266. this.$message({
  267. type: 'info',
  268. message: '请先选择案场'
  269. })
  270. return
  271. }
  272. this.closeBusiness(this.caseid)
  273. }
  274. }
  275. }
  276. </script>
  277. <!-- Add "scoped" attribute to limit CSS to this component only -->
  278. <style lang="scss" scoped>
  279. @import "page.scss";
  280. </style>