ExchangeSetting.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  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. customRender: (text) => {
  111. return text || '--'
  112. }
  113. },
  114. {
  115. title: '兑换规则(投放重量(g)/可兑换乐豆数(个))',
  116. children: [{
  117. title: '废旧衣物',
  118. dataIndex: 'clothes',
  119. width: 100,
  120. align: 'center',
  121. customRender: (record, text) => {
  122. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  123. }
  124. },
  125. {
  126. title: '废旧塑料',
  127. dataIndex: 'plastic',
  128. width: 100,
  129. align: 'center',
  130. customRender: (record, text) => {
  131. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  132. }
  133. },
  134. {
  135. title: '废旧金属',
  136. dataIndex: 'metal',
  137. width: 100,
  138. align: 'center',
  139. customRender: (record, text) => {
  140. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  141. }
  142. },
  143. {
  144. title: '废旧纸张',
  145. dataIndex: 'paper',
  146. width: 100,
  147. align: 'center',
  148. customRender: (record, text) => {
  149. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  150. }
  151. },
  152. {
  153. title: '有害垃圾',
  154. dataIndex: 'harm',
  155. width: 100,
  156. align: 'center',
  157. customRender: (record, text) => {
  158. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  159. }
  160. },
  161. {
  162. title: '废旧金属/塑料',
  163. dataIndex: 'metPla',
  164. width: 100,
  165. align: 'center',
  166. customRender: (record, text) => {
  167. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  168. }
  169. },
  170. {
  171. title: '废旧玻璃',
  172. dataIndex: 'glass',
  173. width: 100,
  174. align: 'center',
  175. customRender: (record, text) => {
  176. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  177. }
  178. },
  179. {
  180. title: '可回收物',
  181. dataIndex: 'recycling',
  182. width: 100,
  183. align: 'center',
  184. customRender: (record, text) => {
  185. return record ? (record.rubbishWeight ? (record.rubbishWeight + 'g/' + record.goleNum + '个') : '不兑换') : '不兑换'
  186. }
  187. }
  188. ]
  189. },
  190. {
  191. title: '操作',
  192. scopedSlots: {
  193. customRender: 'action'
  194. },
  195. width: 150,
  196. align: 'center'
  197. }
  198. ],
  199. // 加载数据方法 必须为 Promise 对象
  200. loadData: parameter => {
  201. return getList(Object.assign(parameter, this.queryParam)).then(res => {
  202. if (res.status == 200) {
  203. const no = (res.data.pageNo - 1) * res.data.pageSize
  204. for (let i = 0; i < res.data.list.length; i++) {
  205. const _item = res.data.list[i]
  206. _item.no = no + i + 1
  207. }
  208. return res.data
  209. }
  210. })
  211. }
  212. }
  213. },
  214. beforeRouteEnter (to, from, next) {
  215. next(vm => {
  216. vm.queryParam.name = ''
  217. })
  218. },
  219. methods: {
  220. // 重置
  221. handleReset () {
  222. this.queryParam.name = ''
  223. this.$refs.table.refresh(true)
  224. },
  225. // 新增/编辑 后刷新列表
  226. refreshTable () {
  227. if (this.itemId) {
  228. this.$refs.table.refresh()
  229. } else {
  230. this.$refs.table.refresh(true)
  231. }
  232. },
  233. // 新建
  234. openModal () {
  235. this.openBoxModal = true
  236. this.itemId = ''
  237. this.itemGoldExRuleNo = ''
  238. },
  239. // 编辑
  240. handleEdit (item) {
  241. this.openBoxModal = true
  242. this.itemId = item.id
  243. this.itemGoldExRuleNo = item.goldExRuleNo
  244. },
  245. // 删除
  246. delect (row) {
  247. const _this = this
  248. this.$confirm({
  249. title: '警告',
  250. centered: true,
  251. content: '删除后无法恢复,确认删除?',
  252. okText: '确定',
  253. cancelText: '取消',
  254. onOk () {
  255. deleteExchangeSetting({
  256. id: row.id
  257. }).then(res => {
  258. console.log(res, 'res1111')
  259. if (res.status == 200) {
  260. _this.$message.success(res.message)
  261. _this.$refs.table.refresh()
  262. }
  263. })
  264. }
  265. })
  266. }
  267. }
  268. }
  269. </script>
  270. <style lang="less" scoped>
  271. .network-table-page-search-wrapper {
  272. .network-searchForm {
  273. .ant-form-inline .ant-form-item {
  274. width: 100%;
  275. }
  276. // 搜索框的下间距
  277. .ant-form-item {
  278. margin-bottom: 10px;
  279. }
  280. .handle-btn {
  281. margin-top: 4px;
  282. }
  283. .serach-btn {
  284. margin-right: 10px;
  285. }
  286. }
  287. .actionBtn {
  288. font-size: 20px;
  289. padding: 0 10px;
  290. }
  291. // 合计
  292. .total {
  293. margin: 15px 0 25px;
  294. width: 100%;
  295. background-color: #e6f7ff;
  296. border: 1px solid #91d5ff;
  297. padding: 8px 15px 8px 27px;
  298. border-radius: 4px;
  299. .iconImg {
  300. color: #1890FF;
  301. margin-right: 10px;
  302. }
  303. }
  304. }
  305. </style>