peisweb/src/components/follow/PhoneFollowList.vue

<template>
  <div>
    <div class="middlebox">
      <div class="contenttitle">
        体检查询 /
        <span class="contenttitleBold">电话随访记录</span>
      </div>
    </div>
    <div
      style="display: flex;justify-content: space-between; padding: 10px;background-color: #fff;border-radius: 8px;margin-bottom: 10px;">
      <div style="display:block;">
        <div style="display: flex;flex-wrap: wrap;height: 32px;align-items: center;">
          <div class="query">
            <el-select v-model="query.dateType" placeholder="请选择" style="width: 80px" size="small">
              <el-option label="随访日期" :value="'1'" />
            </el-select>            
            <el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small" style="width:90px;"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
            <span class="spanClass">至</span>
            <el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small" style="width:90px;"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
          </div>          
          <div class="query">
            <span class="spanClass">完成状态</span>
            <el-select v-model="query.isComplete" placeholder="完成状态" style="width: 80px" size="small" clearable>
              <el-option label="已完成" value="Y" />
              <el-option label="未完成" value="N" />
            </el-select>  
          </div>
          <div class="query">
            <span class="spanClass">条码号</span>
            <el-input placeholder="条码号" v-model="query.patientRegisterNo" size="small" clearable style="width: 140px"/>
          </div>
          <div class="query">
            <span class="spanClass">档案号</span>
            <el-input placeholder="档案号" v-model="query.patientNo" size="small" clearable style="width: 140px"/>
          </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;margin-top: 2px; height: 32px;align-items: center;">
          <div class="query">
            <span class="spanClass">身份证号</span>
            <el-input placeholder="身份证号" v-model="query.idNo" size="small" clearable style="width: 160px"/>
          </div>
          <div class="query">
            <span class="spanClass">姓名</span>
            <el-input placeholder="姓名" v-model="query.patientName" size="small" clearable style="width: 80px"/>
          </div>
          <div class="query">
            <span class="spanClass">其他关键字</span>
            <el-input placeholder="其他关键字" v-model="query.keyWord" size="small" clearable style="width: 280px"/>
          </div>
        </div>
      </div>
      <div style="display: block;width: 110px;">
        <div>
          <el-button type="primary" class="commonbutton" @click="btnQuery" size="small">查询</el-button>
        </div>
        <div  style="margin-top: 5px;">
          <el-button class="commonbutton" @click="btnExport('tableData')" size="small">导出</el-button>
        </div>
      </div>
    </div>
    <div id="tableData">
      <el-table :data="tableData" border :height="window.pageHeight - 192" highlight-current-row size="small"
        row-key="id" show-summary ref="refTable"> <!-- :summary-method="getSummaries" -->
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="followUpTypeName" label="随访类型" min-width="80" align="center" filterable/>
        <el-table-column prop="followUpSourceName" label="随访来源" min-width="80" align="center" filterable/>
        <el-table-column prop="followUpContent" label="随访内容" min-width="250" filterable/>
        <el-table-column prop="replyContent" label="回复内容" min-width="200" align="center" filterable/>
        <el-table-column prop="isComplete" label="完成" min-width="60" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isComplete" true-label="Y" false-label="N" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="planFollowDate" label="随访日期" min-width="100" align="center" filterable>
          <template slot-scope="scope">
            <div>
              {{ moment(scope.row.planFollowDate).format("yyyy-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lastModifierName" label="修改人" min-width="80" align="center" />
        <el-table-column prop="lastModificationTime" label="修改日期" min-width="100" align="center">
          <template slot-scope="scope">
            <div>{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="登记人" min-width="80" align="center" />
        <el-table-column prop="creationTime" label="登记日期" min-width="100" align="center">
          <template slot-scope="scope">
            <div>{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { deepCopy } from "../../utlis/proFunc"

import moment from "moment";
import FileSaver from 'file-saver';

export default {
  components: {
    
  },
  props: ["orgEnable"],
  data() {
    return {      
      query: {
        dateType: '1',
        startDate: '',
        endDate: '',
        patientName: '',
        idNo: '',
        patientRegisterNo: '',
        patientNo: '',
        keyWord:'',
        isComplete: 'Y',
      },
      tableData: [],

    };
  },

  created() {

  },

  //挂载完成
  mounted() {

    this.dictInit()

  },

  updated() {
    // this.$nextTick(() => {
    //   this.$refs['refTable'].doLayout()
    // })
  },

  computed: {
    ...mapState(["pickerOptions","window", "dict"]),
  },
  methods: {
    //获取初始数据
    dictInit() {
      let today = moment(new Date()).format("YYYY-MM-DD")
      this.query.startDate = today
      this.query.endDate = today

      // //获取单位列表
      // getapi("/api/app/customer-org/parent-all").then((res) => {
      //   if (res.code != -1) {
      //     this.customerOrgAll = res.data;
      //     this.customerOrg = deepCopy(this.customerOrgAll).slice(0,100);
      //   }
      // });

      // // 体检类别
      // getapi("/api/app/medical-type/in-filter").then((res) => {
      //   if (res.code > -1) {
      //     this.dict.medicalType = res.data;
      //     this.medicalType = res.data
      //   }
      // });

      // //人员类别
      // getapi("/api/app/personnel-type/in-filter").then((res) => {
      //   if (res.code == 1) {
      //     this.dict.personnelType = res.data;
      //     this.personnelType = res.data;
      //   }
      // });

      // // 业务员 {
      // postapi('/api/identity/users/GetUserListBySaleRole')
      //   .then(res => {
      //     if (res.code > -1) {
      //       this.dictSalesman = res.data
      //     }
      //   })

    },

    //通用导出
    btnExport(elId) {
      let table = document.getElementById(elId);
      let tableData = table.innerHTML
      let fileName = moment(new Date()).format('yyyyMMDDHHmmss') + '.xls'
      let blob = new Blob([tableData], { type: "text/plain;charset=utf-8" });
      FileSaver.saveAs(blob, fileName);
    },

    // // 单位过滤
    // filterMethod(keyWords) {
    //   if (keyWords) {
    //     this.customerOrg = [];
    //     let customerOrgFilter = []
    //     this.customerOrgAll.forEach((item) => {
    //       if (
    //         item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) > -1 ||
    //         item.simpleCode.toLowerCase().indexOf(keyWords.toLowerCase()) > -1
    //         // || item.shortName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
    //       ) {
    //         customerOrgFilter.push(item);
    //       }
    //     });
    //     this.customerOrg = customerOrgFilter.slice(0,100)
    //   } else {
    //     this.customerOrg = deepCopy(this.customerOrgAll).slice(0,100);
    //   }
    // },

    // 查询
    btnQuery() {
      //let body = deepCopy(this.query)
      this.tableData = []
      let body = Object.assign({},this.query)
      Object.keys(this.query).forEach(key => {
        console.log(key,this.query[key])
        if(!this.query[key]) delete body[key]
      });      
      postapi("/api/app/PhoneFollowUp/GetList", body).then(res => {
        if (res.code > -1) {
          this.tableData = res.data          
        }
      })
    },

    //合计
    getSummaries(param) {
      console.log('getSummaries param', param)
      // if(!param){
      //   param = {
      //     columns:[{}, {}, {}, {}, {}, {}, {property: 'asbitemMoney'},{property: 'customerOrgGroupDetailMoney'}],
      //     data:this.customerOrgGroupAsbitems
      //   }
      // }

      const { columns, data } = param;
      const sumCol = [2, 3, 4, 7, 8, 9]  //需合计的列
      const sums = [];
      columns.forEach((column, index) => {
        //console.log('column, index,data',column, index,data)
        //显示合计列
        if (index === 1) {
          sums[index] = '合计';
          return;
        }

        //不合计的列
        if (sumCol.indexOf(index) == -1) {
          sums[index] = '';
          return;
        }

        sums[index] = 0
        data.forEach(e => {
          if (!isNaN(e[column.property])) sums[index] += Number(e[column.property])// * e['amount']
        })
        sums[index] = sums[index].toFixed(2) //+ ' 元';

      });
      // this.groupPrice = sums[7];
      // console.log('getSummaries',sums)
      // if (!this.totalFoucs) this.total = sums[5];
      // if (!this.discountFoucs) this.discount = Number(this.total * 100 / this.totalStand).toFixed(2);
      return sums;
    },

  },
};
</script>
<style scoped>
@import '../../assets/css/global.css';
@import '../../assets/css/global_font.css';

::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 5px;
  padding-right: 15px;
}

::v-deep .el-input__icon {
  width: 15px;
  /* 输入框下拉箭头或清除图标 默认 25 */
}

::v-deep .el-input-group__append {
  padding: 0 5px;
  /* 控件默认 0 20px;*/
}

::v-deep .el-icon-search:before {
  color: #00F;
}

.query {
  margin-left: 10px;
  font-size: 14px;
  color: #232748;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}

.spanClass {
  padding: 0 2px 0 0;
}
</style>