HIYL-localization-web/src/views/cases/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="90px">
      <el-row>
        <el-col :span="6">
          <el-form-item>
            <el-radio-group v-model="queryParams.timeType">
              <el-radio label="createTime">创建时间</el-radio>
              <el-radio label="checkTime">审核时间</el-radio>
              <el-radio label="reserveTime">预约时间</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="queryParams.date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="datePickerOptions"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查类型" prop="checkType" v-show="showSearch">
            <el-select
              v-model="queryParams.checkType"
              placeholder="请选择检查类型"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in checkTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查诊室" prop="checkRoom" v-show="showSearch">
            <el-select
              v-model="queryParams.checkRoom"
              placeholder="请选择检查诊室"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in checkRoomList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查部位" prop="checkPart" v-show="showSearch">
            <el-input
              v-model="queryParams.checkPart"
              placeholder="请输入检查部位"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查设备" prop="checkDevice" v-show="showSearch">
            <el-select
              v-model="queryParams.checkDevice"
              placeholder="请选择检查设备"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in checkDeviceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="诊断医师"
            prop="diagnosisDoctor"
            v-show="showSearch"
          >
            <el-input
              v-model="queryParams.diagnosisDoctor"
              placeholder="请输入诊断医师"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查状态" prop="checkStatus" v-show="showSearch">
            <el-select
              v-model="queryParams.checkStatus"
              placeholder="请选择检查状态"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in checkStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="患者姓名" prop="patientName" v-show="showSearch">
            <el-input
              v-model="queryParams.patientName"
              placeholder="请输入患者姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="患者性别" prop="gender" v-show="showSearch">
            <el-select
              v-model="queryParams.gender"
              placeholder="请选择患者性别"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="患者年龄" prop="age" v-show="showSearch">
            <el-input
              v-model="queryParams.age"
              placeholder="请输入患者年龄"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="病例号" prop="patientRecordNumber" v-show="showSearch">
            <el-input
              v-model="queryParams.patientRecordNumber"
              placeholder="请输入病例号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="门诊号" prop="outpatientNumber" v-show="showSearch">
            <el-input
              v-model="queryParams.outpatientNumber"
              placeholder="请输入门诊号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="住院号" prop="inpatientNumber" v-show="showSearch">
            <el-input
              v-model="queryParams.inpatientNumber"
              placeholder="请输入住院号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请医师" prop="applyDoctor" v-show="showSearch">
            <el-input
              v-model="queryParams.applyDoctor"
              placeholder="请输入申请医师"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专家" prop="expertDoctor" v-show="showSearch">
            <el-select
              v-model="queryParams.expertDoctor"
              placeholder="请选择专家"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in doctorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="病区号" prop="wardNumber" v-show="showSearch">
            <el-input
              v-model="queryParams.wardNumber"
              placeholder="请输入病区号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="床位号" prop="bedNumber" v-show="showSearch">
            <el-input
              v-model="queryParams.bedNumber"
              placeholder="请输入床位号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预约日期" prop="reserveDate" v-show="showSearch">
            <el-date-picker
              v-model="queryParams.reserveDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择预约日期"
              style="width: 100%"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预约时间" prop="reserveTime" v-show="showSearch">
            <el-select
              v-model="queryParams.reserveTime"
              placeholder="请选择预约时间"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option label="自动" value="auto" />
              <el-option
                v-for="slot in timeSlotList"
                :key="slot.value"
                :label="slot.label"
                :value="slot.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">
          重置
        </el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
        >
          新增
        </el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          @click="handleDelete"
          :disabled="ids.length === 0"
        >
          删除
        </el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
        <el-button
          type="info"
          plain
          icon="el-icon-s-operation"
          @click="showSearch = !showSearch"
        >
          {{ showSearch ? "收起" : "展开" }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="caseList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="患者姓名" align="center" prop="patientName" />
      <el-table-column label="性别" align="center" prop="gender">
        <template slot-scope="scope">
          <dict-tag :options="genderList" :value="scope.row.gender" />
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="病例号" align="center" prop="patientRecordNumber" />
      <el-table-column label="检查类型" align="center" prop="checkType">
        <template slot-scope="scope">
          <dict-tag :options="checkTypeList" :value="scope.row.checkType" />
        </template>
      </el-table-column>
      <el-table-column label="检查诊室" align="center" prop="checkRoom" />
      <el-table-column label="检查设备" align="center" prop="checkDevice" />
      <el-table-column label="检查部位" align="center" prop="checkPart" />
      <el-table-column label="检查状态" align="center" prop="checkStatus">
        <template slot-scope="scope">
          <dict-tag :options="checkStatusList" :value="scope.row.checkStatus" />
        </template>
      </el-table-column>
      <el-table-column label="预约日期" align="center" prop="reserveDate" />
      <el-table-column label="预约时间" align="center" prop="reserveTime" />
      <el-table-column label="申请医师" align="center" prop="applyDoctor" />
      <el-table-column label="专家" align="center" prop="expertDoctor" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 病例表单对话框组件 -->
    <CaseFormDialog
      :visible.sync="open"
      :is-edit="isEditMode"
      :form-data="form"
      :gender-list="genderList"
      :check-type-list="checkTypeList"
      :age-unit-list="ageUnitList"
      :doctor-list="doctorList"
      :check-device-list="checkDeviceList"
      :check-part-list="checkPartList"
      :check-room-list="checkRoomList"
      @success="handleDialogSuccess"
      @close="handleDialogClose"
    />
  </div>
</template>

<script>
import {
  listCase,
  getCase,
  delCase,
  addCase,
  updateCase,
} from "@/api/cases/index.js";
import CaseFormDialog from "./components/CaseFormDialog.vue";

export default {
  name: "Case",
  components: {
    CaseFormDialog,
  },
  data() {
    // 获取今天日期
    const today = new Date().toISOString().split("T")[0];
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 表格数据
      caseList: [],
      // 是否显示弹出层
      open: false,
      // 是否为编辑模式
      isEditMode: false,
      // 表单数据
      form: {},
      // 字典
      genderList: [
        { label: "未知", value: "0" },
        { label: "男", value: "1" },
        { label: "女", value: "2" },
      ],
      ageUnitList: [
        { label: "岁", value: "1" },
        { label: "月", value: "2" },
        { label: "天", value: "3" },
      ],
      checkTypeList: [
        { label: "门诊", value: "1" },
        { label: "急诊", value: "2" },
        { label: "住院", value: "3" },
      ],
      checkStatusList: [
        { label: "待检查", value: "0" },
        { label: "检查中", value: "1" },
        { label: "已完成", value: "2" },
        { label: "已取消", value: "3" },
      ],
      checkRoomList: [
        { label: "诊室1", value: "1" },
        { label: "诊室2", value: "2" },
      ],
      checkDeviceList: [
        { label: "设备A", value: "1" },
        { label: "设备B", value: "2" },
        { label: "设备C", value: "3" },
      ],
      checkPartList: [
        { label: "头部", value: "1", category: "神经系统" },
        { label: "胸部", value: "2", category: "呼吸系统" },
        { label: "腹部", value: "3", category: "消化系统" },
        { label: "四肢", value: "4", category: "运动系统" },
      ],
      doctorList: [
        { label: "张医生", value: "1" },
        { label: "李医生", value: "2" },
        { label: "王医生", value: "3" },
      ],
      timeSlotList: [
        { label: "08:00-08:30", value: "08:00-08:30" },
        { label: "08:30-09:00", value: "08:30-09:00" },
        { label: "09:00-09:30", value: "09:00-09:30" },
        { label: "09:30-10:00", value: "09:30-10:00" },
        { label: "10:00-10:30", value: "10:00-10:30" },
        { label: "10:30-11:00", value: "10:30-11:00" },
        { label: "13:30-14:00", value: "13:30-14:00" },
        { label: "14:00-14:30", value: "14:00-14:30" },
        { label: "14:30-15:00", value: "14:30-15:00" },
        { label: "15:00-15:30", value: "15:00-15:30" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        timeType: "createTime",
        date: [],
        checkType: undefined,
        checkRoom: undefined,
        checkPart: undefined,
        checkDevice: undefined,
        diagnosisDoctor: undefined,
        checkStatus: undefined,
        patientName: undefined,
        gender: undefined,
        age: undefined,
        patientRecordNumber: undefined,
        outpatientNumber: undefined,
        inpatientNumber: undefined,
        applyDoctor: undefined,
        expertDoctor: undefined,
        wardNumber: undefined,
        bedNumber: undefined,
        reserveDate: undefined,
        reserveTime: undefined,
      },
      // 日期选择器配置
      datePickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询病例列表 */
    getList() {
      this.loading = true;
      listCase(this.queryParams).then((response) => {
        this.caseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      const today = new Date().toISOString().split("T")[0];
      this.form = {
        gender: this.genderList[0].value,
        checkType: this.checkTypeList[0].value,
        ageUnit: this.ageUnitList[0].value,
        reserveDate: today,
      };
      this.open = true;
      this.isEditMode = false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = { ...row };
      this.open = true;
      this.isEditMode = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.ids;
      this.$modal
        .confirm('是否确认删除病例编号为"' + ids + '"的数据项？')
        .then(function () {
          return delCase(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/cases/export",
        {
          ...this.queryParams,
        },
        `cases_${new Date().getTime()}.xlsx`
      );
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.$router.push({
        name: "PatientDetail",
        params: {
          id: row.id,
          patientName: row.patientName,
        },
      });
    },
    /** 对话框成功回调 */
    handleDialogSuccess(formData) {
      if (this.isEditMode) {
        this.getList();
      } else {
        this.handleView(formData);
      }
    },
    /** 对话框关闭回调 */
    handleDialogClose() {
      this.reset();
    },
    /** 重置表单 */
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
</style>