Vue_New/src/xt_pages/outpatientDoctorStation/prescriptionTemplate.vue

<template>
  <!--处方模板-->
  <div class="main-contain new-main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <div class="btn_crumbs">
        <el-button type="primary" @click="batchAdds">批量新增</el-button>
        <el-button type="primary" @click="batchReplace">批量替换</el-button>
        <el-button type="danger" @click="batchDeletes">批量删除</el-button>
        <el-button type="primary" @click="add" style="width:70px;">新增</el-button>
      </div>
    </div>

    <div
      class="app-container"
      style="display: flex; flex: 1; padding: 10px 20px 0px 20px"
    >
      <div class="mainLeft">
        <div class="mainCell" style="margin-bottom: 10px">
          <el-input
            size="small"
            placeholder="请输入姓名或者透析号"
            v-model="search_input"
            class="filter-item"
            @input="searchAction"
            @keyup.enter.native="searchAction"
          />
          <!--<el-button size="small" style="margin-left:10px;" class="filter-item" type="primary"-->
          <!--@click="searchAction">-->
          <!--搜索-->
          <!--</el-button>-->
        </div>
        <div>
          <el-table
            :data="data"
            :height="tableHeight"
            @row-click="choosePatient"
            border
            style="width: 100%"
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
            highlight-current-row
            ref="tab"
          >
            <el-table-column type="index" align="center" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
              <template slot-scope="scope"
                >{{ scope.row.name }}（{{ scope.row.dialysis_no }}）</template
              >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mainRight">
        <el-table
          :data="templates"
          :height="tableHeight"
          border
          style="width: 100%"
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266',
          }"
          highlight-current-row
        >
          <el-table-column prop="name" label="模版名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column prop="name" label="透析模式">
            <template slot-scope="scope">{{
              getMode(scope.row.mode)
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="jumpDetail(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="deleteTemplate(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          background
          align="right"
          style="margin-top: 20px"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  delHisPrescriptionTemplate,
  getPatientListTwenty,
  getPrescriptionTemplateList,
} from "@/api/his/his_config";
import { uParseTime } from "@/utils/tools";

const moment = require("moment");
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "门诊医生站" },
        { path: false, name: "处方模版" },
      ],
      search_input: "",
      templates: [],
      tableHeight: "",
      fullHeight: document.documentElement.clientHeight,
      isloading: false,
      data: [],
      all_data: [],
      page: 1,
      limit: 20,
      patient_id: 0,
      total: 0,
      patient_name: "",
      mode_str: "",
    };
  },
  methods: {
    // 搜索
    searchAction() {
      this.data = [];
      if (this.search_input.length == 0) {
        this.data = this.all_data;
      } else {
        for (let i = 0; i < this.all_data.length; i++) {
          if (
            this.all_data[i].name.indexOf(this.search_input) != -1 ||
            this.all_data[i].dialysis_no.indexOf(this.search_input) != -1 ||
            this.all_data[i].first_letter.indexOf(this.search_input) != -1
          ) {
            this.data.push(this.all_data[i]);
          }
        }
      }
    },
    deleteTemplate(row) {
      this.$confirm("处方模版删除后不可恢复，是否确认删除", "删除", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          let params = {
            id: row.id,
          };
          delHisPrescriptionTemplate(params).then((response) => {
            if (response.data.state == 1) {
              this.GetPrescriptionTemplateList();
            }
          });
        })
        .catch(() => {});
    },
    jumpDetail(row) {
      this.$router.push(
        "/hisTool/prescriptionTemplatedetail?id=" +
          row.id +
          "&patient_id=" +
          this.patient_id +
          "&patient_name=" +
          this.patient_name +
          "&modes=" +
          this.mode_str
      );
    },
    getMode(id) {
      let name = "";
      this.treatment_mode = Object.values(this.$store.getters.treatment_mode);
      this.treatment_mode.map((item) => {
        if (item.id == id) {
          name = item.name;
        }
      });
      return name;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.GetPrescriptionTemplateList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.GetPrescriptionTemplateList();
    },
    GetPrescriptionTemplateList() {
      let params = {
        patient_id: this.patient_id,
        page: this.page,
        limit: this.limit,
      };
      getPrescriptionTemplateList(params).then((response) => {
        if (response.data.state == 1) {
          this.templates = response.data.data.list;
          let modes = [];
          for (let i = 0; i < this.templates.length; i++) {
            modes.push(this.templates[i].mode);
          }
          this.mode_str = modes.join(",");

          this.total = response.data.data.total;
        }
      });
    },
    choosePatient(val, column) {
      this.page = 1;
      this.limit = 10;
      this.patient_id = val.id;
      this.patient_name = val.name;
      this.id = val.id;
      sessionStorage.setItem("templateIndex", val.id);
      let params = {
        patient_id: val.id,
        page: this.page,
        limit: this.limit,
      };
      getPrescriptionTemplateList(params).then((response) => {
        if (response.data.state == 1) {
          this.templates = response.data.data.list;
          let modes = [];
          for (let i = 0; i < this.templates.length; i++) {
            modes.push(this.templates[i].mode);
          }
          this.mode_str = modes.join(",");

          this.total = response.data.data.total;
        }
      });
    },
    // 数据源
    getList(id) {
      getPatientListTwenty().then((response) => {
        if (response.data.state == 1) {
          this.data = response.data.data.list;
          this.all_data = response.data.data.list;
          let index = null;
          if (
            sessionStorage.getItem("templateIndex") &&
            sessionStorage.getItem("templateIndex") != ""
          ) {
            this.data.map((item, i) => {
              if (sessionStorage.getItem("templateIndex") == item.id) {
                index = i;
              }
            });
            this.$refs.tab.setCurrentRow(this.data[index]);
            this.patient_id = this.data[index].id;
            this.patient_name = this.data[index].name;
          } else {
            this.$refs.tab.setCurrentRow(this.data[0]);
            this.patient_id = this.data[0].id;
            this.patient_name = this.data[0].name;
          }

          this.GetPrescriptionTemplateList();
        }
      });
    },
    getTime(val, temp) {
      if (val != 0) {
        return uParseTime(val, temp);
      } else {
        return "";
      }
    },
    batchAdds() {
      this.$router.push("/hisTool/batchTemplate");
    },
    batchDeletes() {
      this.$router.push("/hisTool/batchDelete");
    },
    batchReplace() {
      this.$router.push("/hisTool/batchReplacement");
    },
    add() {
      if (this.patient_id == 0) {
        this.$message.error("请选择病人");
        return;
      }
      this.$router.push(
        "/hisTool/prescriptionTemplatedetail?id=" +
          0 +
          "&patient_id=" +
          this.patient_id +
          "&patient_name=" +
          this.patient_name +
          "&modes=" +
          this.mode_str
      );
    },
  },
  created() {
    var nowDate = new Date();
    var nowYear = nowDate.getFullYear();
    var nowMonth = nowDate.getMonth() + 1;
    var nowDay = nowDate.getDate();
    this.record_date =
      nowYear +
      "-" +
      (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
      "-" +
      (nowDay < 10 ? "0" + nowDay : nowDay);
    this.getList();
    let tableHeight = document.body.clientHeight - 263;
    this.tableHeight = tableHeight;
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.fullHeight = window.fullHeight;
      })();
    };
  },
  watch: {
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        let tableHeight = val - 263;
        this.tableHeight = tableHeight;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.new-main-contain {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-container {
  height: 100%;
}

.mainCell {
  height: 36px;
  display: flex;
  align-items: center;
}

.mainLeft {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-radio {
    margin-right: 5px;
  }
}
.mainRight {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .cellSpan {
    min-width: 80px;
    display: inline-block;
    margin-right: 10px;
  }
}
.mainCenter {
  display: flex;
  flex: 1;
}

.centerLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    float: left;
  }

  .el-form-item__label {
    text-align: left;
  }
}
.backColor {
  background: #f6f8f9;
  height: 5px;
  margin-bottom: 5px;
}

.tabsBox {
  position: relative;
  height: 76%;
  overflow-y: auto;
  margin-bottom: 60px;

  .el-tabs__item {
    padding: 0 10px;
  }
}
.preTabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }
}

.costBox {
  width: 100%;
  height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

.addTab {
  position: absolute;
  right: 0;
  top: 14px;
  z-index: 20;
}

.centerRight {
  width: 300px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.rightTab {
  height: 40px;
  width: 100%;
  border: 1px solid #d2d2d2;
  box-sizing: border-box;

  p {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    float: left;
  }

  > p:last-child {
    border-left: 1px solid #d2d2d2;
    float: right;
  }

  .activeP {
    background: #409eff;
    color: #fff;
  }
}
.comfirmBox {
  width: 100%;
  height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mainHeader {
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 100;
  height: 36px;
}

.titleBox {
  position: fixed;
  z-index: 99;
  background: #fff;
}

.fixedCell {
  position: fixed;
  z-index: 99;
  right: 30px;
  background: #fff;
  width: 300px;
  display: flex;
  justify-content: space-between;
}
.btn_crumbs {
  .el-button {
    text-align: center;
    font-size: 12px;
    padding: 10px 11px;
  }
}
</style>

<style lang="scss">
.centerLeft {
  .el-form-item__label {
    text-align: left;
  }
}
.tabsBox {
  .el-tabs__item {
    padding: 0 10px;
  }

  .el-tabs--bottom
    .el-tabs--left
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom
    .el-tabs--right
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2),
  .el-tabs--top.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
    padding: 0 10px;
  }

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--bottom.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:last-child,
  .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child,
  .el-tabs--top.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:last-child,
  .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding: 0 10px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
    padding: 0 10px;
  }
}
.centerRight {
  .el-tabs__nav-scroll {
    display: flex;
  }

  .el-tabs__nav {
    margin: 0 auto;
  }

  .el-table th .cell,
  .el-table td .cell {
    padding: 0 2px;
  }
}
.preTabs {
  .el-tabs__content {
  }
}
.rightTabs {
  height: 100%;

  .el-tabs__content {
  }
}
.centerDialog {
  .el-dialog__body {
    max-height: calc(100vh - 100px) !important;
    padding: 0 20px;
  }
}
</style>