electronicScale.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <a-card class="electronicScale-container" :bordered="false">
  3. <!-- 搜索框 -->
  4. <div class="electronicScale-container-searchForm">
  5. <a-form-model :model="searchForm" layout="inline" ref="searchForm" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="24">
  7. <a-col :xs="24" :sm="12" :md="8" :lg="6">
  8. <a-form-model-item label="设备MAC码" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
  9. <a-input v-model="searchForm.macAddress" placeholder="请输入设备MAC码" :maxLength="12" allowClear id="electronicScale-macAddress"/>
  10. </a-form-model-item>
  11. </a-col>
  12. <a-col :xs="24" :sm="12" :md="8" :lg="6">
  13. <a-button class="handle-btn serach-btn" type="primary" @click="$refs.table.refresh(true)" id="electronicScale-refresh">查询</a-button>
  14. <a-button class="handle-btn" type="" @click="handleReset" id="electronicScale-handleReset">重置</a-button>
  15. </a-col>
  16. </a-row>
  17. </a-form-model>
  18. </div>
  19. <!-- 新增 -->
  20. <div class="electronicScale-container-add"><a-button type="primary" icon="plus" @click="openModal" id="electronicScale-openModal" v-hasPermission="'B_electronicScale_add'">新增</a-button></div>
  21. <!-- 合计 -->
  22. <a-alert type="info" showIcon style="margin-bottom:15px">
  23. <div class="ftext" slot="message">
  24. 总计
  25. <span>{{ totalNum }} 个</span>
  26. </div>
  27. </a-alert>
  28. <!-- 列表 -->
  29. <s-table ref="table" :rowKey="record => record.id" :columns="columns" :data="loadData" bordered>
  30. <span slot="action" slot-scope="text, record">
  31. <a-icon type="qrcode" title="二维码" class="actionBtn icon-green" @click="getQrCode(record)" />
  32. <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" v-hasPermission="'B_electronicScale_edit'"/>
  33. <a-icon type="delete" title="删除" class="actionBtn icon-red" @click="delect(record)" v-hasPermission="'B_electronicScale_del'"/>
  34. </span>
  35. <span v-if="!($hasPermissions('B_electronicScale_edit') && $hasPermissions('B_electronicScale_del'))">--</span>
  36. </s-table>
  37. <!-- 新增/编辑弹窗 -->
  38. <addElectronicScale :visible="isOpenModal" :id="itemId" :deviceCode="itemDeviceCode" @refresh="refreshTable" @close="isOpenModal = false"></addElectronicScale>
  39. <!-- 查看小程序码 -->
  40. <a-modal
  41. class="qrCodeModal"
  42. title="查看MAC地址二维码"
  43. :width="400"
  44. :footer="null"
  45. :shName="shName"
  46. :destroyOnClose="true"
  47. @cancel="isQrCodeModal = false"
  48. v-model="isQrCodeModal">
  49. <img :src="qrCode" width="300" height="300" class="qrCode" />
  50. <a-button type="primary" class="downQrCode" @click="downloadCode">下载二维码</a-button>
  51. </a-modal>
  52. </a-card>
  53. </template>
  54. <script>
  55. import { STable } from '@/components'
  56. import addElectronicScale from './addElectronicScale.vue'
  57. import { getDeviceList, delectDevice } from '@/api/electronicScale.js'
  58. import QRCode from 'qrcode'
  59. export default {
  60. components: { STable, addElectronicScale },
  61. data () {
  62. return {
  63. searchForm: {
  64. macAddress: ''
  65. },
  66. isOpenModal: false, // 默认弹窗关闭
  67. itemDeviceCode: '', // 编辑行设备编号
  68. itemId: '',
  69. totalNum: '',
  70. isQrCodeModal: false,
  71. shName: '',
  72. qrCode: '',
  73. // 列表表头
  74. columns: [
  75. { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  76. { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
  77. { title: '设备MAC码', dataIndex: 'macAddress', width: 100, align: 'center' },
  78. {
  79. title: '设备名称',
  80. dataIndex: 'deviceName',
  81. width: 100,
  82. align: 'center',
  83. customRender: text => {
  84. return text || '--'
  85. }
  86. },
  87. {
  88. title: '设备编号',
  89. dataIndex: 'deviceCode',
  90. width: 100,
  91. align: 'center',
  92. customRender: text => {
  93. return text || '--'
  94. }
  95. },
  96. {
  97. title: '设备型号',
  98. dataIndex: 'deviceModel',
  99. width: 100,
  100. align: 'center',
  101. customRender: text => {
  102. return text || '--'
  103. }
  104. },
  105. {
  106. title: '生产厂家',
  107. dataIndex: 'manufacturer',
  108. width: 100,
  109. align: 'center',
  110. customRender: text => {
  111. return text || '--'
  112. }
  113. },
  114. { title: '操作', dataIndex: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' } }
  115. ],
  116. // 加载数据方法 必须为 Promise 对象
  117. loadData: parameter => {
  118. return getDeviceList(Object.assign(parameter, this.searchForm, { deviceType: 'STEELYARD' })).then(res => {
  119. if (res.status == 200) {
  120. const no = (res.data.pageNo - 1) * res.data.pageSize
  121. for (let i = 0; i < res.data.list.length; i++) {
  122. const _item = res.data.list[i]
  123. _item.no = no + i + 1
  124. }
  125. this.totalNum = res.data.count
  126. return res.data
  127. } else {
  128. this.totalNum = 0
  129. }
  130. })
  131. }
  132. }
  133. },
  134. methods: {
  135. // 下载二维码
  136. downloadCode (item) {
  137. const link = document.createElement('a')
  138. link.href = this.qrCode
  139. link.download = this.shName + '.png'
  140. link.click()
  141. },
  142. // 查看二维码
  143. getQrCode (item) {
  144. const _this = this
  145. const opts = {
  146. errorCorrectionLevel: 'H',
  147. type: 'image/jpeg',
  148. quality: 0.3,
  149. margin: 1.5,
  150. width: 240,
  151. color: {
  152. dark: '#000000',
  153. light: '#ffffff'
  154. }
  155. }
  156. const url = item.macAddress
  157. _this.shName = item.deviceName
  158. if (url) {
  159. QRCode.toDataURL(url, opts, function (err, url) {
  160. _this.qrCode = url
  161. _this.isQrCodeModal = true
  162. })
  163. }
  164. },
  165. // 重置
  166. handleReset () {
  167. this.searchForm = {
  168. macAddress: ''
  169. }
  170. this.$refs.table.refresh(true)
  171. },
  172. // 新增
  173. openModal () {
  174. this.itemId = ''
  175. this.itemDeviceCode = ''
  176. this.isOpenModal = true
  177. },
  178. // 编辑
  179. handleEdit (record) {
  180. this.itemId = record.id
  181. this.itemDeviceCode = record.srcDeviceCode
  182. this.isOpenModal = true
  183. },
  184. // 删除
  185. delect (record) {
  186. const _this = this
  187. _this.$confirm({
  188. title: '警告',
  189. centered: true,
  190. content: '删除后无法恢复,确认删除?',
  191. okText: '确定',
  192. cancelText: '取消',
  193. onOk () {
  194. delectDevice({
  195. id: record.id
  196. }).then(res => {
  197. if (res.status == 200) {
  198. _this.$message.success(res.message)
  199. _this.$refs.table.refresh()
  200. }
  201. })
  202. }
  203. })
  204. },
  205. // 保存或编辑后刷新列表
  206. refreshTable () {
  207. // 编辑
  208. if (this.itemId) {
  209. this.$refs.table.refresh()
  210. } else {
  211. // 保存
  212. this.$refs.table.refresh(true)
  213. }
  214. }
  215. }
  216. }
  217. </script>
  218. <style lang="less" scoped>
  219. .electronicScale-container {
  220. .electronicScale-container-searchForm {
  221. .ant-form-inline .ant-form-item {
  222. width: 100%;
  223. }
  224. }
  225. // 查询按钮
  226. .handle-btn {
  227. margin-top: 4px;
  228. }
  229. .serach-btn {
  230. margin-right: 10px;
  231. }
  232. .electronicScale-container-add {
  233. margin: 15px 0;
  234. }
  235. }
  236. // 查看小程序码 弹框
  237. .qrCodeModal {
  238. .qrCode {
  239. display: block;
  240. max-width: 100%;
  241. margin: 0 auto;
  242. }
  243. .downQrCode {
  244. display: block;
  245. margin: 30px auto;
  246. }
  247. }
  248. </style>