hospital-project/src/views/indexData/index.vue

<!--
 * @Author: zhanghaifeng
 * @Date: 2025-01-03 13:57:58
 * @LastEditors: zhanghaifeng
 * @LastEditTime: 2025-01-14 15:21:08
 * @Description: 指标数据
 * @FilePath: /hospital-project/src/views/indexData/index.vue
-->
<script setup>
defineOptions({
  name: "IndexData"
});
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import IndexImport from "./components/indexImport.vue";
import addDialog from "./components/addDialog.vue";
import editDrawer from "./components/editDrawer.vue";
import logDrawer from "./components/logDrawer.vue";
import { getPageList, delListItemApi } from "@/api/indexData";

// 状态
const params = reactive({
  params: {
    pageNumber: 1,
    pageSize: 10,
    sourceValue: "",
    deptName: "",
    userName: ""
  },
  records: [],
  total: 0
});

// 获取列表数据
const getList = async () => {
  const { code, data } = await getPageList(params.params);
  if (code === 200) {
    params.records = data.records;
    params.total = data.totalRow;
  }
};
const handleSizeChange = val => {
  params.params.pageSize = val;
  getList();
};
const handleCurrentChange = val => {
  params.params.pageNumber = val;
  getList();
};
onMounted(() => {
  getList();
});

// 批量导入
const sizeImport = ref(false);
const bulkImport = (type = "") => {
  sizeImport.value = !sizeImport.value;
  if (type && type === "success") {
    handleCurrentChange(1);
  }
};

// 添加
const dialogShow = ref(null);
const showAddData = () => {
  dialogShow.value && dialogShow.value.open();
};

// 编辑/详情
const editdrawerShow = ref(null);
const setEdit = row => {
  editdrawerShow.value && editdrawerShow.value.open(row);
};

// 删除
const setDelete = row => {
  ElMessageBox.confirm("数据删除后将无法恢复", "确定要继续删除这项数据吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      const { code } = await delListItemApi({
        sourceDateId: row.id
      });
      if (code === 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getList();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消"
      });
    });
};

// 日志
const logDrawerRef = ref(null);
const showLogs = row => {
  logDrawerRef.value && logDrawerRef.value.open(row);
};
</script>

<template>
  <div class="page-container">
    <!-- 批量导入 -->
    <IndexImport v-if="sizeImport" @handleImport="bulkImport" />
    <div v-else>
      <div class="w-[100%]">
        <div class="mb-2 flex gap-2 justify-between flex-wrap">
          <div class="flex mt-2">
            <div class="flex mr-2">
              <el-input
                v-model="params.params.sourceValue"
                style="width: 200px"
                :prefix-icon="Search"
                clearable
                placeholder="搜索指标名称"
                @change="getList"
              />
            </div>
            <!--暂时注释，产品说下一期迭代-->
            <!-- <div class="flex mr-2">
              <el-input v-model="params.params.deptName" style="width: 200px" :prefix-icon="Search" clearable
                placeholder="搜索部门名称" @change="getList" />
            </div>
            <div class="flex mr-2">
              <el-input v-model="params.params.userName" style="width: 200px" :prefix-icon="Search" clearable
                placeholder="搜索员工名称" @change="getList" />
            </div> -->
          </div>
          <div class="flex pt-2 mr-6">
            <Auth :value="['批量导入']">
              <el-button class="mr-2" @click="bulkImport">批量导入</el-button>
            </Auth>
            <Auth :value="['添加数据']">
              <el-button type="primary" class="mr-2" @click="showAddData">
                添加数据
              </el-button>
            </Auth>
          </div>
        </div>
      </div>
      <div class="mt-8">
        <el-table :data="params.records" style="width: 100%">
          <el-table-column
            prop="sourceValue"
            label="指标名称"
            fixed
            width="200"
            show-overflow-tooltip
          />
          <el-table-column prop="deptName" label="部门名称" width="200" />
          <el-table-column prop="userName" label="员工名称" />
          <el-table-column prop="userId" label="工号" width="120" />
          <el-table-column prop="numerator" label="分子" />
          <el-table-column prop="denominator" label="分母" />
          <el-table-column prop="dataValue" label="值" />
          <el-table-column prop="specificTime" label="数据时间" width="120" />
          <el-table-column prop="updateTime" label="更新时间" width="200">
            <template #default="{ row }">
              {{
                row.updateTime
                  ? dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
                  : "无效日期"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" />
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="{ row }">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link navbar-bg-hover select-none pt-1">
                  <el-icon @click="setEdit(row)">
                    <Edit />
                  </el-icon>
                </span>
              </el-dropdown>
              <el-dropdown class="ml-2" trigger="click">
                <span class="el-dropdown-link navbar-bg-hover select-none pt-1">
                  <el-icon>
                    <More />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="setting">
                    <Auth :value="['删除']">
                      <el-dropdown-item @click="setDelete(row)">
                        <el-text type="danger">删除</el-text>
                      </el-dropdown-item>
                    </Auth>
                    <Auth :value="['日志']">
                      <el-dropdown-item @click="showLogs(row)"
                        >日志</el-dropdown-item
                      >
                    </Auth>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex justify-between item-center">
        <div class="float-left mt-5 ml-2 total">共{{ params.total }}条数据</div>
        <div class="float-right mt-5 mr-8">
          <el-pagination
            v-model:current-page="params.params.pageNumber"
            v-model:page-size="params.params.pageSize"
            background
            layout="prev, pager, next"
            :total="params.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 编辑/详情 -->
      <editDrawer ref="editdrawerShow" @updateDialog="getList" />
      <!-- 新建 -->
      <addDialog ref="dialogShow" @updateDialog="getList" />
      <!-- 日志 -->
      <logDrawer ref="logDrawerRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.total {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}

.header {
  display: flex;
  width: 100%;
  line-height: 100%;
  border: 1px solid red;
}

::v-deep(.el-table .el-table__header th) {
  background-color: #f2f3f5;
}

.setting {
  font-size: 12px;
}
</style>