boxSetting.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <a-card :bordered="false" class="network-table-page-search-wrapper">
  3. <div class="network-searchForm">
  4. <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
  5. <a-row :gutter="48">
  6. <a-col :span="6">
  7. <a-form-item label="箱体类型名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  8. <a-input id="boxSetting-name" allowClear :maxLength="30" v-model="queryParam.name" placeholder="请输入箱体类型名称" />
  9. </a-form-item>
  10. </a-col>
  11. <a-col :span="6">
  12. <a-button class="handle-btn serach-btn" id="boxSetting-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  13. <a-button class="handle-btn" type="" id="boxSetting-btn-reset" @click="handleReset">重置</a-button>
  14. </a-col>
  15. </a-row>
  16. </a-form>
  17. </div>
  18. <div class="table-operator">
  19. <a-button type="primary" icon="plus" @click="openModal" id="roleList-openModal" v-hasPermission="'B_boxSetting_add'">新增</a-button>
  20. </div>
  21. <s-table
  22. ref="table"
  23. size="default"
  24. :rowKey="(record) => record.id"
  25. :columns="columns"
  26. :data="loadData"
  27. bordered>
  28. <!-- 操作 -->
  29. <template slot="action" slot-scope="text, record">
  30. <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" v-hasPermission="'B_boxSetting_edit'" />
  31. <a-icon type="delete" title="删除" class="actionBtn icon-red" @click="delect(record)" v-if="$hasPermissions('B_boxSetting_del') && !record.isEnable"/>
  32. <span v-if="!$hasPermissions('B_boxSetting_edit') && (!$hasPermissions('B_boxSetting_del') && !record.isEnable)">--</span>
  33. </template>
  34. </s-table>
  35. <!-- 新增/编辑 弹窗 -->
  36. <add-box-modal :visible="openBoxModal" :id="itemId" @refresh="refreshTable" @close="openBoxModal = false"></add-box-modal>
  37. </a-card>
  38. </template>
  39. <script>
  40. import {
  41. STable,
  42. VSelect
  43. } from '@/components'
  44. import AddBoxModal from './AddBoxModal.vue'
  45. import {
  46. getBoxList,
  47. deleteBoxSetting
  48. } from '@/api/boxSetting.js'
  49. export default {
  50. name: 'Equipment',
  51. components: {
  52. STable,
  53. VSelect,
  54. AddBoxModal
  55. },
  56. data () {
  57. return {
  58. form: this.$form.createForm(this),
  59. formItemLayout: {
  60. labelCol: {
  61. span: 7
  62. },
  63. wrapperCol: {
  64. span: 17
  65. }
  66. },
  67. // 查询参数
  68. queryParam: {
  69. name: '' // 箱体类型
  70. },
  71. openBoxModal: false, // 新增/编辑弹窗
  72. itemId: '', // 箱体id
  73. // 表头
  74. columns: [{
  75. title: '序号',
  76. dataIndex: 'no',
  77. width: 80,
  78. align: 'center'
  79. },
  80. {
  81. title: '创建时间',
  82. dataIndex: 'createDate',
  83. width: 200,
  84. align: 'center'
  85. },
  86. {
  87. title: '箱体类型名称',
  88. dataIndex: 'name',
  89. width: 200,
  90. align: 'center'
  91. },
  92. {
  93. title: '内置箱体数量(个)',
  94. dataIndex: 'boxNum',
  95. width: 200,
  96. align: 'center'
  97. },
  98. {
  99. title: '内置箱体投放限重(kg)/ 对应资源分类',
  100. children: [{
  101. title: '1号箱',
  102. dataIndex: 'one',
  103. width: 100,
  104. align: 'center',
  105. customRender: (record, text) => {
  106. return record ? (record.maxWeight ? (record.maxWeight + '/' + record.rubbishTypeDictValue) : '--') : '--'
  107. }
  108. },
  109. {
  110. title: '2号箱',
  111. dataIndex: 'two',
  112. width: 100,
  113. align: 'center',
  114. customRender: (record, text) => {
  115. return record ? (record.maxWeight ? (record.maxWeight + '/' + record.rubbishTypeDictValue) : '--') : '--'
  116. }
  117. },
  118. {
  119. title: '3号箱',
  120. dataIndex: 'three',
  121. width: 100,
  122. align: 'center',
  123. customRender: (record, text) => {
  124. return record ? (record.maxWeight ? (record.maxWeight + '/' + record.rubbishTypeDictValue) : '--') : '--'
  125. }
  126. },
  127. {
  128. title: '4号箱',
  129. dataIndex: 'four',
  130. width: 100,
  131. align: 'center',
  132. customRender: (record, text) => {
  133. return record ? (record.maxWeight ? (record.maxWeight + '/' + record.rubbishTypeDictValue) : '--') : '--'
  134. }
  135. },
  136. {
  137. title: '5号箱',
  138. dataIndex: 'five',
  139. width: 100,
  140. align: 'center',
  141. customRender: (record, text) => {
  142. return record ? (record.maxWeight ? (record.maxWeight + '/' + record.rubbishTypeDictValue) : '--') : '--'
  143. }
  144. }
  145. ]
  146. },
  147. {
  148. title: '操作',
  149. scopedSlots: {
  150. customRender: 'action'
  151. },
  152. width: 240,
  153. align: 'center'
  154. }
  155. ],
  156. // 加载数据方法 必须为 Promise 对象
  157. loadData: parameter => {
  158. return getBoxList(Object.assign(parameter, this.queryParam)).then(res => {
  159. if (res.status == 200) {
  160. const no = (res.data.pageNo - 1) * res.data.pageSize
  161. for (let i = 0; i < res.data.list.length; i++) {
  162. const _item = res.data.list[i]
  163. _item.no = no + i + 1
  164. }
  165. return res.data
  166. }
  167. })
  168. }
  169. }
  170. },
  171. beforeRouteEnter (to, from, next) {
  172. next(vm => {
  173. vm.queryParam.name = ''
  174. })
  175. },
  176. methods: {
  177. // 重置
  178. handleReset () {
  179. console.log('重置', this.queryParam)
  180. this.form.resetFields()
  181. this.queryParam.name = ''
  182. this.$refs.table.refresh(true)
  183. },
  184. // 新建
  185. openModal () {
  186. this.openBoxModal = true
  187. this.itemId = ''
  188. },
  189. // 编辑
  190. handleEdit (item) {
  191. this.openBoxModal = true
  192. this.itemId = item.id
  193. },
  194. // 新增/编辑 后刷新列表
  195. refreshTable () {
  196. if (this.itemId) {
  197. this.$refs.table.refresh()
  198. } else {
  199. this.$refs.table.refresh(true)
  200. }
  201. },
  202. // 删除
  203. delect (row) {
  204. const _this = this
  205. this.$confirm({
  206. title: '警告',
  207. centered: true,
  208. content: '删除后无法恢复,确认删除?',
  209. okText: '确定',
  210. cancelText: '取消',
  211. onOk () {
  212. deleteBoxSetting({
  213. id: row.id
  214. }).then(res => {
  215. console.log(res, 'res1111')
  216. if (res.status == 200) {
  217. _this.$message.success(res.message)
  218. _this.$refs.table.refresh()
  219. }
  220. })
  221. }
  222. })
  223. }
  224. }
  225. }
  226. </script>
  227. <style lang="less" scoped>
  228. .network-table-page-search-wrapper {
  229. .network-searchForm {
  230. .ant-form-inline .ant-form-item {
  231. width: 100%;
  232. }
  233. // 搜索框的下间距
  234. .ant-form-item {
  235. margin-bottom: 10px;
  236. }
  237. .handle-btn {
  238. margin-top: 4px;
  239. }
  240. .serach-btn {
  241. margin-right: 10px;
  242. }
  243. }
  244. .actionBtn {
  245. font-size: 20px;
  246. padding: 0 10px;
  247. }
  248. // 合计
  249. .total {
  250. margin: 15px 0 25px;
  251. width: 100%;
  252. background-color: #e6f7ff;
  253. border: 1px solid #91d5ff;
  254. padding: 8px 15px 8px 27px;
  255. border-radius: 4px;
  256. .iconImg {
  257. color: #1890FF;
  258. margin-right: 10px;
  259. }
  260. }
  261. }
  262. </style>