network.vue 9.8 KB

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