ExchangeSetting.vue 8.8 KB

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