ShibeiWorkPlatform_Frontend/src/views/modules/base/epidemic/vaccinAdd.vue

<template>
  <div class="epidemic-form">
    <div class="dialog-h-content scroll-h">

      <el-form ref="ref_form"
               :inline="true"
               :model="formData"
               :rules="dataRule"
               :disabled="formType==='detail'"
               class="form">

        <el-form-item v-if="formType==='add'"
                      label="录入方式"
                      label-width="150px"
                      style="display: block">
          <el-radio-group v-model="enterType"
                          @change="handleChangeEnterType">

            <el-radio :label="'1'">手动输入</el-radio>
            <el-radio :label="'2'">选择居民</el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item v-if="formType==='add'"
                      label="所属网格"
                      style="display: block"
                      label-width="150px">
          <el-select class="item_width_2"
                     v-model.trim="formData.gridId"
                     placeholder="请选择"
                     :disabled="!isFromResi"
                     clearable>
            <el-option v-for="item in gridList"
                       @click.native="handleSelGrid(item.value)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formType==='add'"
                      label="居民"
                      prop="userId"
                      style="display: block"
                      label-width="150px">
          <el-select class="item_width_2"
                     v-model.trim="formData.userId"
                     placeholder="请选择"
                     filterable
                     :disabled="!isFromResi"
                     clearable>
            <el-option v-for="item in personList"
                       @click.native="handleSelPerson(item)"
                       :key="item.demandUserId"
                       :label="item.demandUserName"
                       :value="item.demandUserId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="姓名"
                      prop="name"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_2"
                    placeholder="请输入姓名"
                    clearable
                    :disabled="isFromResi"
                    v-model="formData.name">
          </el-input>

        </el-form-item>

        <el-form-item label="手机号"
                      prop="mobile"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_2"
                    placeholder="请输入手机号"
                    clearable
                    :disabled="isFromResi"
                    v-model="formData.mobile">
          </el-input>
        </el-form-item>
        <el-form-item label="身份证号"
                      prop="idCard"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_2"
                    placeholder="请输入身份证号"
                    clearable
                    :disabled="isFromResi"
                    v-model="formData.idCard">
          </el-input>
        </el-form-item>

        <el-form-item label="接种时间"
                      style="display: block"
                      prop="inoculateTime"
                      label-width="150px">
          <el-date-picker class="item_width_2"
                          v-model="formData.inoculateTime"
                          format="yyyy-MM-dd HH:mm"
                          value-format="yyyy-MM-dd HH:mm"
                          type="datetime"
                          :picker-options="pickerOptions"
                          clearable
                          placeholder="选择时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="接种地点"
                      prop="inoculateAddress"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_1"
                    placeholder="请输入检测地点"
                    clearable
                    v-model="formData.inoculateAddress">
          </el-input>
        </el-form-item>
        <el-form-item label="疫苗厂家"
                      prop="manufacturer"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_1"
                    placeholder="请输入检测地点"
                    clearable
                    v-model="formData.manufacturer">
          </el-input>
        </el-form-item>

        <div v-if=" formType!=='detail'">
          <el-form-item label="通知渠道"
                        prop="isSelChannel"
                        label-width="150px"
                        style="display: block">

            <el-checkbox v-model="formData.isSelChannel"
                         @change="handleChannelChange"
                         key="0"
                         label="0">小程序通知</el-checkbox>
            <!-- <el-checkbox-group v-model="formData.channel">
            <el-checkbox key="0"
                         label="0">小程序通知</el-checkbox>
            <el-checkbox key="1"
                         label="1">短信通知</el-checkbox>

          </el-checkbox-group> -->
          </el-form-item>

          <el-form-item v-if="formData.isSelChannel"
                        label="通知内容"
                        prop="content"
                        label-width="150px"
                        style="display: block">
            <el-input class="item_width_1"
                      type="textarea"
                      maxlength="500"
                      show-word-limit
                      :autosize="{ minRows: 5, maxRows: 10 }"
                      clearable
                      placeholder="请输入通知内容"
                      v-model="formData.content"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="form_div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>
      <el-button v-if="formType != 'detail'"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>

  </div>
</template>

<script>

import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import { dateFormats } from '@/utils/index'


let loading // 加载动画
export default {
  data () {
    return {
      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情

      enterType: '1',//录入方式1 手动输入  2  选择居民
      isFromResi: false,//是否从已有居民信息中选择

      gridList: [],
      personList: [],
      pickerOptions: { //控制时间范围
        disabledDate (time) {
          return time.getTime() > (Date.now())
        }
      },

      btnDisable: false,

      vaccineId: '',
      formData: {
        vaccineId: '',
        agencyId: '',//当前网格所属组织Id	
        userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值	
        userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro	
        isResiUser: "0",//是否客户下居民(0:否  1:是)	
        name: '',
        idCard: '',
        mobile: '',
        inoculateTime: '',
        inoculateAddress: '',
        manufacturer: '',

        isSelChannel: false,
        channel: [],
        content: '',

      },


    }
  },
  components: {},
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId
    //获取网格下拉框数据
    await this.loadGrid()
  },

  methods: {
    handleChannelChange (val) {
      this.formData.content = ''
    },

    async initForm (type, row) {
      this.startLoading()
      this.formData.agencyId = this.agencyId

      this.$refs['ref_form'].resetFields();
      this.isFromResi = false
      this.enterType = '1'
      this.formType = type

      if (row) {

        if (row.userId) {
          this.isFromResi = true
        }
        row.content = ''
        row.isSelChannel = false
        row.channel = []
        this.formData = { ...row }

      }

      this.endLoading()


    },

    handleChangeEnterType (value) {
      this.formData.name = ''
      this.formData.mobile = ''
      this.formData.idCard = ''
      this.formData.gridId = ''
      this.formData.userId = ''

      this.$refs['ref_form'].resetFields();
      if (value === '2') {
        this.formData.isResiUser = "1"
        this.isFromResi = true
      } else {
        this.formData.isResiUser = "0"
        this.isFromResi = false
      }

    },

    async loadGrid () {
      const url = "/gov/org/customergrid/gridoption"

      let params = {
        agencyId: this.agencyId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.gridList = data

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

    },
    async handleSelGrid (value) {

      const url = "/epmetuser/icresiuser/demandusers"

      let params = {
        agencyId: this.agencyId,
        gridId: value
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.personList = data

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

    },
    async handleSelPerson (personItem) {
      this.formData.userId = personItem.demandUserId
      this.formData.name = personItem.demandUserName
      this.formData.mobile = personItem.demandUserMobile
      this.formData.idCard = personItem.idCard
    },

    async loadFormData () {

      const url = '/epmetuser/icNat/detail'
      let params = {
        vaccineId: this.vaccineId,
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.formData = data
        this.formData.channel = []
        this.formData.content = ''
        // if (data.channel && data.channel.length > 0) {
        //   this.$set(this.formData, 'isSelChannel', true)
        //   // this.formData.isSelChannel = true
        // } else {
        //   this.$set(this.formData, 'isSelChannel', false)
        //   // this.formData.isSelChannel = false
        //   this.formData.channel = []
        //   this.formData.content = ''
        // }
        console.log(this.formData.isSelChannel)

        this.formData.vaccineId = this.vaccineId
        if (this.formData.userId) {
          this.isFromResi = true
        } else {
          this.isFromResi = false
        }


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

    handleComfirm () {
      this.$refs['ref_form'].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj)

        } else {
          this.addVaccin()
        }

      })
    },

    async addVaccin () {

      const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
      if (regPhone.test(this.formData.mobile) === false) {
        this.btnDisable = false
        this.$message({
          type: 'warning',
          message: '请输入正确的手机号码'
        })
        return false;
      }
      const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
      if (regCard.test(this.formData.idCard) === false) {
        this.btnDisable = false
        this.$message({
          type: 'warning',
          message: '请输入正确的身份证号码'
        })
        return false;
      }

      if (this.formData.isSelChannel) {
        if (!this.formData.content) {
          this.$message({
            type: 'warning',
            message: '请填写通知内容'
          })
          return false;
        } else {
          this.formData.channel = ['0']
        }

      } else {
        this.formData.channel = []
        this.formData.content = ''
      }



      this.btnDisable = true
      setTimeout(() => {
        this.btnDisable = false
      }, 5000)

      let url = ''
      if (this.formType === 'add') {
        url = '/epmetuser/icVaccine/add'

        this.formData.vaccineId = ''

      } else {
        url = '/epmetuser/icVaccine/edit'

      }


      const { data, code, msg } = await requestPost(url, this.formData)

      if (code === 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        })

        this.$emit('dialogOk')
        this.resetData()
        this.btnDisable = false

      } else {
        this.btnDisable = false
        this.$message.error(msg)
      }

    },

    handleCancle () {
      this.resetData()
      this.$emit('dialogCancle')

    },


    resetData () {
      this.vaccineId = ''

      this.formData = {
        vaccineId: '',
        agencyId: '',//当前网格所属组织Id	
        userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值	
        userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro	
        isResiUser: "0",//是否客户下居民(0:否  1:是)	
        name: '',
        idCard: '',
        mobile: '',
        inoculateTime: '',
        inoculateAddress: '',
        manufacturer: '',

        isSelChannel: false,
        channel: [],
        content: '',



      }
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '身份证号不能为空', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
        ],
        inoculateTime: [
          { required: true, message: '接种时间不能为空', trigger: 'change' },
        ],
        // inoculateAddress: [
        //   { required: true, message: '接种地点不能为空', trigger: 'change' },
        // ],
        // manufacturer: [
        //   { required: true, message: '疫苗厂家不能为空', trigger: 'change' },
        // ],




        isSelChannel: [
          { required: false },
        ],
        channel: [
          { required: false },
        ],
        content: [
          { required: false },
        ],

      }
    },

  },
  props: {



    // serviceList: {
    //   type: Array,
    //   default: []
    // },
  }
}
</script>


<style lang="scss" scoped >
@import "@/assets/scss/modules/management/epidemic.scss";
</style>

<style lang='scss'>
// 隐藏上传按钮
.hide .el-upload--picture-card {
  display: none;
}
// 添加/删除文件时去掉动画过渡
.el-upload-list__item {
  transition: none !important;
}
</style>