index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div>
  3. <el-card class="!border-none" shadow="never">
  4. <el-alert
  5. type="warning"
  6. title="温馨提示:小票打印机目前仅支持芯烨云打印机"
  7. :closable="false"
  8. show-icon
  9. />
  10. </el-card>
  11. <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
  12. <div>
  13. <el-button v-perms="['article:cate:add']" type="primary" @click="handleAdd()">
  14. <template #icon>
  15. <icon name="el-icon-Plus"/>
  16. </template>
  17. 新增打印机
  18. </el-button>
  19. </div>
  20. <el-table class="mt-4" size="large" :data="pager.lists">
  21. <el-table-column type="index" width="55"/>
  22. <el-table-column label="打印机名称" prop="name" min-width="80"/>
  23. <el-table-column
  24. label="设备类型"
  25. prop="type"
  26. min-width="120"
  27. :formatter="(item) => (item.type == '1' ? '芯烨云' : '未知')"
  28. />
  29. <el-table-column label="终端号" prop="finalNumber" min-width="120"/>
  30. <!-- <el-table-column-->
  31. <!-- label="小票模板"-->
  32. <!-- prop="mode"-->
  33. <!-- min-width="120"-->
  34. <!-- :formatter="(item) => (item.mode == '1' ? '模板01' : '未知')"-->
  35. <!-- />-->
  36. <el-table-column label="来单语音" prop="timbre" min-width="80" :formatter="timbreFormatter"/>
  37. <el-table-column label="打印机音量" prop="volume" min-width="80" :formatter="volumeFormatter"/>
  38. <el-table-column label="状态" min-width="80">
  39. <template #default="{ row }">
  40. <el-switch
  41. v-perms="['article:cate:change']"
  42. v-model="row.status"
  43. :active-value="1"
  44. :inactive-value="0"
  45. @change="changeStatus(row.id,row.status)"
  46. />
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="操作" min-width="180" fixed="right">
  50. <template #default="{ row }">
  51. <el-button
  52. v-perms="['article:cate:edit']"
  53. type="primary"
  54. link
  55. @click="handleEdit(row)"
  56. >
  57. 编辑
  58. </el-button>
  59. <el-button
  60. v-perms="['article:cate:edit']"
  61. type="primary"
  62. link
  63. @click="handlePrint(row)"
  64. >
  65. 测试打印机
  66. </el-button>
  67. <el-button
  68. v-perms="['article:cate:del']"
  69. type="danger"
  70. link
  71. @click="handleDelete(row.id)"
  72. >
  73. 删除
  74. </el-button>
  75. </template>
  76. </el-table-column>
  77. </el-table>
  78. <div class="flex justify-end mt-4">
  79. <pagination v-model="pager" @change="getLists"/>
  80. </div>
  81. </el-card>
  82. <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false"/>
  83. </div>
  84. </template>
  85. <script lang="ts" setup>
  86. // import {articleCateDelete, articleCateStatus} from '@/api/article'
  87. import {delPrinter,editPrinter} from '@/api/shop'
  88. import {usePaging} from '@/hooks/usePaging'
  89. import feedback from '@/utils/feedback'
  90. import EditPopup from './edit.vue'
  91. import {getPrinterList} from '@/api/shop'
  92. import {timeFormat} from '@/utils/util'
  93. const editRef = shallowRef<InstanceType<typeof EditPopup>>()
  94. const showEdit = ref(false)
  95. const {pager, getLists} = usePaging({
  96. fetchFun: getPrinterList
  97. })
  98. const handleAdd = async () => {
  99. showEdit.value = true
  100. await nextTick()
  101. editRef.value?.open('add')
  102. }
  103. const handleEdit = async (data: any) => {
  104. showEdit.value = true
  105. await nextTick()
  106. editRef.value?.open('edit')
  107. editRef.value?.getDetail(data)
  108. }
  109. const timbreFormatter = (row: any) => {
  110. if (row.timbre == 0) {
  111. return '真人语音'
  112. } else if (row.timbre == 3) {
  113. return '嘀嘀声'
  114. } else if (row.timbre == 4){
  115. return '静音'
  116. } else {
  117. return '真人语音'
  118. }
  119. }
  120. const volumeFormatter = (row: any) => {
  121. if (row.volume == 0) {
  122. return '大'
  123. } else if (row.volume == 1) {
  124. return '中'
  125. } else if (row.volume == 2) {
  126. return '小'
  127. } else if (row.volume == 3) {
  128. return '关闭'
  129. } else {
  130. return '大'
  131. }
  132. }
  133. const handleDelete = async (id: number) => {
  134. await feedback.confirm('确定要删除?')
  135. // await articleCateDelete({id})
  136. await delPrinter({id})
  137. feedback.msgSuccess('删除成功')
  138. getLists()
  139. }
  140. const changeStatus = async (id: number,status: any) => {
  141. try {
  142. await editPrinter({id,status})
  143. feedback.msgSuccess('修改成功')
  144. getLists()
  145. } catch (error) {
  146. getLists()
  147. }
  148. }
  149. const handlePrint = async (row: any) => {
  150. const res = await feedback.request({
  151. url: '/api/printer/print',
  152. method: 'post',
  153. data: {
  154. id: row.id,
  155. brandId: row.brandId,
  156. houseId: row.houseId,
  157. orderNo: '123456789987654321',
  158. deskNo: '大厅',
  159. orderSource: '扫码支付',
  160. orderTime: timeFormat(Date.now(), 'yyyy年mm月dd日 hh时MM分'),
  161. remark: '测试打印机',
  162. userNum: '4',
  163. amount: '30',
  164. discount: '10',
  165. orderDishes: [
  166. {'title': '测试菜品1', 'num': '1', 'summary': '10'},
  167. {'title': '测试菜品2', 'num': '1', 'summary': '18'},
  168. {'title': '测试菜品3', 'num': '1', 'summary': '12'}
  169. ]
  170. }
  171. })
  172. if (res.code == 200) {
  173. feedback.msgSuccess('测试打印成功')
  174. } else {
  175. feedback.msgError('测试打印失败')
  176. }
  177. }
  178. getLists()
  179. </script>