collector.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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="24">
  6. <a-col :xs="24" :sm="12" :md="8" :lg="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 :xs="24" :sm="12" :md="8" :lg="6">
  18. <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  19. <a-input id="network-stationNo" allowClear :maxLength="30" v-model="queryParam.stationNo" placeholder="请输入网点名称" />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :xs="24" :sm="12" :md="8" :lg="6">
  23. <a-form-item label="采集员" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  24. <a-input id="network-nameOrPhone" allowClear :maxLength="30" v-model="queryParam.nameOrPhone" placeholder="请输入姓名/手机号码" />
  25. </a-form-item>
  26. </a-col>
  27. <a-col :xs="24" :sm="12" :md="8" :lg="6">
  28. <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  29. <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
  30. </a-col>
  31. </a-row>
  32. </a-form>
  33. </div>
  34. <div class="table-operator">
  35. <a-button v-if="$hasPermissions('B_network_add')" class="add-btn" id="network-btn-add" type="primary" @click="handleEdit">新增</a-button>
  36. </div>
  37. <s-table
  38. ref="table"
  39. size="default"
  40. :rowKey="(record) => record.id"
  41. :columns="columns"
  42. :data="loadData"
  43. bordered>
  44. <!-- 启禁用 -->
  45. <span slot="status" slot-scope="text, record">
  46. <a-switch
  47. checkedChildren="启用"
  48. unCheckedChildren="禁用"
  49. v-model="record.loginFlag"
  50. @change="changeFlagHandle(text, record)"
  51. id="userList-changeFlagHandle" />
  52. <!-- <span v-if="!$hasPermissions('B_userManage_enable')">--</span> -->
  53. </span>
  54. <!-- 操作 -->
  55. <template slot="action" slot-scope="text, record">
  56. <a-icon
  57. type="unlock"
  58. title="重置密码"
  59. class="actionBtn icon-orange"
  60. @click="resetPassword(record)" />
  61. <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
  62. <a-icon
  63. type="delete"
  64. title="删除"
  65. class="actionBtn icon-red"
  66. @click="delect(record)" />
  67. <!-- <span v-if="!$hasPermissions('B_userManage_edit') && !($hasPermissions('B_userManage_resetPwd') && record.loginFlag==1) && !($hasPermissions('B_userManage_del') && record.loginFlag==0) ">--</span> -->
  68. </template>
  69. </s-table>
  70. <!-- 新增编辑 -->
  71. <add-Collector :openModal="openCollectorModal" :collectorId="collectorId" @refresh="handleReset" @close="closeModal" />
  72. </a-card>
  73. </template>
  74. <script>
  75. import { STable, VSelect } from '@/components'
  76. import moment from 'moment'
  77. import addCollector from './addCollector.vue'
  78. import { getCollectorList, resetPSD,updateEnableStatus,delectCollector} from '@/api/collector'
  79. export default {
  80. name: 'Collector',
  81. components: { STable, VSelect, addCollector },
  82. data () {
  83. return {
  84. formItemLayout: {
  85. labelCol: { span: 7 },
  86. wrapperCol: { span: 17 }
  87. },
  88. // 查询参数
  89. queryParam: {
  90. registerregisterBeginDate: null, // 开始时间
  91. registerregisterEndDate: null, // 结束时间
  92. nameOrPhone: '', // 网点名称
  93. stationNo: ''
  94. },
  95. // 表头
  96. columns: [
  97. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  98. { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
  99. { title: '网点名称', dataIndex: 'stationNo', width: 200, align: 'center', customRender: text => { return text || '--' } },
  100. { title: '采集员姓名', dataIndex: 'gatherName', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
  101. { title: '采集员手机', dataIndex: 'gatherPhone', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
  102. { title: '状态', dataIndex: 'loginFlag', width: 100, align: 'center', slot: 'status' },
  103. { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
  104. ],
  105. // 加载数据方法 必须为 Promise 对象
  106. loadData: parameter => {
  107. return getCollectorList(Object.assign(parameter, this.queryParam)).then(res => {
  108. if (res.status == 200) {
  109. const no = (res.data.pageNo - 1) * res.data.pageSize
  110. for (let i = 0; i < res.data.list.length; i++) {
  111. const _item = res.data.list[i]
  112. _item.no = no + i + 1
  113. }
  114. return res.data
  115. }
  116. })
  117. },
  118. // 将默认当天时间日期回显在时间选择框中
  119. time: [],
  120. dateFormat: 'YYYY-MM-DD',
  121. openCollectorModal: false, // 新增编辑网点信息
  122. collectorId: null // 网点id
  123. }
  124. },
  125. methods: {
  126. moment,
  127. // 不可选日期
  128. disabledDate (date, dateStrings) {
  129. return date && date.valueOf() > Date.now()
  130. },
  131. // 创建时间change
  132. onChange (dates, dateStrings) {
  133. if ((dates, dateStrings)) {
  134. this.queryParam.registerBeginDate = dateStrings[0]
  135. this.queryParam.registerregisterEndDate = dateStrings[1]
  136. }
  137. },
  138. filterOption (input, option) {
  139. return (
  140. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  141. )
  142. },
  143. // 重置
  144. handleReset () {
  145. this.queryParam.registerBeginDate = undefined
  146. this.queryParam.registerEndDate = undefined
  147. this.queryParam.nameOrPhone = ''
  148. this.time = []
  149. this.$refs.table.refresh(true)
  150. this.networkId = undefined
  151. this.queryParam.stationNo = ''
  152. },
  153. // 新增、编辑网点
  154. handleEdit (row) {
  155. this.collectorId = row ? row.id : null
  156. this.openCollectorModal = true
  157. console.log(this.collectorId)
  158. },
  159. // 关闭弹框
  160. closeModal () {
  161. this.collectorId = null
  162. this.openCollectorModal = false
  163. this.$refs.table.refresh()
  164. },
  165. // 修改状态
  166. changeFlagHandle (text, record) {
  167. const _data = {
  168. id: record.id,
  169. flag: record.loginFlag ? '1' : '0'
  170. }
  171. // updateEnableStatus(_data).then(res => {
  172. // if (res.status + '' === '200') {
  173. // this.$message.success(res.message)
  174. // } else {
  175. // record.loginFlag = !record.loginFlag
  176. // }
  177. // })
  178. },
  179. // 重置密码
  180. resetPassword (row) {
  181. // resetPSD({
  182. // id: row.id
  183. // }).then(res => {
  184. // if (res.status == 200) {
  185. // this.$message.success(res.message)
  186. // }
  187. // })
  188. },
  189. // 删除
  190. delect (row) {
  191. const _this = this
  192. this.$confirm({
  193. title: '警告',
  194. centered: true,
  195. content: '删除后无法恢复,确认删除?',
  196. okText: '确定',
  197. cancelText: '取消'
  198. // onOk () {
  199. // delectUserPower({
  200. // id: row.id
  201. // }).then(res => {
  202. // if (res.status == 200) {
  203. // _this.$message.success(res.message)
  204. // _this.$refs.table.refresh()
  205. // }
  206. // })
  207. // }
  208. })
  209. }
  210. }
  211. }
  212. </script>
  213. <style lang="less" scoped>
  214. .network-table-page-search-wrapper{
  215. .network-searchForm{
  216. .ant-form-inline .ant-form-item{
  217. width: 100%;
  218. }
  219. // 搜索框的下间距
  220. .ant-form-item {
  221. margin-bottom: 10px;
  222. }
  223. .handle-btn{
  224. margin-top: 4px;
  225. }
  226. .serach-btn{
  227. margin-right: 10px;
  228. }
  229. }
  230. .actionBtn {
  231. font-size: 20px;
  232. padding: 0 10px;
  233. }
  234. // 合计
  235. .total {
  236. margin: 15px 0 25px;
  237. width: 100%;
  238. background-color: #e6f7ff;
  239. border: 1px solid #91d5ff;
  240. padding: 8px 15px 8px 27px;
  241. border-radius: 4px;
  242. .iconImg {
  243. color: #1890FF;
  244. margin-right: 10px;
  245. }
  246. }
  247. }
  248. </style>