hospital-project/src/components/UserPageTable/index.vue

<script setup lang="ts">
defineOptions({
  name: ""
});
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { postOrganizationUserPage } from "@/api/userSetting";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
const $route: any = useRoute();
const tableData = reactive({
  list: [],
  params: {
    pageNumber: 1,
    pageSize: 10,
    organizationCode: "",
    organizationType: "",
    realName: ""
  },
  total: 0
});
const handleNodeClick = (data: any, userType: string) => {
  console.log("handleNodeClick");
  if (userType == "group") {
    tableData.params.organizationCode = data.groupCode;
    tableData.params.organizationType = userType;
  } else {
    tableData.params.organizationCode = data.deptCode;
    tableData.params.organizationType = userType;
  }
  postOrganizationUserPageApi();
};
const loading = ref(true);
const postOrganizationUserPageApi = async () => {
  if ($route.name == "users") {
    tableData.params.organizationType = "group";
  }
  if ($route.name == "prosonDepartment") {
    tableData.params.organizationType = "dept";
  }
  const { code, data, msg } = await postOrganizationUserPage(tableData.params);
  if (code == 200) {
    tableData.list = data.records;
    tableData.total = data.totalRow;
    loading.value = false;
  } else {
    ElMessage.error(msg);
  }
};
const handleSizeChange = val => {
  tableData.params.pageSize = val;
  postOrganizationUserPageApi();
};
const handleCurrentChange = val => {
  tableData.params.pageNumber = val;
  postOrganizationUserPageApi();
};
defineExpose({
  handleNodeClick,
  postOrganizationUserPageApi,
  handleCurrentChange,
  tableData
});

// 时间戳转换
const getTime = day => {
  if (day) {
    return dayjs(day).format("YYYY-MM-DD");
  }
  return "";
};
</script>

<template>
  <div>
    <div class="flex justify-between mb-3">
      <el-input
        v-model="tableData.params.realName"
        :prefix-icon="Search"
        placeholder="搜索姓名"
        class="mb-2"
        style="max-width: 300px"
        clearable
        @change="postOrganizationUserPageApi"
        @keyup.enter="postOrganizationUserPageApi"
      />
      <slot name="add-button" />
      <!-- <el-button type="primary" @click="AddPerson">添加人员</el-button> -->
    </div>
    <!-- v-loading="loading" -->
    <el-table
      v-if="(tableData.params.organizationType = 'dept')"
      :data="tableData.list"
      style="width: 100%"
    >
      <el-table-column prop="realName" label="姓名" />
      <el-table-column prop="hospitalCode" label="工号" />
      <el-table-column
        v-if="$route.name != 'users'"
        prop="gender"
        label="性别"
      />
      <el-table-column label="出生日期">
        <template #default="{ row }">
          <span>{{ getTime(row.birth) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jobTitle" label="职称" />
      <el-table-column prop="dept" label="部门" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <slot name="actions" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <el-table v-else :data="tableData.list" style="width: 100%">
      <el-table-column prop="realName" label="姓名" />
      <el-table-column prop="hospitalCode" label="工号" />
      <el-table-column prop="jobTitle" label="职称" />
      <el-table-column prop="dept" label="部门" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <slot name="actions" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div class="float-left mt-3 total">共{{ tableData.total }}条数据</div>
      <div class="float-right right-0 mr-10 mt-3">
        <el-pagination
          v-model:current-page="tableData.params.pageNumber"
          v-model:page-size="tableData.params.pageSize"
          background
          layout="prev, pager, next"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.total {
  font-size: 14px;

  /* font-family: PingFangSC-Regular; */
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}
</style>