pharmacy.admin/src/views/decoct/recipe/index.vue

<template>
  <div class="app-container">
    <!-- 顶部筛选 -->
    <div class="top-filter">
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="医院名称:">
          <!-- <el-input v-model="filterForm.yijgName" placeholder="医院名称" size="mini"></el-input> -->
          <el-select v-model="filterForm.yijgName" placeholder="请选择" size="mini" clearable>
            <el-option :label="item.name?item.name:'全部'" :value="item.name" v-for="item in hospitalList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接收时间:">
          <el-date-picker
            v-model="filterForm.date"
            type="daterange"
            size="mini"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="煎药方案:">
          <el-select v-model="filterForm.schemeId" placeholder="请选择" size="mini" clearable>
            <el-option :label="item.schemeName" :value="item.id" v-for="item in schemeOptions" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门诊/住院:">
          <el-select v-model="filterForm.preMzZy" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="门诊" :value="1"></el-option>
            <el-option label="住院" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否代煎:">
          <el-select v-model="filterForm.isBehalf" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否配送:">
          <el-select v-model="filterForm.takingMethod" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="是" :value="'配送'"></el-option>
            <el-option label="否" :value="'自提'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打印状态:">
          <el-select v-model="filterForm.printFlag" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="未打印" :value="0"></el-option>
            <el-option label="已打印" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方案状态:">
          <el-select v-model="filterForm.schemeConfirmed" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="未确认" :value="0"></el-option>
            <el-option label="已确认" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="剂型:">
          <el-select v-model="filterForm.dosageForm" placeholder="请选择" size="mini" clearable>
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in typeOptions" :key="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快捷查询:">
          <el-input v-model="filterForm.code" placeholder="请输入患者姓名/处方号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="" prop="orderNo">
          <el-input
            v-model="filterForm.orderNo"
            class="defwidth"
            placeholder="请输入订单号"
            clearable
            size="small"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          <el-button size="mini" @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格展示 -->
    <div class="content">
      <el-table :data="tableData" style="width: 100%" border v-loading="loading" class="table-wrapper" :row-class-name="tableRowClassName">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="{scope, $index}">
            <span>{{ $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="yijgName" label="医疗机构" width="180" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" min-width="180" align="center"></el-table-column>
        <el-table-column prop="preNo" label="处方号" min-width="180" align="center"></el-table-column>
        <el-table-column prop="name" label="患者" min-width="120" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" min-width="80" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" min-width="80" align="center"></el-table-column>
        <el-table-column label="是否代煎" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isBehalf==0">否</span>
            <span v-else-if="scope.row.isBehalf==1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="打印状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.printFlag==0">未打印</span>
            <span v-else-if="scope.row.printFlag==1">已打印</span>
          </template>
        </el-table-column>
        <el-table-column prop="soakingWaterValue" label="浸泡水量(ml)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="soakingTime" label="浸泡时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="schemeName" label="煎药方案" min-width="180" align="center"></el-table-column>
        <el-table-column prop="decoctTime" label="煎药时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="preDecoctTime" label="先煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="firstDecoctTime" label="一煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="secondDecoctTime" label="二煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="backDownTime" label="后下时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column label="门诊/住院" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.preMzZy==1">门诊</span>
            <span v-else-if="scope.row.preMzZy==2">住院</span>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="科室病区" min-width="170" align="center"></el-table-column>
        <el-table-column prop="bedNo" label="病床" min-width="120" align="center"></el-table-column>
        <el-table-column prop="dosageForm" label="剂型" min-width="80" align="center"></el-table-column>
        <el-table-column prop="prescriptionusage" label="处方用法" min-width="100" align="center"></el-table-column>
        <el-table-column prop="number" label="剂数" min-width="80" align="center"></el-table-column>
        <el-table-column prop="frequency" label="服药频次" min-width="100" align="center"></el-table-column>
        <el-table-column prop="packageNumber" label="包数" min-width="80" align="center"></el-table-column>
        <el-table-column prop="packageDose" label="次用量(ml)" min-width="100" align="center"></el-table-column>
        <el-table-column prop="takingMethod" label="配送" min-width="80" align="center"></el-table-column>
        <el-table-column prop="state" label="处方状态" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">配药</span>
            <span v-else-if="scope.row.state==2">煎药</span>
            <span v-else-if="scope.row.state==3">发药</span>
            <span v-else-if="scope.row.state==4">配送</span>
          </template>
        </el-table-column>
        <el-table-column prop="schemeConfirmed" label="方案状态" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.schemeConfirmed==1">已确认</span>
            <span v-else-if="scope.row.schemeConfirmed==0">未确认</span>
          </template>
        </el-table-column>
        <el-table-column prop="operatingTime" label="接收时间" min-width="160" align="center"></el-table-column>
        <el-table-column prop="printTime" label="打印时间" min-width="160" align="center"></el-table-column>
        <el-table-column prop="printName" label="打印人" min-width="120" align="center"></el-table-column>
        <el-table-column prop="pharmacistsremarks" label="药师备注" min-width="140" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" width="160" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope)">详情</el-button>
            <el-button size="mini" type="primary" @click="handlePrint(scope.row.id)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="filterForm.pageNum"
          background
          :page-size="filterForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filterForm.total"
        ></el-pagination>
      </div>
    </div>
    <!-- 确认方案 -->
    <el-dialog
      title="确认方案"
      :visible.sync="showOption"
      width="75%"
      :before-close="handleCloseOption"
      append-to-body
    >
      <editOption :id="id" ref="editDialog" @success="handleCloseOption();getList()" @print="handlePrint(id)" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitOption(1)">确认方案</el-button>
        <el-button type="primary" @click="submitOption(2)">确认方案并打标签</el-button>
      </span>
    </el-dialog>
    <!-- 详情页面 -->
    <el-dialog title="详情" :visible.sync="showDetail" width="75%" :before-close="handleCloseOption" append-to-body>
      <detail-page :id="id" ref="detailDialog" @success="handleCloseOption();getList()" />
    </el-dialog>
    <!-- 打印预览 -->
    <el-dialog title="打印预览" :visible.sync="showPrint" width="500px"
               append-to-body center
               :before-close="handleCloseOption"
               @closed="showPrintContent=false">
      <print v-if="showPrintContent" :id="id" init @close="showPrint = false; $event && getList()"></print>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { getSchemeList } from "@/api/decoct/scheme";
import { getRecipeList, getHospitalList } from "@/api/decoct/recipe";
import editOption from "./components/editOption.vue";
import detailPage from "./components/detailPage.vue";
import print from "@/components/print/tag_60_40.vue";

// 防抖函数
function debounce(fn, delay) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, delay);
    if (callNow) fn.apply(context, args);
  };
}

export default {
  name: "Recipe",
  components: {
    editOption,
    detailPage,
    print
  },
  data() {
    const now = dayjs().format("YYYY-MM-DD");
    return {
      filterForm: {
        pageNum: 1,
        total: 0,
        pageSize: 10,
        yijgName: '',
        date: [now, now],
        startTime: now,
        endTime: now,
        schemeId: '',
        preMzZy: '',
        isBehalf: 1,
        takingMethod: '',
        printFlag: '',
        schemeConfirmed: '',
        dosageForm: '',
        orderNo: '',
        code: ''
      },
      tableData: [],
      loading: false,
      showOption: false, // 修改方案弹窗
      showDetail: false, // 详情弹窗
      showPrint: false, // 打印页面弹窗
      showPrintContent: false, // 打印页面弹窗
      typeOptions: [], // 剂型
      schemeOptions: [],  // 煎药方案
      id: '',
      hospitalList: []
    };
  },
  created() {
    this.getSchemeList()
    this.getHospitalList()
    this.getList()
    this.getDicts("dosage_form").then((response) => {
      this.typeOptions = response.data;
    });
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.schemeConfirmed == 0) {
        return "warning-row";
      }
      return "";
    },
    // 清空
    handleClear() {
      const now = dayjs().format("YYYY-MM-DD");
      this.filterForm = {
        pageNum: 1,
        total: 0,
        pageSize: 10,
        yijgName: '',
        date: [now, now],
        startTime: now,
        endTime: now,
        schemeId: '',
        preMzZy: '',
        isBehalf: 1,
        takingMethod: '',
        printFlag: '',
        dosageForm: '',
        orderNo: '',
        code: ''
      }
    },
    // 搜索
    handleSearch() {
      this.getList()
    },
    submitOption: debounce(function(type) {
      this.$refs.editDialog.toUpdate(type)
    }, 1000),
    // 详情按钮点击
    handleDetail(scope) {
      this.id = scope.row.id
      if (+scope.row.schemeConfirmed !== 1) {
        this.showOption = true;
        this.$nextTick(() => {
          this.$refs.editDialog.openDialog()
        })
      }else{
        this.showDetail = true;
        this.$nextTick(() => {
          this.$refs.detailDialog.openDialog()
        })
      }
    },
    async handlePrint(id) {
      this.id = id;
      this.showPrint = this.showPrintContent = true;
    },
    // 分页改变
    handleCurrentChange(e) {
      this.filterForm.pageNum = e;
      this.getList()
    },
    // 关闭确认方案弹窗
    handleCloseOption() {
      this.showOption = false;
      this.showDetail = false;
      this.showPrint = false;
    },
    getList() {
      this.loading = true;
      if (
        this.filterForm.date &&
        this.filterForm.date.length
      ) {
        this.filterForm.startTime = this.filterForm.date[0];
        this.filterForm.endTime = this.filterForm.date[1];
      } else {
        this.filterForm.startTime = "";
        this.filterForm.endTime = "";
      }
      getRecipeList(this.filterForm).then((response) => {
        this.tableData = response.rows
        this.filterForm.total = response.total;
        this.loading = false;
      });
    },
    getHospitalList() {
      getHospitalList().then((response) => {
        this.hospitalList = response.data
        this.hospitalList.unshift({
          id: 0,
          name: ''
        })
      });
    },
    getSchemeList() {
      getSchemeList().then((response) => {
        this.schemeOptions = response.rows
      });
    }
  }
};
</script>
<style scoped>
.page {
  text-align: center;
  margin-top: 20px;
}
.table-wrapper >>> .warning-row,
.table-wrapper >>> .el-table__body tr.warning-row.current-row > td,
.table-wrapper >>> .el-table__body tr.warning-row.hover-row > td {
  background: #e6a23c;
  color: #fff;
}
</style>