network.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <a-card :bordered="false" class="network-table-page-search-wrapper">
  3. <div class="network-searchForm">
  4. <a-form layout="inline" 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-range-picker
  9. id="network-time"
  10. v-model="time"
  11. :format="dateFormat"
  12. :placeholder="['开始时间','结束时间']"
  13. :disabledDate="disabledDate"
  14. @change="onChange" />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  19. <a-input id="network-name" allowClear :maxLength="30" v-model="queryParam.name" placeholder="请输入网点名称" />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="6">
  23. <a-form-item label="区域" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  24. <a-cascader
  25. id="network-areas"
  26. v-model="areas"
  27. :options="options"
  28. placeholder="请选择省市区"
  29. @change="addrChange"/>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :span="6">
  33. <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  34. <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
  35. </a-col>
  36. </a-row>
  37. </a-form>
  38. </div>
  39. <a-divider />
  40. <div class="table-operator">
  41. <a-button class="add-btn" id="network-btn-add" type="primary" @click="handleEdit">新增网点</a-button>
  42. </div>
  43. <!-- 合计 -->
  44. <div class="total">
  45. <a-icon type="info-circle" class="iconImg" />
  46. <strong>总计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 条</span>
  47. </div>
  48. <s-table
  49. ref="table"
  50. size="default"
  51. :rowKey="(record) => record.id"
  52. :columns="columns"
  53. :data="loadData"
  54. bordered>
  55. <!-- 操作 -->
  56. <template slot="action" slot-scope="text, record">
  57. <a-icon type="eye" id="network-handleView" title="详情" class="actionBtn icon-green" @click="handleView(record)" />
  58. <a-icon type="edit" id="network-handleEdit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
  59. <a-badge :count="record.devCount">
  60. <a-icon type="link" id="network-handleLink" title="绑定箱体设备" class="actionBtn icon-orange" @click="handleBind(record)" />
  61. </a-badge>
  62. </template>
  63. </s-table>
  64. <!-- 新增编辑 -->
  65. <edit-network-modal :openModal="openNetworkModal" :networkId="networkId" @success="handleReset" @close="openNetworkModal=false" />
  66. <!-- 详情 -->
  67. <details-network-modal :openModal="openDetailModal" :networkId="networkId" :networkNo="networkNo" @close="openDetailModal=false" />
  68. <!-- 绑定箱体设备 -->
  69. <equipment-modal :openModal="openBindModal" :networkId="networkId" :networkNo="networkNo" @close="openBindModal=false" />
  70. </a-card>
  71. </template>
  72. <script>
  73. import { STable, VSelect } from '@/components'
  74. import addrData from '@/api/address'
  75. import moment from 'moment'
  76. import editNetworkModal from './editModal.vue'
  77. import detailsNetworkModal from './detailsModal.vue'
  78. import equipmentModal from './equipmentModal.vue'
  79. import { stationList } from '@/api/station'
  80. export default {
  81. name: 'Network',
  82. components: { STable, VSelect, editNetworkModal, detailsNetworkModal, equipmentModal },
  83. data () {
  84. return {
  85. formItemLayout: {
  86. labelCol: { span: 7 },
  87. wrapperCol: { span: 17 }
  88. },
  89. // 查询参数
  90. queryParam: {
  91. beginDate: null, // 开始时间
  92. endDate: null, // 结束时间
  93. name: '', // 网点名称
  94. provinceCode: null, // 省
  95. cityCode: null, // 市
  96. districtCode: null // 区
  97. },
  98. // 表头
  99. columns: [
  100. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  101. { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
  102. { title: '网点名称', dataIndex: 'name', width: 200, align: 'center' },
  103. { title: '省', dataIndex: 'provinceName', width: 200, align: 'center' },
  104. { title: '市', dataIndex: 'cityName', width: 200, align: 'center' },
  105. { title: '区', dataIndex: 'districtName', width: 200, align: 'center' },
  106. { title: '详细地址', dataIndex: 'address', width: 200, align: 'center' },
  107. { title: '兑换规则', dataIndex: 'exRuleName', width: 200, align: 'center' },
  108. { title: '投放时间段名称', dataIndex: 'timeRuleName', width: 220, align: 'center' },
  109. { title: '操作', scopedSlots: { customRender: 'action' }, width: 240, align: 'center' }
  110. ],
  111. // 加载数据方法 必须为 Promise 对象
  112. loadData: parameter => {
  113. return stationList(Object.assign(parameter, this.queryParam)).then(res => {
  114. if (res.status == 200) {
  115. const no = (res.data.pageNo - 1) * res.data.pageSize
  116. this.orderTotal = res.data.count
  117. for (let i = 0; i < res.data.list.length; i++) {
  118. const _item = res.data.list[i]
  119. _item.no = no + i + 1
  120. }
  121. return res.data
  122. }
  123. })
  124. },
  125. // 将默认当天时间日期回显在时间选择框中
  126. time: [],
  127. dateFormat: 'YYYY-MM-DD',
  128. options: addrData, // 省市区下拉数据
  129. areas: [], // 省市区 值
  130. orderTotal: '', // 合计开单数量
  131. openNetworkModal: false, // 新增编辑网点信息
  132. networkId: null, // 网点id
  133. networkNo: null, // 网点编号
  134. openDetailModal: false, // 网点信息详情
  135. openBindModal: false // 绑定箱体设备
  136. }
  137. },
  138. methods: {
  139. moment,
  140. // 不可选日期
  141. disabledDate (date, dateStrings) {
  142. return date && date.valueOf() > Date.now()
  143. },
  144. // 创建时间change
  145. onChange (dates, dateStrings) {
  146. if ((dates, dateStrings)) {
  147. this.queryParam.beginDate = dateStrings[0]
  148. this.queryParam.endDate = dateStrings[1]
  149. }
  150. },
  151. // 省市区 change
  152. addrChange (val) {
  153. this.queryParam.provinceCode = val[0]
  154. this.queryParam.cityCode = val[1]
  155. this.queryParam.districtCode = val[2]
  156. },
  157. // 重置
  158. handleReset () {
  159. this.queryParam.beginDate = null
  160. this.queryParam.endDate = null
  161. this.queryParam.name = ''
  162. this.queryParam.provinceCode = null
  163. this.queryParam.cityCode = null
  164. this.queryParam.districtCode = null
  165. this.time = []
  166. this.areas = []
  167. this.$refs.table.refresh(true)
  168. this.networkId = null
  169. this.networkNo = null
  170. },
  171. // 新增、编辑网点
  172. handleEdit (row) {
  173. this.networkId = row ? row.id : null
  174. this.networkNo = row ? row.stationNo : null
  175. this.openNetworkModal = true
  176. },
  177. // 查看详情
  178. handleView (row) {
  179. this.networkId = row ? row.id : null
  180. this.networkNo = row ? row.stationNo : null
  181. this.openDetailModal = true
  182. },
  183. // 关联箱体设备
  184. handleBind (row) {
  185. this.networkId = row ? row.id : null
  186. this.networkNo = row ? row.stationNo : null
  187. this.openBindModal = true
  188. }
  189. }
  190. }
  191. </script>
  192. <style lang="less" scoped>
  193. .network-table-page-search-wrapper{
  194. .network-searchForm{
  195. .ant-form-inline .ant-form-item{
  196. width: 100%;
  197. }
  198. // 搜索框的下间距
  199. .ant-form-item {
  200. margin-bottom: 10px;
  201. }
  202. .handle-btn{
  203. margin-top: 4px;
  204. }
  205. .serach-btn{
  206. margin-right: 10px;
  207. }
  208. }
  209. .actionBtn {
  210. font-size: 20px;
  211. padding: 0 10px;
  212. }
  213. // 合计
  214. .total {
  215. margin: 15px 0 25px;
  216. width: 100%;
  217. background-color: #e6f7ff;
  218. border: 1px solid #91d5ff;
  219. padding: 8px 15px 8px 27px;
  220. border-radius: 4px;
  221. .iconImg {
  222. color: #1890FF;
  223. margin-right: 10px;
  224. }
  225. }
  226. }
  227. </style>