epmet-oper-gov/src/views/modules/base/epidemic/natFocus/nfVisiteList.vue

<template>
  <div class="dialog-h-content scroll-h">
    <div class="div_dialog_table">
      <el-button size="small"
                 class="diy-button--add"
                 @click="handleAdd">新增</el-button>
      <el-button size="small"
                 class="diy-button--reset"
                 @click="handleExport">导出</el-button>

      <el-table class="table"
                :data="tableData"
                border
                :height="tableHeight"
                v-loading="tableLoading"
                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                style="width: 100%">
        <el-table-column label="序号"
                         header-align="center"
                         align="center"
                         type="index"
                         width="50">
        </el-table-column>

        <el-table-column prop="visitTime"
                         header-align="center"
                         align="center"
                         label="随访时间"
                         width="150">

        </el-table-column>
        <el-table-column prop="content"
                         header-align="center"
                         align="center"
                         label="随访内容"
                         min-width="280">

        </el-table-column>

      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="pageNo"
                       :page-sizes="[20, 50, 100, 200]"
                       :page-size="pageSize"
                       layout="sizes, prev, pager, next, total"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible"
               width="850px"
               top="5vh"
               title="新增"
               append-to-body
               @closed="handleCancle">
      <div class="epidemic-form">
        <el-form ref="ref_form"
                 :inline="true"
                 :model="formData"
                 :rules="dataRule"
                 class="form">

          <el-form-item label="随访时间"
                        style="display: block"
                        prop="visitTime"
                        label-width="150px">
            <el-date-picker class="item_width_2"
                            v-model="formData.visitTime"
                            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="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>

        </el-form>

        <div class="form_div_btn">
          <el-button size="small"
                     @click="handleCancle">取 消</el-button>
          <el-button size="small"
                     type="primary"
                     @click="handleComfirm">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

let loading // 加载动画
export default {
  data () {
    return {
      tableLoading: false,

      tableData: [],
      total: 0,
      pageSize: 20,
      pageNo: 1,

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

      formData: {
        visitTime: '',//随访时间
        content: '',//内容
        idCard: '',
        name: '',
        mobile: '',
        origin: '2'
      },

      dialogVisible: false,

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

  },

  methods: {

    async initTable (row, origin) {

      this.formData.idCard = row.idCard
      this.formData.name = row.name
      this.formData.mobile = row.mobile
      this.formData.origin = origin

      await this.loadTable()

    },

    //加载form
    async loadTable () {

      this.tableLoading = true
      const url = '/epmetuser/followup/page'
      // const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/followup/page'
      let params = {
        name: this.formData.name,
        idCard: this.formData.idCard,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        origin: '2'
      }

      const { data, code, msg } = await requestPost(url, params)
      this.tableLoading = false
      if (code === 0) {
        this.total = data.total
        this.tableData = data.list
        this.tableData.forEach(element => {
          element.visitTime = element.visitTime.slice(0, element.visitTime.length - 3)
        });

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

    handleAdd () {
      this.dialogVisible = true
    },


    async handleComfirm () {
      this.formData.visitTime = this.formData.visitTime + ':00'
      let url = "/epmetuser/followup/save"
      // let url = "http://yapi.elinkservice.cn/mock/245/epmetuser/followup/save"

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

      if (code === 0) {
        this.loadTable()
        this.handleCancle()
      } else {
        this.$message.error(msg)
      }

    },

    handleCancle () {
      this.dialogVisible = false

    },

    //导出表格
    async handleExport () {
      let today = new Date()


      console.log(today.getMonth() + 1, today.getDate())
      let title = this.formData.name + (today.getMonth() + 1) + '月' + today.getDate() + '日' + '随访记录'

      const url = "/epmetuser/followup/export"
      let params = {
        idCard: this.formData.idCard,
        name: this.formData.name,
        origin: '2'
      }

      app.ajax.exportFilePost(
        url,
        params,
        (data, rspMsg) => {

          this.download(data, title + '.xlsx')
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg);
        }
      );

    },

    // 下载文件
    download (data, fileName) {
      if (!data) {
        return
      }

      var csvData = new Blob([data])

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(csvData, fileName);
      }
      // for Non-IE (chrome, firefox etc.)
      else {
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        var url = window.URL.createObjectURL(csvData);
        a.href = url;
        a.download = fileName;
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      }

    },

    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 (this.clientHeight - 360)
    },

    ...mapGetters(['clientHeight']),
    dataRule () {
      return {
        visitTime: [
          { required: true, message: '随访时间不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '随访内容不能为空', trigger: 'blur' }
        ],
      }
    }


  },
  props: {

  }
}
</script>


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