ExchangeSetting.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  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="boxSetting-add" v-hasPermission="'B_exchangeSetting_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
  31. id="boxSetting-edit"
  32. type="edit"
  33. title="编辑"
  34. class="actionBtn icon-blues"
  35. @click="handleEdit(record)"
  36. v-hasPermission="'B_exchangeSetting_edit'"/>
  37. <a-icon
  38. id="boxSetting-del"
  39. type="delete"
  40. title="删除"
  41. class="actionBtn icon-red"
  42. v-if="$hasPermissions('B_exchangeSetting_del') && !record.isEnable"
  43. @click="delect(record)" />
  44. <span v-if="!$hasPermissions('B_exchangeSetting_edit') && (!$hasPermissions('B_exchangeSetting_del') && !record.isEnable)">--</span>
  45. </template>
  46. </s-table>
  47. <!-- 新增/编辑 弹窗 -->
  48. <add-set-modal :visible="openBoxModal" :goldExRuleNo="itemGoldExRuleNo" :id="itemId" @refresh="refreshTable" @close="openBoxModal = false"></add-set-modal>
  49. </a-card>
  50. </template>
  51. <script>
  52. import {
  53. STable,
  54. VSelect
  55. } from '@/components'
  56. import AddSetModal from './AddSetModal.vue'
  57. import {
  58. getList,
  59. deleteExchangeSetting
  60. } from '@/api/exchangeSetting.js'
  61. export default {
  62. name: 'Equipment',
  63. components: {
  64. STable,
  65. VSelect,
  66. AddSetModal
  67. },
  68. data () {
  69. return {
  70. form: this.$form.createForm(this),
  71. formItemLayout: {
  72. labelCol: {
  73. span: 7
  74. },
  75. wrapperCol: {
  76. span: 17
  77. }
  78. },
  79. // 查询参数
  80. queryParam: {
  81. name: '' // 箱体类型
  82. },
  83. openBoxModal: false, // 新增/编辑弹窗
  84. itemId: '', // 新增/编辑id
  85. itemGoldExRuleNo: '', // 兑换编码
  86. // 表头
  87. columns: [{
  88. title: '序号',
  89. dataIndex: 'no',
  90. width: 80,
  91. align: 'center'
  92. },
  93. {
  94. title: '创建时间',
  95. dataIndex: 'createDate',
  96. width: 200,
  97. align: 'center'
  98. },
  99. {
  100. title: '兑换规则名称',
  101. dataIndex: 'name',
  102. width: 200,
  103. align: 'center'
  104. },
  105. {
  106. title: '兑换规则说明',
  107. dataIndex: 'remarks',
  108. width: 200,
  109. align: 'center'
  110. },
  111. {
  112. title: '兑换规则(投放重量(g)/可兑换乐豆数(个))',
  113. children: [{
  114. title: '废旧衣物',
  115. dataIndex: 'clothes',
  116. width: 100,
  117. align: 'center',
  118. customRender: (record, text) => {
  119. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  120. }
  121. },
  122. {
  123. title: '废旧塑料',
  124. dataIndex: 'plastic',
  125. width: 100,
  126. align: 'center',
  127. customRender: (record, text) => {
  128. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  129. }
  130. },
  131. {
  132. title: '废旧金属',
  133. dataIndex: 'metal',
  134. width: 100,
  135. align: 'center',
  136. customRender: (record, text) => {
  137. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  138. }
  139. },
  140. {
  141. title: '废旧纸张',
  142. dataIndex: 'paper',
  143. width: 100,
  144. align: 'center',
  145. customRender: (record, text) => {
  146. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  147. }
  148. },
  149. {
  150. title: '有害垃圾',
  151. dataIndex: 'harm',
  152. width: 100,
  153. align: 'center',
  154. customRender: (record, text) => {
  155. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  156. }
  157. },
  158. {
  159. title: '废旧金属/塑料',
  160. dataIndex: 'metPla',
  161. width: 100,
  162. align: 'center',
  163. customRender: (record, text) => {
  164. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  165. }
  166. },
  167. {
  168. title: '废旧玻璃',
  169. dataIndex: 'glass',
  170. width: 100,
  171. align: 'center',
  172. customRender: (record, text) => {
  173. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  174. }
  175. },
  176. {
  177. title: '可回收物',
  178. dataIndex: 'recycling',
  179. width: 100,
  180. align: 'center',
  181. customRender: (record, text) => {
  182. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  183. }
  184. }
  185. ]
  186. },
  187. {
  188. title: '操作',
  189. scopedSlots: {
  190. customRender: 'action'
  191. },
  192. width: 240,
  193. align: 'center'
  194. }
  195. ],
  196. // 加载数据方法 必须为 Promise 对象
  197. loadData: parameter => {
  198. return getList(Object.assign(parameter, this.queryParam)).then(res => {
  199. if (res.status == 200) {
  200. const no = (res.data.pageNo - 1) * res.data.pageSize
  201. for (let i = 0; i < res.data.list.length; i++) {
  202. const _item = res.data.list[i]
  203. _item.no = no + i + 1
  204. }
  205. return res.data
  206. }
  207. })
  208. }
  209. }
  210. },
  211. beforeRouteEnter (to, from, next) {
  212. next(vm => {
  213. vm.queryParam.name = ''
  214. })
  215. },
  216. methods: {
  217. // 重置
  218. handleReset () {
  219. this.queryParam.name = ''
  220. this.$refs.table.refresh(true)
  221. },
  222. // 新增/编辑 后刷新列表
  223. refreshTable () {
  224. if (this.itemId) {
  225. this.$refs.table.refresh()
  226. } else {
  227. this.$refs.table.refresh(true)
  228. }
  229. },
  230. // 新建
  231. openModal () {
  232. this.openBoxModal = true
  233. this.itemId = ''
  234. this.itemGoldExRuleNo = ''
  235. },
  236. // 编辑
  237. handleEdit (item) {
  238. this.openBoxModal = true
  239. this.itemId = item.id
  240. this.itemGoldExRuleNo = item.goldExRuleNo
  241. },
  242. // 删除
  243. delect (row) {
  244. const _this = this
  245. this.$confirm({
  246. title: '警告',
  247. centered: true,
  248. content: '删除后无法恢复,确认删除?',
  249. okText: '确定',
  250. cancelText: '取消',
  251. onOk () {
  252. deleteExchangeSetting({
  253. id: row.id
  254. }).then(res => {
  255. console.log(res, 'res1111')
  256. if (res.status == 200) {
  257. _this.$message.success(res.message)
  258. _this.$refs.table.refresh()
  259. }
  260. })
  261. }
  262. })
  263. }
  264. }
  265. }
  266. </script>
  267. <style lang="less" scoped>
  268. .network-table-page-search-wrapper {
  269. .network-searchForm {
  270. .ant-form-inline .ant-form-item {
  271. width: 100%;
  272. }
  273. // 搜索框的下间距
  274. .ant-form-item {
  275. margin-bottom: 10px;
  276. }
  277. .handle-btn {
  278. margin-top: 4px;
  279. }
  280. .serach-btn {
  281. margin-right: 10px;
  282. }
  283. }
  284. .actionBtn {
  285. font-size: 20px;
  286. padding: 0 10px;
  287. }
  288. // 合计
  289. .total {
  290. margin: 15px 0 25px;
  291. width: 100%;
  292. background-color: #e6f7ff;
  293. border: 1px solid #91d5ff;
  294. padding: 8px 15px 8px 27px;
  295. border-radius: 4px;
  296. .iconImg {
  297. color: #1890FF;
  298. margin-right: 10px;
  299. }
  300. }
  301. }
  302. </style>