addCollector.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
  3. <a-spin :spinning="loading">
  4. <a-form-model :model="formData" ref="ruleForm" :rules="rules">
  5. <a-form-model-item label="选择网点" :label-col="{span:6}" :wrapper-col="{span:16}" prop="stationNo">
  6. <a-select
  7. id="addCollector-stationNo"
  8. placeholder="请选择网点名称"
  9. allowClear
  10. v-model="formData.stationNo"
  11. :showSearch="true"
  12. option-filter-prop="children"
  13. :filter-option="filterOption"
  14. >
  15. <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
  16. </a-select>
  17. </a-form-model-item>
  18. <a-form-model-item label="采集员姓名" :label-col="{span:6}" :wrapper-col="{span:16}">
  19. <a-input placeholder="请输入网点标签名称(30个字符以内)" v-model.trim="formData.gatherName" allowClear :maxLength="30" id="addCollector-gatherName"/>
  20. </a-form-model-item>
  21. <a-form-model-item label="采集员手机" :label-col="{span:6}" :wrapper-col="{span:16}" prop="gatherPhone">
  22. <a-input
  23. placeholder="请输入采集员手机"
  24. v-model.trim="formData.gatherPhone"
  25. allowClear
  26. :maxLength="11"
  27. :disabled="collectorId ? true :false "
  28. id="addCollector-gatherPhone"/>
  29. </a-form-model-item>
  30. <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
  31. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }" id="addCollector-handleSubmit">
  32. 保存
  33. </a-button>
  34. <a-button :style="{ marginLeft: '15px' }" @click="cancel" id="addCollector-cancel">
  35. 取消
  36. </a-button>
  37. </a-form-model-item>
  38. </a-form-model>
  39. </a-spin>
  40. </a-modal>
  41. </template>
  42. <script>
  43. import { saveCollector, collectorDetails } from '@/api/collector.js'
  44. import { stationList } from '@/api/releaseRecord.js'
  45. export default {
  46. name: 'AddCollector',
  47. props: {
  48. openModal: {
  49. type: Boolean,
  50. default: false
  51. },
  52. collectorId: {
  53. type: [Number, String],
  54. default: ''
  55. }
  56. },
  57. data () {
  58. return {
  59. formData: { gatherName: '', gatherPhone: '', stationNo: undefined },
  60. isShow: this.openModal, // 弹框状态
  61. titleText: '新增',
  62. rules: {
  63. stationNo: [{ required: true, message: '请选择网点', trigger: 'change' }],
  64. gatherPhone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', pattern: /^\d{11}$/ }]
  65. },
  66. loading: false,
  67. optionData: [] // 标签数据
  68. }
  69. },
  70. methods: {
  71. // 过滤数据
  72. filterOption (input, option) {
  73. return (
  74. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  75. )
  76. },
  77. // 获取标签数据
  78. getStationList () {
  79. stationList().then(res => {
  80. if (res.status == 200) {
  81. this.optionData = res.data || []
  82. }
  83. })
  84. },
  85. // 数据详情
  86. getPageInfo () {
  87. const _this = this
  88. _this.loading = true
  89. collectorDetails({
  90. id: _this.collectorId
  91. }).then(res => {
  92. if (res.status == 200) {
  93. _this.loading = false
  94. _this.formData.gatherName = res.data.gatherName
  95. _this.formData.gatherPhone = res.data.gatherPhone
  96. _this.formData.stationNo = res.data.stationNo
  97. }
  98. })
  99. },
  100. // 保存
  101. handleSubmit () {
  102. this.$refs.ruleForm.validate(valid => {
  103. const _this = this
  104. if (valid) {
  105. const params = JSON.parse(JSON.stringify(this.formData))
  106. params.id = _this.collectorId ? _this.collectorId : undefined
  107. saveCollector(params).then(res => {
  108. console.log(res, 'rrrrrrrrr')
  109. if (res.status == 200) {
  110. _this.$message.success(res.message)
  111. _this.$emit('refresh')
  112. setTimeout(function () {
  113. _this.cancel()
  114. }, 300)
  115. }
  116. })
  117. }
  118. })
  119. },
  120. cancel (e) {
  121. this.clear()
  122. this.$emit('close')
  123. },
  124. clear () {
  125. this.$refs.ruleForm.resetFields()
  126. delete this.formData.id
  127. this.formData.gatherPhone = ''
  128. this.formData.stationNo = undefined
  129. this.formData.gatherName = ''
  130. }
  131. },
  132. mounted() {
  133. this.getStationList()
  134. },
  135. // 监听弹窗
  136. watch: {
  137. // 父页面传过来的弹窗状态
  138. openModal (newValue, oldValue) {
  139. this.isShow = newValue
  140. },
  141. isShow (newValue, oldValue) {
  142. if (newValue) {
  143. if (this.collectorId) { // 编辑
  144. this.titleText = '编辑'
  145. this.getPageInfo()
  146. } else {
  147. this.titleText = '新增'
  148. }
  149. } else {
  150. this.cancel()
  151. }
  152. }
  153. }
  154. }
  155. </script>
  156. <style>
  157. </style>