electronicScale.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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/>
  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)">查询</a-button>
  14. <a-button class="handle-btn" type="" @click="handleReset">重置</a-button>
  15. </a-col>
  16. </a-row>
  17. </a-form-model>
  18. </div>
  19. <!-- 新增 -->
  20. <div class="electronicScale-container-add">
  21. <a-button type="primary" icon="plus" @click="openModal">新增</a-button>
  22. </div>
  23. <!-- 合计 -->
  24. <a-alert type="info" showIcon style="margin-bottom:15px">
  25. <div class="ftext" slot="message">总计<span> {{ totalNum }} 个</span></div>
  26. </a-alert>
  27. <!-- 列表 -->
  28. <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
  29. <span slot="action" slot-scope="text,record">
  30. <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)"/>
  31. <a-icon type="delete" title="删除" class="actionBtn icon-red" @click="delect(record)"/>
  32. </span>
  33. </s-table>
  34. <!-- 新增/编辑弹窗 -->
  35. <addElectronicScale :visible="isOpenModal" :id="itemId" :deviceCode="itemDeviceCode" @refresh="refreshTable" @close="isOpenModal=false"></addElectronicScale>
  36. </a-card>
  37. </template>
  38. <script>
  39. import { STable } from '@/components'
  40. import addElectronicScale from './addElectronicScale.vue'
  41. import { getDeviceList, delectDevice } from '@/api/electronicScale.js'
  42. export default {
  43. components: { STable, addElectronicScale },
  44. data () {
  45. return {
  46. searchForm: {
  47. macAddress: ''
  48. },
  49. isOpenModal: false, // 默认弹窗关闭
  50. itemDeviceCode: '', // 编辑行设备编号
  51. itemId: '',
  52. totalNum: '',
  53. // 列表表头
  54. columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  55. { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
  56. { title: '设备MAC码', dataIndex: 'macAddress', width: 100, align: 'center' },
  57. { title: '设备名称', dataIndex: 'deviceName', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  58. { title: '设备编号', dataIndex: 'deviceCode', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  59. { title: '设备型号', dataIndex: 'deviceModel', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  60. { title: '生产厂家', dataIndex: 'manufacturer', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  61. { title: '操作', dataIndex: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' } }
  62. ],
  63. // 加载数据方法 必须为 Promise 对象
  64. loadData: parameter => {
  65. return getDeviceList(Object.assign(parameter, this.searchForm, { deviceType: 'STEELYARD' })).then(res => {
  66. if (res.status == 200) {
  67. const no = (res.data.pageNo - 1) * res.data.pageSize
  68. for (let i = 0; i < res.data.list.length; i++) {
  69. const _item = res.data.list[i]
  70. _item.no = no + i + 1
  71. }
  72. this.totalNum = res.data.count
  73. return res.data
  74. } else {
  75. this.totalNum = 0
  76. }
  77. })
  78. }
  79. }
  80. },
  81. methods: {
  82. // 重置
  83. handleReset () {
  84. this.searchForm = {
  85. macAddress: ''
  86. }
  87. this.$refs.table.refresh(true)
  88. },
  89. // 新增
  90. openModal () {
  91. this.itemId = ''
  92. this.itemDeviceCode = ''
  93. this.isOpenModal = true
  94. },
  95. // 编辑
  96. handleEdit (record) {
  97. this.itemId = record.id
  98. this.itemDeviceCode = record.srcDeviceCode
  99. this.isOpenModal = true
  100. },
  101. // 删除
  102. delect (record) {
  103. const _this = this
  104. _this.$confirm({
  105. title: '警告',
  106. centered: true,
  107. content: '删除后无法恢复,确认删除?',
  108. okText: '确定',
  109. cancelText: '取消',
  110. onOk () {
  111. delectDevice({
  112. id: record.id
  113. }).then(res => {
  114. if (res.status == 200) {
  115. _this.$message.success(res.message)
  116. _this.$refs.table.refresh()
  117. }
  118. })
  119. }
  120. })
  121. },
  122. // 保存或编辑后刷新列表
  123. refreshTable () {
  124. // 编辑
  125. if (this.itemId) {
  126. this.$refs.table.refresh()
  127. } else {
  128. // 保存
  129. this.$refs.table.refresh(true)
  130. }
  131. }
  132. }
  133. }
  134. </script>
  135. <style lang="less" scoped>
  136. .electronicScale-container {
  137. .electronicScale-container-searchForm {
  138. .ant-form-inline .ant-form-item {
  139. width: 100%;
  140. }
  141. }
  142. // 查询按钮
  143. .handle-btn {
  144. margin-top: 4px;
  145. }
  146. .serach-btn {
  147. margin-right: 10px;
  148. }
  149. .electronicScale-container-add {
  150. margin: 15px 0;
  151. }
  152. }
  153. </style>