AddTaxUser.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  3. <el-form ref="form" :model="form" :rules="rules" label-width="90px">
  4. <el-form-item label="账户" prop="userName" v-if="type == 'add'">
  5. <el-input v-model="form.userName"></el-input>
  6. </el-form-item>
  7. <el-form-item label="姓名" prop="nickName">
  8. <el-input v-model="form.nickName"></el-input>
  9. </el-form-item>
  10. <el-form-item label="手机号" prop="phonenumber">
  11. <el-input v-model="form.phonenumber"></el-input>
  12. </el-form-item>
  13. <el-form-item label="负责地区" prop="dutyArea">
  14. <el-select v-model="form.dutyArea" placeholder="请选择负责地区" style="width: 200px;" filterable @change="changeDuty">
  15. <el-option v-for="(item,index) in dutyAreaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="省" prop="provinceId" v-if="form.dutyArea">
  19. <el-select v-model="form.provinceId" placeholder="请选择省" @change="getCityData" filterable style="width: 200px;">
  20. <el-option v-for="(item,index) in provinceDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="市" prop="cityId" v-if="form.dutyArea == '2' || form.dutyArea == '3'">
  24. <el-select v-model="form.cityId" placeholder="请选择市" @change="getDistrictData" filterable style="width: 200px;">
  25. <el-option v-for="(item, index) in cityDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item label="区" prop="districtId" v-if="form.dutyArea == '3'">
  29. <el-select v-model="form.districtId" placeholder="请选择区" filterable style="width: 200px;" @change="changeDistrict">
  30. <el-option v-for="(item, index) in districtDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  31. </el-select>
  32. </el-form-item>
  33. <el-form-item label="密码" prop="password" v-if="type == 'add'">
  34. <el-input v-model="form.password" type="password"></el-input>
  35. </el-form-item>
  36. <el-form-item label="确认密码" prop="confirmPassword" v-if="type == 'add'">
  37. <el-input v-model="form.confirmPassword" type="password"></el-input>
  38. </el-form-item>
  39. </el-form>
  40. <div slot="footer" class="dialog-footer">
  41. <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
  42. <el-button @click="cancel">取 消</el-button>
  43. </div>
  44. </el-dialog>
  45. </template>
  46. <script>
  47. import {addTaxUserApi,getTaxInfoByIdApi,updateTaxInfoApi} from "@/api/admin/tax/tax"
  48. import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"
  49. import {dutyAreaOptions} from '@/utils/dataFormat'
  50. export default {
  51. data () {
  52. return {
  53. open: false,
  54. disabled: false,
  55. type: '',
  56. title: '',
  57. provinceDataList: [],
  58. cityDataList: [],
  59. districtDataList: [],
  60. provinceName: '',
  61. cityName: '',
  62. districtName: '',
  63. dutyAreaOptions: dutyAreaOptions,
  64. id: undefined,
  65. form: {
  66. id: ''
  67. },
  68. rules: {
  69. checkStatus: [
  70. {required: true, message: '请选择审核结果', trigger: 'change'}
  71. ],
  72. serviceTime: [
  73. {required: true, message: '请设置服务时间段', trigger: 'change'}
  74. ]
  75. }
  76. }
  77. },
  78. methods: {
  79. init(type, id) {
  80. this.open = true
  81. this.reset()
  82. this.type = type
  83. this.form.id = id
  84. this.id = id
  85. if(this.type == 'add') {
  86. this.title = '新增'
  87. }else if(this.type == 'update') {
  88. this.title = '修改'
  89. }
  90. this.getProvinceData()
  91. setTimeout(() => { // 加延时
  92. if(this.form.id) {
  93. this.getData()
  94. }
  95. }, 50);
  96. // this.resetForm("form");
  97. },
  98. // 表单重置
  99. reset() {
  100. this.form = {
  101. };
  102. this.resetForm("form");
  103. },
  104. getData() {
  105. getTaxInfoByIdApi(this.form.id).then(res => {
  106. if(res.code == 200) {
  107. this.form = res.data
  108. //获取parentArea 若长度为2,则为省级,三为市级,四为区级
  109. let arr = res.data.parentArea.split(',')
  110. if(arr.length == 2) {
  111. this.form.provinceId = res.data.scopeId
  112. }else if(arr.length == 3) {
  113. this.form.provinceId = arr[2]
  114. getRegionChildrenApi(this.form.provinceId).then(res => {
  115. if(res.code == 200) {
  116. this.cityDataList = res.data
  117. }
  118. })
  119. setTimeout(() => { // 加延时
  120. this.form.cityId = res.data.scopeId
  121. }, 50);
  122. }else if(arr.length == 4) {
  123. this.form.provinceId = arr[2]
  124. getRegionChildrenApi(this.form.provinceId).then(res => {
  125. if(res.code == 200) {
  126. this.cityDataList = res.data
  127. }
  128. })
  129. setTimeout(() => { // 加延时
  130. this.form.cityId = arr[3]
  131. getRegionChildrenApi(this.form.cityId).then(res => {
  132. if(res.code == 200) {
  133. this.districtDataList = res.data
  134. }
  135. })
  136. }, 50);
  137. this.form.districtId = res.data.scopeId
  138. }
  139. let list = []
  140. list = res.data
  141. if(list.userType == 'GOV_PROV') {
  142. this.form.dutyArea = 1
  143. }else if(list.userType == 'GOV_CITY') {
  144. this.form.dutyArea = 2
  145. }else if(list.userType == 'GOV_DISTRI') {
  146. this.form.dutyArea = 3
  147. }
  148. }
  149. })
  150. },
  151. getProvinceData() {
  152. getProvinceDataApi().then(res => {
  153. if(res.code == 200) {
  154. this.provinceDataList = res.data
  155. }
  156. })
  157. },
  158. //选择省份
  159. getCityData() {
  160. this.form.cityId = ''
  161. this.form.districtId = ''
  162. getRegionChildrenApi(this.form.provinceId).then(res => {
  163. if(res.code == 200) {
  164. this.cityDataList = res.data
  165. }
  166. })
  167. this.$forceUpdate()
  168. },
  169. //选择市
  170. getDistrictData() {
  171. this.form.districtId = ''
  172. getRegionChildrenApi(this.form.cityId).then(res => {
  173. if(res.code == 200) {
  174. this.districtDataList = res.data
  175. }
  176. })
  177. this.$forceUpdate()
  178. },
  179. changeDistrict() {
  180. this.$forceUpdate()
  181. },
  182. //视图更新不够及时
  183. changeDuty() {
  184. this.$forceUpdate()
  185. },
  186. submitForm() {
  187. this.$refs.form.validate(valid => {
  188. if (valid) {
  189. this.disabled = true
  190. if(this.form.dutyArea == '1') {
  191. let obj = this.provinceDataList.find(item => {
  192. return item.id == this.form.provinceId
  193. })
  194. this.form.scopeId = this.form.provinceId
  195. this.form.remark = obj.name
  196. this.form.userType = 'GOV_PROV'
  197. }else if(this.form.dutyArea == '2') {
  198. let obj = this.provinceDataList.find(item => {
  199. return item.id == this.form.provinceId
  200. })
  201. this.provinceName = obj.name
  202. let objCity = this.cityDataList.find(item => {
  203. return item.id == this.form.cityId
  204. })
  205. this.cityName = objCity.name
  206. this.form.remark = this.provinceName+this.cityName
  207. this.form.scopeId = this.form.cityId
  208. this.form.userType = 'GOV_CITY'
  209. }else if(this.form.dutyArea == '3') {
  210. let obj = this.provinceDataList.find(item => {
  211. return item.id == this.form.provinceId
  212. })
  213. this.provinceName = obj.name
  214. let objCity = this.cityDataList.find(item => {
  215. return item.id == this.form.cityId
  216. })
  217. this.cityName = objCity.name
  218. let objDis = this.districtDataList.find(item => {
  219. return item.id == this.form.districtId
  220. })
  221. this.districtName = objDis.name
  222. this.form.remark = this.provinceName+this.cityName+this.districtName
  223. this.form.scopeId = this.form.districtId
  224. this.form.userType = 'GOV_DISTRI'
  225. }
  226. if(this.id) {
  227. updateTaxInfoApi(this.form).then(res => {
  228. this.disabled = false;
  229. if(res.code == 200) {
  230. this.$message({
  231. message: '修改成功',
  232. type: 'success'
  233. });
  234. }
  235. this.open = false;
  236. this.$emit('refreshData');
  237. })
  238. }else {
  239. addTaxUserApi(this.form).then(res => {
  240. this.disabled = false;
  241. if(res.code == 200) {
  242. this.$message({
  243. message: '新增成功',
  244. type: 'success'
  245. });
  246. }
  247. this.open = false;
  248. this.$emit('refreshData');
  249. })
  250. }
  251. }
  252. })
  253. },
  254. cancel() {
  255. this.open = false
  256. },
  257. }
  258. }
  259. </script>
  260. <style>
  261. </style>