Vue_New/src/xt_pages/Pharmacy/PatientDispensing.vue

<template>
  <div class="main-contain new-main-contain">
    <div class="position">
      <!--      <bread-crumb :crumbs='crumbs'></bread-crumb>-->
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div
      class="app-container"
      style="display: flex; flex: 1; padding: 10px 20px 0px 20px"
    >
      <div class="mainLeft">
        <div>
          <div class="list">
            <el-date-picker
              style="width: 200px"
              v-model="datepick"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>

          <div class="list">
            <el-radio-group v-model="state">
              <el-radio :label="1">待发药{{ waitmount }}人</el-radio>
              <el-radio :label="2">已发药{{ alreadmount }}人</el-radio>
            </el-radio-group>
          </div>
          <div
            class="list"
            style="display: flex; justify-content: space-between"
          >
            <el-input
              size="small"
              style="width: 130px"
              v-model="keywords"
              class="filter-item"
              placeholder="请输入患者名称"
            />
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="searchAction"
              >搜索
            </el-button>
          </div>

          <el-table
            :height="tableHeight"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column prop="date" label="患者姓名" width="100">
            </el-table-column>
            <el-table-column prop="name" label="单据编号" width="100">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mainRight">
        <div class="titlelist">
          <el-button type="primary" @click="dispense" v-if="state == 1"
            >发药</el-button
          >
          <el-button type="primary" @click="endispense" v-if="state == 2"
            >退药</el-button
          >
          <el-button type="primary" @click="toPrint">打印</el-button>
          <el-button type="primary" v-if="state == 1">设置</el-button>
        </div>
        <el-divider></el-divider>
        <div>
          <el-table
            :height="tableHeight"
            :data="tableData_list"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="220"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="单次用量"
              width="170"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="用法"
              width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="频率"
              width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="天数"
              width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="总量"
              width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="开立医生"
              width="160"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="数据来源"
              width="162"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="备注"
              width="170"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <!-- <div style="margin-top: 25px">诊断时间：2022-05-07 19:22:16</div> -->
      </div>
    </div>

    <patient-print
      ref="patientprint"
      :visibility="isVisibility"
      :propsTable="propsTable"
    >
    </patient-print>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import patientPrint from "./print/patientPrint.vue";
export default {
  components: {
    BreadCrumb,
    patientPrint,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "患者发药" },
        { path: "/Pharmacy/patiantDispensing", name: "患者发药" },
      ],
      tableHeight: 400,
      datepick: "",
      state: 1,
      waitmount: 0,
      alreadmount: 0,
      keywords: "",
      tableData: [],
      propsTable: [],
      tableData_list: [],
      isVisibility: false,
    };
  },
  watch: {},

  methods: {
    // 跳转打印页面
    toPrint() {
      // this.$router.push({ path: "/Pharmacy/print/patientPrint" });
      this.$refs.patientprint.show();
    },

    // 搜索患者
    searchAction() {},

    // 药品发药
    dispense() {
      var params = {};
      this.$confirm("确定是否对该药品进行发药?", "患者发药", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },

    // 药品退药
    endispense() {
      var params = {};
      this.$confirm("确定是否对该药品进行退药?", "患者退药", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
  },
  created() {},
};
</script>

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

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

  .el-radio {
    margin-right: 5px;
  }

  .list {
    margin: 10px 0;
  }
}
.mainRight {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .titlelist {
    display: flex;
    justify-content: flex-end;
  }
}
</style>