mirror of
https://github.com/hpd840321/craftlabs-authorization-sdk.git
synced 2026-06-09 10:00:30 +08:00
feat(web): I1 shell and I2 customer/project UI
Vue 3 + Element Plus layout with JWT login, RBAC routes, axios 401 handling with token restore, and Customers/Projects views wired to platform APIs. Made-with: Cursor
This commit is contained in:
@@ -0,0 +1,22 @@
|
|||||||
|
# delivery-platform-ui（I1）
|
||||||
|
|
||||||
|
Vue 3 + Vite + Element Plus + Pinia，对齐 [tracks/02](../../docs/engineering/tracks/02-frontend-platform-ui.md)。
|
||||||
|
|
||||||
|
## 开发
|
||||||
|
|
||||||
|
1. 先启动后端：`mvn -f ../../services/pom.xml -pl delivery-platform-api spring-boot:run`（工作目录可自调）
|
||||||
|
2. 安装依赖并启动：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd web/delivery-platform-ui
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
浏览器访问 `http://127.0.0.1:5173`，登录 `admin` / `admin`。`/api` 由 Vite 代理到 `8080`。
|
||||||
|
|
||||||
|
## 构建
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>客户商务与交付管理平台</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1869
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "delivery-platform-ui",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.7.9",
|
||||||
|
"element-plus": "^2.9.1",
|
||||||
|
"pinia": "^2.3.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"vite": "^6.0.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {{ page?: number, size?: number, keyword?: string }} params
|
||||||
|
*/
|
||||||
|
export function listCustomers(params) {
|
||||||
|
return axios.get("/api/v1/customers", { params });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCustomer(body) {
|
||||||
|
return axios.post("/api/v1/customers", body);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateCustomer(id, body) {
|
||||||
|
return axios.put(`/api/v1/customers/${id}`, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteCustomer(id) {
|
||||||
|
return axios.delete(`/api/v1/customers/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {{ page?: number, size?: number, customerId?: string | number }} params
|
||||||
|
*/
|
||||||
|
export function listProjects(params) {
|
||||||
|
return axios.get("/api/v1/projects", { params });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createProject(body) {
|
||||||
|
return axios.post("/api/v1/projects", body);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateProject(id, body) {
|
||||||
|
return axios.put(`/api/v1/projects/${id}`, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteProject(id) {
|
||||||
|
return axios.delete(`/api/v1/projects/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProjectPhaseDictionary() {
|
||||||
|
return axios.get("/api/v1/dictionaries/PROJECT_PHASE");
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
<template>
|
||||||
|
<el-container class="shell">
|
||||||
|
<el-aside width="220px" class="aside">
|
||||||
|
<div class="brand">创飞 · 交付平台</div>
|
||||||
|
<el-menu router :default-active="route.path" background-color="#001529" text-color="#fff" active-text-color="#ffd04b">
|
||||||
|
<el-menu-item index="/">
|
||||||
|
<span>首页</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/customers">
|
||||||
|
<span>客户管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/projects">
|
||||||
|
<span>项目管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
<el-container>
|
||||||
|
<el-header class="top">
|
||||||
|
<span class="user">{{ auth.displayName || "—" }}</span>
|
||||||
|
<el-button type="danger" link @click="logout">退出</el-button>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="main">
|
||||||
|
<router-view />
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const auth = useAuthStore();
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
auth.logout();
|
||||||
|
router.push({ name: "login" });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.shell {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.aside {
|
||||||
|
background: #001529;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
padding: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px solid #ffffff22;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
.user {
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import { createPinia } from "pinia";
|
||||||
|
import ElementPlus from "element-plus";
|
||||||
|
import "element-plus/dist/index.css";
|
||||||
|
import axios from "axios";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
import { useAuthStore } from "./stores/auth";
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(pinia);
|
||||||
|
|
||||||
|
useAuthStore(pinia).restoreAxiosAuth();
|
||||||
|
|
||||||
|
axios.interceptors.response.use(
|
||||||
|
(r) => r,
|
||||||
|
(err) => {
|
||||||
|
if (err.response?.status === 401) {
|
||||||
|
const auth = useAuthStore();
|
||||||
|
auth.logout();
|
||||||
|
if (router.currentRoute.value.name !== "login") {
|
||||||
|
router.push({
|
||||||
|
name: "login",
|
||||||
|
query: { redirect: router.currentRoute.value.fullPath },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(err);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
app.use(router).use(ElementPlus).mount("#app");
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: "/login", name: "login", component: () => import("../views/LoginView.vue") },
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
component: () => import("../layout/MainLayout.vue"),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "home",
|
||||||
|
component: () => import("../views/HomeView.vue"),
|
||||||
|
meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "customers",
|
||||||
|
name: "customers",
|
||||||
|
component: () => import("../views/CustomersView.vue"),
|
||||||
|
meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "projects",
|
||||||
|
name: "projects",
|
||||||
|
component: () => import("../views/ProjectsView.vue"),
|
||||||
|
meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ path: "/403", name: "forbidden", component: () => import("../views/ForbiddenView.vue") },
|
||||||
|
{ path: "/:pathMatch(.*)*", name: "notfound", component: () => import("../views/NotFoundView.vue") },
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
function hasRoleAccess(metaRoles, userRoles) {
|
||||||
|
if (!metaRoles || metaRoles.length === 0) return true;
|
||||||
|
const set = new Set(userRoles || []);
|
||||||
|
return metaRoles.some((r) => set.has(r));
|
||||||
|
}
|
||||||
|
|
||||||
|
router.beforeEach((to) => {
|
||||||
|
const auth = useAuthStore();
|
||||||
|
if (to.meta.requiresAuth && !auth.token) {
|
||||||
|
return { name: "login", query: { redirect: to.fullPath } };
|
||||||
|
}
|
||||||
|
if (to.meta.requiresAuth && to.meta.roles && !hasRoleAccess(to.meta.roles, auth.roles)) {
|
||||||
|
return { name: "forbidden" };
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const TOKEN_KEY = "craftlabs_platform_token";
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore("auth", {
|
||||||
|
state: () => ({
|
||||||
|
token: localStorage.getItem(TOKEN_KEY) || "",
|
||||||
|
displayName: "",
|
||||||
|
roles: [],
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
async login(username, password) {
|
||||||
|
const { data } = await axios.post("/api/v1/auth/login", { username, password });
|
||||||
|
this.token = data.token;
|
||||||
|
this.displayName = data.displayName || username;
|
||||||
|
this.roles = data.roles || [];
|
||||||
|
localStorage.setItem(TOKEN_KEY, this.token);
|
||||||
|
axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.token = "";
|
||||||
|
this.displayName = "";
|
||||||
|
this.roles = [];
|
||||||
|
localStorage.removeItem(TOKEN_KEY);
|
||||||
|
delete axios.defaults.headers.common.Authorization;
|
||||||
|
},
|
||||||
|
restoreAxiosAuth() {
|
||||||
|
if (this.token) {
|
||||||
|
axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* @param {unknown} err
|
||||||
|
* @param {string} fallback
|
||||||
|
*/
|
||||||
|
export function apiErrorMessage(err, fallback) {
|
||||||
|
const e = err && typeof err === "object" && "response" in err ? err : null;
|
||||||
|
const data = e?.response?.data;
|
||||||
|
if (typeof data === "string" && data.trim()) return data;
|
||||||
|
if (data && typeof data === "object") {
|
||||||
|
if (typeof data.message === "string" && data.message.trim()) return data.message;
|
||||||
|
if (Array.isArray(data.errors)) {
|
||||||
|
const parts = data.errors
|
||||||
|
.map((x) => (x && typeof x === "object" ? x.defaultMessage || x.message : null))
|
||||||
|
.filter(Boolean);
|
||||||
|
if (parts.length) return parts.join("；");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<div class="toolbar">
|
||||||
|
<span class="title">客户管理</span>
|
||||||
|
<div class="actions">
|
||||||
|
<el-input
|
||||||
|
v-model="keyword"
|
||||||
|
clearable
|
||||||
|
placeholder="按名称或信用代码搜索"
|
||||||
|
class="search"
|
||||||
|
@keyup.enter="load"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" :loading="loading" @click="load">查询</el-button>
|
||||||
|
<el-button type="success" @click="openCreate">新建客户</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||||
|
<el-table-column prop="name" label="客户名称" min-width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="creditCode" label="统一社会信用代码" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" link @click="onDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="pager">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page"
|
||||||
|
v-model:page-size="pageSize"
|
||||||
|
:total="total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
background
|
||||||
|
@current-change="load"
|
||||||
|
@size-change="onSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="480px" destroy-on-close @closed="resetForm">
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
|
||||||
|
<el-form-item label="客户名称" prop="name">
|
||||||
|
<el-input v-model="form.name" maxlength="200" show-word-limit placeholder="请输入客户名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统一社会信用代码" prop="creditCode">
|
||||||
|
<el-input v-model="form.creditCode" maxlength="32" clearable placeholder="选填" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted } from "vue";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
import { listCustomers, createCustomer, updateCustomer, deleteCustomer } from "../api/platform";
|
||||||
|
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||||
|
|
||||||
|
const auth = useAuthStore();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const saving = ref(false);
|
||||||
|
const rows = ref([]);
|
||||||
|
const total = ref(0);
|
||||||
|
const page = ref(1);
|
||||||
|
const pageSize = ref(10);
|
||||||
|
const keyword = ref("");
|
||||||
|
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const editingId = ref(null);
|
||||||
|
const formRef = ref(null);
|
||||||
|
const form = reactive({
|
||||||
|
name: "",
|
||||||
|
creditCode: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogTitle = computed(() => (editingId.value ? "编辑客户" : "新建客户"));
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
auth.restoreAxiosAuth();
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSizeChange() {
|
||||||
|
page.value = 1;
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const { data } = await listCustomers({
|
||||||
|
page: page.value - 1,
|
||||||
|
size: pageSize.value,
|
||||||
|
keyword: keyword.value?.trim() || undefined,
|
||||||
|
});
|
||||||
|
const body = data && typeof data === "object" ? data : {};
|
||||||
|
rows.value = Array.isArray(body.content) ? body.content : [];
|
||||||
|
total.value = Number(body.totalElements ?? body.total ?? 0);
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "加载客户列表失败"));
|
||||||
|
rows.value = [];
|
||||||
|
total.value = 0;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
editingId.value = null;
|
||||||
|
resetForm();
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(row) {
|
||||||
|
editingId.value = row.id;
|
||||||
|
form.name = row.name ?? "";
|
||||||
|
form.creditCode = row.creditCode ?? "";
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
form.name = "";
|
||||||
|
form.creditCode = "";
|
||||||
|
formRef.value?.resetFields?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
const f = formRef.value;
|
||||||
|
if (!f) return;
|
||||||
|
try {
|
||||||
|
await f.validate();
|
||||||
|
} catch {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
saving.value = true;
|
||||||
|
const payload = {
|
||||||
|
name: form.name.trim(),
|
||||||
|
creditCode: form.creditCode?.trim() || undefined,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
if (editingId.value != null) {
|
||||||
|
await updateCustomer(editingId.value, payload);
|
||||||
|
ElMessage.success("已保存");
|
||||||
|
} else {
|
||||||
|
await createCustomer(payload);
|
||||||
|
ElMessage.success("已创建");
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
await load();
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "保存失败"));
|
||||||
|
} finally {
|
||||||
|
saving.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDelete(row) {
|
||||||
|
ElMessageBox.confirm(`确定删除客户「${row.name || row.id}」吗？`, "提示", {
|
||||||
|
type: "warning",
|
||||||
|
confirmButtonText: "删除",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
try {
|
||||||
|
await deleteCustomer(row.id);
|
||||||
|
ElMessage.success("已删除");
|
||||||
|
await load();
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "删除失败"));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
.pager {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<el-result icon="warning" title="403" sub-title="没有权限访问该页面">
|
||||||
|
<template #extra>
|
||||||
|
<el-button type="primary" @click="goHome">返回首页</el-button>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
function goHome() {
|
||||||
|
router.push({ name: "home" });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<el-alert title="I1：JWT + 布局壳；后续迭代挂载 M1～M11" type="info" show-icon :closable="false" />
|
||||||
|
<p class="meta">用户：{{ auth.displayName }}，角色：{{ auth.roles.join(", ") || "—" }}</p>
|
||||||
|
<el-button type="primary" :loading="pingLoading" @click="ping">Bearer 调用 /api/v1/ping</el-button>
|
||||||
|
<pre v-if="pingBody">{{ pingBody }}</pre>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
|
||||||
|
const auth = useAuthStore();
|
||||||
|
const pingBody = ref("");
|
||||||
|
const pingLoading = ref(false);
|
||||||
|
|
||||||
|
onMounted(() => auth.restoreAxiosAuth());
|
||||||
|
|
||||||
|
async function ping() {
|
||||||
|
pingLoading.value = true;
|
||||||
|
pingBody.value = "";
|
||||||
|
try {
|
||||||
|
const { data } = await axios.get("/api/v1/ping");
|
||||||
|
pingBody.value = JSON.stringify(data, null, 2);
|
||||||
|
} catch (e) {
|
||||||
|
pingBody.value = e.response?.data ? JSON.stringify(e.response.data) : String(e.message);
|
||||||
|
} finally {
|
||||||
|
pingLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.meta {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin-top: 12px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #d4d4d4;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<el-card class="card">
|
||||||
|
<template #header>客户商务与交付管理平台（I1）</template>
|
||||||
|
<el-form @submit.prevent="onSubmit">
|
||||||
|
<el-form-item label="用户名">
|
||||||
|
<el-input v-model="username" autocomplete="username" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码">
|
||||||
|
<el-input v-model="password" type="password" autocomplete="current-password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-button type="primary" native-type="submit" :loading="loading" block>登录</el-button>
|
||||||
|
</el-form>
|
||||||
|
<p class="hint">演示：admin / admin（SYS_ADMIN）；dev / dev（DEVELOPER）</p>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
|
||||||
|
const username = ref("admin");
|
||||||
|
const password = ref("admin");
|
||||||
|
const loading = ref(false);
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const auth = useAuthStore();
|
||||||
|
|
||||||
|
onMounted(() => auth.restoreAxiosAuth());
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await auth.login(username.value, password.value);
|
||||||
|
ElMessage.success("登录成功");
|
||||||
|
const redirect = route.query.redirect || "/";
|
||||||
|
await router.replace(typeof redirect === "string" ? redirect : "/");
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(e.response?.data?.message || "登录失败");
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wrap {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: 380px;
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<el-result icon="error" title="404" sub-title="页面不存在">
|
||||||
|
<template #extra>
|
||||||
|
<el-button type="primary" @click="goHome">返回首页</el-button>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
function goHome() {
|
||||||
|
router.push({ name: "home" });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,343 @@
|
|||||||
|
<template>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<div class="toolbar">
|
||||||
|
<span class="title">项目管理</span>
|
||||||
|
<div class="actions">
|
||||||
|
<el-select
|
||||||
|
v-model="customerFilterId"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
placeholder="按客户筛选"
|
||||||
|
class="customer-filter"
|
||||||
|
:loading="customersLoading"
|
||||||
|
@change="onFilterChange"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="c in customerOptions"
|
||||||
|
:key="c.id"
|
||||||
|
:label="c.name || String(c.id)"
|
||||||
|
:value="c.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :loading="loading" @click="load">查询</el-button>
|
||||||
|
<el-button type="success" @click="openCreate">新建项目</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||||
|
<el-table-column label="客户" min-width="160" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ customerNameById(row.customerId) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="项目名称" min-width="180" show-overflow-tooltip />
|
||||||
|
<el-table-column label="阶段" min-width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ phaseLabel(row.phase) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" link @click="onDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="pager">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page"
|
||||||
|
v-model:page-size="pageSize"
|
||||||
|
:total="total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
background
|
||||||
|
@current-change="load"
|
||||||
|
@size-change="onSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" destroy-on-close @closed="resetForm">
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||||
|
<el-form-item label="客户" prop="customerId">
|
||||||
|
<el-select
|
||||||
|
v-model="form.customerId"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择客户"
|
||||||
|
style="width: 100%"
|
||||||
|
:loading="customersLoading"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="c in customerOptions"
|
||||||
|
:key="c.id"
|
||||||
|
:label="c.name || String(c.id)"
|
||||||
|
:value="c.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="项目名称" prop="name">
|
||||||
|
<el-input v-model="form.name" maxlength="200" show-word-limit placeholder="请输入项目名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="阶段" prop="phase">
|
||||||
|
<el-select v-model="form.phase" placeholder="请选择阶段" style="width: 100%" :loading="dictLoading">
|
||||||
|
<el-option v-for="p in phaseOptions" :key="p.code" :label="p.label" :value="p.code" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted } from "vue";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { useAuthStore } from "../stores/auth";
|
||||||
|
import {
|
||||||
|
listCustomers,
|
||||||
|
listProjects,
|
||||||
|
createProject,
|
||||||
|
updateProject,
|
||||||
|
deleteProject,
|
||||||
|
getProjectPhaseDictionary,
|
||||||
|
} from "../api/platform";
|
||||||
|
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||||
|
|
||||||
|
const auth = useAuthStore();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const saving = ref(false);
|
||||||
|
const customersLoading = ref(false);
|
||||||
|
const dictLoading = ref(false);
|
||||||
|
const rows = ref([]);
|
||||||
|
const total = ref(0);
|
||||||
|
const page = ref(1);
|
||||||
|
const pageSize = ref(10);
|
||||||
|
const customerFilterId = ref(undefined);
|
||||||
|
const customerOptions = ref([]);
|
||||||
|
const phaseOptions = ref([]);
|
||||||
|
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const editingId = ref(null);
|
||||||
|
const formRef = ref(null);
|
||||||
|
const form = reactive({
|
||||||
|
customerId: undefined,
|
||||||
|
name: "",
|
||||||
|
phase: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
customerId: [{ required: true, message: "请选择客户", trigger: "change" }],
|
||||||
|
name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
|
||||||
|
phase: [{ required: true, message: "请选择阶段", trigger: "change" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogTitle = computed(() => (editingId.value ? "编辑项目" : "新建项目"));
|
||||||
|
|
||||||
|
const customerMap = computed(() => {
|
||||||
|
const m = new Map();
|
||||||
|
for (const c of customerOptions.value) {
|
||||||
|
if (c && c.id != null) m.set(c.id, c.name ?? String(c.id));
|
||||||
|
}
|
||||||
|
return m;
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
auth.restoreAxiosAuth();
|
||||||
|
await Promise.all([loadCustomersForSelect(), loadPhaseDictionary()]);
|
||||||
|
await load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function customerNameById(id) {
|
||||||
|
if (id == null) return "—";
|
||||||
|
return customerMap.value.get(id) ?? String(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function phaseLabel(code) {
|
||||||
|
if (code == null || code === "") return "—";
|
||||||
|
const hit = phaseOptions.value.find((p) => p.code === String(code));
|
||||||
|
return hit?.label ?? String(code);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFilterChange() {
|
||||||
|
page.value = 1;
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSizeChange() {
|
||||||
|
page.value = 1;
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeDictionaryPayload(raw) {
|
||||||
|
const d = raw?.data !== undefined ? raw.data : raw;
|
||||||
|
let arr = [];
|
||||||
|
if (Array.isArray(d)) arr = d;
|
||||||
|
else if (d && typeof d === "object") {
|
||||||
|
if (Array.isArray(d.items)) arr = d.items;
|
||||||
|
else if (Array.isArray(d.entries)) arr = d.entries;
|
||||||
|
else if (Array.isArray(d.content)) arr = d.content;
|
||||||
|
else if (Array.isArray(d.values)) arr = d.values;
|
||||||
|
}
|
||||||
|
return arr
|
||||||
|
.map((x) => ({
|
||||||
|
code: String(x.code ?? x.dictCode ?? x.key ?? x.value ?? x.id ?? ""),
|
||||||
|
label: String(x.label ?? x.dictLabel ?? x.name ?? x.text ?? x.title ?? x.code ?? x.dictCode ?? ""),
|
||||||
|
}))
|
||||||
|
.filter((x) => x.code);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadPhaseDictionary() {
|
||||||
|
dictLoading.value = true;
|
||||||
|
try {
|
||||||
|
const { data } = await getProjectPhaseDictionary();
|
||||||
|
phaseOptions.value = normalizeDictionaryPayload(data);
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "加载项目阶段字典失败"));
|
||||||
|
phaseOptions.value = [];
|
||||||
|
} finally {
|
||||||
|
dictLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadCustomersForSelect() {
|
||||||
|
customersLoading.value = true;
|
||||||
|
try {
|
||||||
|
const { data } = await listCustomers({ page: 0, size: 500 });
|
||||||
|
const body = data && typeof data === "object" ? data : {};
|
||||||
|
customerOptions.value = Array.isArray(body.content) ? body.content : [];
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "加载客户列表失败"));
|
||||||
|
customerOptions.value = [];
|
||||||
|
} finally {
|
||||||
|
customersLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
page: page.value - 1,
|
||||||
|
size: pageSize.value,
|
||||||
|
};
|
||||||
|
if (customerFilterId.value != null && customerFilterId.value !== "") {
|
||||||
|
params.customerId = customerFilterId.value;
|
||||||
|
}
|
||||||
|
const { data } = await listProjects(params);
|
||||||
|
const body = data && typeof data === "object" ? data : {};
|
||||||
|
rows.value = Array.isArray(body.content) ? body.content : [];
|
||||||
|
total.value = Number(body.totalElements ?? body.total ?? 0);
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "加载项目列表失败"));
|
||||||
|
rows.value = [];
|
||||||
|
total.value = 0;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
editingId.value = null;
|
||||||
|
resetForm();
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(row) {
|
||||||
|
editingId.value = row.id;
|
||||||
|
form.customerId = row.customerId;
|
||||||
|
form.name = row.name ?? "";
|
||||||
|
const ph = row.phase;
|
||||||
|
form.phase = ph == null ? "" : String(ph);
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
form.customerId = undefined;
|
||||||
|
form.name = "";
|
||||||
|
form.phase = "";
|
||||||
|
formRef.value?.resetFields?.();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
const f = formRef.value;
|
||||||
|
if (!f) return;
|
||||||
|
try {
|
||||||
|
await f.validate();
|
||||||
|
} catch {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
saving.value = true;
|
||||||
|
const payload = {
|
||||||
|
customerId: form.customerId,
|
||||||
|
name: form.name.trim(),
|
||||||
|
phase: form.phase,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
if (editingId.value != null) {
|
||||||
|
await updateProject(editingId.value, payload);
|
||||||
|
ElMessage.success("已保存");
|
||||||
|
} else {
|
||||||
|
await createProject(payload);
|
||||||
|
ElMessage.success("已创建");
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
await load();
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "保存失败"));
|
||||||
|
} finally {
|
||||||
|
saving.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDelete(row) {
|
||||||
|
ElMessageBox.confirm(`确定删除项目「${row.name || row.id}」吗？`, "提示", {
|
||||||
|
type: "warning",
|
||||||
|
confirmButtonText: "删除",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
try {
|
||||||
|
await deleteProject(row.id);
|
||||||
|
ElMessage.success("已删除");
|
||||||
|
await load();
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error(apiErrorMessage(e, "删除失败"));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.customer-filter {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
.pager {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
"/api": {
|
||||||
|
target: "http://127.0.0.1:8080",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user