epmet-work-pc-chengyang/src/views/modules/base/epidemic/veroFocus/veroFocusEdit.vue

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

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

        <el-form-item label="姓名"
                      prop="name"
                      label-width="150px"
                      style="display: block">
          <span>{{formData.name}}</span>
          <!-- <el-input class="item_width_2"
                    placeholder="请输入姓名"
                    clearable

                    v-model="formData.name">
          </el-input> -->

        </el-form-item>

        <el-form-item label="手机号"
                      prop="mobile"
                      label-width="150px"
                      style="display: block">
          <span>{{formData.mobile}}</span>
          <!-- <el-input class="item_width_2"
                    placeholder="请输入手机号"
                    clearable
                    v-model="formData.mobile">
          </el-input> -->
        </el-form-item>
        <el-form-item label="身份证号"
                      prop="idCard"
                      label-width="150px"
                      style="display: block">
          <span>{{formData.idCard}}</span>
          <!-- <el-input class="item_width_2"
                    placeholder="请输入身份证号"
                    clearable
                    v-model="formData.idCard">
          </el-input> -->
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_1"
                    type="textarea"
                    :disabled="formType==='detail'"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 2, maxRows: 5 }"
                    clearable
                    placeholder="请输入通知备注"
                    v-model="formData.remark"></el-input>
        </el-form-item>
        <div v-if=" formType!=='detail'">
          <el-form-item label="通知渠道"
                        prop="channel"
                        label-width="150px"
                        style="display: block">
            <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 label="通知内容"
                        prop="content"
                        label-width="150px"
                        style="display: block">
            <el-input class="item_width_1"
                      type="textarea"
                      maxlength="1000"
                      show-word-limit
                      :autosize="{ minRows: 4, 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 { mapGetters } from 'vuex'


let loading // 加载动画
export default {
  data () {
    return {

      formType: "edit",

      gridList: [],

      btnDisable: false,

      formData: {
        attentionType: 1,
        name: '',
        idCard: '',
        mobile: '',
        remark: '',
        channel: [],
        content: '',
      },

    }
  },
  components: {},
  async mounted () {

  },

  methods: {

    async initForm (formType, row) {
      this.formType = formType
      this.$refs['ref_form1'].resetFields();
      row.channel = []
      row.content = ''
      this.formData = JSON.parse(JSON.stringify(row))

    },

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


      await this.addVero()

    },
    async addVero () {

      let url = '/epmetuser/icEpidemicSpecialAttention/vaccination-update'

      // url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icEpidemicSpecialAttention/vaccination-update"

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

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

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

    },

    handleCancle () {

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

    },



    resetData () {
      this.veroId = ''

      this.formData = {
        name: '',
        idCard: '',
        mobile: '',
        remark: '',
        channel: [],
        content: '',

      }
    },

    handleSizeChange (val) {
      this.pageSize = val
      this.pageNo = 1
      this.loadTable()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTable()
    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {
      return 200

    },

    ...mapGetters(['clientHeight', 'iframeHeight']),
    dataRule () {
      return {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ],



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

      }
    },

  },
  props: {



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


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