pro 1.数据模拟前端页面

gaoluyang

4 天以前 bfff831304d65d948613e3774364bb29bebaeb0c

pro
1.数据模拟前端页面

 src/api/mock/dataCheck.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from "@/utils/request";

// æ£€æµ‹æŒ‡å®šæ¨¡å—的基础数据是否就绪
export function dataCheck(modules) {
  return request({
    url: "/mock/dataCheck",
    method: "post",
    data: { modules },
  });
}

 src/views/mock/dataCheck/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
<template>
  <div class="app-container">
    <el-card header="基础数据检测">
      <el-checkbox-group v-model="selectedModules">
        <el-checkbox label="sales">销售模块</el-checkbox>
        <el-checkbox label="purchase">采购模块</el-checkbox>
        <el-checkbox label="quality">质量模块</el-checkbox>
      </el-checkbox-group>
      <div style="margin-top: 16px">
        <el-button type="primary" @click="handleCheck" :loading="checking">
          å¼€å§‹æ£€æµ‹
        </el-button>
      </div>
    </el-card>

    <el-card v-if="checkResult" header="检测结果" style="margin-top: 16px">
      <el-alert
        :title="`通过 ${checkResult.passedItems} / ${checkResult.totalItems} é¡¹`"
        :type="checkResult.passedItems === checkResult.totalItems ? 'success' : 'warning'"
        :closable="false"
        show-icon
      />
      <el-table :data="checkResult.items" style="margin-top: 12px" border>
        <el-table-column prop="module" label="模块" width="100" />
        <el-table-column prop="itemName" label="检测项" width="160" />
        <el-table-column prop="minRequired" label="最低要求" width="80" align="center" />
        <el-table-column prop="currentCount" label="当前数量" width="80" align="center" />
        <el-table-column label="状态" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="row.passed ? 'success' : 'danger'">
              {{ row.passed ? "通过" : "未通过" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="提示" min-width="200" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { dataCheck } from "@/api/mock/dataCheck.js";

const selectedModules = ref(["sales", "purchase", "quality"]);
const checking = ref(false);
const checkResult = ref(null);

const handleCheck = async () => {
  if (selectedModules.value.length === 0) {
    ElMessage.warning("请至少选择一个模块");
    return;
  }
  checking.value = true;
  try {
    const res = await dataCheck(selectedModules.value);
    checkResult.value = res.data;
  } finally {
    checking.value = false;
  }
};
</script>

<style scoped></style>