xt_vue/src/xt_pages/upload/config/City.vue

<template>
  <div class="main-contain">

    <div class="cell clearfix">
      <el-row :gutter="20">
        <el-col :span="24" :offset="6">
          <!--<div>质控平台的上报对接，是为了解决手工录入的效率和易出错的问题，对接涉及各种技术，请勿随意配置，联系酷医云客服协助处理。</div>-->
          <div>质控平台的上报对接，是为了解决手工录入的效率和易出错的问题，对接涉及各种技术，请勿随意配置，联系酷医云客服协助处理。<br/>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;微信:11111 电话：13535547901</div>

        </el-col>
      </el-row>
    </div>
    <div class="cell clearfix">
      <el-row :gutter="20">
        <el-col :span="24" :offset="20">
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" style="text-align: center">
            <el-form-item label="省" prop="province">
              <el-select v-model="form.province" clearable filterable placeholder="请选择" @change="changeProvince">
                <el-option
                  v-for="item in provinces"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="市" prop="city">
              <el-select v-model="form.city" clearable filterable placeholder="请选择" @change="changeCity">
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="网关地址" prop="gateway_address" >
              <el-input v-model="form.gateway_address"></el-input>
            </el-form-item>

            <el-form-item label="AppID" prop="app_id">
              <el-input v-model="form.app_id"></el-input>
            </el-form-item>

            <el-form-item label="密钥" prop="key">
              <el-input v-model="form.key"></el-input>
            </el-form-item>

            <el-form-item label="自动上传周期" prop="time_type">
              <el-radio-group v-model="form.time_type">
                <el-radio label="1">一周</el-radio>
                <el-radio label="2">二周</el-radio>
                <el-radio label="3">一个月</el-radio>
                <el-radio label="4">三个月</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>



  </div>

</template>

<script>
  import {GetDistrictsByUpid} from '@/api/district';
  import {getConfig,postConfig,postModifyConfig,getIsDocking} from '@/api/config';

  export default {
    name: 'City',
    data() {
      return {
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        provinces:[],
        citys:[],
        form: {
          id:0,
          province:'',
          city:'',
          gateway_address: '',
          app_id: '',
          key: '',
          time_type: '',
          config_type: 3,
        },rules: {
          gateway_address: [
            { required: true, message: '请输入网关地址', trigger: 'blur' },
          ],
          province: [
            { required: true, message: '请选择省份', trigger: 'change' }
          ],
          city: [
            { required: true, message: '请选择城市', trigger: 'change' }
          ],
          app_id: [
            { required: true, message: '请输入AppID', trigger: 'blur' },
          ],
          key: [
            { required: true, message: '请输入密钥', trigger: 'blur' },
          ],
          time_type: [
            { required: true, message: '请选择自动上传周期', trigger: 'change' }
          ],
        },
      }
    },created(){
      this.getDistricts()
      this.getConfig()


    },methods:{
      submitForm: function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.form.id == 0){
              postConfig(this.form).then(response=>{
                var res = response.data;
                console.log(res)
                if(res.state==1) {
                  this.config = res.data.config
                  this.form.id = this.config.id
                  this.form.gateway_address = this.config.gateway_address
                  this.form.app_id = this.config.app_id
                  this.form.key = this.config.key
                  this.form.province = this.config.province_id
                  this.form.time_type = this.config.time_quantum
                  this.$message.success('提交成功')
                }else{
                  this.$message.error(res.msg)

                }
              }).catch(e=>{
              })
            }else{
              postModifyConfig(this.form).then(response=>{
                var res = response.data;
                if(res.state==1) {
                  this.config = res.data.config
                  this.form.id = this.config.id
                  this.form.gateway_address = this.config.gateway_address
                  this.form.app_id = this.config.app_id
                  this.form.key = this.config.key
                  this.form.province = this.config.province_id
                  this.form.time_type = this.config.time_quantum
                  this.$message.success('修改成功')
                }else{
                  this.$message.error(res.msg)
                }
              }).catch(e=>{
              })
            }
          } else {
            return false;
          }
        });


      },
      getDistricts:function() {
        GetDistrictsByUpid({id:0}).then(response=>{
          var res = response.data;
          if(res.state===1) {
            this.provinces = res.data.citys
          }
        }).catch(e=>{

        })

      },getConfig:function() {
        getConfig({config_type: 3}).then(response=>{
          var res = response.data;
          if(res.state===1) {
            this.config = res.data.config
            this.form.id = this.config.id
            this.form.gateway_address = this.config.gateway_address
            this.form.app_id = this.config.app_id
            this.form.key = this.config.key
            this.form.time = this.config.time_quantum
            this.form.province = this.config.province_id
            this.form.city = this.config.city_id
          }
        }).catch(e=>{

        })


      },changeProvince(id) {
        this.citys = [];
        this.form.district = id;
        var upid = parseInt(id);
        if (isNaN(upid) || upid<=0) {
          return false;
        }
        GetDistrictsByUpid({id:upid}).then(response=>{
          var res = response.data;
          if(res.state===1) {
            this.citys = res.data.citys
          }else{
            this.$message.error(res.msg)


          }
        }).catch(e=>{

        })
      },
      changeCity(id) {
        getIsDocking({config_type: 2 , province: this.form.province, city:id}).then(response=>{
          var res = response.data;
          if(res.state==1) {
            if (res.data.is_docking == 2){
              this.$message.error('该地区尚未对接,请联系客服')
              this.form.province = '';
              this.form.city = '';

            }else{
              this.form.city = id;

            }
          }else{
            this.$message.error(res.msg)

          }
        }).catch(e=>{

        })

      }
    }

  }
</script>

<style scoped>

</style>