network.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  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="20">
  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="网点标签">
  19. <a-select
  20. style="max-height: 50px;overflow: auto;margin-top: 3px;"
  21. id="network-labelNoList"
  22. placeholder="请选择网点标签"
  23. mode="multiple"
  24. allowClear
  25. v-model="queryParam.labelNoList"
  26. :showSearch="true"
  27. option-filter-prop="children"
  28. :filter-option="filterOption"
  29. >
  30. <a-select-option v-for="item in lableData" :key="item.labelNo" :value="item.labelNo">{{ item.labelName }}</a-select-option>
  31. </a-select>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :span="4">
  35. <a-form-item prop="provinceCode" label="省:">
  36. <a-select v-model="queryParam.provinceCode" @change="getCityList" placeholder="请选择省">
  37. <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
  38. </a-select>
  39. </a-form-item>
  40. </a-col>
  41. <a-col :span="4">
  42. <a-form-item prop="cityCode" label="市:">
  43. <a-select v-model="queryParam.cityCode" @change="getAreaList" placeholder="请选择市">
  44. <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
  45. </a-select>
  46. </a-form-item>
  47. </a-col>
  48. <a-col :span="4">
  49. <a-form-item prop="districtCode" label="区:">
  50. <a-select v-model="queryParam.districtCode" placeholder="请选择区/县">
  51. <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
  52. </a-select>
  53. </a-form-item>
  54. </a-col>
  55. </a-row>
  56. <a-row :gutter="20">
  57. <a-col :span="6">
  58. <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  59. <a-input id="network-queryWord" allowClear :maxLength="30" v-model="queryParam.queryWord" placeholder="请输入网点名称" />
  60. </a-form-item>
  61. </a-col>
  62. <a-col :span="6">
  63. <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  64. <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
  65. </a-col>
  66. </a-row>
  67. </a-form>
  68. </div>
  69. <div class="table-operator">
  70. <a-button v-if="$hasPermissions('B_network_add')" class="add-btn" id="network-btn-add" type="primary" @click="handleEdit">新增网点</a-button>
  71. </div>
  72. <!-- 合计 -->
  73. <div class="total">
  74. <a-icon
  75. type="info-circle"
  76. class="iconImg"
  77. <strong>总计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 条</span>
  78. </a-icon></div>
  79. <s-table
  80. ref="table"
  81. size="default"
  82. :rowKey="(record) => record.id"
  83. :columns="columns"
  84. :data="loadData"
  85. :scroll="{ x: 1680}"
  86. bordered>
  87. <!-- 操作 -->
  88. <template slot="action" slot-scope="text, record">
  89. <a-icon
  90. v-if="$hasPermissions('B_network_look')"
  91. type="eye"
  92. id="network-handleView"
  93. title="详情"
  94. class="actionBtn icon-green"
  95. @click="handleView(record)" />
  96. <a-icon
  97. v-if="$hasPermissions('B_network_edit')"
  98. type="edit"
  99. id="network-handleEdit"
  100. title="编辑"
  101. class="actionBtn icon-blues"
  102. @click="handleEdit(record)" />
  103. <a-badge v-if="$hasPermissions('B_network_bind')" :count="record.deviceNum">
  104. <a-icon type="link" id="network-handleLink" title="绑定箱体设备" class="actionBtn icon-orange" @click="handleBind(record)" />
  105. </a-badge>
  106. <span v-if="!$hasPermissions('B_network_look') && !$hasPermissions('B_network_edit') && !$hasPermissions('B_network_bind')">--</span>
  107. </template>
  108. </s-table>
  109. <!-- 新增编辑 -->
  110. <edit-network-modal :openModal="openNetworkModal" :networkId="networkId" @success="handleReset" @close="closeModal" />
  111. <!-- 详情 -->
  112. <details-network-modal :openModal="openDetailModal" :networkId="networkId" :networkNo="networkNo" @close="closeModal" />
  113. <!-- 绑定箱体设备 -->
  114. <equipment-modal :openModal="openBindModal" :networkId="networkId" :networkNo="networkNo" @close="closeModal" />
  115. </a-card>
  116. </template>
  117. <script>
  118. import { STable, VSelect } from '@/components'
  119. import moment from 'moment'
  120. import editNetworkModal from './editModal.vue'
  121. import detailsNetworkModal from './detailsModal.vue'
  122. import equipmentModal from './equipmentModal.vue'
  123. import { stationList, getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
  124. import { lableSeleteList } from '@/api/labelSetting.js'
  125. export default {
  126. name: 'Network',
  127. components: { STable, VSelect, editNetworkModal, detailsNetworkModal, equipmentModal },
  128. data () {
  129. return {
  130. formItemLayout: {
  131. labelCol: { span: 7 },
  132. wrapperCol: { span: 17 }
  133. },
  134. // 查询参数
  135. queryParam: {
  136. beginDate: null, // 开始时间
  137. endDate: null, // 结束时间
  138. queryWord: '', // 网点名称
  139. provinceCode: undefined, // 省
  140. cityCode: undefined, // 市
  141. districtCode: undefined, // 区
  142. labelNoList: []
  143. },
  144. lableData: [],
  145. // 表头
  146. columns: [
  147. { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
  148. { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
  149. { title: '网点名称', dataIndex: 'name', width: 200, align: 'center', customRender: text => { return text || '--' } },
  150. { title: '网点标签', dataIndex: 'labelName', width: 200, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
  151. { title: '省', dataIndex: 'provinceName', width: 100, align: 'center' },
  152. { title: '市', dataIndex: 'cityName', width: 100, align: 'center' },
  153. { title: '区', dataIndex: 'districtName', width: 100, align: 'center' },
  154. { title: '详细地址', dataIndex: 'address', width: 200, align: 'center', ellipsis: true },
  155. { title: '兑换规则', dataIndex: 'exRuleName', width: 150, align: 'center' },
  156. { title: '投放时间段名称', dataIndex: 'timeRuleName', width: 150, align: 'center' },
  157. { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
  158. ],
  159. // 加载数据方法 必须为 Promise 对象
  160. loadData: parameter => {
  161. return stationList(Object.assign(parameter, this.queryParam)).then(res => {
  162. if (res.status == 200) {
  163. const no = (res.data.pageNo - 1) * res.data.pageSize
  164. this.orderTotal = res.data.count
  165. for (let i = 0; i < res.data.list.length; i++) {
  166. const _item = res.data.list[i]
  167. _item.no = no + i + 1
  168. }
  169. return res.data
  170. }
  171. })
  172. },
  173. // 将默认当天时间日期回显在时间选择框中
  174. time: [],
  175. dateFormat: 'YYYY-MM-DD',
  176. orderTotal: '', // 合计开单数量
  177. openNetworkModal: false, // 新增编辑网点信息
  178. networkId: null, // 网点id
  179. networkNo: null, // 网点编号
  180. openDetailModal: false, // 网点信息详情
  181. openBindModal: false, // 绑定箱体设备
  182. addrProvinceList: [], // 省下拉
  183. addrCityList: [], // 市下拉
  184. addrDistrictList: [] // 区下拉
  185. }
  186. },
  187. methods: {
  188. moment,
  189. // 不可选日期
  190. disabledDate (date, dateStrings) {
  191. return date && date.valueOf() > Date.now()
  192. },
  193. // 创建时间change
  194. onChange (dates, dateStrings) {
  195. if ((dates, dateStrings)) {
  196. this.queryParam.beginDate = dateStrings[0]
  197. this.queryParam.endDate = dateStrings[1]
  198. }
  199. },
  200. filterOption (input, option) {
  201. return (
  202. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  203. )
  204. },
  205. // 获取标签数据
  206. getlableSeleteList () {
  207. lableSeleteList().then(res => {
  208. if (res.status == 200) {
  209. this.lableData = res.data || []
  210. }
  211. })
  212. },
  213. // 重置
  214. handleReset () {
  215. this.queryParam.beginDate = undefined
  216. this.queryParam.endDate = undefined
  217. this.queryParam.queryWord = ''
  218. this.queryParam.provinceCode = undefined
  219. this.queryParam.cityCode = undefined
  220. this.queryParam.districtCode = undefined
  221. this.time = []
  222. this.$refs.table.refresh(true)
  223. this.networkId = undefined
  224. this.networkNo = undefined
  225. this.queryParam.labelNoList = []
  226. },
  227. // 新增、编辑网点
  228. handleEdit (row) {
  229. this.networkId = row ? row.id : null
  230. this.networkNo = row ? row.stationNo : null
  231. this.openNetworkModal = true
  232. },
  233. // 查看详情
  234. handleView (row) {
  235. this.networkId = row ? row.id : null
  236. this.networkNo = row ? row.stationNo : null
  237. this.openDetailModal = true
  238. },
  239. // 关联箱体设备
  240. handleBind (row) {
  241. this.networkId = row ? row.id : null
  242. this.networkNo = row ? row.stationNo : null
  243. this.openBindModal = true
  244. },
  245. // 关闭弹框
  246. closeModal () {
  247. this.networkId = null
  248. this.openNetworkModal = false
  249. this.openDetailModal = false
  250. this.openBindModal = false
  251. this.$refs.table.refresh()
  252. },
  253. // 获取省列表'
  254. getProvinceList () {
  255. getProvince().then(res => {
  256. if (res.status == 200) {
  257. this.addrProvinceList = res.data || []
  258. } else {
  259. this.addrProvinceList = []
  260. }
  261. })
  262. },
  263. // 获取城市列表
  264. getCityList (val) {
  265. this.addrCityList = []
  266. this.addrDistrictList = []
  267. this.queryParam.cityCode = undefined
  268. this.queryParam.districtCode = undefined
  269. this.getCityListRequest(val)
  270. },
  271. getCityListRequest (val) {
  272. getCityByPro({
  273. id: val
  274. }).then(res => {
  275. if (res.status == 200) {
  276. this.addrCityList = res.data || []
  277. } else {
  278. this.addrCityList = []
  279. }
  280. })
  281. },
  282. // 获取区县列表
  283. getAreaList (val) {
  284. this.addrDistrictList = []
  285. this.queryParam.districtCode = undefined
  286. this.getAreaListRequest(val)
  287. },
  288. getAreaListRequest (val) {
  289. getDistrictByCity({
  290. id: val
  291. }).then(res => {
  292. if (res.status == 200) {
  293. this.addrDistrictList = res.data || []
  294. } else {
  295. this.addrDistrictList = []
  296. }
  297. })
  298. }
  299. },
  300. mounted () {
  301. this.getProvinceList()
  302. this.getlableSeleteList()
  303. }
  304. }
  305. </script>
  306. <style lang="less" scoped>
  307. .network-table-page-search-wrapper{
  308. .network-searchForm{
  309. .ant-form-inline .ant-form-item{
  310. width: 100%;
  311. }
  312. // 搜索框的下间距
  313. .ant-form-item {
  314. margin-bottom: 10px;
  315. }
  316. .handle-btn{
  317. margin-top: 4px;
  318. }
  319. .serach-btn{
  320. margin-right: 10px;
  321. }
  322. }
  323. .actionBtn {
  324. font-size: 20px;
  325. padding: 0 10px;
  326. }
  327. // 合计
  328. .total {
  329. margin: 15px 0 25px;
  330. width: 100%;
  331. background-color: #e6f7ff;
  332. border: 1px solid #91d5ff;
  333. padding: 8px 15px 8px 27px;
  334. border-radius: 4px;
  335. .iconImg {
  336. color: #1890FF;
  337. margin-right: 10px;
  338. }
  339. }
  340. }
  341. </style>