rax-medical/src/views/system-manage/hospitals.vue

<template>
  <div class="table-page">
    <div class="search-part" v-show="isSearch">
      <div class="search-cell">
        <span class="label">医院名称</span>
        <el-input v-model="queryParams" placeholder="请输入医院名称"></el-input>
      </div>
      <el-button type="primary" icon="Search" @click="search">查询</el-button>
      <el-button icon="Refresh" @click="resetSearch">重置</el-button>
    </div>
    <div class="button-part" style="justify-content: space-between;">
      <div>
        <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
        <el-button icon="Delete" @click="removeData()">删除</el-button>
      </div>
      <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="refresh"
                    @downloadBtn="exportData('医生数据', tableData)"></TableAbility>
    </div>
    <div class="table-part">
      <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
                @row-click="tableRowClick">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="#" width="55" align="center"/>
        <el-table-column property="name" label="医院名称" width="200" align="center"/>
        <el-table-column property="code" label="编码" width="60" align="center"/>
        <el-table-column label="高级管理员" width="200" align="center">
          <template #default="scope">{{ scope.row.admin?.name }}</template>
        </el-table-column>
        <el-table-column property="domain" label="域名" width="200" align="center"/>
        <el-table-column label="开始时间" width="200" align="center">
          <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm', scope.row.startTime) }}</template>
        </el-table-column>
        <el-table-column label="结束时间" width="200" align="center">
          <template #default="scope">{{ dateFormater('yyyy-MM-dd HH:mm', scope.row.endTime) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="60" align="center">
          <template #default="scope">
            {{ scope.row.status == 1 ? "锁定" : "正常" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div @click.stop>
              <el-button link icon="View" @click="viewData(scope.row)">医院信息</el-button>
              <el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
              <el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-part">
      <CommonPagination :total="total" @paginationChange="paginationChange"/>
    </div>
  </div>
  <el-drawer v-model="isFormDialog" size="660px">
    <template #header>
      <h3 class="main-color f20" style="padding: 20px 20px 0 20px;">{{ formDialogTitle }}</h3>
    </template>
    <HospitalForm ref="hospitalFormRef"
                  :type="formDialogTitle === '添加' ? 'add' : formDialogTitle === '修改' ? 'edit' : 'view'"
                  @close="isFormDialog = false"/>
  </el-drawer>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {exportData, tableRemoveRow} from '@/utils/table-util'
import CommonPagination from '@/components/common-pagination.vue'
import HospitalForm from './form/hospital-form.vue'
import {dateFormater} from '@/utils/date-util'
import * as hospitalApi from "@/api/hospital";
import {ElMessage, ElMessageBox} from "element-plus";

const tableRef = ref()
const hospitalFormRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref()
const tableData = ref([] as any)
let current = 0;
let size = 10;
const total = ref(0);

onMounted(() => {
  init();
})

function init() {
  loading.value = true
  current = 0;
  total.value = 0;
  getList();
  loading.value = false
}

function getList() {
  hospitalApi.getHospitalPage(current, size, queryParams.value).then((res: any) => {
    if (res.code == 0) {
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
  })
}

function refresh() {
  init();
}

function search() {
  init();
}

function resetSearch() {
  queryParams.value = "";
  init();
}

const addData = () => {
  isFormDialog.value = true
  formDialogTitle.value = '添加'
  setTimeout(() => {
    hospitalFormRef.value.resetData()
  }, 0)
}
const removeData = (e?: any) => {
  const selectRow = e ? [e] : tableRef.value.getSelectionRows()

  tableRemoveRow({data: selectRow}, (res: boolean) => {
    if (res) {
      const ids: string[] = [];
      selectRow.forEach((row: any) => {
        ids.push(row.id);
      })
      hospitalApi.deleteHospitalByIds(ids.join(",")).then((res: any) => {
        if (res.code == 0 && res.data) {
          ElMessage.success("删除成功")
        } else {
          ElMessage.error(res.msg ? res.msg : "删除失败")
        }
      })
    }
  })
}
const viewData = (e: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '医院信息'
  setTimeout(() => {
    hospitalFormRef.value.resetData(JSON.parse(JSON.stringify(e)))
  }, 0)
}
const editData = (e: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '修改'
  setTimeout(() => {
    hospitalFormRef.value.resetData(JSON.parse(JSON.stringify(e)))
  }, 0)
}
const tableRowClick = (row: any) => {
  tableRef.value.toggleRowSelection(row)
}
const paginationChange = (page: number, s: number) => {
  current = page;
  size = s;
  getList();
}
</script>

<style lang='scss' scoped></style>