第一版
This commit is contained in:
parent
7351f8522b
commit
6cbd8f93e6
24
greenOrange/.gitignore
vendored
Normal file
24
greenOrange/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
5
greenOrange/README.md
Normal file
5
greenOrange/README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
10
greenOrange/auto-imports.d.ts
vendored
Normal file
10
greenOrange/auto-imports.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
// biome-ignore lint: disable
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
|
||||||
|
}
|
||||||
44
greenOrange/components.d.ts
vendored
Normal file
44
greenOrange/components.d.ts
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
/* prettier-ignore */
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
AAvatar: typeof import('ant-design-vue/es')['Avatar']
|
||||||
|
ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
|
||||||
|
ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
|
||||||
|
AButton: typeof import('ant-design-vue/es')['Button']
|
||||||
|
ACard: typeof import('ant-design-vue/es')['Card']
|
||||||
|
ACol: typeof import('ant-design-vue/es')['Col']
|
||||||
|
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
|
||||||
|
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||||
|
ADrawer: typeof import('ant-design-vue/es')['Drawer']
|
||||||
|
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
|
||||||
|
AForm: typeof import('ant-design-vue/es')['Form']
|
||||||
|
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||||
|
AInput: typeof import('ant-design-vue/es')['Input']
|
||||||
|
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
|
||||||
|
AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
|
||||||
|
ALayout: typeof import('ant-design-vue/es')['Layout']
|
||||||
|
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
|
||||||
|
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
|
||||||
|
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
|
||||||
|
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||||
|
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||||
|
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||||
|
ARow: typeof import('ant-design-vue/es')['Row']
|
||||||
|
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||||
|
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||||
|
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||||
|
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
|
||||||
|
ATable: typeof import('ant-design-vue/es')['Table']
|
||||||
|
ATag: typeof import('ant-design-vue/es')['Tag']
|
||||||
|
ATextarea: typeof import('ant-design-vue/es')['Textarea']
|
||||||
|
AUpload: typeof import('ant-design-vue/es')['Upload']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
greenOrange/dist (3).zip
Normal file
BIN
greenOrange/dist (3).zip
Normal file
Binary file not shown.
BIN
greenOrange/dist.zip
Normal file
BIN
greenOrange/dist.zip
Normal file
Binary file not shown.
13
greenOrange/index.html
Normal file
13
greenOrange/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
|
||||||
|
<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.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9500
greenOrange/package-lock.json
generated
Normal file
9500
greenOrange/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
greenOrange/package.json
Normal file
34
greenOrange/package.json
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"name": "campusexpressdelivery",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@surely-vue/table": "^5.0.2",
|
||||||
|
"@vueup/vue-quill": "^1.0.0-beta.11",
|
||||||
|
"ant-design-vue": "^4.2.6",
|
||||||
|
"axios": "^1.7.7",
|
||||||
|
"element-plus": "^2.8.8",
|
||||||
|
"pinia": "^2.2.6",
|
||||||
|
"pinia-plugin-persistedstate": "^4.1.3",
|
||||||
|
"quill": "^2.0.0",
|
||||||
|
"quill-image-resize-module--fix-imports-error": "^3.0.0",
|
||||||
|
"vue": "^3.5.12",
|
||||||
|
"vue-router": "^4.4.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/quill": "^2.0.14",
|
||||||
|
"@vitejs/plugin-vue": "^5.1.4",
|
||||||
|
"sass-embedded": "^1.81.0",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"unplugin-auto-import": "^0.18.5",
|
||||||
|
"unplugin-vue-components": "^0.27.4",
|
||||||
|
"vite": "^5.4.10",
|
||||||
|
"vue-tsc": "^2.1.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
greenOrange/public/vite.svg
Normal file
1
greenOrange/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
greenOrange/qingcheng-Web
Submodule
1
greenOrange/qingcheng-Web
Submodule
|
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit 7351f8522b6ccbaf4802e2736bdfe606f288e733
|
||||||
13
greenOrange/src/App.vue
Normal file
13
greenOrange/src/App.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<a-config-provider :locale="zhCN">
|
||||||
|
<router-view/>
|
||||||
|
</a-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import zhCN from "ant-design-vue/es/locale/zh_CN";
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/zh-cn';
|
||||||
|
|
||||||
|
dayjs.locale('zh-cn');
|
||||||
|
</script>
|
||||||
28
greenOrange/src/api/myAxios.ts
Normal file
28
greenOrange/src/api/myAxios.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// 创建实例时配置默认值
|
||||||
|
import axios from "axios";
|
||||||
|
import router from "../router";
|
||||||
|
|
||||||
|
// const viteEnv = import.meta.env;
|
||||||
|
|
||||||
|
const myAxios = axios.create({
|
||||||
|
withCredentials: true,
|
||||||
|
baseURL:'http://localhost:3456'
|
||||||
|
//baseURL:'http://1.94.237.210:3457'
|
||||||
|
});
|
||||||
|
|
||||||
|
myAxios.interceptors.request.use(function (config) {
|
||||||
|
return config;
|
||||||
|
}, function (error) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
myAxios.interceptors.response.use(function (response: any) {
|
||||||
|
if (response.data.code === 40100) {
|
||||||
|
router.replace('/')
|
||||||
|
}
|
||||||
|
return response.data;
|
||||||
|
}, function (error) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default myAxios;
|
||||||
BIN
greenOrange/src/assets/Login.png
Normal file
BIN
greenOrange/src/assets/Login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 KiB |
BIN
greenOrange/src/assets/login/hidePassword.png
Normal file
BIN
greenOrange/src/assets/login/hidePassword.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
greenOrange/src/assets/login/showPassword.png
Normal file
BIN
greenOrange/src/assets/login/showPassword.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
48
greenOrange/src/layout/ManageLayout.vue
Normal file
48
greenOrange/src/layout/ManageLayout.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<div id="manage">
|
||||||
|
<a-layout has-sider>
|
||||||
|
<a-layout-sider :style="{ width: '200px' }">
|
||||||
|
<ManageSidebar/>
|
||||||
|
</a-layout-sider>
|
||||||
|
<a-layout>
|
||||||
|
<a-layout-header :style="{ background: '#fff', padding: 0}">
|
||||||
|
<ManageHeader/>
|
||||||
|
</a-layout-header>
|
||||||
|
<a-layout-content class="main">
|
||||||
|
<router-view :key="key" class="main-card"/>
|
||||||
|
</a-layout-content>
|
||||||
|
</a-layout>
|
||||||
|
</a-layout>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ManageHeader from "./manage/ManageHeader.vue";
|
||||||
|
import ManageSidebar from "./manage/ManageSidebar.vue";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const key = () => {
|
||||||
|
return route.path + Math.random();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
#manage {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
flex: 1;
|
||||||
|
flex-basis: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
193
greenOrange/src/layout/manage/ManageHeader.vue
Normal file
193
greenOrange/src/layout/manage/ManageHeader.vue
Normal file
|
|
@ -0,0 +1,193 @@
|
||||||
|
<template>
|
||||||
|
<div class="manage-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<a-breadcrumb class="breadcrumb">
|
||||||
|
<a-breadcrumb-item>青橙校园后台管理系统</a-breadcrumb-item>
|
||||||
|
<a-breadcrumb-item class="routeName">{{ route.name }}</a-breadcrumb-item>
|
||||||
|
</a-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<!-- <div class="bell">-->
|
||||||
|
<!-- <BellTwoTone/>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="name">
|
||||||
|
{{ store.loginUser.userRole === "notLogin" ? '未登录' : store.loginUser.userRole }}
|
||||||
|
</div>
|
||||||
|
<div class="user">
|
||||||
|
<a-dropdown>
|
||||||
|
<a-avatar :size="40" class="user-avatar" :src="store.loginUser.avatarUrl"/>
|
||||||
|
<template #overlay>
|
||||||
|
<a-menu>
|
||||||
|
<a-menu-item @click="logout">
|
||||||
|
<LogoutOutlined />
|
||||||
|
退出登录
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item @click="showDrawer">
|
||||||
|
<UserOutlined />
|
||||||
|
个人中心
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-drawer
|
||||||
|
title="个人中心"
|
||||||
|
:placement="placement"
|
||||||
|
:closable="false"
|
||||||
|
:open="open"
|
||||||
|
@close="onClose"
|
||||||
|
class="custom-class"
|
||||||
|
>
|
||||||
|
<a-avatar :size="64" :src="store.loginUser.avatarUrl"></a-avatar>
|
||||||
|
|
||||||
|
<div class="message">
|
||||||
|
<p class="firstmessage">用户名：{{ store.loginUser.username }}</p>
|
||||||
|
<p>账号ID：{{ store.loginUser.username }}</p>
|
||||||
|
<p>注册时间：2024-06-20</p>
|
||||||
|
<p>账号权限：{{store.loginUser.userRole}}</p>
|
||||||
|
<p>联系方式：{{store.loginUser.phone}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useRoute, useRouter} from "vue-router";
|
||||||
|
import {userStore} from "../../store/userStore.ts";
|
||||||
|
import {UserOutlined,LogoutOutlined} from '@ant-design/icons-vue';
|
||||||
|
import myAxios from "../../api/myAxios.ts";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import type { DrawerProps } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const store = userStore()
|
||||||
|
|
||||||
|
|
||||||
|
const placement = ref<DrawerProps['placement']>('right');
|
||||||
|
const open = ref<boolean>(false);
|
||||||
|
|
||||||
|
const showDrawer = () => {
|
||||||
|
open.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
open.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登出
|
||||||
|
*/
|
||||||
|
const logout = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
|
||||||
|
// 严格遵循接口文档路径大小写
|
||||||
|
const res: any = await myAxios.get(
|
||||||
|
"/userInfo/logout",
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization:token,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log('登出响应:', res);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
sessionStorage.clear();
|
||||||
|
store.$reset();
|
||||||
|
|
||||||
|
|
||||||
|
await router.replace('/');
|
||||||
|
message.success('登出成功');
|
||||||
|
} else {
|
||||||
|
|
||||||
|
message.error(`登出失败：${res.message || '未知错误'}`);
|
||||||
|
console.error('业务逻辑错误:', res);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('请求异常:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.manage-header {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 2px solid #ccced7;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left .breadcrumb {
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.routeName {
|
||||||
|
font-size: 13px;
|
||||||
|
padding-top: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right .bell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right .name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right .user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar:hover {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-class img{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
float: right;
|
||||||
|
margin-right: 100px;
|
||||||
|
}
|
||||||
|
.firstmessage {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
greenOrange/src/layout/manage/ManageSidebar.vue
Normal file
123
greenOrange/src/layout/manage/ManageSidebar.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<template>
|
||||||
|
<a-menu
|
||||||
|
v-model:selectedKeys="selectedKeys"
|
||||||
|
mode="inline"
|
||||||
|
style="max-height: 200vh; min-height: 100vh;background-color: #ffe7ba"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<a-menu-item key="/index">
|
||||||
|
<PieChartOutlined />
|
||||||
|
<span>首页</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="/userList">
|
||||||
|
<UserOutlined />
|
||||||
|
<span>用户列表</span>
|
||||||
|
</a-menu-item>
|
||||||
|
|
||||||
|
<a-menu-item key="/project">
|
||||||
|
<UserOutlined />
|
||||||
|
<span>项目管理</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-sub-menu>
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<FileDoneOutlined />
|
||||||
|
<span>接单管理</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<a-menu-item key="/orderSort">接单分类</a-menu-item>
|
||||||
|
<a-menu-item key="/orderDetail">接单详情</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-sub-menu>
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<ReadOutlined />
|
||||||
|
<span>课程管理</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<a-menu-item key="/localCurriculum">本地课程</a-menu-item>
|
||||||
|
<a-menu-item key="/linkedCourse">链接课程</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-sub-menu>
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<FieldTimeOutlined />
|
||||||
|
<span>勤工俭学</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<a-menu-item key="/workList">工作列表</a-menu-item>
|
||||||
|
<a-menu-item key="/workDetail">工作详情</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
|
||||||
|
<a-menu-item key="/community">
|
||||||
|
<CommentOutlined />
|
||||||
|
<span>社群</span>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
import {UserOutlined, FieldTimeOutlined, FileDoneOutlined,ReadOutlined,CommentOutlined,PieChartOutlined} from '@ant-design/icons-vue';
|
||||||
|
import {useRoute, useRouter} from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
// 选中侧边栏
|
||||||
|
const selectedKeys = ref<string[]>(['/userList']);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setSelectedKey()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 根据路由设置当前选中侧边栏
|
||||||
|
const setSelectedKey = () => {
|
||||||
|
selectedKeys.value = [route.path];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路由跳转
|
||||||
|
const handleClick = (item: any) => {
|
||||||
|
router.push(item.key)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 全局菜单项样式 */
|
||||||
|
:deep(.ant-menu-item),
|
||||||
|
:deep(.ant-menu-submenu-title) {
|
||||||
|
color: rgba(0, 0, 0, 0.85) !important; /* 未选中黑色字体 */
|
||||||
|
font-weight: normal !important;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中项样式 */
|
||||||
|
:deep(.ant-menu-item-selected) {
|
||||||
|
background-color: #ffa940 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 鼠标悬停样式 */
|
||||||
|
:deep(.ant-menu-item:hover),
|
||||||
|
:deep(.ant-menu-submenu-title:hover) {
|
||||||
|
background-color: rgba(255, 169, 64, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子菜单箭头颜色 */
|
||||||
|
:deep(.ant-menu-submenu-arrow::before),
|
||||||
|
:deep(.ant-menu-submenu-arrow::after) {
|
||||||
|
background: rgba(0, 0, 0, 0.65) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 子菜单展开时标题样式 */
|
||||||
|
:deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
|
||||||
|
color: rgba(0, 0, 0, 0.95) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 折叠状态下选中样式 */
|
||||||
|
:deep(.ant-menu-inline-collapsed .ant-menu-item-selected) {
|
||||||
|
background-color: #ffa940 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
greenOrange/src/main.ts
Normal file
16
greenOrange/src/main.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {createApp} from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import pinia from "./store";
|
||||||
|
import router from "./router";
|
||||||
|
import 'quill/dist/quill.snow.css';
|
||||||
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
// 配置路由
|
||||||
|
app.use(router)
|
||||||
|
// 配置pinia
|
||||||
|
app.use(pinia)
|
||||||
|
// 挂在实例
|
||||||
|
app.mount('#app')
|
||||||
|
|
||||||
11
greenOrange/src/router/index.ts
Normal file
11
greenOrange/src/router/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {createRouter, createWebHashHistory} from "vue-router";
|
||||||
|
import {routes} from "./routes";
|
||||||
|
|
||||||
|
// 创建路由实例并传递 `routes` 配置
|
||||||
|
const router = createRouter({
|
||||||
|
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
||||||
|
history: createWebHashHistory(),
|
||||||
|
routes, // `routes: routes` 的缩写
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
98
greenOrange/src/router/routes.ts
Normal file
98
greenOrange/src/router/routes.ts
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
// 将路由规则 routes 导出
|
||||||
|
export const routes = [
|
||||||
|
// 全局路由(无需嵌套上左右整体布局)
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import("../view/Login.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/test',
|
||||||
|
name: '全局测试页面',
|
||||||
|
component: () => import("../view/Test.vue"),
|
||||||
|
},
|
||||||
|
// 管理端
|
||||||
|
{
|
||||||
|
path: '/manage',
|
||||||
|
component: () => import("../layout/ManageLayout.vue"),
|
||||||
|
children: [
|
||||||
|
// 首页
|
||||||
|
{
|
||||||
|
path: '/index',
|
||||||
|
name: '首页',
|
||||||
|
component: () => import("../view/Index.vue"),
|
||||||
|
},
|
||||||
|
// 账户管理
|
||||||
|
{
|
||||||
|
path: '/orderSort',
|
||||||
|
name: '接单分类',
|
||||||
|
component: () => import("../view/order/orderSort.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/orderDetail',
|
||||||
|
name: '接单详情',
|
||||||
|
component: () => import("../view/order/orderDetail.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/localCurriculum',
|
||||||
|
name: '本地课程',
|
||||||
|
component: () => import("../view/course/localCurriculum.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/linkedCourse',
|
||||||
|
name: '链接课程',
|
||||||
|
component: () => import("../view/course/linkedCourse.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/workList',
|
||||||
|
name: '工作列表',
|
||||||
|
component: () => import("../view/work/workList.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/workDetail',
|
||||||
|
name: '工作详情',
|
||||||
|
component: () => import("../view/work/workDetail.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/community',
|
||||||
|
name: '社群',
|
||||||
|
component: () => import("../view/community/community.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/userList',
|
||||||
|
name: '用户列表',
|
||||||
|
component: () => import("../view/userList/userList.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/project',
|
||||||
|
name: '项目管理',
|
||||||
|
component: () => import("../view/project/project.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/projectDetail',
|
||||||
|
name: '项目详情',
|
||||||
|
component: () => import("../view/project/projectDetail.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/addProject',
|
||||||
|
name: '新增项目',
|
||||||
|
component: () => import("../view/project/addProject.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/moneyDetail',
|
||||||
|
name: '项目明细',
|
||||||
|
component: () => import("../view/project/moneyDetail.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/projectNotice',
|
||||||
|
name: '项目通知',
|
||||||
|
component: () => import("../view/project/projectNotice.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/promotionCode',
|
||||||
|
name: '推广码',
|
||||||
|
component: () => import("../view/project/promotionCode.vue"),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
10
greenOrange/src/store/index.ts
Normal file
10
greenOrange/src/store/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {createPinia} from 'pinia'
|
||||||
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
pinia.use(piniaPluginPersistedstate)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default pinia
|
||||||
69
greenOrange/src/store/userStore.ts
Normal file
69
greenOrange/src/store/userStore.ts
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import myAxios from "../api/myAxios";
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
export const userStore = defineStore('user', {
|
||||||
|
state: () => ({
|
||||||
|
loginUser: {
|
||||||
|
username: '未登录',
|
||||||
|
avatarUrl: '',
|
||||||
|
userRole: 'notLogin',
|
||||||
|
phone: ''
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
persist: true,
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
// 获取登录用户信息
|
||||||
|
async getLoginUser() {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) {
|
||||||
|
message.warning('请先登录');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res:any = await myAxios.get('/userInfo/get/jwt/web', {
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
console.log(res)
|
||||||
|
this.updateUser({
|
||||||
|
username: res.data.userAccount,
|
||||||
|
avatarUrl: res.data.userAvatar,
|
||||||
|
userRole: res.data.userRole,
|
||||||
|
phone: res.data.phoneNumber
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '获取用户信息失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取用户信息失败:', error);
|
||||||
|
message.error('获取用户信息失败，请检查网络连接');
|
||||||
|
this.clearUser();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户信息
|
||||||
|
updateUser(payload: any) {
|
||||||
|
this.loginUser = {
|
||||||
|
...this.loginUser,
|
||||||
|
...payload
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除用户信息
|
||||||
|
clearUser() {
|
||||||
|
this.loginUser = {
|
||||||
|
username: '未登录',
|
||||||
|
avatarUrl: '',
|
||||||
|
userRole: 'notLogin',
|
||||||
|
phone: ''
|
||||||
|
};
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
48
greenOrange/src/style.css
Normal file
48
greenOrange/src/style.css
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
html {
|
||||||
|
/* 滚动时采用平滑过渡 */
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 管理页面全局样式 */
|
||||||
|
|
||||||
|
.main-card {
|
||||||
|
min-height: calc(100vh - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
background-color: white;
|
||||||
|
height: auto;
|
||||||
|
box-shadow: 0 0 1px 1px #dedede;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-box {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 0 1px 1px #dedede;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0 20px 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txt {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 500px;
|
||||||
|
}
|
||||||
11
greenOrange/src/utils/TableConfig.ts
Normal file
11
greenOrange/src/utils/TableConfig.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
// 时间处理
|
||||||
|
import router from "../router";
|
||||||
|
|
||||||
|
export const formatTime = (row: any) => {
|
||||||
|
let data = row.value;
|
||||||
|
return data.slice(0, 16).replace('T', '~');
|
||||||
|
}
|
||||||
|
|
||||||
|
export const backPage = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
118
greenOrange/src/view/Index.vue
Normal file
118
greenOrange/src/view/Index.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- 底部编辑区 -->
|
||||||
|
<div class="bottom-section">
|
||||||
|
<div class="editor-container">
|
||||||
|
<h4>窗口文本</h4>
|
||||||
|
<div id="toolbar"></div>
|
||||||
|
<div id="editor"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="device-preview">
|
||||||
|
<div class="device-frame">
|
||||||
|
<div class="preview-content" ref="previewContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 保存按钮 -->
|
||||||
|
<div class="footer">
|
||||||
|
<a-button type="primary">保存</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import Quill from 'quill'
|
||||||
|
|
||||||
|
// 富文本编辑器逻辑
|
||||||
|
const previewContent = ref<HTMLElement | null>(null)
|
||||||
|
const toolbarOptions = [
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
[{ 'header': [1, 2, 3, false] }],
|
||||||
|
['blockquote', 'code-block'],
|
||||||
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||||
|
['link', 'image']
|
||||||
|
]
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const quill = new Quill('#editor', {
|
||||||
|
theme: 'snow',
|
||||||
|
modules: { toolbar: toolbarOptions },
|
||||||
|
placeholder: '请输入内容...'
|
||||||
|
})
|
||||||
|
|
||||||
|
quill.on('text-change', () => {
|
||||||
|
if (previewContent.value) {
|
||||||
|
previewContent.value.innerHTML = quill.root.innerHTML
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-preview {
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame {
|
||||||
|
width: 375px;
|
||||||
|
height: 667px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content {
|
||||||
|
padding: 16px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
370
greenOrange/src/view/Login.vue
Normal file
370
greenOrange/src/view/Login.vue
Normal file
|
|
@ -0,0 +1,370 @@
|
||||||
|
<template>
|
||||||
|
<div id="login">
|
||||||
|
<form>
|
||||||
|
<div class="box" @submit.prevent>
|
||||||
|
<h2>欢迎登录青橙校园管理端</h2>
|
||||||
|
<div class="input-box">
|
||||||
|
|
||||||
|
<input type="text" placeholder="账户" v-model="userAccount"/>
|
||||||
|
</div>
|
||||||
|
<div class="input-box">
|
||||||
|
|
||||||
|
<input class="password" :type="type" placeholder="密码" v-model="userPassword"/>
|
||||||
|
<div @click="showPwd">
|
||||||
|
<!-- 隐藏图标 -->
|
||||||
|
<img src="../assets/login/hidePassword.png" v-show="showPassword === false" alt=""/>
|
||||||
|
<!-- 显示图标 -->
|
||||||
|
<img src="../assets/login/showPassword.png" v-show="showPassword === true" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="error-messages" v-if="userPassword && passwordErrors.length">
|
||||||
|
<!-- <div class="error-messages" v-if="false">-->
|
||||||
|
<div v-for="error in passwordErrors" :key="error" class="error-message">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-box">
|
||||||
|
<div>
|
||||||
|
<button @click="onLogin" type="button" :disabled="!isFormValid">登录</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
import {ref, computed, watch} from 'vue'
|
||||||
|
import {userStore} from "../store/userStore.ts";
|
||||||
|
import myAxios from "../api/myAxios";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
|
const store = userStore()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
//默认闭眼图标
|
||||||
|
let showPassword = ref(false)
|
||||||
|
//登录密码隐藏
|
||||||
|
let type = ref('password')
|
||||||
|
const userAccount = ref('');
|
||||||
|
const userPassword = ref('');
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 验证
|
||||||
|
* */
|
||||||
|
|
||||||
|
const passwordErrors = ref<string[]>([]);
|
||||||
|
|
||||||
|
const validatePassword = () => {
|
||||||
|
const errors: string[] = [];
|
||||||
|
const password = userPassword.value;
|
||||||
|
|
||||||
|
if (password.length < 6 || password.length > 11) {
|
||||||
|
errors.push('密码长度需为6到11位');
|
||||||
|
}
|
||||||
|
if (!/[A-Z]/.test(password)) {
|
||||||
|
errors.push('必须包含大写字母');
|
||||||
|
}
|
||||||
|
if (!/[a-z]/.test(password)) {
|
||||||
|
errors.push('必须包含小写字母');
|
||||||
|
}
|
||||||
|
if (!/[0-9]/.test(password)) {
|
||||||
|
errors.push('必须至少包含一个数字');
|
||||||
|
}
|
||||||
|
|
||||||
|
passwordErrors.value = errors;
|
||||||
|
};
|
||||||
|
// const validatePassword = () => {
|
||||||
|
// passwordErrors.value = []; // 直接设置为空数组
|
||||||
|
// // 注释原有验证逻辑
|
||||||
|
// };
|
||||||
|
|
||||||
|
const isFormValid = computed(() => {
|
||||||
|
return userAccount.value.trim() !== '' &&
|
||||||
|
userPassword.value !== '' &&
|
||||||
|
passwordErrors.value.length === 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// const isFormValid = computed(() => {
|
||||||
|
// return userAccount.value.trim() !== '' &&
|
||||||
|
// userPassword.value !== ''
|
||||||
|
// // && passwordErrors.value.length === 0
|
||||||
|
// });
|
||||||
|
|
||||||
|
watch(userPassword, validatePassword);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录
|
||||||
|
*/
|
||||||
|
const onLogin = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await myAxios.post(
|
||||||
|
"/userInfo/login",
|
||||||
|
{
|
||||||
|
userAccount: userAccount.value,
|
||||||
|
userPassword: userPassword.value
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'AfterScript': 'required-script'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(res)
|
||||||
|
if (res.code === 1 && res?.data) {
|
||||||
|
localStorage.setItem('token', res.data);
|
||||||
|
|
||||||
|
myAxios.defaults.headers.common['Authorization'] = res.data;
|
||||||
|
await store.getLoginUser();
|
||||||
|
if (store.loginUser) {
|
||||||
|
router.push('/index');
|
||||||
|
message.success('登录成功');
|
||||||
|
} else {
|
||||||
|
message.error('获取用户信息失败');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(`登录失败：${res.message}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login error:', error);
|
||||||
|
message.error('登录失败，请稍后再试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 显示密码
|
||||||
|
*/
|
||||||
|
const showPwd = () => {
|
||||||
|
showPassword.value = !showPassword.value
|
||||||
|
if (showPassword.value == false) {
|
||||||
|
type.value = 'password'
|
||||||
|
} else {
|
||||||
|
type.value = 'text'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('../assets/Login.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
z-index:1;
|
||||||
|
width: 450px;
|
||||||
|
height: 350px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(50, 50, 50, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-image: url('../assets/Login.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box > h2 {
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .input-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .input-box input {
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 250px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
outline: none;
|
||||||
|
padding: 0 12px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .input-box .eye {
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
bottom: 32px;
|
||||||
|
right: -210px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .input-box img {
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
bottom: 32px;
|
||||||
|
right: 6px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .input-box input:focus {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box {
|
||||||
|
width: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > a {
|
||||||
|
outline: none;
|
||||||
|
display: block;
|
||||||
|
width: 250px;
|
||||||
|
text-align: end;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > a:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > div {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > div > button {
|
||||||
|
outline: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > div > button:nth-of-type(1) {
|
||||||
|
width: 250px;
|
||||||
|
height: 35px;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
background: rgba(217, 224, 231, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > div > button:nth-of-type(2) {
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
background: rgba(64, 149, 229, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .btn-box > div > button:hover {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
background: rgb(249, 249, 208);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
.container {
|
||||||
|
width: 28%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1366px) {
|
||||||
|
.container {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.container {
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agileheader h1 {
|
||||||
|
font-size: 41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.container {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.error-messages {
|
||||||
|
width: 250px;
|
||||||
|
margin: -8px 0 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #ff0000;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 禁用按钮样式 */
|
||||||
|
button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: rgba(217, 224, 231, 0.3) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled:hover {
|
||||||
|
background: rgba(217, 224, 231, 0.3) !important;
|
||||||
|
color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
48
greenOrange/src/view/Test.vue
Normal file
48
greenOrange/src/view/Test.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-alert {
|
||||||
|
padding: 1rem;
|
||||||
|
background: #ffe3e3;
|
||||||
|
color: #ff4444;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff4444;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-thead > tr > th) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-row:hover) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
157
greenOrange/src/view/community/community.vue
Normal file
157
greenOrange/src/view/community/community.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<template>
|
||||||
|
<div class="editor-preview-wrapper">
|
||||||
|
|
||||||
|
<!-- 富文本编辑区 -->
|
||||||
|
<div class="editor-container">
|
||||||
|
<div id="toolbar"></div>
|
||||||
|
<div id="editor"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端预览区 -->
|
||||||
|
<div class="device-preview">
|
||||||
|
<!-- 设备外壳装饰 -->
|
||||||
|
<div class="device-frame iphone">
|
||||||
|
<div class="device-status-bar">
|
||||||
|
<span>12:30</span>
|
||||||
|
<div class="status-icons">
|
||||||
|
<span class="cellular-icon"></span>
|
||||||
|
<span class="wifi-icon"></span>
|
||||||
|
<span class="battery-icon"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 实际内容渲染区 -->
|
||||||
|
<div class="preview-content" ref="previewContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import Quill from 'quill'
|
||||||
|
|
||||||
|
const previewContent = ref<HTMLElement | null>(null) // 添加类型声明
|
||||||
|
|
||||||
|
// 修复点1: 明确定义工具栏配置
|
||||||
|
const toolbarOptions = [
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
[{ 'header': [1, 2, 3, false] }],
|
||||||
|
['blockquote', 'code-block'],
|
||||||
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||||
|
['link', 'image']
|
||||||
|
]
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 修复点2: 使用完整的配置对象
|
||||||
|
const quill = new Quill('#editor', {
|
||||||
|
theme: 'snow',
|
||||||
|
modules: {
|
||||||
|
toolbar: toolbarOptions // 使用预定义的配置
|
||||||
|
},
|
||||||
|
placeholder: '请输入内容...'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听内容变化
|
||||||
|
quill.on('text-change', () => {
|
||||||
|
if (previewContent.value) {
|
||||||
|
previewContent.value.innerHTML = quill.root.innerHTML
|
||||||
|
previewContent.value.scrollTop = previewContent.value.scrollHeight
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 整体布局 */
|
||||||
|
.editor-preview-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动设备模拟器 */
|
||||||
|
.device-preview {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f0f0f0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-frame {
|
||||||
|
width: 263px;
|
||||||
|
height: 568px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40px;
|
||||||
|
box-shadow: 0 0 30px rgba(0,0,0,0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设备状态栏（模拟 iOS 样式） */
|
||||||
|
.device-status-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 15px;
|
||||||
|
background: #f8f8f8;
|
||||||
|
font-size: 12px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预览内容区 */
|
||||||
|
.preview-content {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 15px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
/* 新增换行相关属性 */
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端内容样式适配 */
|
||||||
|
.preview-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/* 为段落文本添加基础样式 */
|
||||||
|
.preview-content p {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 处理长URL换行 */
|
||||||
|
.preview-content a {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端设备模拟器宽度修正 */
|
||||||
|
.device-frame {
|
||||||
|
width: 375px; /* iPhone 14宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式布局（移动端下堆叠） */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.editor-preview-wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/course/linkedCourse.vue
Normal file
11
greenOrange/src/view/course/linkedCourse.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>链接课程</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/course/localCurriculum.vue
Normal file
11
greenOrange/src/view/course/localCurriculum.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>本地课程</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/order/orderDetail.vue
Normal file
11
greenOrange/src/view/order/orderDetail.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>接单详情</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/order/orderSort.vue
Normal file
11
greenOrange/src/view/order/orderSort.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>接单分类</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
714
greenOrange/src/view/project/addProject.vue
Normal file
714
greenOrange/src/view/project/addProject.vue
Normal file
|
|
@ -0,0 +1,714 @@
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="handleSubmit" class="modern-form">
|
||||||
|
<h2 class="form-title">新建推广项目</h2>
|
||||||
|
|
||||||
|
<div class="form-grid">
|
||||||
|
<!-- 左列 - 手机预览区域 -->
|
||||||
|
<div class="form-column phone-preview-container">
|
||||||
|
<div class="phone-frame">
|
||||||
|
<div class="phone-header">
|
||||||
|
<div class="phone-camera"></div>
|
||||||
|
<div class="phone-speaker"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-screen">
|
||||||
|
<div class="phone-content">
|
||||||
|
<!-- 项目信息 -->
|
||||||
|
<div class="phone-project-info">
|
||||||
|
<h2 class="phone-project-title">{{ formData.projectName }}</h2>
|
||||||
|
<div class="phone-project-image" :style="{ backgroundImage: `url(${formData.projectImage})` }"></div>
|
||||||
|
<p class="phone-project-desc">{{ formData.projectDescription }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 富文本内容区域 -->
|
||||||
|
<div class="phone-sections">
|
||||||
|
<!-- 结算说明 -->
|
||||||
|
<div class="phone-section">
|
||||||
|
<h3 class="phone-section-title">结算说明</h3>
|
||||||
|
<div class="phone-section-content" v-html="formData.settlementDesc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目说明 -->
|
||||||
|
<div class="phone-section">
|
||||||
|
<h3 class="phone-section-title">项目说明</h3>
|
||||||
|
<div class="phone-section-content" v-html="formData.projectDesc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目流程 -->
|
||||||
|
<div class="phone-section">
|
||||||
|
<h3 class="phone-section-title">项目流程</h3>
|
||||||
|
<div class="phone-section-content" v-html="formData.projectFlow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 申请推广码说明 -->
|
||||||
|
<div class="phone-section">
|
||||||
|
<h3 class="phone-section-title">申请推广码说明</h3>
|
||||||
|
<div class="phone-section-content" v-html="formData.applyPromoCodeDesc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone-home-button"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右列 - 富文本编辑区域 -->
|
||||||
|
<div class="form-column">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目名称</span>
|
||||||
|
<input
|
||||||
|
v-model="formData.projectName"
|
||||||
|
type="text"
|
||||||
|
class="input-field"
|
||||||
|
required
|
||||||
|
placeholder="请输入项目名称"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目图片</span>
|
||||||
|
<div class="file-upload">
|
||||||
|
<input
|
||||||
|
v-model="formData.projectImage"
|
||||||
|
type="text"
|
||||||
|
class="input-field"
|
||||||
|
required
|
||||||
|
placeholder="请输入项目图片URL"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">结算周期（天）</span>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.projectSettlementCycle"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
class="input-field"
|
||||||
|
required
|
||||||
|
placeholder="请输入结算周期"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">最大推广人数</span>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.maxPromoterCount"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
class="input-field"
|
||||||
|
required
|
||||||
|
placeholder="请输入最大人数"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目状态</span>
|
||||||
|
<div class="select-wrapper">
|
||||||
|
<select
|
||||||
|
v-model="formData.projectStatus"
|
||||||
|
class="select-field"
|
||||||
|
>
|
||||||
|
<option value="running">运行中</option>
|
||||||
|
<option value="full">人数已满</option>
|
||||||
|
<option value="paused">已暂停</option>
|
||||||
|
</select>
|
||||||
|
<div class="select-arrow">▼</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目简介</span>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.projectDescription"
|
||||||
|
class="textarea-field"
|
||||||
|
placeholder="请输入详细的项目描述..."
|
||||||
|
></textarea>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">结算说明</span>
|
||||||
|
<div class="rich-text-editor">
|
||||||
|
<QuillEditor
|
||||||
|
v-model:content="formData.settlementDesc"
|
||||||
|
contentType="html"
|
||||||
|
:options="editorOptions"
|
||||||
|
@change="onContentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目说明</span>
|
||||||
|
<div class="rich-text-editor">
|
||||||
|
<QuillEditor
|
||||||
|
v-model:content="formData.projectDesc"
|
||||||
|
contentType="html"
|
||||||
|
:options="editorOptions"
|
||||||
|
@change="onContentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">项目流程</span>
|
||||||
|
<div class="rich-text-editor">
|
||||||
|
<QuillEditor
|
||||||
|
v-model:content="formData.projectFlow"
|
||||||
|
contentType="html"
|
||||||
|
:options="editorOptions"
|
||||||
|
@change="onContentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-label">
|
||||||
|
<span class="label-text">申请推广码说明</span>
|
||||||
|
<div class="rich-text-editor">
|
||||||
|
<QuillEditor
|
||||||
|
v-model:content="formData.applyPromoCodeDesc"
|
||||||
|
contentType="html"
|
||||||
|
:options="editorOptions"
|
||||||
|
@change="onContentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="submit-button">
|
||||||
|
<span>立即创建</span>
|
||||||
|
<div class="button-sparkles"></div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted, nextTick } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { QuillEditor } from '@vueup/vue-quill';
|
||||||
|
import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||||||
|
import myAxios from "../../api/myAxios.ts";
|
||||||
|
import router from "../../router";
|
||||||
|
|
||||||
|
// 添加 Quill 配置类型
|
||||||
|
interface QuillOptions {
|
||||||
|
theme: string;
|
||||||
|
modules: {
|
||||||
|
toolbar: Array<any[] | object>;
|
||||||
|
};
|
||||||
|
placeholder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义富文本编辑器配置
|
||||||
|
const editorOptions: QuillOptions = {
|
||||||
|
theme: 'snow',
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
['bold', 'italic', 'underline', 'strike'],
|
||||||
|
['blockquote', 'code-block'],
|
||||||
|
[{ header: 1 }, { header: 2 }],
|
||||||
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||||
|
[{ script: 'sub' }, { script: 'super' }],
|
||||||
|
['link', 'image', 'video'],
|
||||||
|
['clean']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: '请输入内容...'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 接口定义
|
||||||
|
interface ProjectForm {
|
||||||
|
projectName: string;
|
||||||
|
projectImage: string;
|
||||||
|
projectSettlementCycle: number;
|
||||||
|
maxPromoterCount: number;
|
||||||
|
projectStatus: 'running' | 'full' | 'paused';
|
||||||
|
projectDescription: string;
|
||||||
|
settlementDesc: string;
|
||||||
|
projectDesc: string;
|
||||||
|
projectFlow: string;
|
||||||
|
applyPromoCodeDesc: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式表单数据
|
||||||
|
const formData = reactive<ProjectForm>({
|
||||||
|
projectName: '',
|
||||||
|
projectSettlementCycle: 2,
|
||||||
|
maxPromoterCount: 200,
|
||||||
|
projectStatus: 'running',
|
||||||
|
projectDescription: '',
|
||||||
|
settlementDesc: '',
|
||||||
|
projectDesc: '',
|
||||||
|
projectFlow: '',
|
||||||
|
applyPromoCodeDesc: '',
|
||||||
|
projectImage: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// 内容变化处理
|
||||||
|
const onContentChange = () => {
|
||||||
|
// 更新预览内容
|
||||||
|
const phoneContent = document.querySelector('.phone-content');
|
||||||
|
if (phoneContent) {
|
||||||
|
// 添加平滑滚动效果
|
||||||
|
phoneContent.scrollTo({
|
||||||
|
top: phoneContent.scrollHeight,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始处理
|
||||||
|
nextTick(() => {
|
||||||
|
// 为手机预览添加初始样式
|
||||||
|
const phoneScreen = document.querySelector('.phone-screen');
|
||||||
|
if (phoneScreen) {
|
||||||
|
// 添加阴影和动画效果
|
||||||
|
phoneScreen.classList.add('animate-fade-in');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
console.log(formData.valueOf())
|
||||||
|
|
||||||
|
const res:any = await myAxios.post(`/project/add`,
|
||||||
|
JSON.stringify(formData),
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': storedToken
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
alert('项目创建成功！');
|
||||||
|
router.back();
|
||||||
|
|
||||||
|
Object.assign(formData, {
|
||||||
|
projectName: '',
|
||||||
|
projectSettlementCycle: 2,
|
||||||
|
maxPromoterCount: 200,
|
||||||
|
projectStatus: 'running',
|
||||||
|
projectDescription: '',
|
||||||
|
settlementDesc: '',
|
||||||
|
projectDesc: '',
|
||||||
|
projectFlow: '',
|
||||||
|
applyPromoCodeDesc: '',
|
||||||
|
projectImage: ''
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert(`创建失败：${res.data.message}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('请求失败：', error);
|
||||||
|
if (axios.isAxiosError(error)) {
|
||||||
|
// 显示详细错误信息
|
||||||
|
const msg = error.response?.data?.message || error.message;
|
||||||
|
alert(`请求错误（${error.response?.status}）：${msg}`);
|
||||||
|
} else {
|
||||||
|
alert('未知错误');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.modern-form {
|
||||||
|
max-width: 90%;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 2.5rem;
|
||||||
|
background: white;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
color: #4a5568;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field,
|
||||||
|
.select-wrapper,
|
||||||
|
.textarea-field {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.8rem 1.2rem;
|
||||||
|
border: 2px solid #e2e8f0;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-size: 1rem;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field:focus,
|
||||||
|
.select-wrapper:focus-within,
|
||||||
|
.textarea-field:focus {
|
||||||
|
border-color: #6366f1;
|
||||||
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-upload {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 2px dashed #cbd5e1;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-button:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
border-color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-field {
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-arrow {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #94a3b8;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea-field {
|
||||||
|
min-height: 100px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-sparkles {
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255,255,255,0.4);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: sparkle 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sparkle {
|
||||||
|
0% { transform: scale(0) translate(0,0); }
|
||||||
|
50% { transform: scale(1) translate(100px, -50px); }
|
||||||
|
100% { transform: scale(0) translate(200px, -100px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.form-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern-form {
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-text-editor {
|
||||||
|
border: 2px solid #e2e8f0;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-text-editor:focus-within {
|
||||||
|
border-color: #6366f1;
|
||||||
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-toolbar {
|
||||||
|
border-top-left-radius: 0.75rem;
|
||||||
|
border-top-right-radius: 0.75rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-container {
|
||||||
|
border-bottom-left-radius: 0.75rem;
|
||||||
|
border-bottom-right-radius: 0.75rem;
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor.ql-blank::before {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机预览样式 */
|
||||||
|
.phone-preview-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-frame {
|
||||||
|
position: relative;
|
||||||
|
width: 320px;
|
||||||
|
height: 640px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: 0 0 0 12px #1f1f1f, 0 0 30px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 180px;
|
||||||
|
height: 25px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-camera {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 20px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #15294c;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-speaker {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 60px;
|
||||||
|
height: 6px;
|
||||||
|
background: #1f1f1f;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-home-button {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #1f1f1f;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-project-info {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-project-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-project-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-project-desc {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #4a5568;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-sections {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #2c3e50;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #4a5568;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content * {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content h1,
|
||||||
|
.phone-section-content h2,
|
||||||
|
.phone-section-content h3 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-section-content ul,
|
||||||
|
.phone-section-content ol {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画效果 */
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fadeIn 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
554
greenOrange/src/view/project/moneyDetail.vue
Normal file
554
greenOrange/src/view/project/moneyDetail.vue
Normal file
|
|
@ -0,0 +1,554 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, onMounted} from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import myAxios from "../../api/myAxios";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '项目明细ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 20,
|
||||||
|
key: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目明细名称',
|
||||||
|
dataIndex: 'projectDetailName',
|
||||||
|
key: 'projectDetailName',
|
||||||
|
width: 20,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目结算价',
|
||||||
|
dataIndex: 'projectSettlementPrice',
|
||||||
|
width: 30,
|
||||||
|
key: 'projectSettlementPrice',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目最小结算价',
|
||||||
|
dataIndex: 'projectMinSettlementPrice',
|
||||||
|
width: 30,
|
||||||
|
key: 'projectMinSettlementPrice',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最大抽成比例',
|
||||||
|
dataIndex: 'maxCommissionRate',
|
||||||
|
width: 40,
|
||||||
|
key: 'maxCommissionRate',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目ID',
|
||||||
|
dataIndex: 'projectId',
|
||||||
|
key: 'projectId',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ProjectDetail {
|
||||||
|
id: number;
|
||||||
|
projectDetailName: string;
|
||||||
|
projectSettlementPrice: number;
|
||||||
|
projectMinSettlementPrice: number; // 修正接口字段
|
||||||
|
maxCommissionRate: number;
|
||||||
|
projectId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const projectId = ref<string | number>("");
|
||||||
|
const tableData = ref<ProjectDetail[]>([]); // 改为数组存储
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref("");
|
||||||
|
const searchId = ref(""); // 新增搜索ID绑定
|
||||||
|
|
||||||
|
const getMoneyDetail = async (id: string | number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/projectDetail/query/pid",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = response.data;
|
||||||
|
} else {
|
||||||
|
error.value = "获取项目详情失败";
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
error.value = "数据加载失败，请重试";
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增根据明细ID查询的方法
|
||||||
|
const queryDetailById = async (id: string | number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/projectDetail/queryById", // 使用文档中的接口路径
|
||||||
|
{ id }, // 请求参数
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
console.log(response.data)
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = [response.data];
|
||||||
|
} else {
|
||||||
|
message.error(response.message || "查询失败");
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
message.error("查询请求失败");
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增搜索处理方法
|
||||||
|
const handleIdSearch = async (value: string) => {
|
||||||
|
if (!value.trim()) {
|
||||||
|
message.warning("请输入有效的项目明细ID");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = Number(value);
|
||||||
|
if (isNaN(id)) {
|
||||||
|
message.warning("ID必须为数字");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await queryDetailById(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改重置方法
|
||||||
|
const reset = () => {
|
||||||
|
searchId.value = "";
|
||||||
|
// 重置时重新加载原始项目数据
|
||||||
|
if (projectId.value) {
|
||||||
|
getMoneyDetail(projectId.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化逻辑
|
||||||
|
if (typeof route.query.id === "string") {
|
||||||
|
projectId.value = route.query.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (projectId.value) {
|
||||||
|
getMoneyDetail(projectId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMoneyDetail = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
// 修正接口路径为项目明细的删除接口
|
||||||
|
const res: any = await myAxios.post(
|
||||||
|
"/projectDetail/delete", // 修改这里
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'AfterScript': 'required-script'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('删除成功');
|
||||||
|
if (projectId.value) {
|
||||||
|
await getMoneyDetail(projectId.value);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
message.error('删除操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawerVisible = ref(false);
|
||||||
|
const formState = reactive({
|
||||||
|
id: 0,
|
||||||
|
projectDetailName: '',
|
||||||
|
projectSettlementPrice: 0,
|
||||||
|
projectMinSettlementPrice: 0,
|
||||||
|
maxCommissionRate: 0,
|
||||||
|
projectId: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 修改updateMoneyDetail方法
|
||||||
|
const updateMoneyDetail = async (id: number) => {
|
||||||
|
try {
|
||||||
|
// 先获取明细数据
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectDetail/queryById",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (res.code === 1) {
|
||||||
|
// 映射字段到表单
|
||||||
|
const detail = res.data;
|
||||||
|
Object.assign(formState, {
|
||||||
|
id: detail.id,
|
||||||
|
projectDetailName: detail.projectDetailName,
|
||||||
|
projectSettlementPrice: detail.projectSettlementPrice,
|
||||||
|
projectMinSettlementPrice: detail.projectMinSettlementPrice,
|
||||||
|
maxCommissionRate: detail.maxCommissionRate,
|
||||||
|
projectId: detail.projectId
|
||||||
|
});
|
||||||
|
drawerVisible.value = true;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('获取明细数据失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增表单相关状态
|
||||||
|
const addDrawerVisible = ref(false);
|
||||||
|
const addFormState = reactive({
|
||||||
|
projectDetailName: '',
|
||||||
|
projectSettlementPrice: 0,
|
||||||
|
projectMinSettlementPrice: 0, // 注意字段名称需要与接口一致
|
||||||
|
maxCommissionRate: 0,
|
||||||
|
projectId: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开新增表单
|
||||||
|
const openAddDrawer = () => {
|
||||||
|
addFormState.projectId = Number(projectId.value); // 关联当前项目
|
||||||
|
addDrawerVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交新增请求
|
||||||
|
const handleAddSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectDetail/add",
|
||||||
|
{
|
||||||
|
projectDetailName: addFormState.projectDetailName,
|
||||||
|
projectSettlementPrice: addFormState.projectSettlementPrice,
|
||||||
|
projectMinSettlementPrice: addFormState.projectMinSettlementPrice, // 字段映射
|
||||||
|
maxCommissionRate: addFormState.maxCommissionRate,
|
||||||
|
projectId: addFormState.projectId
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('新增成功');
|
||||||
|
addDrawerVisible.value = false;
|
||||||
|
await getMoneyDetail(projectId.value); // 刷新列表
|
||||||
|
// 重置表单
|
||||||
|
Object.assign(addFormState, {
|
||||||
|
projectDetailName: '',
|
||||||
|
projectSettlementPrice: 0,
|
||||||
|
projectMinSettlementPrice: 0,
|
||||||
|
maxCommissionRate: 0,
|
||||||
|
projectId: Number(projectId.value)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '新增失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('新增请求失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改模板按钮绑定
|
||||||
|
const goAddProject = () => {
|
||||||
|
openAddDrawer();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改handleSubmit方法
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectDetail/update",
|
||||||
|
{
|
||||||
|
// 根据接口文档调整字段映射
|
||||||
|
id: formState.id,
|
||||||
|
projectDetailName: formState.projectDetailName,
|
||||||
|
projectSettlementPrice: formState.projectSettlementPrice,
|
||||||
|
projectMinSettlementPrice: formState.projectMinSettlementPrice,
|
||||||
|
maxCommissionRate: formState.maxCommissionRate,
|
||||||
|
projectId: formState.projectId
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log('接口响应:', res); // 添加详细日志
|
||||||
|
|
||||||
|
if (res.code === 1) { // 注意响应结构层级
|
||||||
|
message.success('更新成功');
|
||||||
|
drawerVisible.value = false;
|
||||||
|
// 根据当前查看模式刷新
|
||||||
|
if (searchId.value) {
|
||||||
|
await queryDetailById(formState.id);
|
||||||
|
} else {
|
||||||
|
await getMoneyDetail(projectId.value);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(res.message || `更新失败，错误码：${res.code}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('完整错误信息:', error); // 输出完整错误对象
|
||||||
|
message.error(`更新失败'}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="search-box">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-space>
|
||||||
|
<a-form-item label="ID">
|
||||||
|
<a-input-search
|
||||||
|
style="width: 300px"
|
||||||
|
placeholder="请输入项目明细ID"
|
||||||
|
enter-button
|
||||||
|
@search="handleIdSearch"
|
||||||
|
v-model:value="searchId"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-button type="primary" @click="goAddProject">新增项目明细</a-button>
|
||||||
|
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:scroll="{ x: 1500, y: 450 }"
|
||||||
|
:loading="loading"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<!-- 格式化金额显示 -->
|
||||||
|
<template v-if="column.dataIndex === 'projectSettlementPrice'">
|
||||||
|
¥{{ record.projectSettlementPrice.toFixed(2) }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="column.dataIndex === 'projectWinSettlementPrice'">
|
||||||
|
¥{{ record.projectWinSettlementPrice.toFixed(2) }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 操作列 -->
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-space :size="8">
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
danger
|
||||||
|
@click="deleteMoneyDetail(record.id)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
@click="updateMoneyDetail(record.id)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<div v-if="error" class="error-alert">
|
||||||
|
<span class="error-icon">!</span>
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 修改编辑抽屉的表单项 -->
|
||||||
|
<a-drawer
|
||||||
|
title="编辑项目明细"
|
||||||
|
placement="right"
|
||||||
|
:visible="drawerVisible"
|
||||||
|
@close="drawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="formState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item label="项目明细名称">
|
||||||
|
<a-input v-model:value="formState.projectDetailName" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目结算价">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="formState.projectSettlementPrice"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目最小结算价">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="formState.projectMinSettlementPrice"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="最大抽成比例">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="formState.maxCommissionRate"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="drawerVisible = false">取消</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
|
||||||
|
<!-- 修改新增抽屉的表单项 -->
|
||||||
|
<a-drawer
|
||||||
|
title="新增项目明细"
|
||||||
|
placement="right"
|
||||||
|
:visible="addDrawerVisible"
|
||||||
|
@close="addDrawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="addFormState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleAddSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item label="明细名称">
|
||||||
|
<a-input v-model:value="addFormState.projectDetailName" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="结算价">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="addFormState.projectSettlementPrice"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="最小结算价">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="addFormState.projectMinSettlementPrice"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="抽成比例">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="addFormState.maxCommissionRate"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-alert {
|
||||||
|
padding: 1rem;
|
||||||
|
background: #ffe3e3;
|
||||||
|
color: #ff4444;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff4444;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-thead) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-row:hover) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
443
greenOrange/src/view/project/project.vue
Normal file
443
greenOrange/src/view/project/project.vue
Normal file
|
|
@ -0,0 +1,443 @@
|
||||||
|
<template>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="search-box">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-space>
|
||||||
|
<a-form-item label="ID">
|
||||||
|
<a-input-search
|
||||||
|
style="width: 300px"
|
||||||
|
placeholder="请输入项目ID"
|
||||||
|
enter-button
|
||||||
|
@search="handleIdSearch"
|
||||||
|
v-model:value="searchId"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-button type="primary" @click="goAddProject">新增项目</a-button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据-->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:scroll="{ x: 2500, y: 450 }"
|
||||||
|
:loading="loading"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<!-- 项目图片 -->
|
||||||
|
<template v-if="column.key === 'projectImage'">
|
||||||
|
<a-avatar :src="record.projectImage" shape="square" :size="64"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 项目状态 -->
|
||||||
|
<template v-if="column.key === 'projectStatus'">
|
||||||
|
<a-tag :color="getStatusColor(record.projectStatus)">
|
||||||
|
{{ getStatusText(record.projectStatus) }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 是否上架 -->
|
||||||
|
<template v-if="column.key === 'isShelves'">
|
||||||
|
<a-tag :color="record.isShelves ? 'green' : 'red'">
|
||||||
|
{{ record.isShelves ? '已上架' : '已下架' }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 操作列 -->
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-space :size="8">
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
:type="record.isShelves ? 'dashed' : 'primary'"
|
||||||
|
@click="toggleShelves(record)"
|
||||||
|
>
|
||||||
|
{{ record.isShelves ? '去下架' : '去上架' }}
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
danger
|
||||||
|
@click="deleteProject(record.id)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="showDetails(record.id)"
|
||||||
|
>
|
||||||
|
详情
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="moneyDetails(record.id)"
|
||||||
|
>
|
||||||
|
项目明细
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="projectNotice(record.id)"
|
||||||
|
>
|
||||||
|
项目通知
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="promotionCode(record.id)"
|
||||||
|
>
|
||||||
|
推广码
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import myAxios from "../../api/myAxios.ts";
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
|
||||||
|
import router from "../../router";
|
||||||
|
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const total = ref(0);
|
||||||
|
const searchId = ref(""); // 新增ID搜索参数
|
||||||
|
|
||||||
|
const searchParams = ref({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
sortField: "id",
|
||||||
|
sortOrder: "ascend",
|
||||||
|
userRole:null
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
const statusMap: { [key: string]: string } = {
|
||||||
|
running: '项目运行',
|
||||||
|
full: '人数已满',
|
||||||
|
paused: '项目暂停'
|
||||||
|
};
|
||||||
|
return statusMap[status] || '未知状态';
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const colorMap: { [key: string]: string } = {
|
||||||
|
running: 'blue',
|
||||||
|
full: 'orange',
|
||||||
|
paused: 'red'
|
||||||
|
};
|
||||||
|
return colorMap[status] || 'gray';
|
||||||
|
};
|
||||||
|
|
||||||
|
//用户表
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '项目ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 20,
|
||||||
|
key: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
dataIndex: 'projectImage',
|
||||||
|
key: 'projectImage',
|
||||||
|
width: 20,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目名称',
|
||||||
|
dataIndex: 'projectName',
|
||||||
|
width: 30,
|
||||||
|
key: 'projectName',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目价格',
|
||||||
|
dataIndex: 'projectPrice',
|
||||||
|
width: 30,
|
||||||
|
key: 'projectPrice',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前推广人数',
|
||||||
|
dataIndex: 'currentPromotionCount',
|
||||||
|
width: 40,
|
||||||
|
key: 'currentPromotionCount',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '结算周期',
|
||||||
|
dataIndex: 'projectSettlementCycle',
|
||||||
|
key: 'projectSettlementCycle',
|
||||||
|
width: 30,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最大推广人数',
|
||||||
|
dataIndex: 'maxPromoterCount',
|
||||||
|
key: 'maxPromoterCount',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目状态',
|
||||||
|
dataIndex: 'projectStatus',
|
||||||
|
key: 'projectStatus',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否上架',
|
||||||
|
dataIndex: 'isShelves',
|
||||||
|
key: 'isShelves',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 新增上架/下架操作
|
||||||
|
const toggleShelves = async (record: any) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res: any = await myAxios.post(
|
||||||
|
"/project/shelves",
|
||||||
|
{
|
||||||
|
id: record.id,
|
||||||
|
},
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('状态更新成功');
|
||||||
|
record.isShelves = !record.isShelves;
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '操作失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('操作失败:', error);
|
||||||
|
message.error('状态更新失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ProjectRecord {
|
||||||
|
// 这里根据实际数据结构定义属性
|
||||||
|
superHostList?: string[];
|
||||||
|
// 其他属性...
|
||||||
|
}
|
||||||
|
//用户分页查询
|
||||||
|
const getProjectList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const res:any = await myAxios.post("/project/page",
|
||||||
|
{...searchParams.value },
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1 && res.data && Array.isArray(res.data.records)) {
|
||||||
|
tableData.value = res.data.records.map((item: ProjectRecord) => ({
|
||||||
|
...item,
|
||||||
|
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||||
|
}));
|
||||||
|
total.value = res.data.total;
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '请求失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("请求失败:", error);
|
||||||
|
message.error('获取数据失败');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(getProjectList);
|
||||||
|
|
||||||
|
// ID查询方法
|
||||||
|
interface Project {
|
||||||
|
id: number;
|
||||||
|
projectName: string;
|
||||||
|
projectImage: string;
|
||||||
|
projectSettlementCycle: number;
|
||||||
|
maxPromoterCount: number;
|
||||||
|
projectStatus: string;
|
||||||
|
projectDescription: string;
|
||||||
|
settlementDesc: string;
|
||||||
|
// 其他可能存在的属性根据实际情况补充
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = ref<Project[]>([]);
|
||||||
|
|
||||||
|
const handleIdSearch = async () => {
|
||||||
|
if (!searchId.value) {
|
||||||
|
message.warning('请输入项目ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
const res: { code: number; data: Project } = await myAxios.post("/project/queryById",
|
||||||
|
{ id: parseInt(searchId.value) },
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
if (res.code === 1 && res.data) {
|
||||||
|
tableData.value = [res.data];
|
||||||
|
} else {
|
||||||
|
// message.error(res.message || '查询失败');
|
||||||
|
message.error("查询失败")
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('查询失败:', error);
|
||||||
|
message.error('查询操作失败，请检查网络');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除项目
|
||||||
|
const deleteProject = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/project/delete",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'AfterScript': 'required-script' // 统一添加请求头
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('删除成功');
|
||||||
|
await getProjectList();
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
message.error('删除操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 重置按钮
|
||||||
|
const reset = () => {
|
||||||
|
searchId.value = "";
|
||||||
|
getProjectList();
|
||||||
|
};
|
||||||
|
|
||||||
|
//去新增项目
|
||||||
|
const goAddProject=()=>{
|
||||||
|
router.push('/addproject')
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDetails=(id:string)=>{
|
||||||
|
router.push({
|
||||||
|
path:'/projectDetail',
|
||||||
|
query:{
|
||||||
|
id:String(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//去项目明细
|
||||||
|
const moneyDetails=(id:string)=>{
|
||||||
|
router.push({
|
||||||
|
path:'/moneyDetail',
|
||||||
|
query:{
|
||||||
|
id:String(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//去项目通知
|
||||||
|
const projectNotice=(id:number)=>{
|
||||||
|
router.push({
|
||||||
|
path:'/projectNotice',
|
||||||
|
query:{
|
||||||
|
id:String(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//去推广码
|
||||||
|
const promotionCode=(id:number)=>{
|
||||||
|
router.push({
|
||||||
|
path:'/promotionCode',
|
||||||
|
query:{
|
||||||
|
id:String(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.action-btn {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
/* 分割线样式 */
|
||||||
|
:deep(.ant-divider-vertical) {
|
||||||
|
border-color: rgba(0, 0, 0, 0.15);
|
||||||
|
height: 1.2em;
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.ant-descriptions-item-label) {
|
||||||
|
font-weight: 600;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.info-card :deep(.ant-card-head) {
|
||||||
|
background: #fafafa;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 角色颜色映射 */
|
||||||
|
:root {
|
||||||
|
--role-user: #87d068;
|
||||||
|
--role-admin: #f50;
|
||||||
|
--role-boss: #722ed1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
460
greenOrange/src/view/project/projectDetail.vue
Normal file
460
greenOrange/src/view/project/projectDetail.vue
Normal file
|
|
@ -0,0 +1,460 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import myAxios from "../../api/myAxios";
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
import { QuillEditor } from '@vueup/vue-quill';
|
||||||
|
|
||||||
|
interface ProjectDetail {
|
||||||
|
id: number;
|
||||||
|
projectName: string;
|
||||||
|
projectImage: string;
|
||||||
|
projectSettlementCycle: number;
|
||||||
|
maxPromoterCount: number;
|
||||||
|
projectStatus: string;
|
||||||
|
projectDescription: string;
|
||||||
|
settlementDesc: string;
|
||||||
|
projectDesc: string;
|
||||||
|
projectFlow: string;
|
||||||
|
applyPromoCodeDesc: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const loading = ref(false);
|
||||||
|
const projectData = ref<ProjectDetail>({
|
||||||
|
id: 0,
|
||||||
|
projectName: '',
|
||||||
|
projectImage: '',
|
||||||
|
projectSettlementCycle: 0,
|
||||||
|
maxPromoterCount: 0,
|
||||||
|
projectStatus: '',
|
||||||
|
projectDescription: '',
|
||||||
|
settlementDesc: '',
|
||||||
|
projectDesc: '',
|
||||||
|
projectFlow: '',
|
||||||
|
applyPromoCodeDesc: ''
|
||||||
|
});
|
||||||
|
const projectId = ref<string | null>(null);
|
||||||
|
const isEditing = ref(false);
|
||||||
|
|
||||||
|
// 状态映射
|
||||||
|
// const statusMap = {
|
||||||
|
// running: { text: '运行中', color: '#52c41a' },
|
||||||
|
// full: { text: '人数已满', color: '#f5222d' },
|
||||||
|
// paused: { text: '已暂停', color: '#faad14' }
|
||||||
|
// };
|
||||||
|
|
||||||
|
if (typeof route.query.id === 'string') {
|
||||||
|
projectId.value = route.query.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if(projectId.value !== null) {
|
||||||
|
handleIdSearch(projectId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleIdSearch = async (id: string) => {
|
||||||
|
if (!id) return message.warning("请输入项目ID");
|
||||||
|
if (!/^\d+$/.test(id)) return message.warning("ID必须为数字");
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const res:any = await myAxios.post("/project/queryById",
|
||||||
|
{ id: parseInt(id) },
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1 && res.data) {
|
||||||
|
console.log('Received project data:', res.data);
|
||||||
|
projectData.value = res.data;
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '查询失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("查询失败:", error);
|
||||||
|
message.error('项目查询失败');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateProject = () => {
|
||||||
|
if (!projectData.value) {
|
||||||
|
message.warning('项目数据尚未加载完成，请稍后再试');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isEditing.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const finishEditing = async () => {
|
||||||
|
isEditing.value = false;
|
||||||
|
|
||||||
|
// 发送更新请求
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const res:any = await myAxios.post("/project/update",
|
||||||
|
projectData.value,
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('项目更新成功');
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '更新失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("更新失败:", error);
|
||||||
|
message.error('项目更新失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 图片上传相关方法
|
||||||
|
const handlePreview = (file:any) => {
|
||||||
|
window.open(file.url || file.thumbUrl);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = ({ fileList }:any) => {
|
||||||
|
if (fileList.length > 0 && fileList[0].response?.url) {
|
||||||
|
projectData.value.projectImage = fileList[0].response.url;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="project-detail-container">
|
||||||
|
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<div v-if="loading" class="loading">加载中...</div>
|
||||||
|
|
||||||
|
<!-- 详情页 -->
|
||||||
|
<div v-if="projectData && !isEditing" class="detail-card">
|
||||||
|
<!-- 头部区域 -->
|
||||||
|
<div class="header-section">
|
||||||
|
<h1 class="project-title">{{ projectData.projectName }}</h1>
|
||||||
|
<!-- <div class="status-tag" :style="{ backgroundColor: statusMap[projectData.projectStatus]?.color }">-->
|
||||||
|
<!-- {{ statusMap[projectData.projectStatus]?.text }}-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<a-button type="primary" @click="updateProject">编辑项目</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div class="basic-info">
|
||||||
|
<div class="project-image">
|
||||||
|
<img :src="projectData.projectImage" alt="项目封面图">
|
||||||
|
</div>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<label>结算周期</label>
|
||||||
|
<div class="value">{{ projectData.projectSettlementCycle }} 天</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<label>最大推广人数</label>
|
||||||
|
<div class="value">{{ projectData.maxPromoterCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目简介 -->
|
||||||
|
<div class="section">
|
||||||
|
<h2 class="section-title">项目简介</h2>
|
||||||
|
<div class="section-content">{{ projectData.projectDescription }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 富文本内容区块 -->
|
||||||
|
<div class="rich-section" v-if="projectData.settlementDesc">
|
||||||
|
<h2 class="section-title">结算说明</h2>
|
||||||
|
<div class="rich-content" v-html="projectData.settlementDesc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rich-section" v-if="projectData.projectDesc">
|
||||||
|
<h2 class="section-title">项目说明</h2>
|
||||||
|
<div class="rich-content" v-html="projectData.projectDesc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rich-section" v-if="projectData.projectFlow">
|
||||||
|
<h2 class="section-title">项目流程</h2>
|
||||||
|
<div class="rich-content" v-html="projectData.projectFlow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rich-section" v-if="projectData.applyPromoCodeDesc">
|
||||||
|
<h2 class="section-title">申请推广码说明</h2>
|
||||||
|
<div class="rich-content" v-html="projectData.applyPromoCodeDesc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ✅ 编辑页 - 使用 addProject.vue 结构 -->
|
||||||
|
<div v-if="isEditing && projectData" class="add-project-container">
|
||||||
|
<a-form :model="projectData" layout="vertical" @submit.prevent="finishEditing">
|
||||||
|
<div class="form-section">
|
||||||
|
<h2>项目基本信息</h2>
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="项目名称">
|
||||||
|
<a-input v-model:value="projectData.projectName" placeholder="请输入项目名称" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="项目状态">
|
||||||
|
<a-select v-model:value="projectData.projectStatus" placeholder="请选择状态">
|
||||||
|
<a-select-option value="running">运行中</a-select-option>
|
||||||
|
<a-select-option value="full">人数已满</a-select-option>
|
||||||
|
<a-select-option value="paused">已暂停</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="结算周期（天）">
|
||||||
|
<a-input-number v-model:value="projectData.projectSettlementCycle" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="最大推广人数">
|
||||||
|
<a-input-number v-model:value="projectData.maxPromoterCount" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-form-item label="项目图片">
|
||||||
|
<a-upload
|
||||||
|
list-type="picture-card"
|
||||||
|
:file-list="projectData.projectImage ? [{ uid: '-1', url: projectData.projectImage }] : []"
|
||||||
|
@preview="handlePreview"
|
||||||
|
@change="handleChange"
|
||||||
|
:showUploadList="{ showRemoveIcon: false }"
|
||||||
|
:beforeUpload="() => false"
|
||||||
|
>
|
||||||
|
点击上传
|
||||||
|
</a-upload>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目描述">
|
||||||
|
<a-textarea v-model:value="projectData.projectDescription" :rows="4" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<h2>富文本配置</h2>
|
||||||
|
|
||||||
|
<a-form-item label="结算说明">
|
||||||
|
<QuillEditor v-model:content="projectData.settlementDesc" content-type="html" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目说明">
|
||||||
|
<QuillEditor v-model:content="projectData.projectDesc" content-type="html" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目流程">
|
||||||
|
<QuillEditor v-model:content="projectData.projectFlow" content-type="html" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="申请推广码说明">
|
||||||
|
<QuillEditor v-model:content="projectData.applyPromoCodeDesc" content-type="html" />
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<a-button type="primary" htmlType="submit">完成编辑</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.project-detail-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #666;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-info {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100px 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item label {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item .value {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #1a1a1a;
|
||||||
|
border-left: 4px solid #1890ff;
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-section {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-content {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-content :deep(p) {
|
||||||
|
margin: 0.8em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-content :deep(h2) {
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin: 1.2em 0 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-content :deep(ul) {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-content :deep(li) {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.basic-info {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.6rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 6px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-project-container {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 2rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: #1a1a1a;
|
||||||
|
border-left: 4px solid #1890ff;
|
||||||
|
padding-left: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-container {
|
||||||
|
min-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
476
greenOrange/src/view/project/projectNotice.vue
Normal file
476
greenOrange/src/view/project/projectNotice.vue
Normal file
|
|
@ -0,0 +1,476 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, onMounted, reactive} from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import myAxios from "../../api/myAxios";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
|
// 修改表格列定义
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '项目通知ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 20,
|
||||||
|
key: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知标题',
|
||||||
|
dataIndex: 'notificationTitle',
|
||||||
|
key: 'notificationTitle',
|
||||||
|
width: 30,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通知内容',
|
||||||
|
dataIndex: 'notificationContent',
|
||||||
|
key: 'notificationContent',
|
||||||
|
width: 150,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目ID',
|
||||||
|
dataIndex: 'projectId',
|
||||||
|
key: 'projectId',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 100,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 修改接口数据类型
|
||||||
|
interface ProjectNotification {
|
||||||
|
id: number;
|
||||||
|
notificationTitle: string;
|
||||||
|
notificationContent: string;
|
||||||
|
projectId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const projectId = ref<string | number>("");
|
||||||
|
const tableData = ref<ProjectNotification[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref("");
|
||||||
|
const searchId = ref("");
|
||||||
|
// 新增搜索处理方法
|
||||||
|
const handleIdSearch = async (value: string) => {
|
||||||
|
if (!value.trim()) {
|
||||||
|
message.warning("请输入有效的项目明细ID");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = Number(value);
|
||||||
|
if (isNaN(id)) {
|
||||||
|
message.warning("ID必须为数字");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await queryDetailById(id);
|
||||||
|
};
|
||||||
|
// 新增根据明细ID查询的方法
|
||||||
|
const queryDetailById = async (id: string | number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/projectNotification/queryById", // 使用文档中的接口路径
|
||||||
|
{ id }, // 请求参数
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = [response.data];
|
||||||
|
} else {
|
||||||
|
message.error(response.message || "查询失败");
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
message.error("查询请求失败");
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 修改重置方法
|
||||||
|
const reset = () => {
|
||||||
|
searchId.value = "";
|
||||||
|
// 重置时重新加载原始项目数据
|
||||||
|
if (projectId.value) {
|
||||||
|
getNotifications (projectId.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 初始化逻辑
|
||||||
|
if (typeof route.query.id === "string") {
|
||||||
|
projectId.value = route.query.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (projectId.value) {
|
||||||
|
getNotifications(projectId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 修改主查询方法
|
||||||
|
const getNotifications = async (id: string | number) => {
|
||||||
|
console.log(id)
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/projectNotification/query/pid",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
console.log(response)
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = response.data;
|
||||||
|
} else {
|
||||||
|
error.value = "获取通知列表失败";
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
error.value = "数据加载失败，请重试";
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 修改初始化逻辑
|
||||||
|
onMounted(() => {
|
||||||
|
if (projectId.value) {
|
||||||
|
getNotifications(projectId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 修改编辑相关代码
|
||||||
|
const drawerVisible = ref(false);
|
||||||
|
const formState = reactive({
|
||||||
|
id: 0,
|
||||||
|
notificationTitle: '',
|
||||||
|
notificationContent: '',
|
||||||
|
projectId: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateNotification = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectNotification/queryById", // 假设存在单个查询接口
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
Object.assign(formState, res.data);
|
||||||
|
drawerVisible.value = true;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('获取通知详情失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改提交方法
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectNotification/update",
|
||||||
|
{ ...formState },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('更新成功');
|
||||||
|
drawerVisible.value = false;
|
||||||
|
await getNotifications(projectId.value);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('更新失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onMounted(getNotifications)
|
||||||
|
|
||||||
|
//删除操作
|
||||||
|
const deleteNotification = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res: any = await myAxios.post(
|
||||||
|
"/projectNotification/delete",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'AfterScript': 'required-script'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('删除成功');
|
||||||
|
if (projectId.value) {
|
||||||
|
await getNotifications (projectId.value);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
message.error('删除操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增表单相关状态
|
||||||
|
const addDrawerVisible = ref(false);
|
||||||
|
const addFormState = reactive({
|
||||||
|
notificationTitle: '',
|
||||||
|
notificationContent: '',
|
||||||
|
projectId: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开新增表单
|
||||||
|
const openAddDrawer = () => {
|
||||||
|
addFormState.projectId = Number(projectId.value); // 关联当前项目
|
||||||
|
addDrawerVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交新增请求
|
||||||
|
const handleAddSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/projectNotification/add",
|
||||||
|
{
|
||||||
|
notificationTitle: addFormState.notificationTitle,
|
||||||
|
notificationContent: addFormState.notificationContent,
|
||||||
|
projectId: addFormState.projectId
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('新增成功');
|
||||||
|
addDrawerVisible.value = false;
|
||||||
|
await getNotifications(projectId.value);
|
||||||
|
Object.assign(addFormState, {
|
||||||
|
notificationTitle: '',
|
||||||
|
notificationContent: '',
|
||||||
|
projectId: Number(projectId.value)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error(res.data.message || '新增失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('新增请求失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在模板中修改按钮绑定
|
||||||
|
const goAddNotice = () => {
|
||||||
|
openAddDrawer();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="search-box">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-space>
|
||||||
|
<a-form-item label="ID">
|
||||||
|
<a-input-search
|
||||||
|
style="width: 300px"
|
||||||
|
placeholder="请输入项目通知ID"
|
||||||
|
enter-button
|
||||||
|
@search="handleIdSearch"
|
||||||
|
v-model:value="searchId"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-button type="primary" @click="goAddNotice">新增项目通知</a-button>
|
||||||
|
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<!-- 修改表格模板 -->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:scroll="{ x: 1200, y: 450 }"
|
||||||
|
:loading="loading"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-space :size="8">
|
||||||
|
<a-button size="small" danger @click="deleteNotification(record.id)">
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
<a-button size="small" @click="updateNotification(record.id)">
|
||||||
|
编辑
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
<!-- 修改抽屉表单 -->
|
||||||
|
<a-drawer
|
||||||
|
title="编辑项目通知"
|
||||||
|
placement="right"
|
||||||
|
:visible="drawerVisible"
|
||||||
|
@close="drawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="formState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
label="通知标题"
|
||||||
|
name="notificationTitle"
|
||||||
|
:rules="[{ required: true, message: '请输入标题' }]"
|
||||||
|
>
|
||||||
|
<a-input v-model:value="formState.notificationTitle" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item
|
||||||
|
label="通知内容"
|
||||||
|
name="notificationContent"
|
||||||
|
:rules="[{ required: true, message: '请输入内容' }]"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="formState.notificationContent"
|
||||||
|
:rows="6"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="drawerVisible = false">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
|
||||||
|
<!-- 新增项目通知抽屉 -->
|
||||||
|
<a-drawer
|
||||||
|
title="新增项目通知"
|
||||||
|
placement="right"
|
||||||
|
:visible="addDrawerVisible"
|
||||||
|
@close="addDrawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="addFormState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleAddSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
label="通知标题"
|
||||||
|
name="notificationTitle"
|
||||||
|
:rules="[{ required: true, message: '请输入标题' }]"
|
||||||
|
>
|
||||||
|
<a-input v-model:value="addFormState.notificationTitle" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item
|
||||||
|
label="通知内容"
|
||||||
|
name="notificationContent"
|
||||||
|
:rules="[{ required: true, message: '请输入内容' }]"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="addFormState.notificationContent"
|
||||||
|
:rows="6"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-alert {
|
||||||
|
padding: 1rem;
|
||||||
|
background: #ffe3e3;
|
||||||
|
color: #ff4444;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff4444;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-thead) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-row:hover) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
492
greenOrange/src/view/project/promotionCode.vue
Normal file
492
greenOrange/src/view/project/promotionCode.vue
Normal file
|
|
@ -0,0 +1,492 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, onMounted,reactive} from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import myAxios from "../../api/myAxios";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
|
// 表格列定义
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '推广码ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 80,
|
||||||
|
key: 'id',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '信息Key',
|
||||||
|
dataIndex: 'promoCodeInfoKey',
|
||||||
|
key: 'promoCodeInfoKey',
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '推广链接',
|
||||||
|
dataIndex: 'promoCodeLink',
|
||||||
|
key: 'promoCodeLink',
|
||||||
|
width: 200,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目ID',
|
||||||
|
dataIndex: 'projectId',
|
||||||
|
key: 'projectId',
|
||||||
|
width: 100,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'promoCodeStatus',
|
||||||
|
key: 'promoCodeStatus',
|
||||||
|
width: 100,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 100,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 接口数据类型
|
||||||
|
interface PromoCode {
|
||||||
|
id: number;
|
||||||
|
promoCodeInfoKey: string;
|
||||||
|
promoCodeLink: string;
|
||||||
|
projectId: number;
|
||||||
|
promoCodeStatus: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const projectId = ref<string | number>("");
|
||||||
|
const tableData = ref<PromoCode[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const searchId = ref("");
|
||||||
|
|
||||||
|
// 主查询方法
|
||||||
|
const getPromoCodes = async (id: string | number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/promoCode/queryByPid",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
console.log(response)
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = response.data;
|
||||||
|
} else {
|
||||||
|
message.error(response.message || "获取数据失败");
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
message.error("数据加载失败，请重试");
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化逻辑
|
||||||
|
if (typeof route.query.id === "string") {
|
||||||
|
projectId.value = route.query.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (projectId.value) {
|
||||||
|
getPromoCodes(projectId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 新增：按推广码ID查询
|
||||||
|
const queryPromoCodeById = async (id: number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/promoCode/queryById",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.code === 1) {
|
||||||
|
tableData.value = [response.data]; // 单个结果转为数组
|
||||||
|
} else {
|
||||||
|
message.error(response.message || "未找到推广码");
|
||||||
|
tableData.value = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
message.error("查询失败，请检查网络");
|
||||||
|
tableData.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理搜索
|
||||||
|
const handleIdSearch = (value: string) => {
|
||||||
|
if (!value.trim()) {
|
||||||
|
message.warning("请输入有效的推广码ID");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = Number(value);
|
||||||
|
if (isNaN(id)) {
|
||||||
|
message.warning("ID必须为数字");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
queryPromoCodeById(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置搜索
|
||||||
|
const reset = () => {
|
||||||
|
searchId.value = "";
|
||||||
|
if (projectId.value) {
|
||||||
|
getPromoCodes(projectId.value); // 重新加载项目数据
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 新增推广码表单相关状态
|
||||||
|
const addDrawerVisible = ref(false);
|
||||||
|
const addFormState = reactive({
|
||||||
|
promoCodeInfoKey: '',
|
||||||
|
promoCodeLink: '',
|
||||||
|
projectId: 0,
|
||||||
|
promoCodeStatus: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开新增表单
|
||||||
|
const openAddDrawer = () => {
|
||||||
|
addFormState.projectId = Number(projectId.value); // 自动关联当前项目
|
||||||
|
addDrawerVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交新增请求
|
||||||
|
const handleAddSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/promoCode/add",
|
||||||
|
{
|
||||||
|
promoCodeInfoKey: addFormState.promoCodeInfoKey,
|
||||||
|
promoCodeLink: addFormState.promoCodeLink,
|
||||||
|
projectId: addFormState.projectId,
|
||||||
|
promoCodeStatus: addFormState.promoCodeStatus
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('新增成功');
|
||||||
|
addDrawerVisible.value = false;
|
||||||
|
await getPromoCodes(projectId.value); // 刷新列表
|
||||||
|
// 重置表单（保留项目ID）
|
||||||
|
Object.assign(addFormState, {
|
||||||
|
promoCodeInfoKey: '',
|
||||||
|
promoCodeLink: '',
|
||||||
|
promoCodeStatus: false,
|
||||||
|
projectId: Number(projectId.value)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '新增失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('新增请求失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绑定新增按钮点击事件
|
||||||
|
const goAddCode = () => {
|
||||||
|
openAddDrawer();
|
||||||
|
};
|
||||||
|
|
||||||
|
//删除操作
|
||||||
|
const deletePromoCode = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/promoCode/delete", // 根据接口文档的路径
|
||||||
|
{ id }, // 请求参数
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('删除成功');
|
||||||
|
// 根据当前查看模式刷新
|
||||||
|
if (searchId.value) {
|
||||||
|
await queryPromoCodeById(Number(searchId.value));
|
||||||
|
} else {
|
||||||
|
await getPromoCodes(projectId.value);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('删除操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//编辑
|
||||||
|
// 编辑相关状态
|
||||||
|
const editDrawerVisible = ref(false);
|
||||||
|
const editFormState = reactive({
|
||||||
|
id: 0,
|
||||||
|
promoCodeInfoKey: '',
|
||||||
|
promoCodeLink: '',
|
||||||
|
projectId: 0,
|
||||||
|
promoCodeStatus: false
|
||||||
|
});
|
||||||
|
const getPromoCodeDetail = async (id: number) => {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
try {
|
||||||
|
const response:any = await myAxios.post(
|
||||||
|
"/promoCode/queryById",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (response.code === 1) {
|
||||||
|
editFormState.id = response.data.id;
|
||||||
|
editFormState.promoCodeInfoKey = response.data.promoCodeInfoKey;
|
||||||
|
editFormState.promoCodeLink = response.data.promoCodeLink;
|
||||||
|
editFormState.projectId = response.data.projectId;
|
||||||
|
editFormState.promoCodeStatus = response.data.promoCodeStatus;
|
||||||
|
} else {
|
||||||
|
message.error(response.message || "获取编辑数据失败");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
message.error("获取编辑数据失败，请重试");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = async (id: number) => {
|
||||||
|
await getPromoCodeDetail(id);
|
||||||
|
editDrawerVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/promoCode/update",
|
||||||
|
{
|
||||||
|
id: editFormState.id,
|
||||||
|
promoCodeInfoKey: editFormState.promoCodeInfoKey,
|
||||||
|
promoCodeLink: editFormState.promoCodeLink,
|
||||||
|
projectId: editFormState.projectId,
|
||||||
|
promoCodeStatus: editFormState.promoCodeStatus
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('编辑成功');
|
||||||
|
editDrawerVisible.value = false;
|
||||||
|
await getPromoCodes(projectId.value);
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '编辑失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
message.error('编辑请求失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 修改后的搜索框 -->
|
||||||
|
<div class="search-box">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-space>
|
||||||
|
<a-form-item label="推广码ID">
|
||||||
|
<a-input-search
|
||||||
|
style="width: 300px"
|
||||||
|
placeholder="输入推广码ID进行查询"
|
||||||
|
enter-button
|
||||||
|
@search="handleIdSearch"
|
||||||
|
v-model:value="searchId"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||||
|
<a-button type="primary" @click="goAddCode">新增推广码</a-button>
|
||||||
|
<a-form-item label="当前项目ID">
|
||||||
|
<a-tag color="blue">{{ projectId }}</a-tag>
|
||||||
|
</a-form-item>
|
||||||
|
</a-space>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:scroll="{ x: 800, y: 450 }"
|
||||||
|
:loading="loading"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'promoCodeStatus'">
|
||||||
|
<a-tag :color="record.promoCodeStatus ? 'red' : 'green'">
|
||||||
|
{{ record.promoCodeStatus ? '占用' : '空闲' }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-space :size="8">
|
||||||
|
<a-button
|
||||||
|
size="small"
|
||||||
|
danger
|
||||||
|
@click="deletePromoCode(record.id)"
|
||||||
|
:loading="loading"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
<!-- 编辑按钮（需实现对应方法） -->
|
||||||
|
<a-button size="small" @click="handleEdit(record.id)">
|
||||||
|
编辑
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
<!-- 新增推广码抽屉 -->
|
||||||
|
<a-drawer
|
||||||
|
title="新增推广码"
|
||||||
|
placement="right"
|
||||||
|
:visible="addDrawerVisible"
|
||||||
|
@close="addDrawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="addFormState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleAddSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item label="信息Key">
|
||||||
|
<a-input v-model:value="addFormState.promoCodeInfoKey" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="推广链接">
|
||||||
|
<a-input v-model:value="addFormState.promoCodeLink" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="状态">
|
||||||
|
<a-select v-model:value="addFormState.promoCodeStatus">
|
||||||
|
<a-select-option :value="false">空闲</a-select-option>
|
||||||
|
<a-select-option :value="true">占用</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="项目ID">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="addFormState.projectId"
|
||||||
|
:disabled="true"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
|
||||||
|
<!-- 编辑推广码抽屉 -->
|
||||||
|
<a-drawer
|
||||||
|
title="编辑推广码"
|
||||||
|
placement="right"
|
||||||
|
:visible="editDrawerVisible"
|
||||||
|
@close="editDrawerVisible = false"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:model="editFormState"
|
||||||
|
layout="vertical"
|
||||||
|
@finish="handleEditSubmit"
|
||||||
|
>
|
||||||
|
<a-form-item label="ID">
|
||||||
|
<a-input v-model:value="editFormState.id" :disabled="true" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="信息Key">
|
||||||
|
<a-input v-model:value="editFormState.promoCodeInfoKey" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="推广链接">
|
||||||
|
<a-input v-model:value="editFormState.promoCodeLink" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="状态">
|
||||||
|
<a-select v-model:value="editFormState.promoCodeStatus">
|
||||||
|
<a-select-option :value="false">空闲</a-select-option>
|
||||||
|
<a-select-option :value="true">占用</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="项目ID">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="editFormState.projectId"
|
||||||
|
:disabled="true"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
<a-button style="margin-left: 10px" @click="editDrawerVisible = false">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-thead) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-row:hover) {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
996
greenOrange/src/view/userList/userList.vue
Normal file
996
greenOrange/src/view/userList/userList.vue
Normal file
|
|
@ -0,0 +1,996 @@
|
||||||
|
<template>
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="search-box">
|
||||||
|
<a-form layout="inline">
|
||||||
|
<a-space>
|
||||||
|
<a-form-item label="ID">
|
||||||
|
<a-input-search
|
||||||
|
style="width: 300px"
|
||||||
|
placeholder="请输入用户ID"
|
||||||
|
enter-button
|
||||||
|
@search="handleIdSearch"
|
||||||
|
v-model:value="searchId"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-button type="primary" @click="showModal">新增用户</a-button>
|
||||||
|
<!-- 新增用户-->
|
||||||
|
<a-modal
|
||||||
|
v-model:open="openUser"
|
||||||
|
title="新增用户"
|
||||||
|
@ok="handleOk"
|
||||||
|
:footer="null"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
:rules="formRules"
|
||||||
|
>
|
||||||
|
<a-form-item label="昵称" name="nickName">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.nickName"
|
||||||
|
:maxlength="6"
|
||||||
|
@input="handleNicknameInput"
|
||||||
|
/>
|
||||||
|
<template #help>
|
||||||
|
<span v-if="formData.nickName.length > 0" class="tip">
|
||||||
|
{{ formData.nickName.length }}/6
|
||||||
|
<span v-if="formData.nickName.length > 6" class="error-tip">（超过最大长度）</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="头像" name="userAvatar">
|
||||||
|
<a-input v-model:value="formData.userAvatar" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="手机号" name="phoneNumber">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.phoneNumber"
|
||||||
|
:maxlength="11"
|
||||||
|
@input="handlePhoneInput"
|
||||||
|
/>
|
||||||
|
<template #help>
|
||||||
|
<span v-if="formData.phoneNumber.length > 0" class="tip">
|
||||||
|
{{ formData.phoneNumber.length }}/11
|
||||||
|
<span v-if="formData.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 修改账户表单项 -->
|
||||||
|
<a-form-item label="账户" name="userAccount">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.userAccount"
|
||||||
|
:maxlength="11"
|
||||||
|
@input="handleAccountInput"
|
||||||
|
/>
|
||||||
|
<template #help>
|
||||||
|
<span v-if="formData.userAccount.length > 0" class="tip">
|
||||||
|
{{ formData.userAccount.length }}/11
|
||||||
|
<span v-if="!/^[A-Za-z0-9]+$/.test(formData.userAccount)" class="error-tip">（包含非法字符）</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 修改密码表单项 -->
|
||||||
|
<a-form-item label="密码" name="userPassword">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.userPassword"
|
||||||
|
type="password"
|
||||||
|
:maxlength="10"
|
||||||
|
@input="handlePasswordInput"
|
||||||
|
/>
|
||||||
|
<template #help>
|
||||||
|
<div v-if="formData.userPassword.length > 0">
|
||||||
|
<span class="tip">{{ formData.userPassword.length }}/10</span>
|
||||||
|
<div class="password-strength">
|
||||||
|
<span :class="{ 'strength-ok': hasLower }">小写字母</span>
|
||||||
|
<span :class="{ 'strength-ok': hasUpper }">大写字母</span>
|
||||||
|
<span :class="{ 'strength-ok': hasNumber }">数字</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item :wrapper-col="{ span: 16, offset: 5 }">
|
||||||
|
<a-button type="primary" html-type="submit">提交</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
danger
|
||||||
|
:disabled="selectedRowKeys.length === 0"
|
||||||
|
@click="batchDelete"
|
||||||
|
>
|
||||||
|
批量删除({{ selectedRowKeys.length }})
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据-->
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:scroll="{ x: 2500, y: 450 }"
|
||||||
|
:loading="loading"
|
||||||
|
:row-selection="rowSelection"
|
||||||
|
:pagination="pagination"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
@change="handleTableChange"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'userAvatar'">
|
||||||
|
<a-avatar :src="record.userAvatar"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="column.key === 'operation'">
|
||||||
|
<a-space :size="16">
|
||||||
|
<!-- 修改showDrawer调用，传入当前用户记录 -->
|
||||||
|
<a class="action-btn" @click="showDrawer(record)">操作</a>
|
||||||
|
<a-divider type="vertical" />
|
||||||
|
<a class="action-btn" type="link" @click="deleteUser(record.id)">删除</a>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
<!-- 抽屉-->
|
||||||
|
<a-drawer
|
||||||
|
v-model:open="open"
|
||||||
|
title="用户详细信息"
|
||||||
|
placement="right"
|
||||||
|
width="600"
|
||||||
|
>
|
||||||
|
<div v-if="selectedUser" class="user-detail">
|
||||||
|
<div class="header">
|
||||||
|
<a-avatar :size="128" :src="selectedUser.userAvatar" class="avatar" />
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="toggleEditMode"
|
||||||
|
class="edit-btn"
|
||||||
|
>
|
||||||
|
{{ isEditMode ? '取消编辑' : '编辑信息' }}
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form
|
||||||
|
v-if="isEditMode"
|
||||||
|
:model="editForm"
|
||||||
|
:label-col="{ span: 6 }"
|
||||||
|
:wrapper-col="{ span: 16 }"
|
||||||
|
>
|
||||||
|
<!-- 可编辑表单 -->
|
||||||
|
<a-form-item label="昵称">
|
||||||
|
<a-input v-model:value="editForm.nickName" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="头像URL">
|
||||||
|
<a-input v-model:value="editForm.userAvatar" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="手机号">
|
||||||
|
<a-input v-model:value="editForm.phoneNumber" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="账户">
|
||||||
|
<a-input v-model:value="editForm.userAccount" disabled />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="密码">
|
||||||
|
<a-input v-model:value="editForm.userPassword" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="邀请码">
|
||||||
|
<a-input v-model:value="editForm.invitationCode" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="身份">
|
||||||
|
<a-select v-model:value="editForm.userRole">
|
||||||
|
<a-select-option value="user">普通用户</a-select-option>
|
||||||
|
<a-select-option value="admin">管理员</a-select-option>
|
||||||
|
<a-select-option value="boss">老板</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="上级用户ID">
|
||||||
|
<a-input-number v-model:value="editForm.parentUserId" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="上级用户列表">
|
||||||
|
<a-input
|
||||||
|
v-model:value="editForm.SuperUserList"
|
||||||
|
placeholder="请输入逗号分隔的ID，如：1,2,3"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item :wrapper-col="{ offset: 6 }">
|
||||||
|
<a-button type="primary" @click="handleSave">保存修改</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
|
||||||
|
<div v-else class="view-mode">
|
||||||
|
<!-- 基本信息卡片 -->
|
||||||
|
<a-card title="基本信息" class="info-card">
|
||||||
|
<div class="info-item">
|
||||||
|
<user-outlined class="info-icon" />
|
||||||
|
<div class="info-content">
|
||||||
|
<span class="info-label">用户ID</span>
|
||||||
|
<span class="info-value">{{ selectedUser.id }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-item">
|
||||||
|
<idcard-outlined class="info-icon" />
|
||||||
|
<div class="info-content">
|
||||||
|
<span class="info-label">账户信息</span>
|
||||||
|
<div class="account-detail">
|
||||||
|
<span>{{ selectedUser.userAccount }}</span>
|
||||||
|
<!-- <a-tag class="role-tag">-->
|
||||||
|
<!-- {{ roleMap[editForm.userRole] }}-->
|
||||||
|
<!-- </a-tag>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-item">
|
||||||
|
<smile-outlined class="info-icon" />
|
||||||
|
<div class="info-content">
|
||||||
|
<span class="info-label">昵称</span>
|
||||||
|
<span class="info-value highlight">{{ selectedUser.nickName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<!-- 联系信息卡片 -->
|
||||||
|
<a-card title="联系信息" class="info-card">
|
||||||
|
<div class="info-item">
|
||||||
|
<phone-outlined class="info-icon" />
|
||||||
|
<div class="info-content">
|
||||||
|
<span class="info-label">手机号码</span>
|
||||||
|
<span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref,computed } from "vue";
|
||||||
|
import myAxios from "../../api/myAxios.ts";
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
import {
|
||||||
|
UserOutlined,
|
||||||
|
IdcardOutlined,
|
||||||
|
SmileOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
// 新增角色颜色映射
|
||||||
|
// const roleColorMap = {
|
||||||
|
// user: 'user',
|
||||||
|
// admin: 'admin',
|
||||||
|
// boss: 'boss'
|
||||||
|
// };
|
||||||
|
|
||||||
|
const formRules = {
|
||||||
|
nickName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入昵称',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 1,
|
||||||
|
max: 6,
|
||||||
|
message: '昵称长度需为1-6位',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
phoneNumber: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入手机号',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^1[3-9]\d{9}$/,
|
||||||
|
message: '必须是有效的11位手机号',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
userAccount: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入账户',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 6,
|
||||||
|
max: 11,
|
||||||
|
message: '长度需为6-11位',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^[A-Za-z0-9]+$/,
|
||||||
|
message: '不能包含中文或特殊字符',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
userPassword: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 6,
|
||||||
|
max: 10,
|
||||||
|
message: '长度需为6-10位',
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (_: any, value: string) => {
|
||||||
|
if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
|
||||||
|
return Promise.reject('必须包含大小写字母和数字');
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
},
|
||||||
|
trigger: ['input', 'blur']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 实时校验逻辑
|
||||||
|
const formData = ref({
|
||||||
|
nickName: '',
|
||||||
|
userAvatar: '',
|
||||||
|
phoneNumber: '',
|
||||||
|
userAccount: '',
|
||||||
|
userPassword: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// 手机号实时校验（输入时显示长度提示）
|
||||||
|
const handlePhoneInput = (e: any) => {
|
||||||
|
// 实时过滤非数字字符并限制长度
|
||||||
|
formData.value.phoneNumber = e.target.value
|
||||||
|
.replace(/\D/g, '')
|
||||||
|
.slice(0, 11);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAccountInput = (e: any) => {
|
||||||
|
// 过滤特殊字符并限制长度
|
||||||
|
formData.value.userAccount = e.target.value
|
||||||
|
.replace(/[^A-Za-z0-9]/g, '')
|
||||||
|
.slice(0, 11);
|
||||||
|
}
|
||||||
|
const handleNicknameInput = (e: any) => {
|
||||||
|
formData.value.nickName = e.target.value.slice(0, 6);
|
||||||
|
}
|
||||||
|
// 实时密码强度计算
|
||||||
|
const hasLower = computed(() => /[a-z]/.test(formData.value.userPassword))
|
||||||
|
const hasUpper = computed(() => /[A-Z]/.test(formData.value.userPassword))
|
||||||
|
const hasNumber = computed(() => /\d/.test(formData.value.userPassword))
|
||||||
|
|
||||||
|
// 密码输入处理
|
||||||
|
const handlePasswordInput = (e: any) => {
|
||||||
|
formData.value.userPassword = e.target.value.slice(0, 10);
|
||||||
|
}
|
||||||
|
const loading = ref(false);
|
||||||
|
// const total = ref(0);
|
||||||
|
const searchId = ref(""); // 新增ID搜索参数
|
||||||
|
|
||||||
|
const searchParams = ref({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
sortField: "id",
|
||||||
|
sortOrder: "ascend",
|
||||||
|
userRole:null
|
||||||
|
});
|
||||||
|
//用户表
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '用户ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 20,
|
||||||
|
key: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
dataIndex: 'userAvatar',
|
||||||
|
key: 'userAvatar',
|
||||||
|
width: 20,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '账号',
|
||||||
|
dataIndex: 'userAccount',
|
||||||
|
width: 30,
|
||||||
|
key: 'userAccount',
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '密码',
|
||||||
|
dataIndex: 'userPassword',
|
||||||
|
width: 30,
|
||||||
|
key: 'userPassword',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户昵称',
|
||||||
|
dataIndex: 'nickName',
|
||||||
|
width: 40,
|
||||||
|
key: 'nickName',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '身份',
|
||||||
|
dataIndex: 'userRole',
|
||||||
|
key: 'userRole',
|
||||||
|
width: 30,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'phoneNumber',
|
||||||
|
key: 'phoneNumber',
|
||||||
|
width: 70,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '邀请码',
|
||||||
|
dataIndex: 'invitationCode',
|
||||||
|
key: 'invitationCode',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上级ID',
|
||||||
|
dataIndex: 'parentUserId',
|
||||||
|
key: 'parentUserId',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上级ID列表',
|
||||||
|
dataIndex: 'superUserList',
|
||||||
|
key: 'superUserList',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'operation',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 40,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 分页配置
|
||||||
|
const pagination = ref({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
showTotal: (total: number) => `共 ${total} 条`,
|
||||||
|
pageSizeOptions: ['10', '20', '50', '100']
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const handleTableChange = (pag: any, sorter: any) => {
|
||||||
|
searchParams.value = {
|
||||||
|
...searchParams.value,
|
||||||
|
current: pag.current,
|
||||||
|
pageSize: pag.pageSize,
|
||||||
|
sortField: sorter.field,
|
||||||
|
sortOrder: sorter.order
|
||||||
|
};
|
||||||
|
pagination.value.current = pag.current;
|
||||||
|
pagination.value.pageSize = pag.pageSize;
|
||||||
|
getUserList();
|
||||||
|
};
|
||||||
|
// 修改获取用户列表方法
|
||||||
|
const getUserList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const res: any = await myAxios.post("/userInfo/page",
|
||||||
|
{...searchParams.value },
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1 && res.data) {
|
||||||
|
tableData.value = res.data.records.map((item: any) => {
|
||||||
|
if (item.parentUserId === -1) {
|
||||||
|
item.parentUserId = '无';
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// 更新分页信息
|
||||||
|
pagination.value.total = res.data.total;
|
||||||
|
pagination.value.current = res.data.current;
|
||||||
|
pagination.value.pageSize = res.data.size;
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(getUserList);
|
||||||
|
|
||||||
|
// ID查询方法
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
nickName: string;
|
||||||
|
userAvatar: string;
|
||||||
|
phoneNumber: string;
|
||||||
|
userAccount: string;
|
||||||
|
userPassword: string;
|
||||||
|
invitationCode: string;
|
||||||
|
userRole:string;
|
||||||
|
parentUserId:number
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = ref<User[]>([]); // 明确元素类型为User[]
|
||||||
|
|
||||||
|
const handleIdSearch = async () => {
|
||||||
|
if (!searchId.value) {
|
||||||
|
message.warning('请输入用户ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
const res: { code: number; data: User } = await myAxios.post("/userInfo/queryById", // 修改此处地址
|
||||||
|
{ id: parseInt(searchId.value) },
|
||||||
|
{ headers: { Authorization: storedToken } }
|
||||||
|
);
|
||||||
|
console.log(res)
|
||||||
|
if (res.code === 1 && res.data) {
|
||||||
|
tableData.value = [res.data];
|
||||||
|
} else {
|
||||||
|
// message.error(res.message || '查询失败');
|
||||||
|
message.error("查询失败")
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('查询失败:', error);
|
||||||
|
message.error('查询操作失败，请检查网络');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 删除用户
|
||||||
|
const selectedRowKeys = ref<number[]>([]);
|
||||||
|
|
||||||
|
// 配置行选择器
|
||||||
|
const rowSelection = {
|
||||||
|
onChange: (selectedKeys: number[]) => {
|
||||||
|
selectedRowKeys.value = selectedKeys;
|
||||||
|
},
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量删除方法
|
||||||
|
const batchDelete = async () => {
|
||||||
|
if (selectedRowKeys.value.length === 0) {
|
||||||
|
message.warning('请先选择要删除的用户');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
'/userInfo/delBatch',
|
||||||
|
{ ids: selectedRowKeys.value },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'AfterScript': 'required-script' // 根据接口文档添加
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success(`成功删除${selectedRowKeys.value.length}条数据`);
|
||||||
|
selectedRowKeys.value = []; // 清空选中
|
||||||
|
await getUserList(); // 刷新数据
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('批量删除失败:', error);
|
||||||
|
message.error('删除操作失败，请检查网络');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改原有删除方法保持一致性
|
||||||
|
const deleteUser = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
const res:any = await myAxios.post(
|
||||||
|
"/userInfo/delete",
|
||||||
|
{ id },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'AfterScript': 'required-script' // 统一添加请求头
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('删除成功');
|
||||||
|
await getUserList();
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '删除失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
message.error('删除操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 操作用户
|
||||||
|
const open = ref<boolean>(false);
|
||||||
|
|
||||||
|
const selectedUser = ref<any>(null);
|
||||||
|
|
||||||
|
const isEditMode = ref(false);
|
||||||
|
const editForm = ref({
|
||||||
|
id: 0,
|
||||||
|
nickName: '',
|
||||||
|
userAvatar: '',
|
||||||
|
phoneNumber: '',
|
||||||
|
userAccount: '',
|
||||||
|
userPassword: '',
|
||||||
|
invitationCode: '',
|
||||||
|
userRole: '',
|
||||||
|
parentUserId: 0,
|
||||||
|
SuperUserList: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// const roleMap = {
|
||||||
|
// user: '普通用户',
|
||||||
|
// admin: '管理员',
|
||||||
|
// boss: '老板'
|
||||||
|
// };
|
||||||
|
|
||||||
|
// 修改showDrawer方法
|
||||||
|
const showDrawer = (record: any) => {
|
||||||
|
selectedUser.value = record;
|
||||||
|
editForm.value = {
|
||||||
|
id: record.id,
|
||||||
|
nickName: record.nickName,
|
||||||
|
userAvatar: record.userAvatar,
|
||||||
|
phoneNumber: record.phoneNumber,
|
||||||
|
userAccount: record.userAccount,
|
||||||
|
userPassword: record.userPassword,
|
||||||
|
invitationCode: record.invitationCode,
|
||||||
|
userRole: record.userRole,
|
||||||
|
parentUserId: record.parentUserId,
|
||||||
|
SuperUserList: Array.isArray(record.superHostList)
|
||||||
|
? record.superHostList.join(',')
|
||||||
|
: record.SuperUserList || ''
|
||||||
|
};
|
||||||
|
open.value = true;
|
||||||
|
isEditMode.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleEditMode = () => {
|
||||||
|
isEditMode.value = !isEditMode.value;
|
||||||
|
};
|
||||||
|
//保存修改的用户信息
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
// 构建符合接口要求的请求体
|
||||||
|
const payload = {
|
||||||
|
...editForm.value,
|
||||||
|
SuperUserList: editForm.value.SuperUserList.split(',').map(Number)
|
||||||
|
};
|
||||||
|
|
||||||
|
const res:any = await myAxios.post('/userInfo/update', payload, {
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('更新成功');
|
||||||
|
// 更新本地数据
|
||||||
|
Object.assign(selectedUser.value, editForm.value);
|
||||||
|
// 刷新表格数据
|
||||||
|
await getUserList();
|
||||||
|
isEditMode.value = false;
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '更新失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('更新失败:', error);
|
||||||
|
message.error('更新失败，请检查网络');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//新增用户
|
||||||
|
const openUser = ref<boolean>(false);
|
||||||
|
const formRef = ref();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const showModal = () => {
|
||||||
|
openUser.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOk = (e: MouseEvent) => {
|
||||||
|
console.log('点击确认:', e);
|
||||||
|
openUser.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表单提交
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = localStorage.getItem('token');
|
||||||
|
if (!storedToken) throw new Error('未找到登录信息');
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
...formData.value,
|
||||||
|
userRole: 'admin' // 固定角色为admin
|
||||||
|
};
|
||||||
|
|
||||||
|
const res:any = await myAxios.post('/userInfo/add', payload, {
|
||||||
|
headers: {
|
||||||
|
Authorization: storedToken,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.code === 1) {
|
||||||
|
message.success('新增成功');
|
||||||
|
openUser.value = false;
|
||||||
|
formRef.value?.resetFields();
|
||||||
|
getUserList();
|
||||||
|
}
|
||||||
|
} catch (error:any) {
|
||||||
|
message.error(`提交失败：${error.response?.data?.message || error.message}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置按钮
|
||||||
|
const reset = () => {
|
||||||
|
searchId.value = "";
|
||||||
|
searchParams.value = {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
sortField: "id",
|
||||||
|
sortOrder: "ascend",
|
||||||
|
userRole: null
|
||||||
|
};
|
||||||
|
getUserList();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.action-btn {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
/* 分割线样式 */
|
||||||
|
:deep(.ant-divider-vertical) {
|
||||||
|
border-color: rgba(0, 0, 0, 0.15);
|
||||||
|
height: 1.2em;
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-detail {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-descriptions-item-label) {
|
||||||
|
font-weight: 600;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-mode {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card :deep(.ant-card-head) {
|
||||||
|
background: #fafafa;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1890ff;
|
||||||
|
margin-right: 16px;
|
||||||
|
width: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
font-family: monospace;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-tag {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relation-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relation-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #52c41a;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relation-group {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relation-label {
|
||||||
|
display: inline-block;
|
||||||
|
width: 80px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relation-value {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 角色颜色映射 */
|
||||||
|
:root {
|
||||||
|
--role-user: #87d068;
|
||||||
|
--role-admin: #f50;
|
||||||
|
--role-boss: #722ed1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-tag[color="user"] {
|
||||||
|
background: var(--role-user);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-tag[color="admin"] {
|
||||||
|
background: var(--role-admin);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-tag[color="boss"] {
|
||||||
|
background: var(--role-boss);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.error-tip {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-strength {
|
||||||
|
margin-top: 4px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-strength span {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-strength span::before {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #eee;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-ok {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-ok::before {
|
||||||
|
background: #52c41a !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/work/workDetail.vue
Normal file
11
greenOrange/src/view/work/workDetail.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>工作详情</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
11
greenOrange/src/view/work/workList.vue
Normal file
11
greenOrange/src/view/work/workList.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>工作列表</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
8
greenOrange/src/vite-env.d.ts
vendored
Normal file
8
greenOrange/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type {DefineComponent} from 'vue'
|
||||||
|
const vueComponent: DefineComponent<{}, {}, any>
|
||||||
|
export default vueComponent
|
||||||
|
}
|
||||||
|
declare module '*.mjs'
|
||||||
|
declare module 'dayjs'
|
||||||
26
greenOrange/tsconfig.app.json
Normal file
26
greenOrange/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
25
greenOrange/tsconfig.json
Normal file
25
greenOrange/tsconfig.json
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
greenOrange/tsconfig.node.json
Normal file
11
greenOrange/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
1
greenOrange/tsconfig.node.tsbuildinfo
Normal file
1
greenOrange/tsconfig.node.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
1
greenOrange/tsconfig.tsbuildinfo
Normal file
1
greenOrange/tsconfig.tsbuildinfo
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/myaxios.ts","./src/router/index.ts","./src/router/routes.ts","./src/store/index.ts","./src/store/userstore.ts","./src/utils/tableconfig.ts","./src/app.vue","./src/layout/managelayout.vue","./src/layout/manage/manageheader.vue","./src/layout/manage/managesidebar.vue","./src/view/index.vue","./src/view/login.vue","./src/view/test.vue","./src/view/community/community.vue","./src/view/course/linkedcourse.vue","./src/view/course/localcurriculum.vue","./src/view/order/orderdetail.vue","./src/view/order/ordersort.vue","./src/view/project/addproject.vue","./src/view/project/moneydetail.vue","./src/view/project/project.vue","./src/view/project/projectdetail.vue","./src/view/project/projectnotice.vue","./src/view/project/promotioncode.vue","./src/view/userlist/userlist.vue","./src/view/work/workdetail.vue","./src/view/work/worklist.vue"],"version":"5.6.3"}
|
||||||
2
greenOrange/vite.config.d.ts
vendored
Normal file
2
greenOrange/vite.config.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
declare const _default: import("vite").UserConfig;
|
||||||
|
export default _default;
|
||||||
38
greenOrange/vite.config.js
Normal file
38
greenOrange/vite.config.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
// import {defineConfig} from 'vite'
|
||||||
|
// import vue from '@vitejs/plugin-vue'
|
||||||
|
// import Components from 'unplugin-vue-components/vite';
|
||||||
|
// import {AntDesignVueResolver} from "unplugin-vue-components/resolvers";
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// export default defineConfig({
|
||||||
|
// plugins: [vue(),
|
||||||
|
// Components({
|
||||||
|
// resolvers: [
|
||||||
|
// AntDesignVueResolver({
|
||||||
|
// importStyle: false, // css in js
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// }),],
|
||||||
|
// })
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import Components from 'unplugin-vue-components/vite';
|
||||||
|
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
Components({
|
||||||
|
resolvers: [
|
||||||
|
AntDesignVueResolver({
|
||||||
|
importStyle: false, // css in js
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
// optimizeDeps: {
|
||||||
|
// include: [
|
||||||
|
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
});
|
||||||
39
greenOrange/vite.config.ts
Normal file
39
greenOrange/vite.config.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
// import {defineConfig} from 'vite'
|
||||||
|
// import vue from '@vitejs/plugin-vue'
|
||||||
|
// import Components from 'unplugin-vue-components/vite';
|
||||||
|
// import {AntDesignVueResolver} from "unplugin-vue-components/resolvers";
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// export default defineConfig({
|
||||||
|
// plugins: [vue(),
|
||||||
|
// Components({
|
||||||
|
// resolvers: [
|
||||||
|
// AntDesignVueResolver({
|
||||||
|
// importStyle: false, // css in js
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// }),],
|
||||||
|
// })
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
Components({
|
||||||
|
resolvers: [
|
||||||
|
AntDesignVueResolver({
|
||||||
|
importStyle: false, // css in js
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
// optimizeDeps: {
|
||||||
|
// include: [
|
||||||
|
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user