ExchangeSetting.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  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
  9. id="boxSetting-name"
  10. allowClear
  11. :maxLength="30"
  12. v-model="queryParam.name"
  13. placeholder="请输入箱体类型" />
  14. </a-form-item>
  15. </a-col>
  16. <a-col :span="6">
  17. <a-button class="handle-btn serach-btn" id="boxSetting-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  18. <a-button class="handle-btn" type="" id="boxSetting-btn-reset" @click="handleReset">重置</a-button>
  19. </a-col>
  20. </a-row>
  21. </a-form>
  22. </div>
  23. <div class="table-operator">
  24. <a-button type="primary" icon="plus" @click="openModal" id="roleList-openModal">新增</a-button>
  25. </div>
  26. <s-table
  27. ref="table"
  28. size="default"
  29. :rowKey="(record) => record.id"
  30. :columns="columns"
  31. :data="loadData"
  32. bordered>
  33. <!-- 操作 -->
  34. <template slot="action" slot-scope="text, record">
  35. <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
  36. <a-icon
  37. type="delete"
  38. title="删除"
  39. class="actionBtn icon-red"
  40. v-if="!record.isEnable"
  41. @click="delect(record)" />
  42. </template>
  43. </s-table>
  44. <!-- 新增/编辑 弹窗 -->
  45. <add-set-modal :visible="openBoxModal" :data="itemData" @refresh="refreshTable" @close="openBoxModal = false"></add-set-modal>
  46. </a-card>
  47. </template>
  48. <script>
  49. import {
  50. STable,
  51. VSelect
  52. } from '@/components'
  53. import AddSetModal from './AddSetModal.vue'
  54. export default {
  55. name: 'Equipment',
  56. components: {
  57. STable,
  58. VSelect,
  59. AddSetModal
  60. },
  61. data () {
  62. return {
  63. form: this.$form.createForm(this),
  64. formItemLayout: {
  65. labelCol: {
  66. span: 7
  67. },
  68. wrapperCol: {
  69. span: 17
  70. }
  71. },
  72. // 查询参数
  73. queryParam: {
  74. name: '' // 箱体类型
  75. },
  76. openBoxModal: false, // 新增/编辑弹窗
  77. boxId: '', // 箱体id
  78. // 表头
  79. columns: [{
  80. title: '序号',
  81. dataIndex: 'no',
  82. width: 80,
  83. align: 'center'
  84. },
  85. {
  86. title: '创建时间',
  87. dataIndex: 'networkName',
  88. width: 200,
  89. align: 'center'
  90. },
  91. {
  92. title: '兑换规则名称',
  93. dataIndex: 'address',
  94. width: 200,
  95. align: 'center'
  96. },
  97. {
  98. title: '兑换规则说明',
  99. dataIndex: 'equipmentNo',
  100. width: 200,
  101. align: 'center'
  102. },
  103. {
  104. title: '兑换规则(投放重量(g)/可兑换乐豆数(个))',
  105. children: [{
  106. title: '废旧衣物',
  107. dataIndex: 'oProportion',
  108. width: 100,
  109. align: 'center'
  110. },
  111. {
  112. title: '废旧衣物',
  113. dataIndex: 'tProportion',
  114. width: 100,
  115. align: 'center'
  116. },
  117. {
  118. title: '废旧衣物',
  119. dataIndex: 'tProportion',
  120. width: 100,
  121. align: 'center',
  122. customRender: (record, index) => {
  123. return record.tProportion || '--'
  124. }
  125. },
  126. {
  127. title: '废旧衣物',
  128. dataIndex: 'tProportion',
  129. width: 100,
  130. align: 'center',
  131. customRender: (record, index) => {
  132. return record.tProportion || '--'
  133. }
  134. },
  135. {
  136. title: '有害垃圾',
  137. dataIndex: 'tProportion',
  138. width: 100,
  139. align: 'center',
  140. customRender: (record, index) => {
  141. return record.tProportion || '--'
  142. }
  143. }
  144. ]
  145. },
  146. {
  147. title: '操作',
  148. scopedSlots: {
  149. customRender: 'action'
  150. },
  151. width: 240,
  152. align: 'center'
  153. }
  154. ],
  155. // 加载数据方法 必须为 Promise 对象
  156. loadData: parameter => {
  157. // return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
  158. // if (res.status == 200) {
  159. // const no = (res.data.pageNo - 1) * res.data.pageSize
  160. // for (let i = 0; i < res.data.list.length; i++) {
  161. // const _item = res.data.list[i]
  162. // _item.no = no + i + 1
  163. // _item.status = _item.status + '' === '1'
  164. // }
  165. // return res.data
  166. // }
  167. // })
  168. return new Promise((resolve) => {
  169. const data = [{
  170. id: 1,
  171. no: 1,
  172. networkName: '网点1',
  173. equipmentNo: '陕西省',
  174. type: '西安市',
  175. boxNum: '未央区',
  176. address: '凤城十二路',
  177. oProportion: '早高峰期',
  178. tProportion: '23%',
  179. edition: '1.2.1',
  180. status: '1'
  181. },
  182. {
  183. id: 2,
  184. no: 2,
  185. networkName: '网点2',
  186. equipmentNo: '陕西省',
  187. type: '西安市',
  188. boxNum: '未央区',
  189. address: '凤城十二路',
  190. oProportion: '晚高峰期',
  191. tProportion: '23%',
  192. edition: '1.2.1',
  193. status: '1'
  194. },
  195. {
  196. id: 3,
  197. no: 3,
  198. networkName: '网点3',
  199. equipmentNo: '陕西省',
  200. type: '西安市',
  201. boxNum: '未央区',
  202. address: '凤城十二路',
  203. oProportion: '早高峰期',
  204. tProportion: '23%',
  205. edition: '1.2.1',
  206. status: '1'
  207. },
  208. {
  209. id: 4,
  210. no: 4,
  211. networkName: '网点4',
  212. equipmentNo: '陕西省',
  213. type: '西安市',
  214. boxNum: '未央区',
  215. address: '凤城十二路',
  216. oProportion: '早高峰期',
  217. tProportion: '23%',
  218. edition: '1.2.1',
  219. status: '1'
  220. },
  221. {
  222. id: 5,
  223. no: 5,
  224. networkName: '网点5',
  225. equipmentNo: '陕西省',
  226. type: '西安市',
  227. boxNum: '未央区',
  228. address: '凤城十二路',
  229. oProportion: '早高峰期',
  230. tProportion: '23%',
  231. edition: '1.2.1',
  232. status: '1'
  233. },
  234. {
  235. id: 6,
  236. no: 6,
  237. networkName: '网点6',
  238. equipmentNo: '陕西省',
  239. type: '西安市',
  240. boxNum: '未央区',
  241. address: '凤城十二路',
  242. oProportion: '早高峰期',
  243. tProportion: '23%',
  244. edition: '1.2.1',
  245. status: '1'
  246. },
  247. {
  248. id: 7,
  249. no: 7,
  250. networkName: '网点7',
  251. equipmentNo: '陕西省',
  252. type: '西安市',
  253. boxNum: '未央区',
  254. address: '凤城十二路',
  255. oProportion: '早高峰期',
  256. tProportion: '23%',
  257. edition: '1.2.1',
  258. status: '1'
  259. }
  260. ]
  261. resolve(data)
  262. })
  263. }
  264. }
  265. },
  266. beforeRouteEnter (to, from, next) {
  267. next(vm => {
  268. vm.handleReset()
  269. })
  270. },
  271. methods: {
  272. // 重置
  273. handleReset () {
  274. console.log('重置', this.queryParam)
  275. this.form.resetFields()
  276. this.$refs.table.refresh(true)
  277. },
  278. // 新建
  279. openModal () {
  280. this.openBoxModal = true
  281. this.itemData = {}
  282. },
  283. // 编辑
  284. handleEdit (item) {
  285. this.openBoxModal = true
  286. },
  287. // 删除
  288. delect (row) {
  289. const _this = this
  290. this.$confirm({
  291. title: '警告',
  292. centered: true,
  293. content: '删除后无法恢复,确认删除?',
  294. okText: '确定',
  295. cancelText: '取消',
  296. onOk () {
  297. delectRolePower({
  298. id: row.id
  299. }).then(res => {
  300. console.log(res, 'res1111')
  301. if (res.status == 200) {
  302. _this.$message.success(res.message)
  303. _this.$refs.table.refresh()
  304. }
  305. })
  306. }
  307. })
  308. }
  309. }
  310. }
  311. </script>
  312. <style lang="less" scoped>
  313. .network-table-page-search-wrapper {
  314. .network-searchForm {
  315. .ant-form-inline .ant-form-item {
  316. width: 100%;
  317. }
  318. // 搜索框的下间距
  319. .ant-form-item {
  320. margin-bottom: 10px;
  321. }
  322. .handle-btn {
  323. margin-top: 4px;
  324. }
  325. .serach-btn {
  326. margin-right: 10px;
  327. }
  328. }
  329. .actionBtn {
  330. font-size: 20px;
  331. padding: 0 10px;
  332. }
  333. // 合计
  334. .total {
  335. margin: 15px 0 25px;
  336. width: 100%;
  337. background-color: #e6f7ff;
  338. border: 1px solid #91d5ff;
  339. padding: 8px 15px 8px 27px;
  340. border-radius: 4px;
  341. .iconImg {
  342. color: #1890FF;
  343. margin-right: 10px;
  344. }
  345. }
  346. }
  347. </style>