diagnosis.admin/src/views/patients/PatiensList.vue

<template>
  <div class="patienslist">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-between flex-wrap">
        <div class="flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l">
            <span>患者姓名：</span>
            <div class="input">
              <el-input type="text" size="mini" v-model="filter.name" placeholder="请输入"></el-input>
            </div>
          </div>
          <!-- <div class="screening-item flex-vertical-center-l">
                    <span>就诊卡号：</span>
                    <div class="input">
                        <el-input type="text" placeholder="请输入" v-model="filter.medCard"></el-input>
                    </div>
          </div>-->
          <div class="screening-item flex-vertical-center-l">
            <span>联系方式：</span>
            <div class="input">
              <el-input type="text" size="mini" placeholder="请输入" v-model="filter.phone"></el-input>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>身份证号码：</span>
            <div class="input">
              <el-input type="text" size="mini" placeholder="请输入" v-model="filter.idCard"></el-input>
            </div>
          </div>
          <!-- <div class="screen-btn flex-center" @click="search()">
                        <img src="../../assets/search.png" alt="">
                    </div>
                    <div class="screen-btn screen-yellow flex-center" @click="clearFilter()">
                        <img src="../../assets/delete.png" alt="">
          </div>-->
          <el-button type="primary" size="mini" @click="search()">搜索</el-button>
          <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        </div>

        <!-- <div v-if="showAdd" class="jiandang flex-center" @click="buildBook">建档</div> -->
        <el-button size="mini" @click="buildBook" type="primary">建档</el-button>
      </div>
    </div>

    <!-- 底部数据展示 -->
    <div class="today-data">
      <!-- <div class=" flex-vertical-between">
                <div class="today-title flex-vertical-center-l">
                    <span></span>
                    <div>患者信息</div>
                </div>
               
                <div v-if="showAdd" class="jiandang flex-center" @click="buildBook">建档</div>
      </div>-->

      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <el-table-column prop="seeclinicnum" label="就诊流水号" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="140"></el-table-column>
          <el-table-column prop="sex" label="性别" width="60"></el-table-column>
          <el-table-column prop="age" label="年龄" width="60"></el-table-column>
          <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
          <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
          <!-- <el-table-column prop="birthday" label="出生日期">
          </el-table-column>-->

          <el-table-column prop="detailadress" label="地址">
            <!-- <template slot-scope="scope">
                            {{scope.row.province}}{{scope.row.city}}{{scope.row.district}}{{scope.row.detailadress}}
            </template>-->
          </el-table-column>
          <el-table-column prop="state" label="操作" width="200">
            <template slot-scope="scope">
              <div class="flex-center flex-wrap">
                <div class="find-detail find-fill" v-if="showJiuzhen" @click="seeDoctors(scope)">挂号</div>
                <div class="find-detail" @click="edit(scope.row.pid)" v-if="showEdit">编辑</div>
                <ui-notice type="remove" class="find-detail" style="background-color: #f56c6c; border-color: #f56c6c">
                  <span>删除</span>
                </ui-notice>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="today-page flex-center">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
    <pagePropup
      :showDialog="showDialog"
      @confim="bookbuilding()"
      @cancle="showDialog=false"
      :title="pagePropTitle"
      distanceTop="3vh"
    >
      <div slot="body" class="propup-body">
        <div class="form">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">患者姓名：</div>
            <div class="input">
              <el-input v-model="name" placeholder="请输入患者姓名" size="small"></el-input>
            </div>
          </div>
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">身份证号：</div>
            <div class="input">
              <el-input v-model="idCard" size="small" placeholder="请输入身份证号" @blur="getPeopleMsg"></el-input>
            </div>
          </div>
          <div class="form-item flex-center">
            <span></span>
            <div class="item-title">患者性别：</div>
            <div class="input">
              <el-select v-model="sex" size="small" placeholder="请选择病人性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-center">
            <span></span>
            <div class="item-title">出生日期：</div>
            <div class="input">
              <el-date-picker
                size="small"
                type="date"
                placeholder="选择日期"
                v-model="date"
                style="width: 100%;"
              ></el-date-picker>
            </div>
          </div>
          <div class="form-item flex-center">
            <span></span>
            <div class="item-title">医保卡号：</div>
            <div class="input">
              <el-input size="small" v-model="yiCard" placeholder="请输入医保卡号"></el-input>
            </div>
          </div>
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">联系方式：</div>
            <div class="input">
              <el-input size="small" v-model="phone" placeholder="请输入联系方式"></el-input>
            </div>
          </div>
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">联系地址：</div>
            <div class="input flex-vertical-center-l">
              <div class="city">
                <el-select size="small" v-model="province" placeholder="选择省" @change="proC($event)">
                  <el-option
                    :label="item.name"
                    :value="item.code"
                    v-for="(item,index) in provinceList"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
              <div class="city">
                <el-select size="small" v-model="city" placeholder="选择市" @change="cityC($event)">
                  <el-option
                    :label="item.name"
                    :value="item.code"
                    v-for="(item,index) in cityList"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
              <div class="city">
                <el-select size="small" v-model="area" placeholder="选择区">
                  <el-option
                    :label="item.name"
                    :value="item.code"
                    v-for="(item,index) in areaList"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="form-item flex-center">
            <span></span>
            <div class="item-title">详细地址：</div>
            <div class="input">
              <el-input size="small" type="textarea" v-model="address"></el-input>
            </div>
          </div>
        </div>
      </div>
    </pagePropup>
    <pagePropup
      distanceTop="25vh"
      width="40%"
      :showBody="false"
      :showDialog="pregnancy"
      @confim="seeD()"
      confimText="挂号"
      @cancle="pregnancy = false,deparment=''"
      title="科室挂号"
    >
      <div slot="body" class="propup-body" v-if="scope">
        <div class="form">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">选择科室：</div>
            <div class="input">
              <el-select v-model="deparment">
                <el-option
                  v-for="(item,index) in departSelect"
                  :key="index"
                  :label="item.name"
                  :value="item.pid"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="form" v-show="scope.row.sex=='女'">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">是否怀孕：</div>
            <div class="input">
              <el-radio-group v-model="radio">
                <el-radio :label="2">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="form" v-show="scope.row.sex=='女'">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">是否哺乳：</div>
            <div class="input">
              <el-radio-group v-model="radio1">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </pagePropup>
  </div>
</template>
<script>
import { getBirth, getSex } from "@/utils/format.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import pagePropup from "@/components/Propup.vue";
import { getProver, getArea } from "@/api/city.js";
import {
  getPatientPool,
  addPatientPool,
  getPatientMsg,
  editPatientPool,
  seeDoctor1,
  getPtiensBRight,
  registration
} from "@/api/patients.js";
import { getDepartSelect } from "@/api/system";
import UiNotice from '@/components/UiNotice.vue';
export default {
  components: {
    UiNotice,
    pagePropup
  },
  data() {
    return {
      scope: null,
      // 筛选条件表单
      filter: {
        name: "",
        medCard: "", // 就诊卡号
        phone: "",
        idCard: ""
      },
      total: 0,
      limit: 10,
      page: 1,
      tableData: [],
      showDialog: false,
      pregnancy: false, // 是否怀孕弹窗
      radio: 1, // 是否怀孕结果
      radio1: 2, // 是否哺乳
      deparment: "",
      departSelect: [], // 科室选择器列表
      provinceList: [],
      cityList: [],
      areaList: [],

      // 表单
      province: "",
      city: "",
      area: "",
      idCard: "",
      sex: "",
      yiCard: "",
      phone: "",
      address: "",
      name: "",
      date: "",
      patientid: "",

      showAdd: true,
      showEdit: true,
      showJiuzhen: true,
      pagePropTitle: ""
    };
  },
  created() {
    this.getPatientPool();
    this.getProver();
    this.getPtiensBRight();
    this._getDepartSelect();

    // console.log(this.getuserinfo, 'getuserinfo');
  },
  watch: {
    patientid() {
      this.pagePropTitle = this.patientid ? "编辑患者信息" : "新增患者信息";
    }
  },
  methods: {
    // 建档
    buildBook() {
      this.patientid = "";
      this.province = "";
      this.city = "";
      this.area = "";
      this.idCard = "";
      this.sex = "";
      this.yiCard = "";
      this.phone = "";
      this.address = "";
      this.name = "";
      this.date = "";

      this.showDialog = true;
    },
    // 身份证号 失焦 获取出生日期
    getPeopleMsg() {
      if (!this.idCard) return;

      if (this.idCard.length < 15 || this.idCard.length > 18) {
        this.$message({
          message: "身份证号格式有误1",
          type: "error",
          showClose: true
        });
        return;
      }
      this.date = getBirth(this.idCard);
      this.sex = getSex(this.idCard);
    },
    sizeC(e) {
      console.log(e, "1");
      this.page = e;
      this.getPatientPool();
    },
    // 搜索按钮点击
    search() {
      this.page = 1;
      this.getPatientPool();
    },
    // 清空按钮点击
    clearFilter() {
      this.filter = {
        name: "",
        medCard: "", // 就诊卡号
        phone: "",
        idCard: ""
      };
      this.page = 1;
      this.getPatientPool();
    },

    // 修改省的数据
    proC(e) {
      // console.log(e)
      this.city = "";
      this.area = "";
      this.getArea(e, 1);
    },
    cityC(e) {
      this.area = "";
      this.getArea(e, 2);
    },
    /// 建档
    bookbuilding() {
      if (this.name == "") {
        this.$message.error("请输入患者姓名");
        return;
      }
      if (this.idCard == "") {
        this.$message.error("请输入身份证号");
        return;
      }
      if (this.idCard.length < 18) {
        this.$message.error("身份证格式有误");
        return;
      }
      if (this.phone == "") {
        this.$message.error("请输入联系方式");
        return;
      }
      if (this.province == "") {
        this.$message.error("请选择省");
        return;
      }
      if (this.city == "") {
        this.$message.error("请选择市");
        return;
      }
      if (this.area == "") {
        this.$message.error("请选择区");
        return;
      }
      if (this.patientid) {
        this.editPatientPool();
      } else {
        this.addPatientPool();
      }
    },
    // 编辑
    edit(id) {
      this.patientid = id;
      this.showDialog = true;
      this.getPatientMsg();
    },
    seeDoctors(scope) {
      this.pregnancy = true;
      this.scope = scope;

      this.departSelect.forEach(item => {
        if (item.name.indexOf("内科") != -1) {
          this.deparment = item.pid;
        }
      });

      // this.seeDoctor(this.scope)
      // this.$router.push({
      //     path: '/index/todaypatients'
      // })
    },
    seeD() {
      this._registration(this.scope);
    },

    // 获取科室选择器
    async _getDepartSelect() {
      let res = await getDepartSelect({
        institutionId: this.getuserinfo.sititutionid
      });
      if (res.ResultCode == 0) {
        res.Data.forEach(item => {
          if (item.name.indexOf("内科") != -1) {
            this.deparment = item.pid;
          }
        });
        this.departSelect = res.Data;
      }
    },

    // 获取患者详细信息
    async getPatientMsg() {
      let res = await getPatientMsg(this.patientid);
      if (res.ResultCode == 0) {
        this.province = res.Data.province;
        this.city = res.Data.city;
        this.area = res.Data.district;
        this.idCard = res.Data.idcard;
        this.sex = res.Data.sex;
        this.yiCard = res.Data.medicarecard;
        this.phone = res.Data.phone;
        this.address = res.Data.detailadress;
        this.name = res.Data.name;
        this.date = res.Data.birthday;

        this.getArea(this.province, 1);
        this.getArea(this.city, 2);
      }
    },
    // 挂号操作
    async _registration(scope) {
      // if (this.deparment === '') {
      //     this.$message.error('请选择科室')
      //     return
      // }
      let params = {
        pid: scope.row.pid,
        // organizationidSelsource: scope.row.organizationidSelsource,
        organizationidSelsource: this.getuserinfo.organizationid,
        breastfeeding: this.radio1,
        pregnancy: this.radio,
        departmentId: this.deparment,
        // institutionidSelsource: scope.row.institutionidSelsource,
        institutionidSelsource: this.getuserinfo.sititutionid
      };

      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await registration(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.deparment = "";
        // this.$message.success('提交成功')
        // setTimeout(() => {
        this.$router.push({
          path: "/index/todaypatients"
        });
        // }, 2000)
      }
    },
    async seeDoctor(scope) {
      let params = {
        pid: scope.row.pid,
        // organizationidSelsource: scope.row.organizationidSelsource,
        organizationidSelsource: this.getuserinfo.organizationid,
        // institutionidSelsource: scope.row.institutionidSelsource,
        institutionidSelsource: this.getuserinfo.sititutionid
        // pregnancy: this.radio
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await seeDoctor1(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        // this.$message.success('提交成功')
        // setTimeout(() => {
        this.$router.push({
          path: "/index/todaypatients"
        });
        // }, 2000)
      }
    },

    // 患者库提交
    async addPatientPool() {
      // let p = this.provinceList.filter(item => {
      //     return item.code == this.province
      // })
      // let c = this.cityList.filter(item => {
      //     return item.code == this.city
      // })
      // let a = this.areaList.filter(item => {
      //     return item.code == this.area
      // })

      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let params = {
        province: this.province,
        city: this.city,
        district: this.area,
        idcard: this.idCard,
        sex: this.sex,
        medicarecard: this.yiCard,
        phone: this.phone,
        detailadress: this.address,
        name: this.name,
        birthday: this.date
      };

      let res = await addPatientPool(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message.success("提交成功");
        this.showDialog = false;
        this.page = 1;
        this.getPatientPool();

        this.province = "";
        this.city = "";
        this.area = "";
        this.idCard = "";
        this.sex = "";
        this.yiCard = "";
        this.phone = "";
        this.address = "";
        this.name = "";
        this.date = "";
      }
    },
    //患者库编辑
    async editPatientPool() {
      // let p = this.provinceList.filter(item => {
      //     return item.code == this.province
      // })
      // let c = this.cityList.filter(item => {
      //     return item.code == this.city
      // })
      // let a = this.areaList.filter(item => {
      //     return item.code == this.area
      // })

      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let params = {
        pid: this.patientid,
        province: this.province,
        city: this.city,
        district: this.area,
        idcard: this.idCard,
        sex: this.sex,
        medicarecard: this.yiCard,
        phone: this.phone,
        detailadress: this.address,
        name: this.name,
        birthday: this.date
      };

      let res = await editPatientPool(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message.success("提交成功");
        this.showDialog = false;
        this.page = 1;
        this.getPatientPool();

        this.province = "";
        this.city = "";
        this.area = "";
        this.idCard = "";
        this.sex = "";
        this.yiCard = "";
        this.phone = "";
        this.address = "";
        this.name = "";
        this.date = "";
        this.patientid = "";
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市数据
    async getArea(code, type) {
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 获取患者库列表
    async getPatientPool() {
      let params = {
        seeclinicnum: this.filter.medCard,
        phone: this.filter.phone,
        idcard: this.filter.idCard,
        name: this.filter.name,
        page: this.page,
        limit: this.limit
      };
      let res = await getPatientPool(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.showJiuzhen = res.Data.ButtonRight.indexOf("seeClinic") != -1;
        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
      }
    },
    //获取权限按钮
    async getPtiensBRight() {
      let res = await getPtiensBRight();
      if (res.ResultCode == 0) {
        this.showAdd = res.Data.indexOf("add") != -1;
      }
    }
    //
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.jiandang {
  width: 112px;
  height: 54px;
  background: url("../../assets/jiandang.png") no-repeat;
  background-position: center;
  background-size: 100%;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  // float: right;
}

.today-data {
  padding: 5px 5px;
  background: #fff;
  border-radius: 5px;
  margin-top: 14px;
  height: 70vh;

  .today-title {
    margin-bottom: 5px;

    span {
      display: inline-block;
      width: 3px;
      height: 14px;
      background: #9F643A;
      border-radius: 1px;
      margin-right: 14px;
    }

    div {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #9F643A;
    }
  }

  .today-table {
    margin-top: 5px;
    height: 88%;
  }

  .find-detail {
    width: 60px;
    height: 24px;
    border: 1px solid #ffae45;
    border-radius: 2px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin: 0 auto;
    background: #ffae45;
  }

  .find-fill {
    background: #9F643A !important;
    color: #fff !important;
    border: 1px solid #9F643A;
  }

  .today-page {
    margin-top: 10px;
  }
}

.propup-body {
  .form-item {
    margin-bottom: 10px;

    span {
      color: #ff3a3a;
      display: inline-block;
      width: 6px;
    }

    .item-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 20px;
    }

    .input {
      width: 260px;
      // height: 38px;

      .city {
        margin-right: 5px;
      }
    }
  }
}

.today-table::v-deep .el-table .cell {
  text-align: center;
}

.form-item::v-deep .el-select {
  width: 100%;
}

.form-item .city::v-deep .el-select input {
  padding: 0 20px 0 10px;
}
</style>
<style lang="scss" scoped>
@import "../../style/media/patients/patientsList.scss";
</style>