epmet-work-pc-chengyang/src/views/modules/sys/icvaccineprarmeter-add-or-update.vue

<template>
<!--  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')"-->
<!--             :close-on-click-modal="false"-->
<!--             :close-on-press-escape="false"-->
<!--             center>-->
  <div>
    <div class="dialog-h-content scroll-h">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" class="form" :disabled="this.isLook">
      <el-form-item label="所属网格" label-width="150px" prop="gridId">
        <el-select class="item_width_2"
                   v-model.trim="dataForm.gridId"
                   placeholder="请选择"
                   clearable
                   @change="handleChangeGrid"
        >
          <el-option v-for="item in gridList"
                     @click.native="gridClick(item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item v-if="dataForm.homeId === null" label="小区" label-width="150px" prop="villageName">
            <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.villageName"  placeholder="小区"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.homeId === null" label="楼号" label-width="150px" prop="buildName">
            <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.buildName"  placeholder="楼号"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.homeId === null" label="单元号" label-width="150px" prop="unitName">
            <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.unitName"  placeholder="单元号"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.homeId === null" label="房号" label-width="150px" prop="homeName">
            <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.homeName"  placeholder="房号"></el-input>
        </el-form-item>
      <el-form-item v-if="dataForm.homeId !== null" label="所属房屋" label-width="150px" prop="homeId">
              <el-select
                  v-model.trim="dataForm.villageId"
                  placeholder="请选择小区"
                  size="small"
                  clearable
                  class="resi-cell-select"
                  @change="handleChangeV"
                  style="margin-right: 8px; width: 120px"
              >
                <el-option
                    v-for="item in villageList"
                    @click.native="villageClick(item)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                  v-model.trim="dataForm.buildId"
                  placeholder="楼号"
                  size="small"
                  clearable
                  :disabled="changeVDisabled"
                  class="resi-cell-select resi-cell-select-middle"
                  @change="handleChangeB"
                  style="margin-right: 8px; width: 120px"
              >
                <el-option
                    v-for="item in buildList"
                    @click.native="buildClick(item)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                  v-model.trim="dataForm.unitId"
                  placeholder="单元"
                  size="small"
                  clearable
                  :disabled="changeBDisabled"
                  class="resi-cell-select resi-cell-select-middle"
                  @change="handleChangeD"
                  style="margin-right: 8px; width: 120px"
              >
                <el-option
                    v-for="item in unitList"
                    @click.native="unitClick(item)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                  v-model.trim="dataForm.homeId"
                  placeholder="房号"
                  size="small"
                  clearable
                  :disabled="changeDDisabled"
                  class="resi-cell-select resi-cell-select-middle"
                  @change="handleChangeH"
                  style="width: 120px"
              >
                <el-option
                    v-for="item in homeList"
                    @click.native="homeClick(item)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
      </el-form-item>
      <el-form-item label="户口性质" label-width="150px" prop="householdType">
          <el-select class="item_width_2"
                     v-model.trim="dataForm.householdType"
                     placeholder="请选择"
                     clearable
          >
            <el-option v-for="item in household"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="姓名" label-width="150px" prop="name">
          <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.name"  placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" label-width="150px" prop="mobile">
          <el-input v-model="dataForm.mobile" class="item_width_2" clearable style="width: 200px; margin-right: 20px"  placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item label="证件号" label-width="150px" prop="idCard">
          <el-input v-model="dataForm.idCard" class="item_width_2" clearable style="width: 200px; margin-right: 20px" placeholder="证件号"></el-input>
      </el-form-item>
      <el-form-item label="是否接种" label-width="150px" prop="isVaccination">
          <el-select class="item_width_2"
                     v-model.trim="dataForm.isVaccination"
                     placeholder="请选择"
                     @change="isVacChange"
          >
            <el-option v-for="item in isVaccinationOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种时间" label-width="150px" >
        <el-date-picker
            v-model="dataForm.firstVacTime"
            type="date"
            clearable
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
            style="width: 200px; margin-right: 20px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种地点" label-width="150px" >
          <el-select class="item_width_2"
                     v-model.trim="dataForm.firstVacSite"
                     placeholder="请选择"
                     clearable
                     style="width: 200px; margin-right: 20px"
          >
            <el-option v-for="item in vacSiteOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种时间" label-width="150px">
        <el-date-picker
            v-model="dataForm.secondVacTime"
            type="date"
            clearable
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
            style="width: 200px; margin-right: 20px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种地点" label-width="150px">
          <el-select class="item_width_2"
                     v-model.trim="dataForm.secondVacSite"
                     placeholder="请选择"
                     clearable
                     style="width: 200px; margin-right: 20px"
          >
            <el-option v-for="item in vacSiteOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种时间" label-width="150px">
        <el-date-picker
            v-model="dataForm.thirdVacTime"
            type="date"
            clearable
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
            style="width: 200px; margin-right: 20px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种地点" label-width="150px">
          <el-select class="item_width_2"
                     v-model.trim="dataForm.thirdVacSite"
                     placeholder="请选择"
                     clearable
                     style="width: 200px; margin-right: 20px"
          >
            <el-option v-for="item in vacSiteOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.isVaccination === '0'" label="原因" label-width="150px">
          <el-select class="item_width_2"
                     v-model.trim="dataForm.reason"
                     placeholder="请选择"
                     clearable
          >
            <el-option v-for="item in reasonOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="备注" label-width="150px">
        <el-input
            class="item_width_1"
            type="textarea"
            maxlength="500"
            show-word-limit
            :rows="3"
            placeholder="请输入备注，不超过500字"
            v-model="dataForm.note"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="div_btn resi-btns">
<!--    <template slot="footer">-->
      <el-button @click=handleCancle>{{ $t('cancel') }}</el-button>
      <el-button v-if="!this.isLook" type="primary" @click="dataFormSubmitHandle()" :disabled="btnDisable">{{ $t('confirm') }}</el-button>
<!--    </template>-->
    </div>
    </div>
  </div>
<!--  </el-dialog>-->
</template>

<script>
    import debounce from 'lodash/debounce'
    import { requestPost } from '@/js/dai/request'
    import nextTick from "dai-js/tools/nextTick";
    import { Loading } from "element-ui";
    import formVltHelper from "dai-js/tools/formVltHelper";
    let loading; // 加载动画
    export default {
  data () {
    return {
      formType: "add",
      visible: false,
      btnDisable: false,
      gridList: [],
      villageList: [],
      buildList: [],
      unitList: [],
      homeList: [],
      household: [
        { value: '0', label: '户籍' },
        { value: '1', label: '外来' },
      ],
      isVaccinationOption: [
        { value: '0', label: '否' },
        { value: '1', label: '是' },
      ],
      vacSiteOption: [
        { value: '本街道内接种', label: '本街道内接种' },
        { value: '区内其他街道接种', label: '区内其他街道接种' },
        { value: '区外其他地区接种', label: '区外其他地区接种' },
      ],
      reasonOption: [
        { value: '禁忌症', label: '禁忌症' },
        { value: '拒绝接种', label: '拒绝接种' },
        { value: '其他原因', label: '其他原因' },
      ],
      dataForm: {
        id: '',
        customerId: '',
        gridId: '',
        gridName: '',
        agencyId: '',
        pids: '',
        villageId: '',
        villageName: '',
        buildId: '',
        buildName: '',
        unitId: '',
        unitName: '',
        homeId: '',
        homeName: '',
        householdType: '',
        name: '',
        mobile: '',
        idCard: '',
        isVaccination: '1',
        firstVacTime: '',
        firstVacSite: '',
        secondVacTime: '',
        secondVacSite: '',
        thirdVacTime: '',
        thirdVacSite: '',
        reason: '',
        note: '',
        checkState: '0',
        checkReason: '',
      },
        isLook: false
    }
  },
  computed: {
    changeVDisabled() {
      return !this.dataForm.villageId
    },
    changeBDisabled() {
      return !this.dataForm.buildId
    },
    changeDDisabled() {
      return !this.dataForm.unitId
    },
    dataRule () {
      return {
        customerId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        gridId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        gridName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        agencyId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        pids: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        villageId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        villageName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        buildId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        buildName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        unitId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        unitName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        homeId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        homeName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        householdType: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        isVaccination: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        firstVacTime: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        firstVacSite: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        secondVacTime: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        secondVacSite: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        thirdVacTime: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        thirdVacSite: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        reason: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        note: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId
    //获取网格下拉框数据
    await this.loadGrid()
    this.getVillageList()
    this.getBuildList()
    this.getUniList()
    this.getHouseList()
  },
  methods: {
    async init (row,isLook) {
        if(isLook){
            this.isLook = true
        }else{
            this.isLook = false
        }
      if (row) {
        this.dataForm.id = row.id
      }
      const { user } = this.$store.state
      this.agencyId = user.agencyId
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id !== '') {
          this.getInfo()
        }else {
            this.dataForm = {
              id: '',
              customerId: '',
              gridId: '',
              gridName: '',
              agencyId: '',
              pids: '',
              villageId: '',
              villageName: '',
              buildId: '',
              buildName: '',
              unitId: '',
              unitName: '',
              homeId: '',
              homeName: '',
              householdType: '',
              name: '',
              mobile: '',
              idCard: '',
              isVaccination: '1',
              firstVacTime: '',
              firstVacSite: '',
              secondVacTime: '',
              secondVacSite: '',
              thirdVacTime: '',
              thirdVacSite: '',
              reason: '',
              note: '',
              checkState: '0',
              checkReason: ''
            }
        }
      })
    },
    async initForm(type, row) {
      // this.$refs.ref_form.resetFields();
      this.formType = type;
      console.log(row);
      if (row) {
        // this.fmData = { ...this.fmData, ...row };
        await this.getInfo(row.id);
        this.getValiheList();
        this.getBuildList();
        this.getUniList();
        this.getHouseList();
      }
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
    // 获取信息
    async getInfo () {
      this.$http.get(`/epmetuser/icVaccinePrarmeter/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          ;return this.$message.error(res.msg);
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.getVillageList()
        this.getBuildList()
        this.getUniList()
        this.getHouseList()
      }).catch(() => {})
    },
    async loadGrid () {
      const url = "/gov/org/customergrid/gridoption"
      let params = {
        agencyId: this.agencyId,
        purpose: 'addorupdate'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.gridList = data

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

    getVillageList() {
      const { user } = this.$store.state
      this.$http
          .post('/gov/org/icneighborhood/neighborhoodoption', {
            gridId: this.dataForm.gridId,
            agencyId: ''
            // agencyId: user.agencyId
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询小区成功', res.data)
              this.villageList = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
    },
    getBuildList() {
      this.$http
          .post('/gov/org/icbuilding/buildingoption', {
            neighborHoodId: this.dataForm.villageId
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询小区成功', res.data)
              this.buildList = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
    },
    getUniList() {
      this.$http
          .post('/gov/org/icbuildingunit/unitoption', {
            buildingId: this.dataForm.buildId
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询单元成功', res.data)
              this.unitList = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
    },
    getHouseList() {
      this.$http
          .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询房屋成功', res.data)
              this.homeList = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
    },
    handleChangeGrid(val) {
      this.dataForm.villageId = ''
      this.dataForm.buildId = ''
      this.dataForm.unitId = ''
      this.dataForm.homeId = ''
      this.dataForm.gridName = ''
      this.dataForm.agencyId = ''
      this.dataForm.villageName = ''
      this.dataForm.buildName = ''
      this.dataForm.unitName = ''
      this.dataForm.homeName = ''
      this.getVillageList()
    },
    handleChangeV(val) {
      console.log('val', val)
      this.dataForm.buildId = ''
      this.dataForm.unitId = ''
      this.dataForm.homeId = ''
      this.dataForm.villageName = ''
      this.dataForm.buildName = ''
      this.dataForm.unitName = ''
      this.dataForm.homeName = ''
      this.getBuildList()
    },
    handleChangeB(val) {
      console.log('val', val)
      this.dataForm.unitId = ''
      this.dataForm.homeId = ''
      this.dataForm.buildName = ''
      this.dataForm.unitName = ''
      this.dataForm.homeName = ''
      this.getUniList()
    },
    handleChangeD(val) {
      console.log('val', val)
      this.dataForm.homeId = ''
      this.dataForm.unitName = ''
      this.dataForm.homeName = ''
      this.getHouseList()
    },
    handleChangeH(val) {
      console.log('val', val)
      this.dataForm.homeName = ''
    },
    gridClick(data) {
      this.dataForm.gridName = data.label;
      this.dataForm.agencyId = data.pid;
    },
    villageClick(data) {
      this.dataForm.villageName = data.label;
    },
    buildClick(data) {
      this.dataForm.buildName = data.label;
    },
    unitClick(data) {
      this.dataForm.unitName = data.label;
    },
    homeClick(data) {
      this.dataForm.homeName = data.label;
    },
    isVacChange(val) {
      if (val === '0') {
        this.dataForm.firstVacTime = '';
        this.dataForm.firstVacSite = '';
        this.dataForm.secondVacTime = '';
        this.dataForm.secondVacSite = '';
        this.dataForm.thirdVacTime = '';
        this.dataForm.thirdVacSite = '';
      }
    },
    resetData () {
      this.dataForm = {
        id: '',
        customerId: '',
        gridId: '',
        gridName: '',
        agencyId: '',
        pids: '',
        villageId: '',
        villageName: '',
        buildId: '',
        buildName: '',
        unitId: '',
        unitName: '',
        homeId: '',
        homeName: '',
        householdType: '',
        name: '',
        mobile: '',
        idCard: '',
        isVaccination: '1',
        firstVacTime: '',
        firstVacSite: '',
        secondVacTime: '',
        secondVacSite: '',
        thirdVacTime: '',
        thirdVacSite: '',
        reason: '',
        note: '',
        checkState: '0',
        checkReason: ''
      }
    },
    closeDialog() {
      this.$refs[dataForm].resetFields();
      // this.formData = {}
      // this.resetData()
    },
    handleCancle () {
      this.resetData()
      this.$emit('dialogCancle')

    },
    // 表单提交
    async dataFormSubmitHandle() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 10000);
      //验证手机号码
      const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (regPhone.test(this.dataForm.mobile) === false) {
        this.btnDisable = false
        this.$message({
          type: 'warning',
          message: '请输入正确的手机号码'
        })
        return false;
      }

      await this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.submit();
      })
    },
    async submit() {
      let url = "";
      if (!this.dataForm.id ) {
        url = "/epmetuser/icVaccinePrarmeter/save";
      } else if (this.dataForm.id) {
        url = "/epmetuser/icVaccinePrarmeter/update";
      } else {
        return;
      }
      const { data, code, msg } = await requestPost(url, this.dataForm);

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.$emit('dialogOk')
        this.resetData()
        this.btnDisable = false
      } else {
        this.btnDisable = false;
        this.$message.error(msg);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/buttonstyle.scss';
@import "@/assets/scss/modules/management/epidemic.scss";
.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}

.demo-form-inline {
  // display: flex;
  // align-items: center;
  // margin-bottom: 20px;

  .resi-cell-label {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    margin-right: 15px;
    // text-align: right;
    // line-height: 32;
  }
  .resi-cell-label1 {
    width: max-content;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    width: 200px;
  }
  .resi-cell--daterange {
    max-width: 260px;
  }
  .resi-cell-select {
    width: 200px;
    box-sizing: border-box;
    margin-right: 10px;
    &-middle {
      width: 120px;
    }
    &-small {
      width: 88px;
    }
  }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
}

.mt10 {
  margin-top: 10px;
}
</style>