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

<template>
  <div class="main-contain">
    <div>
      <div class="titleOne">
        质控平台的上报对接，是为了解决手工录入的效率和易出错的问题，对接涉及各种技术，请勿随意配置，联系酷医云客服协助处理。
      </div>
      <div class="titleOne">微信:kuyicloud 电话：18682074632</div>
      <div class="formBox">
        <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')"
              class="changeLeft"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </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>
.changeLeft {
  margin-left: -254px !important;
}
.titleOne {
  line-height: 30px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.formBox {
  width: 46%;
  margin: 0 auto;
}
</style>
<style lang="scss">
.formBox {
  .el-select {
    width: 100%;
  }
  .el-input__inner {
    width: 90%;
  }
}
</style>