| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |  <template>   <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>     <el-form ref="form" :model="form" :rules="rules" label-width="90px">         <el-form-item label="账户" prop="userName" v-if="type == 'add'">           <el-input v-model="form.userName"></el-input>         </el-form-item>         <el-form-item label="姓名" prop="nickName">           <el-input v-model="form.nickName"></el-input>         </el-form-item>         <el-form-item label="手机号" prop="phonenumber">           <el-input v-model="form.phonenumber"></el-input>         </el-form-item>         <el-form-item label="负责地区" prop="dutyArea">           <el-select v-model="form.dutyArea" placeholder="请选择负责地区" style="width: 200px;" filterable @change="changeDuty">             <el-option v-for="(item,index) in dutyAreaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>           </el-select>         </el-form-item>         <el-form-item label="省" prop="provinceId" v-if="form.dutyArea">           <el-select v-model="form.provinceId" placeholder="请选择省" @change="getCityData" filterable style="width: 200px;">             <el-option v-for="(item,index) in provinceDataList" :key="index" :label="item.name" :value="item.id"></el-option>           </el-select>         </el-form-item>         <el-form-item label="市" prop="cityId" v-if="form.dutyArea == '2' || form.dutyArea == '3'">           <el-select v-model="form.cityId" placeholder="请选择市" @change="getDistrictData" filterable style="width: 200px;">             <el-option v-for="(item, index) in cityDataList" :key="index" :label="item.name" :value="item.id"></el-option>           </el-select>         </el-form-item>         <el-form-item label="区" prop="districtId" v-if="form.dutyArea == '3'">           <el-select v-model="form.districtId" placeholder="请选择区" filterable style="width: 200px;" @change="changeDistrict">             <el-option v-for="(item, index) in districtDataList" :key="index" :label="item.name" :value="item.id"></el-option>           </el-select>         </el-form-item>         <el-form-item label="密码" prop="password" v-if="type == 'add'">           <el-input v-model="form.password" type="password"></el-input>         </el-form-item>         <el-form-item label="确认密码" prop="confirmPassword" v-if="type == 'add'">           <el-input v-model="form.confirmPassword" type="password"></el-input>         </el-form-item>     </el-form>     <div slot="footer" class="dialog-footer">       <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>       <el-button @click="cancel">取 消</el-button>     </div>   </el-dialog> </template> <script>   import {addTaxUserApi,getTaxInfoByIdApi,updateTaxInfoApi} from "@/api/admin/tax/tax"   import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"   import {dutyAreaOptions} from '@/utils/dataFormat'   export default {     data () {       return {         open: false,         disabled: false,         type: '',         title: '',         provinceDataList: [],         cityDataList: [],         districtDataList: [],         provinceName: '',         cityName: '',         districtName: '',         dutyAreaOptions: dutyAreaOptions,         id: undefined,         form: {           id: ''         },         rules: {           checkStatus: [             {required: true, message: '请选择审核结果', trigger: 'change'}           ],           serviceTime: [             {required: true, message: '请设置服务时间段', trigger: 'change'}           ]         }       }     },     methods: {       init(type, id) {         this.open = true         this.reset()         this.type = type         this.form.id = id         this.id = id         if(this.type == 'add') {           this.title = '新增'         }else if(this.type == 'update') {           this.title = '修改'         }         this.getProvinceData()        setTimeout(() => {        // 加延时          if(this.form.id) {            this.getData()          }        }, 50);         // this.resetForm("form");       },       // 表单重置       reset() {         this.form = {         };         this.resetForm("form");       },       getData() {         getTaxInfoByIdApi(this.form.id).then(res => {           if(res.code == 200) {             this.form = res.data             //获取parentArea 若长度为2,则为省级,三为市级,四为区级             let arr = res.data.parentArea.split(',')             if(arr.length == 2) {               this.form.provinceId = res.data.scopeId             }else if(arr.length == 3) {               this.form.provinceId = arr[2]               getRegionChildrenApi(this.form.provinceId).then(res => {                 if(res.code == 200) {                   this.cityDataList = res.data                 }               })               setTimeout(() => {        // 加延时                 this.form.cityId = res.data.scopeId               }, 50);             }else if(arr.length == 4) {               this.form.provinceId = arr[2]               getRegionChildrenApi(this.form.provinceId).then(res => {                 if(res.code == 200) {                   this.cityDataList = res.data                 }               })               setTimeout(() => {        // 加延时                 this.form.cityId = arr[3]                 getRegionChildrenApi(this.form.cityId).then(res => {                   if(res.code == 200) {                     this.districtDataList = res.data                   }                 })               }, 50);              this.form.districtId = res.data.scopeId             }             let list = []             list = res.data             if(list.userType == 'GOV_PROV') {               this.form.dutyArea = 1             }else if(list.userType == 'GOV_CITY') {               this.form.dutyArea = 2             }else if(list.userType == 'GOV_DISTRI') {               this.form.dutyArea = 3             }           }         })       },       getProvinceData() {         getProvinceDataApi().then(res => {           if(res.code == 200) {             this.provinceDataList = res.data           }         })       },       //选择省份       getCityData() {         this.form.cityId = ''         this.form.districtId = ''         getRegionChildrenApi(this.form.provinceId).then(res => {           if(res.code == 200) {             this.cityDataList = res.data           }         })         this.$forceUpdate()       },       //选择市       getDistrictData() {         this.form.districtId = ''         getRegionChildrenApi(this.form.cityId).then(res => {           if(res.code == 200) {             this.districtDataList = res.data           }         })         this.$forceUpdate()       },       changeDistrict() {         this.$forceUpdate()       },       //视图更新不够及时       changeDuty() {         this.$forceUpdate()       },       submitForm() {         this.$refs.form.validate(valid => {           if (valid) {             this.disabled = true             if(this.form.dutyArea == '1') {               let obj = this.provinceDataList.find(item => {                 return item.id == this.form.provinceId               })               this.form.scopeId = this.form.provinceId               this.form.remark = obj.name               this.form.userType = 'GOV_PROV'             }else if(this.form.dutyArea == '2') {               let obj = this.provinceDataList.find(item => {                 return item.id == this.form.provinceId               })               this.provinceName = obj.name               let objCity = this.cityDataList.find(item => {                 return item.id == this.form.cityId               })               this.cityName = objCity.name               this.form.remark = this.provinceName+this.cityName               this.form.scopeId = this.form.cityId               this.form.userType = 'GOV_CITY'             }else if(this.form.dutyArea == '3') {               let obj = this.provinceDataList.find(item => {                 return item.id == this.form.provinceId               })               this.provinceName = obj.name               let objCity = this.cityDataList.find(item => {                 return item.id == this.form.cityId               })               this.cityName = objCity.name               let objDis = this.districtDataList.find(item => {                 return item.id == this.form.districtId               })               this.districtName = objDis.name               this.form.remark = this.provinceName+this.cityName+this.districtName               this.form.scopeId = this.form.districtId               this.form.userType = 'GOV_DISTRI'             }             if(this.id) {               updateTaxInfoApi(this.form).then(res => {                 this.disabled = false;                 if(res.code == 200) {                   this.$message({                     message: '修改成功',                     type: 'success'                   });                 }                 this.open = false;                 this.$emit('refreshData');               })             }else {               addTaxUserApi(this.form).then(res => {                 this.disabled = false;                 if(res.code == 200) {                   this.$message({                     message: '新增成功',                     type: 'success'                   });                 }                 this.open = false;                 this.$emit('refreshData');               })             }           }         })       },       cancel() {         this.open = false       },     }   } </script> <style> </style>
 |