electronicScale.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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">
  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.MAC" placeholder="请输入设备MAC码" oninput="value=value.toUpperCase()" :maxLength="30"/>
  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> {{ }} </span>条,乐豆变动量总计<span> {{ }} </span>个</div>
  26. </a-alert>
  27. <!-- 列表 -->
  28. <a-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data-source="data" 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. </a-table>
  34. <!-- 新增/编辑弹窗 -->
  35. <addElectronicScale :visible="isOpenModal" :id="itemId" @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. const columns = [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  42. { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
  43. { title: '设备MAC码', dataIndex: 'MAC', width: 100, align: 'center' },
  44. { title: '设备名称', dataIndex: 'name', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  45. { title: '设备编号', dataIndex: 'num', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  46. { title: '设备型号', dataIndex: 'org', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  47. { title: '生产厂家', dataIndex: 'changjia', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
  48. { title: '操作', dataIndex: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' } }
  49. ]
  50. const data = [{ createDate: '2020-01-05', MAC: '22210245224555', name: '电子秤', num: '2222554585877', org: 'X-001', changjia: '上海电子厂' },
  51. { createDate: '2020-01-05', MAC: '22210245224555', name: '电子秤', num: '2222554585877', org: 'X-001', changjia: '上海电子厂' },
  52. { createDate: '2020-01-05', MAC: '22210245224555', name: '电子秤', num: '2222554585877', org: 'X-001', changjia: '上海电子厂' },
  53. { createDate: '2020-01-05', MAC: '22210245224555', name: '电子秤', num: '2222554585877', org: 'X-001', changjia: '上海电子厂' }]
  54. export default {
  55. components: { STable, addElectronicScale },
  56. data () {
  57. return {
  58. searchForm: {
  59. MAC: ''
  60. },
  61. columns,
  62. data,
  63. isOpenModal: false, // 默认弹窗关闭
  64. itemId: '' // 编辑行id
  65. // 列表表头
  66. // columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  67. // { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
  68. // { title: '设备MAC码', dataIndex: 'MAC', width: 100, align: 'center' },
  69. // { title: '设备名称', dataIndex: 'name', width: 100, align: 'center' },
  70. // { title: '设备编号', dataIndex: 'num', width: 100, align: 'center' },
  71. // { title: '设备型号', dataIndex: 'org', width: 100, align: 'center' },
  72. // { title: '生产厂家', dataIndex: 'changjia', width: 100, align: 'center' },
  73. // { title: '操作', dataIndex: 'action', width: 100, align: 'center' }
  74. // ]
  75. // data: [{ createDate: '2020-01-05', MAC: '22210245224555', name: '电子秤', num: '2222554585877', org: 'X-001', changjia: '上海电子厂' }]
  76. // 加载数据方法 必须为 Promise 对象
  77. // loadData: parameter => {
  78. // // return getBoxList(Object.assign(parameter, this.queryParam)).then(res => {
  79. // // if (res.status == 200) {
  80. // // const no = (res.data.pageNo - 1) * res.data.pageSize
  81. // // for (let i = 0; i < res.data.list.length; i++) {
  82. // // const _item = res.data.list[i]
  83. // // _item.no = no + i + 1
  84. // // }
  85. // // return res.data
  86. // // }
  87. // // })
  88. // }
  89. }
  90. },
  91. methods: {
  92. // 重置
  93. handleReset () {
  94. this.searchForm= {
  95. MAC: ''
  96. }
  97. },
  98. // 新增
  99. openModal () {
  100. this.isOpenModal = true
  101. console.log('新增')
  102. },
  103. // 编辑
  104. handleEdit (record) {
  105. this.isOpenModal = true
  106. console.log('编辑')
  107. },
  108. // 删除
  109. delect () {
  110. this.$confirm({
  111. title: '警告',
  112. centered: true,
  113. content: '删除后无法恢复,确认删除?',
  114. okText: '确定',
  115. cancelText: '取消',
  116. onOk() {
  117. }
  118. })
  119. },
  120. // 保存或编辑后刷新列表
  121. refreshTable () {
  122. // 编辑
  123. if (this.itemId) {
  124. this.$refs.table.refresh()
  125. } else {
  126. // 保存
  127. this.$refs.table.refresh(true)
  128. }
  129. }
  130. }
  131. }
  132. </script>
  133. <style lang="less" scoped>
  134. .electronicScale-container {
  135. .electronicScale-container-searchForm {
  136. .ant-form-inline .ant-form-item {
  137. width: 100%;
  138. }
  139. }
  140. // 查询按钮
  141. .handle-btn {
  142. margin-top: 4px;
  143. }
  144. .serach-btn {
  145. margin-right: 10px;
  146. }
  147. .electronicScale-container-add {
  148. margin: 15px 0;
  149. }
  150. }
  151. </style>