项目模块
This commit is contained in:
parent
0336f21f83
commit
27dce4d7a7
1
greenOrange/components.d.ts
vendored
1
greenOrange/components.d.ts
vendored
|
|
@ -19,6 +19,7 @@ declare module 'vue' {
|
|||
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AImage: typeof import('ant-design-vue/es')['Image']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
|
||||
AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
3464
greenOrange/package-lock.json
generated
3464
greenOrange/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -10,15 +10,20 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@surely-vue/table": "^5.0.2",
|
||||
"@vueup/vue-quill": "^1.0.0-beta.11",
|
||||
"@vueup/vue-quill": "^1.0.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.7.7",
|
||||
"element-plus": "^2.8.8",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"pinia": "^2.2.6",
|
||||
"pinia-plugin-persistedstate": "^4.1.3",
|
||||
"quill": "^2.0.0",
|
||||
"quill": "^1.3.7",
|
||||
"quill-image-resize-module": "^3.0.0",
|
||||
"quill-image-resize-module--fix-imports-error": "^3.0.0",
|
||||
"vue": "^3.5.12",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -29,6 +34,7 @@
|
|||
"unplugin-auto-import": "^0.18.5",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-commonjs": "^0.10.4",
|
||||
"vue-tsc": "^2.1.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
28
greenOrange/src/api/ImageUrl.ts
Normal file
28
greenOrange/src/api/ImageUrl.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;
|
||||
|
|
@ -57,6 +57,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {onBeforeMount} from 'vue'
|
||||
import {userStore} from "../../store/userStore.ts";
|
||||
import {UserOutlined,LogoutOutlined} from '@ant-design/icons-vue';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
|
|
@ -71,7 +72,21 @@ const store = userStore()
|
|||
|
||||
const placement = ref<DrawerProps['placement']>('right');
|
||||
const open = ref<boolean>(false);
|
||||
const checkLoginStatus = () => {
|
||||
// 检查store中的登录状态
|
||||
if (store.loginUser.userRole === "notLogin") {
|
||||
console.log("未检测到登录状态，跳转到登录页");
|
||||
// 使用replace替换当前路由，禁止返回
|
||||
router.replace({ path: '/' });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 生命周期钩子：在组件挂载前检查登录状态
|
||||
onBeforeMount(() => {
|
||||
checkLoginStatus();
|
||||
});
|
||||
const showDrawer = () => {
|
||||
open.value = true;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,10 +13,18 @@
|
|||
<UserOutlined />
|
||||
<span>用户列表</span>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item key="/project">
|
||||
<UserOutlined />
|
||||
<span>项目管理</span>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
<UserOutlined />
|
||||
<span>项目管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="/project">接单管理</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item key="/applicationRecord">
|
||||
<CommentOutlined />
|
||||
<span>结算管理</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
|
|
@ -112,7 +120,7 @@ const handleClick = (item: any) => {
|
|||
}
|
||||
|
||||
/* 子菜单展开时标题样式 */
|
||||
:deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
|
||||
:deep(.ant-menu-submenu-selected .ant-menu-submenu-title) {
|
||||
color: rgba(0, 0, 0, 0.95) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,21 @@ export const routes = [
|
|||
name: '推广码',
|
||||
component: () => import("../view/project/promotionCode.vue"),
|
||||
},
|
||||
{
|
||||
path: '/applicationRecord',
|
||||
name: '推广码记录',
|
||||
component: () => import("../view/settlement/applicationRecord.vue"),
|
||||
},
|
||||
{
|
||||
path: '/addprojectNotice',
|
||||
name: '新增项目通知',
|
||||
component: () => import("../view/project/addprojectNotice.vue"),
|
||||
},
|
||||
{
|
||||
path: '/settlementRecord',
|
||||
name: '项目结算记录',
|
||||
component: () => import("../view/settlement/settlementRecord.vue"),
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
7
greenOrange/src/types/wangeditor.d.ts
vendored
Normal file
7
greenOrange/src/types/wangeditor.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// src/types/wangeditor.d.ts
|
||||
declare module '@wangeditor/editor-for-vue' {
|
||||
import { Component } from 'vue'
|
||||
export const Editor: Component
|
||||
export const Toolbar: Component
|
||||
// 如果库有其他导出，需一并声明
|
||||
}
|
||||
23
greenOrange/src/utils/crypto.ts
Normal file
23
greenOrange/src/utils/crypto.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// // src/utils/crypto.ts
|
||||
// import JSEncrypt from 'jsencrypt'
|
||||
//
|
||||
// export function rsaEncrypt(password: string): string {
|
||||
// const encryptor = new JSEncrypt()
|
||||
//
|
||||
// // 强化公钥校验
|
||||
// const publicKey = import.meta.env.VITE_RSA_PUBLIC_KEY?.trim()
|
||||
//
|
||||
// if (!publicKey || !publicKey.startsWith('-----BEGIN PUBLIC KEY-----')) {
|
||||
// throw new Error('无效的RSA公钥配置')
|
||||
// }
|
||||
//
|
||||
// encryptor.setPublicKey(publicKey)
|
||||
//
|
||||
// const encrypted = encryptor.encrypt(password)
|
||||
//
|
||||
// if (!encrypted) {
|
||||
// throw new Error('加密失败，请检查公钥格式')
|
||||
// }
|
||||
//
|
||||
// return encrypted
|
||||
// }
|
||||
81
greenOrange/src/utils/message.ts
Normal file
81
greenOrange/src/utils/message.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
// 基础版本（无UI框架依赖）
|
||||
type MessageType = 'success' | 'error' | 'warning' | 'info'
|
||||
type MessageOptions = {
|
||||
duration?: number
|
||||
showClose?: boolean
|
||||
}
|
||||
|
||||
// 消息队列（防止重复提示）
|
||||
let messageQueue = new Set<string>()
|
||||
|
||||
export const showMessage = (
|
||||
message: string,
|
||||
type: MessageType = 'info',
|
||||
options: MessageOptions = {}
|
||||
): void => {
|
||||
// 防重复机制
|
||||
if (messageQueue.has(message)) return
|
||||
messageQueue.add(message)
|
||||
|
||||
// 创建消息容器
|
||||
const messageEl = document.createElement('div')
|
||||
messageEl.className = `message ${type}`
|
||||
messageEl.innerHTML = `
|
||||
<span class="icon">${type === 'error' ? '❗' : '💡'}</span>
|
||||
<span>${message}</span>
|
||||
${options.showClose ? '<button class="close">×</button>' : ''}
|
||||
`
|
||||
|
||||
// 样式注入
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
.message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.success { border-left: 4px solid #67c23a; }
|
||||
.error { border-left: 4px solid #f56c6c; }
|
||||
.warning { border-left: 4px solid #e6a23c; }
|
||||
.close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
// 添加到DOM
|
||||
document.body.appendChild(messageEl)
|
||||
|
||||
// 自动移除
|
||||
setTimeout(() => {
|
||||
messageEl.remove()
|
||||
style.remove()
|
||||
messageQueue.delete(message)
|
||||
}, options.duration || 3000)
|
||||
|
||||
// 手动关闭
|
||||
messageEl.querySelector('.close')?.addEventListener('click', () => {
|
||||
messageEl.remove()
|
||||
style.remove()
|
||||
messageQueue.delete(message)
|
||||
})
|
||||
}
|
||||
|
||||
// 快捷方法
|
||||
export const message = {
|
||||
success: (msg: string, opts?: MessageOptions) => showMessage(msg, 'success', opts),
|
||||
error: (msg: string, opts?: MessageOptions) => showMessage(msg, 'error', opts),
|
||||
warning: (msg: string, opts?: MessageOptions) => showMessage(msg, 'warning', opts),
|
||||
info: (msg: string, opts?: MessageOptions) => showMessage(msg, 'info', opts)
|
||||
}
|
||||
|
|
@ -1,118 +1,38 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="edit-page">
|
||||
<h1>文章编辑</h1>
|
||||
|
||||
<!-- 底部编辑区 -->
|
||||
<div class="bottom-section">
|
||||
<div class="editor-container">
|
||||
<h4>窗口文本</h4>
|
||||
<div id="toolbar"></div>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
<RichTextEditor
|
||||
:context="initialContent"
|
||||
:disable="isDisabled"
|
||||
@content-change="handleContentChange"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<button @click="saveContent">保存内容</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import Quill from 'quill'
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import RichTextEditor from './components/RichTextEditor.vue'
|
||||
|
||||
// 富文本编辑器逻辑
|
||||
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']
|
||||
]
|
||||
const initialContent = ref('<p>初始内容</p>') // 从接口获取
|
||||
const isDisabled = ref(false)
|
||||
|
||||
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
|
||||
}
|
||||
})
|
||||
})
|
||||
const handleContentChange = (html) => {
|
||||
console.log('最新内容:', html)
|
||||
// 可在此处实时保存草稿
|
||||
}
|
||||
|
||||
const saveContent = () => {
|
||||
// 提交到后端接口
|
||||
axios.post('/api/save', { content: initialContent.value })
|
||||
}
|
||||
</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;
|
||||
.edit-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
128
greenOrange/src/view/components/RichTextEditor.vue
Normal file
128
greenOrange/src/view/components/RichTextEditor.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="editor-container">
|
||||
<Toolbar
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
class="toolbar"
|
||||
/>
|
||||
<Editor
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
class="editor"
|
||||
@onCreated="handleCreated"
|
||||
@onFocus="handleFocus"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { shallowRef, ref, watch, onBeforeUnmount } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import type { IDomEditor } from '@wangeditor/editor'
|
||||
import '@wangeditor/editor/dist/css/style.css'
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'content-change'])
|
||||
|
||||
const editorRef = shallowRef<IDomEditor>()
|
||||
const valueHtml = ref(props.modelValue)
|
||||
const mode = 'default'
|
||||
|
||||
const toolbarConfig = {
|
||||
excludeKeys: [
|
||||
'insertVideo',
|
||||
'uploadVideo',
|
||||
'codeBlock',
|
||||
'|',
|
||||
'group-more-style'
|
||||
]
|
||||
}
|
||||
|
||||
const editorConfig = {
|
||||
placeholder: '请输入内容...',
|
||||
readOnly: props.disable,
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
allowedFileTypes: ['image/*'],
|
||||
async customUpload(file: File, insertFn: (url: string) => void) { // ✅ 实际被编辑器调用，无需修改
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('biz', 'richText')
|
||||
formData.append('file', file)
|
||||
formData.append('new', '1')
|
||||
formData.append('Ctrl', 'upload')
|
||||
|
||||
const res: any = await myAxios.post('/file/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
if (res.code === 1) {
|
||||
insertFn(res.data.url)
|
||||
} else {
|
||||
console.error('上传失败:', res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('图片上传失败', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
editorRef.value?.restoreSelection()
|
||||
}
|
||||
|
||||
const handleCreated = (editor: IDomEditor) => {
|
||||
editorRef.value = editor
|
||||
|
||||
editor.on('menuClick', (menu: { key: string }) => { // ✅ 显式类型声明
|
||||
if (menu.key === 'headerSelect') {
|
||||
nextTick(() => {
|
||||
editor.restoreSelection()
|
||||
editor.focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal !== valueHtml.value && editorRef.value?.isEmpty()) {
|
||||
valueHtml.value = newVal
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(valueHtml, (newVal) => {
|
||||
emit('update:modelValue', newVal)
|
||||
emit('content-change', newVal)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editorRef.value) {
|
||||
editorRef.value.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.toolbar {
|
||||
border-bottom: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -73,12 +73,16 @@
|
|||
<span class="label-text">项目图片</span>
|
||||
<div class="file-upload">
|
||||
<input
|
||||
v-model="formData.projectImage"
|
||||
type="text"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入项目图片URL"
|
||||
type="file"
|
||||
class="file-input"
|
||||
accept="image/*"
|
||||
@change="handleFileUpload"
|
||||
ref="fileInput"
|
||||
>
|
||||
<div class="upload-button" @click="fileInput?.click()">
|
||||
<span v-if="!formData.projectImage">点击上传图片</span>
|
||||
<span v-else class="file-name">已选择：{{ fileName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -138,61 +142,46 @@
|
|||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="rich-text-container">
|
||||
<div class="rich-text-columns">
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">结算说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.settlementDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.settlementDesc = html"
|
||||
/>
|
||||
</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 class="rich-text-group">
|
||||
<span class="label-text">项目说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectDesc = html"
|
||||
/>
|
||||
</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 class="rich-text-group">
|
||||
<span class="label-text">项目流程</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectFlow"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectFlow = html"
|
||||
/>
|
||||
</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 class="rich-text-group">
|
||||
<span class="label-text">申请推广码说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.applyPromoCodeDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.applyPromoCodeDesc = html"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -205,40 +194,14 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, nextTick } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { QuillEditor } from '@vueup/vue-quill';
|
||||
import { reactive, onMounted, nextTick,ref } from 'vue';
|
||||
import RichTextEditor from '../components/RichTextEditor.vue';
|
||||
// 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;
|
||||
|
|
@ -252,6 +215,43 @@ interface ProjectForm {
|
|||
applyPromoCodeDesc: string;
|
||||
}
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
// 重命名局部变量避免冲突（修复错误❷）
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('biz', 'project');
|
||||
uploadFormData.append('file', file);
|
||||
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post('/file/upload', uploadFormData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
|
||||
if (res.code === 1) {
|
||||
// 正确访问响应式对象
|
||||
formData.projectImage = res.data;
|
||||
fileName.value = file.name;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败：', error);
|
||||
alert('文件上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 添加文件名响应式变量
|
||||
const fileName = ref('');
|
||||
|
||||
// 响应式表单数据
|
||||
const formData = reactive<ProjectForm>({
|
||||
projectName: '',
|
||||
|
|
@ -266,18 +266,7 @@ const formData = reactive<ProjectForm>({
|
|||
projectImage: ''
|
||||
});
|
||||
|
||||
// 内容变化处理
|
||||
const onContentChange = () => {
|
||||
// 更新预览内容
|
||||
const phoneContent = document.querySelector('.phone-content');
|
||||
if (phoneContent) {
|
||||
// 添加平滑滚动效果
|
||||
phoneContent.scrollTo({
|
||||
top: phoneContent.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
|
|
@ -328,13 +317,7 @@ const handleSubmit = async () => {
|
|||
}
|
||||
} 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>
|
||||
|
|
@ -510,40 +493,92 @@ const handleSubmit = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
.rich-text-editor {
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
.rich-text-container {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.rich-text-editor:focus-within {
|
||||
.rich-text-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 修正列宽分配 */
|
||||
gap: 1rem; /* 减小间距 */
|
||||
align-items: start; /* 顶部对齐 */
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* 减小标签与编辑器间距 */
|
||||
height: 100%; /* 保持等高布局 */
|
||||
|
||||
}
|
||||
.rich-text-group: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;
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1440px) {
|
||||
.rich-text-columns {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
min-height: 150px;
|
||||
@media (max-width: 1280px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: repeat(2, 1fr); /* 更早切换为2列 */
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
@media (max-width: 768px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-editor.ql-blank::before {
|
||||
color: #94a3b8;
|
||||
font-style: normal;
|
||||
.rich-text-group {
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
/* 新增焦点状态 */
|
||||
&:focus-within {
|
||||
border-color: #6366f1 !important;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 调整标签与编辑器间距 */
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
/* 新增标签焦点状态联动 */
|
||||
&:focus-within .label-text {
|
||||
color: #6366f1;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 保持与其他输入组件的一致性 */
|
||||
.rich-text-group .label-text {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #3b4151;
|
||||
padding-left: 0.2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
/* 手机预览样式 */
|
||||
.phone-preview-container {
|
||||
display: flex;
|
||||
|
|
@ -553,8 +588,8 @@ const handleSubmit = async () => {
|
|||
|
||||
.phone-frame {
|
||||
position: relative;
|
||||
width: 320px;
|
||||
height: 640px;
|
||||
width: 316px;
|
||||
height: 630px;
|
||||
background: #000;
|
||||
border-radius: 40px;
|
||||
padding: 15px;
|
||||
|
|
@ -671,6 +706,9 @@ const handleSubmit = async () => {
|
|||
font-size: 0.9rem;
|
||||
color: #4a5568;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.phone-section-content * {
|
||||
|
|
@ -702,13 +740,42 @@ const handleSubmit = async () => {
|
|||
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); }
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
413
greenOrange/src/view/project/addprojectNotice.vue
Normal file
413
greenOrange/src/view/project/addprojectNotice.vue
Normal file
|
|
@ -0,0 +1,413 @@
|
|||
<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-notification">
|
||||
<h2 class="notification-title">{{ formData.notificationTitle }}</h2>
|
||||
<div class="notification-content" v-html="formData.notificationContent"></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.notificationTitle"
|
||||
type="text"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入通知标题"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">关联项目ID</span>
|
||||
<input
|
||||
v-model.number="formData.projectId"
|
||||
type="number"
|
||||
min="1"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入项目ID"
|
||||
>
|
||||
</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.notificationContent"
|
||||
contentType="html"
|
||||
:options="editorOptions"
|
||||
/>
|
||||
</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 } from 'vue';
|
||||
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";
|
||||
|
||||
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' }],
|
||||
['link', 'image', 'video'],
|
||||
['clean']
|
||||
]
|
||||
},
|
||||
placeholder: '请输入通知内容...'
|
||||
};
|
||||
|
||||
interface NotificationForm {
|
||||
notificationTitle: string;
|
||||
notificationContent: string;
|
||||
projectId: string;
|
||||
}
|
||||
|
||||
const formData = reactive<NotificationForm>({
|
||||
notificationTitle: '',
|
||||
notificationContent: '',
|
||||
projectId: ""
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post(
|
||||
'/projectNotification/add',
|
||||
JSON.stringify(formData),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
alert('通知发布成功！');
|
||||
router.back();
|
||||
Object.assign(formData, {
|
||||
notificationTitle: '',
|
||||
notificationContent: '',
|
||||
projectId: 33
|
||||
});
|
||||
} else {
|
||||
alert(`发布失败：${res.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求失败：', error);
|
||||
alert('通知发布失败，请检查网络或数据格式');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 保留原有样式，调整部分选择器 */
|
||||
.phone-notification {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 1.2rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
font-size: 0.95rem;
|
||||
color: #4a5568;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.notification-content >>> img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.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{
|
||||
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{
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 手机预览样式 */
|
||||
.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-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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -225,6 +225,7 @@ const updateMoneyDetail = async (id: number) => {
|
|||
}
|
||||
}
|
||||
);
|
||||
console.log(res)
|
||||
if (res.code === 1) {
|
||||
// 映射字段到表单
|
||||
const detail = res.data;
|
||||
|
|
@ -364,10 +365,11 @@ const handleSubmit = async () => {
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button type="primary" @click="goAddProject">新增项目明细</a-button>
|
||||
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddProject">新增项目明细</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -457,7 +459,7 @@ const handleSubmit = async () => {
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
<a-button class="custom-button" html-type="submit">提交</a-button>
|
||||
<a-button style="margin-left: 10px" @click="drawerVisible = false">取消</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -551,4 +553,60 @@ const handleSubmit = async () => {
|
|||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,20 +3,18 @@
|
|||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="ID">
|
||||
<a-form-item label="项目名称">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入项目ID"
|
||||
placeholder="请输入项目名称"
|
||||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
@search="handleProjectSearch"
|
||||
v-model:value="searchProjectName"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button type="primary" @click="goAddProject">新增项目</a-button>
|
||||
|
||||
|
||||
|
||||
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddProject">新增项目</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -25,14 +23,17 @@
|
|||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 2500, y: 450 }"
|
||||
:scroll="{ x: 2500, y: 550 }"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
bordered
|
||||
rowKey="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 项目图片 -->
|
||||
<template v-if="column.key === 'projectImage'">
|
||||
<!-- <a-avatar :src="`http://localhost:3456/file/download/view/project-`+record.projectImage" shape="square" :size="64"/>-->
|
||||
<a-avatar :src="record.projectImage" shape="square" :size="64"/>
|
||||
</template>
|
||||
|
||||
|
|
@ -115,18 +116,18 @@ import router from "../../router";
|
|||
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const searchId = ref(""); // 新增ID搜索参数
|
||||
|
||||
const searchProjectName = ref(""); // 改为项目名称搜索参数
|
||||
const searchParams = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole:null
|
||||
userRole: null,
|
||||
projectName: "" // 新增项目名称查询参数
|
||||
});
|
||||
|
||||
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
const statusMap: { [key: string]: string } = {
|
||||
running: '项目运行',
|
||||
|
|
@ -237,8 +238,11 @@ const toggleShelves = async (record: any) => {
|
|||
|
||||
if (res.code === 1) {
|
||||
message.success('状态更新成功');
|
||||
record.isShelves = !record.isShelves;
|
||||
} else {
|
||||
// 使用 Object.assign 触发响应式更新
|
||||
Object.assign(record, { isShelves: !record.isShelves });
|
||||
// 或重新获取数据（推荐）
|
||||
await getProjectList();
|
||||
}else {
|
||||
message.error(res.message || '操作失败');
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -252,6 +256,13 @@ interface ProjectRecord {
|
|||
superHostList?: string[];
|
||||
// 其他属性...
|
||||
}
|
||||
// 项目名称搜索方法
|
||||
const handleProjectSearch = async () => {
|
||||
// 将搜索参数同步到分页查询参数
|
||||
searchParams.value.projectName = searchProjectName.value;
|
||||
searchParams.value.current = 1; // 重置到第一页
|
||||
await getProjectList();
|
||||
};
|
||||
//用户分页查询
|
||||
const getProjectList = async () => {
|
||||
loading.value = true;
|
||||
|
|
@ -260,16 +271,22 @@ const getProjectList = async () => {
|
|||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
const res:any = await myAxios.post("/project/page",
|
||||
{...searchParams.value },
|
||||
{
|
||||
...searchParams.value,
|
||||
projectName: searchParams.value.projectName
|
||||
},
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
||||
console.log(res)
|
||||
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;
|
||||
pagination.value.total = res.data.total; // 新增此行
|
||||
pagination.value.current = searchParams.value.current; // 同步当前页
|
||||
} else {
|
||||
message.error(res.message || '请求失败');
|
||||
}
|
||||
|
|
@ -281,8 +298,42 @@ const getProjectList = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
onMounted(getProjectList);
|
||||
//分页
|
||||
|
||||
// 分页配置
|
||||
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, _filters: any, sorter: any) => {
|
||||
// 处理排序参数
|
||||
const sortParams = Array.isArray(sorter) ? sorter[0] : sorter;
|
||||
|
||||
searchParams.value = {
|
||||
...searchParams.value,
|
||||
current: pag.current,
|
||||
pageSize: pag.pageSize,
|
||||
sortField: sortParams?.field || 'id',
|
||||
sortOrder: sortParams?.order
|
||||
? sortParams.order === 'ascend' ? 'ascend' : 'descend'
|
||||
: 'ascend'
|
||||
};
|
||||
|
||||
// 同步到分页组件
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
current: pag.current,
|
||||
pageSize: pag.pageSize
|
||||
};
|
||||
|
||||
getProjectList();
|
||||
};
|
||||
|
||||
// ID查询方法
|
||||
interface Project {
|
||||
|
|
@ -299,33 +350,6 @@ interface Project {
|
|||
|
||||
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 {
|
||||
|
|
@ -357,7 +381,15 @@ const deleteProject = async (id: number) => {
|
|||
|
||||
// 重置按钮
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
searchProjectName.value = "";
|
||||
searchParams.value = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole: null,
|
||||
projectName: ""
|
||||
};
|
||||
getProjectList();
|
||||
};
|
||||
|
||||
|
|
@ -440,4 +472,60 @@ const promotionCode=(id:number)=>{
|
|||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@ import { onMounted, ref } from "vue";
|
|||
import myAxios from "../../api/myAxios";
|
||||
import { message } from "ant-design-vue";
|
||||
import { QuillEditor } from '@vueup/vue-quill';
|
||||
import {Form} from 'ant-design-vue'
|
||||
|
||||
interface ProjectDetail {
|
||||
id: number;
|
||||
|
|
@ -36,13 +37,112 @@ const projectData = ref<ProjectDetail>({
|
|||
});
|
||||
const projectId = ref<string | null>(null);
|
||||
const isEditing = ref(false);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const fileName = ref('');
|
||||
|
||||
|
||||
// 图片上传处理逻辑
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
// 本地预览
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
projectData.value.projectImage = e.target?.result as string;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// 上传服务器
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('biz', 'project');
|
||||
uploadFormData.append('file', file);
|
||||
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post('/file/upload', uploadFormData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
|
||||
if (res.code === 1) {
|
||||
// 替换为服务器返回的正式地址
|
||||
projectData.value.projectImage = `${myAxios.defaults.baseURL}/file/get/${res.data}`;
|
||||
fileName.value = file.name;
|
||||
message.success('图片上传成功');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败：', error);
|
||||
message.error('文件上传失败');
|
||||
projectData.value.projectImage = '';
|
||||
}
|
||||
};
|
||||
const formRef = ref<typeof Form>(); // 添加表单引用
|
||||
|
||||
// 添加数字输入校验方法
|
||||
const handleNumberInput = (e: KeyboardEvent) => {
|
||||
const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
|
||||
if (!allowedKeys.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
// 添加粘贴校验方法
|
||||
const handlePaste = (e: ClipboardEvent) => {
|
||||
const pasteData = e.clipboardData?.getData('text/plain');
|
||||
if (pasteData && !/^\d+$/.test(pasteData)) {
|
||||
e.preventDefault();
|
||||
message.error('只能粘贴数字');
|
||||
}
|
||||
};
|
||||
|
||||
// 更新项目时提交处理
|
||||
const finishEditing = async () => {
|
||||
//isEditing.value = false;
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
// 转换富文本内容为字符串
|
||||
const payload = {
|
||||
...projectData.value,
|
||||
settlementDesc: String(projectData.value.settlementDesc),
|
||||
projectDesc: String(projectData.value.projectDesc),
|
||||
projectFlow: String(projectData.value.projectFlow),
|
||||
applyPromoCodeDesc: String(projectData.value.applyPromoCodeDesc)
|
||||
};
|
||||
|
||||
const res:any = await myAxios.post("/project/update",
|
||||
JSON.stringify(payload),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(res)
|
||||
if (res.code === 1) {
|
||||
message.success('项目更新成功');
|
||||
// 重新加载数据
|
||||
projectId.value && handleIdSearch(projectId.value);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("更新失败:", error);
|
||||
|
||||
message.error('项目更新失败');
|
||||
return;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 状态映射
|
||||
// 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;
|
||||
|
|
@ -90,40 +190,7 @@ const updateProject = () => {
|
|||
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>
|
||||
|
||||
|
||||
|
|
@ -141,7 +208,7 @@ const handleChange = ({ fileList }:any) => {
|
|||
<!-- <div class="status-tag" :style="{ backgroundColor: statusMap[projectData.projectStatus]?.color }">-->
|
||||
<!-- {{ statusMap[projectData.projectStatus]?.text }}-->
|
||||
<!-- </div>-->
|
||||
<a-button type="primary" @click="updateProject">编辑项目</a-button>
|
||||
<a-button class="custom-button" @click="updateProject">编辑项目</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
|
|
@ -191,7 +258,7 @@ const handleChange = ({ fileList }:any) => {
|
|||
|
||||
<!-- ✅ 编辑页 - 使用 addProject.vue 结构 -->
|
||||
<div v-if="isEditing && projectData" class="add-project-container">
|
||||
<a-form :model="projectData" layout="vertical" @submit.prevent="finishEditing">
|
||||
<a-form ref="formRef" :model="projectData" layout="vertical" @submit.prevent="finishEditing">
|
||||
<div class="form-section">
|
||||
<h2>项目基本信息</h2>
|
||||
<a-row :gutter="16">
|
||||
|
|
@ -213,28 +280,64 @@ const handleChange = ({ fileList }:any) => {
|
|||
|
||||
<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
|
||||
label="结算周期（天）"
|
||||
name="projectSettlementCycle"
|
||||
:rules="[{
|
||||
required: true,
|
||||
type: 'number',
|
||||
min: 0,
|
||||
message: '请输入有效的正整数'
|
||||
}]"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="projectData.projectSettlementCycle"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
@keypress="handleNumberInput"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</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
|
||||
label="最大推广人数"
|
||||
name="maxPromoterCount"
|
||||
:rules="[{
|
||||
required: true,
|
||||
type: 'number',
|
||||
min: 0,
|
||||
message: '请输入有效的正整数'
|
||||
}]"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="projectData.maxPromoterCount"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
@keypress="handleNumberInput"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</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>
|
||||
<div class="file-upload">
|
||||
<input
|
||||
type="file"
|
||||
class="file-input"
|
||||
accept="image/*"
|
||||
@change="handleFileUpload"
|
||||
ref="fileInput"
|
||||
>
|
||||
<div class="upload-button" @click="fileInput?.click()">
|
||||
<span v-if="!projectData.projectImage">点击上传图片</span>
|
||||
<span v-else class="file-name">已选择：{{ fileName }}</span>
|
||||
</div>
|
||||
<div v-if="projectData.projectImage" class="preview-image">
|
||||
<img :src="projectData.projectImage" alt="项目封面预览">
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="项目描述">
|
||||
|
|
@ -263,7 +366,7 @@ const handleChange = ({ fileList }:any) => {
|
|||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a-button type="primary" htmlType="submit">完成编辑</a-button>
|
||||
<a-button class="custom-button" htmlType="submit">完成编辑</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -356,7 +459,7 @@ const handleChange = ({ fileList }:any) => {
|
|||
.section-title {
|
||||
font-size: 1.4rem;
|
||||
color: #1a1a1a;
|
||||
border-left: 4px solid #1890ff;
|
||||
border-left: 4px solid #ffa940;
|
||||
padding-left: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
|
@ -446,7 +549,7 @@ const handleChange = ({ fileList }:any) => {
|
|||
font-size: 1.3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #1a1a1a;
|
||||
border-left: 4px solid #1890ff;
|
||||
border-left: 4px solid #ffa940;
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -457,4 +560,103 @@ const handleChange = ({ fileList }:any) => {
|
|||
.ql-container {
|
||||
min-height: 120px;
|
||||
}
|
||||
.preview-image {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.preview-image img {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 保持原有上传样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@ import {ref, onMounted, reactive} from "vue";
|
|||
import { useRoute } from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
import router from "../../router";
|
||||
|
||||
// 修改表格列定义
|
||||
const columns = [
|
||||
|
|
@ -250,60 +251,9 @@ const deleteNotification = async (id: number) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 新增表单相关状态
|
||||
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();
|
||||
};
|
||||
const goAddProjectNotice=()=>{
|
||||
router.push('/addprojectNotice')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -318,10 +268,11 @@ const goAddNotice = () => {
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button type="primary" @click="goAddNotice">新增项目通知</a-button>
|
||||
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddProjectNotice">新增项目通知</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -382,7 +333,7 @@ const goAddNotice = () => {
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
<a-button class="custom-button" html-type="submit">提交</a-button>
|
||||
<a-button style="margin-left: 10px" @click="drawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
|
|
@ -390,47 +341,7 @@ const goAddNotice = () => {
|
|||
</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>
|
||||
|
|
@ -473,4 +384,60 @@ const goAddNotice = () => {
|
|||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import {ref, onMounted,reactive} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
|
|
@ -27,6 +27,13 @@ const columns = [
|
|||
width: 200,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '推广码图片',
|
||||
dataIndex: 'promoCodeImage',
|
||||
key: 'promoCodeImage',
|
||||
width: 150,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目ID',
|
||||
dataIndex: 'projectId',
|
||||
|
|
@ -55,6 +62,7 @@ interface PromoCode {
|
|||
id: number;
|
||||
promoCodeInfoKey: string;
|
||||
promoCodeLink: string;
|
||||
promoCodeImage: string;
|
||||
projectId: number;
|
||||
promoCodeStatus: boolean;
|
||||
}
|
||||
|
|
@ -64,13 +72,52 @@ const projectId = ref<string | number>("");
|
|||
const tableData = ref<PromoCode[]>([]);
|
||||
const loading = ref(false);
|
||||
const searchId = ref("");
|
||||
const previewVisible = ref(false);
|
||||
const previewImage = ref("");
|
||||
|
||||
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"
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(response);
|
||||
|
||||
if (response.code === 1) {
|
||||
// 修改这里：判断data是否为null或undefined
|
||||
if (response.data) {
|
||||
tableData.value = [response.data]; // 单个结果转为数组
|
||||
} else {
|
||||
tableData.value = []; // 设置为空数组
|
||||
message.info("未找到对应的推广码数据");
|
||||
}
|
||||
} else {
|
||||
message.error(response.message || "未找到推广码");
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("查询错误:", err);
|
||||
message.error("查询失败，请检查网络");
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 主查询方法
|
||||
const getPromoCodes = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
const response:any = await myAxios.post(
|
||||
const response: any = await myAxios.post(
|
||||
"/promoCode/queryByPid",
|
||||
{ id },
|
||||
{
|
||||
|
|
@ -80,14 +127,17 @@ const getPromoCodes = async (id: string | number) => {
|
|||
}
|
||||
}
|
||||
);
|
||||
console.log(response)
|
||||
console.log(response);
|
||||
|
||||
if (response.code === 1) {
|
||||
tableData.value = response.data;
|
||||
// 修改这里：确保data是数组，即使为null也转为空数组
|
||||
tableData.value = Array.isArray(response.data) ? response.data : [];
|
||||
} else {
|
||||
message.error(response.message || "获取数据失败");
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("查询错误:", err);
|
||||
message.error("数据加载失败，请重试");
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
|
|
@ -95,6 +145,9 @@ const getPromoCodes = async (id: string | number) => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 初始化逻辑
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
|
|
@ -106,35 +159,8 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
// 新增：按推广码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) => {
|
||||
|
|
@ -160,12 +186,18 @@ const reset = () => {
|
|||
}
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const handlePreview = (imageUrl: string) => {
|
||||
previewImage.value = imageUrl;
|
||||
previewVisible.value = true;
|
||||
};
|
||||
|
||||
// 新增推广码表单相关状态
|
||||
const addDrawerVisible = ref(false);
|
||||
const addFormState = reactive({
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
projectId: 0,
|
||||
promoCodeStatus: false
|
||||
});
|
||||
|
|
@ -185,6 +217,7 @@ const handleAddSubmit = async () => {
|
|||
{
|
||||
promoCodeInfoKey: addFormState.promoCodeInfoKey,
|
||||
promoCodeLink: addFormState.promoCodeLink,
|
||||
promoCodeImage: addFormState.promoCodeImage,
|
||||
projectId: addFormState.projectId,
|
||||
promoCodeStatus: addFormState.promoCodeStatus
|
||||
},
|
||||
|
|
@ -204,6 +237,7 @@ const handleAddSubmit = async () => {
|
|||
Object.assign(addFormState, {
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
promoCodeStatus: false,
|
||||
projectId: Number(projectId.value)
|
||||
});
|
||||
|
|
@ -258,6 +292,7 @@ const editFormState = reactive({
|
|||
id: 0,
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
projectId: 0,
|
||||
promoCodeStatus: false
|
||||
});
|
||||
|
|
@ -278,6 +313,7 @@ const getPromoCodeDetail = async (id: number) => {
|
|||
editFormState.id = response.data.id;
|
||||
editFormState.promoCodeInfoKey = response.data.promoCodeInfoKey;
|
||||
editFormState.promoCodeLink = response.data.promoCodeLink;
|
||||
editFormState.promoCodeImage = response.data.promoCodeImage;
|
||||
editFormState.projectId = response.data.projectId;
|
||||
editFormState.promoCodeStatus = response.data.promoCodeStatus;
|
||||
} else {
|
||||
|
|
@ -302,6 +338,7 @@ const handleEditSubmit = async () => {
|
|||
id: editFormState.id,
|
||||
promoCodeInfoKey: editFormState.promoCodeInfoKey,
|
||||
promoCodeLink: editFormState.promoCodeLink,
|
||||
promoCodeImage: editFormState.promoCodeImage,
|
||||
projectId: editFormState.projectId,
|
||||
promoCodeStatus: editFormState.promoCodeStatus
|
||||
},
|
||||
|
|
@ -323,6 +360,18 @@ const handleEditSubmit = async () => {
|
|||
message.error('编辑请求失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
// 返回上一级方法
|
||||
const goBack = () => {
|
||||
router.go(-1); // 返回上一页
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -337,10 +386,11 @@ const handleEditSubmit = async () => {
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||
<a-button type="primary" @click="goAddCode">新增推广码</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddCode">新增推广码</a-button>
|
||||
<a-form-item label="当前项目ID">
|
||||
<a-tag color="blue">{{ projectId }}</a-tag>
|
||||
</a-form-item>
|
||||
|
|
@ -348,15 +398,15 @@ const handleEditSubmit = async () => {
|
|||
</a-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 800, y: 450 }"
|
||||
:scroll="{ x: 1000, y: 550 }"
|
||||
:loading="loading"
|
||||
bordered
|
||||
rowKey="id"
|
||||
locale="{ emptyText: '暂无数据' }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'promoCodeStatus'">
|
||||
|
|
@ -365,6 +415,17 @@ const handleEditSubmit = async () => {
|
|||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'promoCodeImage'">
|
||||
<a-image
|
||||
v-if="record.promoCodeImage"
|
||||
:width="80"
|
||||
:src="record.promoCodeImage"
|
||||
:preview="false"
|
||||
@click="handlePreview(record.promoCodeImage)"
|
||||
/>
|
||||
<span v-else>无图片</span>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
|
|
@ -375,15 +436,24 @@ const handleEditSubmit = async () => {
|
|||
>
|
||||
删除
|
||||
</a-button>
|
||||
<!-- 编辑按钮（需实现对应方法） -->
|
||||
<a-button size="small" @click="handleEdit(record.id)">
|
||||
编辑
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="table-footer">
|
||||
<a-button @click="goBack" class="back-button">返回</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 图片预览模态框 -->
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
|
||||
<img alt="预览图片" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
|
||||
<!-- 新增推广码抽屉 -->
|
||||
<a-drawer
|
||||
title="新增推广码"
|
||||
|
|
@ -405,6 +475,10 @@ const handleEditSubmit = async () => {
|
|||
<a-input v-model:value="addFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="推广码图片URL">
|
||||
<a-input v-model:value="addFormState.promoCodeImage" placeholder="请输入图片URL" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="addFormState.promoCodeStatus">
|
||||
<a-select-option :value="false">空闲</a-select-option>
|
||||
|
|
@ -420,7 +494,7 @@ const handleEditSubmit = async () => {
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
<a-button class="custom-button" html-type="submit">提交</a-button>
|
||||
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
|
|
@ -450,6 +524,9 @@ const handleEditSubmit = async () => {
|
|||
<a-form-item label="推广链接">
|
||||
<a-input v-model:value="editFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
<a-form-item label="推广码图片URL">
|
||||
<a-input v-model:value="editFormState.promoCodeImage" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="editFormState.promoCodeStatus">
|
||||
<a-select-option :value="false">空闲</a-select-option>
|
||||
|
|
@ -489,4 +566,95 @@ const handleEditSubmit = async () => {
|
|||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 新增表格页脚样式 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* 调整分页器位置 */
|
||||
:deep(.ant-table-pagination.ant-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
186
greenOrange/src/view/settlement/applicationRecord.vue
Normal file
186
greenOrange/src/view/settlement/applicationRecord.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<a-table
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'projectImage'">
|
||||
<img :src="record.projectImage" style="width: 50px; height: 50px" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
@click="settlementRecord(record)"
|
||||
>
|
||||
结算记录
|
||||
</a-button>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import router from "../../router";
|
||||
|
||||
interface PromoRecord {
|
||||
id: number;
|
||||
salespersonName: string;
|
||||
salespersonPhone: string;
|
||||
promoCodeInfoKey: string;
|
||||
promoCodeLink: string;
|
||||
projectName: string;
|
||||
projectImage: string;
|
||||
userId: number;
|
||||
}
|
||||
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 20,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'projectName',
|
||||
key: 'projectName',
|
||||
width: 20,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '销售姓名',
|
||||
dataIndex: 'salespersonName',
|
||||
key: 'salespersonName',
|
||||
width: 20,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'salespersonPhone',
|
||||
key: 'salespersonPhone',
|
||||
width: 20,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '优惠码',
|
||||
dataIndex: 'promoCodeInfoKey',
|
||||
key: 'promoCodeInfoKey',
|
||||
width: 20,
|
||||
align: 'center'
|
||||
},
|
||||
|
||||
{
|
||||
title: '项目图片',
|
||||
dataIndex: 'projectImage',
|
||||
key: 'projectImage',
|
||||
width: 20,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 70,
|
||||
align: 'center'
|
||||
|
||||
}
|
||||
]);
|
||||
|
||||
const dataSource = ref<PromoRecord[]>([]);
|
||||
const loading = ref(false);
|
||||
reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: 'id',
|
||||
sortOrder: 'ascend',
|
||||
id: '',
|
||||
salespersonName: '',
|
||||
salespersonPhone: '',
|
||||
promoCodeInfoKey: '',
|
||||
});
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
// 这里替换为你的实际API地址
|
||||
const response:any = await myAxios.post('/promoCodeApply/page', {
|
||||
// 直接传递请求参数
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
sortField: 'id',
|
||||
sortOrder: 'ascend'
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
console.log(response)
|
||||
|
||||
if (response.code === 1) {
|
||||
dataSource.value = response.data.records;
|
||||
// 确认total字段的位置
|
||||
pagination.total = response.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableChange: TableProps['onChange'] = (pag) => {
|
||||
if (pag) {
|
||||
pagination.current = pag.current!;
|
||||
pagination.pageSize = pag.pageSize!;
|
||||
}
|
||||
fetchData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
const settlementRecord=(id:string)=>{
|
||||
router.push({
|
||||
path:'/settlementRecord',
|
||||
query:{
|
||||
id:String(id)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
11
greenOrange/src/view/settlement/settlementRecord.vue
Normal file
11
greenOrange/src/view/settlement/settlementRecord.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>结算记录</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -5,14 +5,16 @@
|
|||
<a-space>
|
||||
<a-form-item label="ID">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
style="width: 300px;"
|
||||
placeholder="请输入用户ID"
|
||||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button type="primary" @click="showModal">新增用户</a-button>
|
||||
<a-button class="custom-button" @click="showModal">新增用户</a-button>
|
||||
<!-- 新增用户-->
|
||||
<a-modal
|
||||
v-model:open="openUser"
|
||||
|
|
@ -31,6 +33,7 @@
|
|||
v-model:value="formData.nickName"
|
||||
:maxlength="6"
|
||||
@input="handleNicknameInput"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<template #help>
|
||||
<span v-if="formData.nickName.length > 0" class="tip">
|
||||
|
|
@ -63,6 +66,7 @@
|
|||
v-model:value="formData.phoneNumber"
|
||||
:maxlength="11"
|
||||
@input="handlePhoneInput"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<template #help>
|
||||
<span v-if="formData.phoneNumber.length > 0" class="tip">
|
||||
|
|
@ -78,6 +82,7 @@
|
|||
v-model:value="formData.userAccount"
|
||||
:maxlength="11"
|
||||
@input="handleAccountInput"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<template #help>
|
||||
<span v-if="formData.userAccount.length > 0" class="tip">
|
||||
|
|
@ -94,6 +99,7 @@
|
|||
type="password"
|
||||
:maxlength="10"
|
||||
@input="handlePasswordInput"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<template #help>
|
||||
<div v-if="formData.userPassword.length > 0">
|
||||
|
|
@ -120,7 +126,7 @@
|
|||
>
|
||||
批量删除({{ selectedRowKeys.length }})
|
||||
</a-button>
|
||||
<a-button type="primary" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -129,7 +135,7 @@
|
|||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 2500, y: 450 }"
|
||||
:scroll="{ x: 1700, y: 550 }"
|
||||
:loading="loading"
|
||||
:row-selection="rowSelection"
|
||||
:pagination="pagination"
|
||||
|
|
@ -138,14 +144,15 @@
|
|||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'userAvatar'">
|
||||
<a-avatar :src="record.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 class="action-btn" @click="showDrawer(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="action-btn" type="link" @click="deleteUser(record.id)">删除</a>
|
||||
</a-space>
|
||||
|
|
@ -164,9 +171,9 @@
|
|||
<div class="header">
|
||||
<a-avatar :size="128" :src="selectedUser.userAvatar" class="avatar" />
|
||||
<a-button
|
||||
type="primary"
|
||||
v-if="store.loginUser.userRole === 'boss'"
|
||||
@click="toggleEditMode"
|
||||
class="edit-btn"
|
||||
class="custom-button"
|
||||
>
|
||||
{{ isEditMode ? '取消编辑' : '编辑信息' }}
|
||||
</a-button>
|
||||
|
|
@ -266,15 +273,10 @@
|
|||
<a-form-item label="上级用户ID">
|
||||
<a-input-number v-model:value="editForm.parentUserId" :min="0" />
|
||||
</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-button class="custom-button" @click="handleSave">保存修改</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
|
|
@ -295,9 +297,9 @@
|
|||
<span class="info-label">账户信息</span>
|
||||
<div class="account-detail">
|
||||
<span>{{ selectedUser.userAccount }}</span>
|
||||
<!-- <a-tag class="role-tag">-->
|
||||
<!-- {{ roleMap[editForm.userRole] }}-->
|
||||
<!-- </a-tag>-->
|
||||
<a-tag class="role-tag">
|
||||
{{ editForm.userRole}}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -338,7 +340,8 @@ import myAxios from "../../api/myAxios.ts";
|
|||
import { message } from "ant-design-vue";
|
||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
|
||||
import {userStore} from "../../store/userStore.ts";
|
||||
const store = userStore()
|
||||
import {
|
||||
UserOutlined,
|
||||
IdcardOutlined,
|
||||
|
|
@ -362,6 +365,8 @@ const beforeUpload: UploadProps['beforeUpload'] = file => {
|
|||
return true;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 自定义上传处理
|
||||
const handleUpload = async ({ file }: { file: File }) => {
|
||||
const form = new FormData();
|
||||
|
|
@ -425,13 +430,6 @@ const handleMaxLength = (max: number) => (e: KeyboardEvent) => {
|
|||
};
|
||||
|
||||
|
||||
// 新增角色颜色映射
|
||||
// const roleColorMap = {
|
||||
// user: 'user',
|
||||
// admin: 'admin',
|
||||
// boss: 'boss'
|
||||
// };
|
||||
|
||||
const formRules = {
|
||||
nickName: [
|
||||
{
|
||||
|
|
@ -575,13 +573,6 @@ const columns = [
|
|||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '密码',
|
||||
dataIndex: 'userPassword',
|
||||
width: 30,
|
||||
key: 'userPassword',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickName',
|
||||
|
|
@ -617,13 +608,6 @@ const columns = [
|
|||
width: 40,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '上级ID列表',
|
||||
dataIndex: 'superUserList',
|
||||
key: 'superUserList',
|
||||
width: 40,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
|
|
@ -766,7 +750,7 @@ const handleIdSearch = async () => {
|
|||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
const res: { code: number; data: User } = await myAxios.post("/userInfo/queryById", // 修改此处地址
|
||||
const res: { code: number; data: User;message:any } = await myAxios.post("/userInfo/queryById", // 修改此处地址
|
||||
{ id: parseInt(searchId.value) },
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
|
@ -774,8 +758,7 @@ const handleIdSearch = async () => {
|
|||
if (res.code === 1 && res.data) {
|
||||
tableData.value = [res.data];
|
||||
} else {
|
||||
// message.error(res.message || '查询失败');
|
||||
message.error("查询失败")
|
||||
message.error(res.message || '查询失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询失败:', error);
|
||||
|
|
@ -875,12 +858,6 @@ const editForm = ref({
|
|||
SuperUserList: ''
|
||||
});
|
||||
|
||||
// const roleMap = {
|
||||
// user: '普通用户',
|
||||
// admin: '管理员',
|
||||
// boss: '老板'
|
||||
// };
|
||||
|
||||
// 修改showDrawer方法
|
||||
|
||||
// 编辑状态下的头像上传状态
|
||||
|
|
@ -988,10 +965,14 @@ const handleSave = async () => {
|
|||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
console.log(res)
|
||||
if (res.code === 1) {
|
||||
message.success('更新成功');
|
||||
await getUserList();
|
||||
const updatedUser = tableData.value.find(item => item.id === editForm.value.id);
|
||||
if (updatedUser) {
|
||||
selectedUser.value = { ...updatedUser }; // 关键更新
|
||||
}
|
||||
isEditMode.value = false;
|
||||
} else {
|
||||
message.error(res.message || '更新失败');
|
||||
|
|
@ -1009,6 +990,15 @@ const formRef = ref();
|
|||
|
||||
const showModal = () => {
|
||||
openUser.value = true;
|
||||
formData.value = {
|
||||
nickName: '',
|
||||
userAvatar: '',
|
||||
phoneNumber: '',
|
||||
userAccount: '',
|
||||
userPassword: ''
|
||||
};
|
||||
// 重置预览图片
|
||||
previewImage.value = '';
|
||||
};
|
||||
|
||||
const handleOk = (e: MouseEvent) => {
|
||||
|
|
@ -1040,8 +1030,11 @@ const handleSubmit = async () => {
|
|||
formRef.value?.resetFields();
|
||||
getUserList();
|
||||
}
|
||||
else{
|
||||
message.error(`提交失败：${res.message}`);
|
||||
}
|
||||
} catch (error:any) {
|
||||
message.error(`提交失败：${error.response?.data?.message || error.message}`);
|
||||
message.error(`提交失败：${error.response.message || error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1085,19 +1078,19 @@ const reset = () => {
|
|||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
margin-left: auto;
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.view-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1313,4 +1306,58 @@ const reset = () => {
|
|||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,778 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>工作列表</div>
|
||||
<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
|
||||
type="file"
|
||||
class="file-input"
|
||||
accept="image/*"
|
||||
@change="handleFileUpload"
|
||||
ref="fileInput"
|
||||
>
|
||||
<div class="upload-button" @click="fileInput?.click()">
|
||||
<span v-if="!formData.projectImage">点击上传图片</span>
|
||||
<span v-else class="file-name">已选择：{{ fileName }}</span>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-container">
|
||||
<div class="rich-text-columns">
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">结算说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.settlementDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.settlementDesc = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectDesc = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目流程</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectFlow"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectFlow = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">申请推广码说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.applyPromoCodeDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.applyPromoCodeDesc = html"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
<span>立即创建</span>
|
||||
<div class="button-sparkles"></div>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, nextTick,ref } from 'vue';
|
||||
import RichTextEditor from '../components/RichTextEditor.vue';
|
||||
// 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";
|
||||
|
||||
|
||||
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 fileInput = ref<HTMLInputElement | null>(null);
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
// 重命名局部变量避免冲突（修复错误❷）
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('biz', 'project');
|
||||
uploadFormData.append('file', file);
|
||||
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post('/file/upload', uploadFormData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
|
||||
if (res.code === 1) {
|
||||
// 正确访问响应式对象
|
||||
formData.projectImage = res.data;
|
||||
fileName.value = file.name;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败：', error);
|
||||
alert('文件上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 添加文件名响应式变量
|
||||
const fileName = ref('');
|
||||
|
||||
// 响应式表单数据
|
||||
const formData = reactive<ProjectForm>({
|
||||
projectName: '',
|
||||
projectSettlementCycle: 2,
|
||||
maxPromoterCount: 200,
|
||||
projectStatus: 'running',
|
||||
projectDescription: '',
|
||||
settlementDesc: '',
|
||||
projectDesc: '',
|
||||
projectFlow: '',
|
||||
applyPromoCodeDesc: '',
|
||||
projectImage: ''
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 生命周期钩子
|
||||
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);
|
||||
|
||||
}
|
||||
};
|
||||
</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-container {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.rich-text-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 修正列宽分配 */
|
||||
gap: 1rem; /* 减小间距 */
|
||||
align-items: start; /* 顶部对齐 */
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* 减小标签与编辑器间距 */
|
||||
height: 100%; /* 保持等高布局 */
|
||||
|
||||
}
|
||||
.rich-text-group:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1440px) {
|
||||
.rich-text-columns {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: repeat(2, 1fr); /* 更早切换为2列 */
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
/* 新增焦点状态 */
|
||||
&:focus-within {
|
||||
border-color: #6366f1 !important;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 调整标签与编辑器间距 */
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
/* 新增标签焦点状态联动 */
|
||||
&:focus-within .label-text {
|
||||
color: #6366f1;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 保持与其他输入组件的一致性 */
|
||||
.rich-text-group .label-text {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #3b4151;
|
||||
padding-left: 0.2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
/* 手机预览样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
10
greenOrange/src/vite-env.d.ts
vendored
10
greenOrange/src/vite-env.d.ts
vendored
|
|
@ -5,4 +5,12 @@ declare module '*.vue' {
|
|||
export default vueComponent
|
||||
}
|
||||
declare module '*.mjs'
|
||||
declare module 'dayjs'
|
||||
declare module 'dayjs'
|
||||
// interface ImportMetaEnv {
|
||||
// readonly VITE_RSA_PUBLIC_KEY: string
|
||||
// // 添加其他环境变量...
|
||||
// }
|
||||
//
|
||||
// interface ImportMeta {
|
||||
// readonly env: ImportMetaEnv
|
||||
// }
|
||||
|
|
@ -1,13 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
//加密
|
||||
// "module": "ES2020",
|
||||
// "types": ["vite/client"],
|
||||
// "moduleResolution": "node",
|
||||
// "target": "ES2020",
|
||||
// "strict": true,
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"typeRoots": ["node_modules/@types", "src/types"],
|
||||
"baseUrl": "http://localhost:3456",
|
||||
"paths": {
|
||||
"@wangeditor/editor-for-vue": ["node_modules/@wangeditor/editor-for-vue/dist/src/index.d.ts"],
|
||||
"@wangeditor/editor-for-vue": ["./node_modules/@wangeditor/editor-for-vue/dist/src/index.d.ts"] // ✅ 添加相对路径前缀
|
||||
},
|
||||
"skipLibCheck": true,
|
||||
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"moduleResolution": "node",
|
||||
//"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
|
|
@ -20,6 +34,6 @@
|
|||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +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"}
|
||||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/imageurl.ts","./src/api/myaxios.ts","./src/router/index.ts","./src/router/routes.ts","./src/store/index.ts","./src/store/userstore.ts","./src/types/wangeditor.d.ts","./src/utils/tableconfig.ts","./src/utils/crypto.ts","./src/utils/message.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/components/richtexteditor.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/addprojectnotice.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/settlement/applicationrecord.vue","./src/view/settlement/settlementrecord.vue","./src/view/userlist/userlist.vue","./src/view/work/workdetail.vue","./src/view/work/worklist.vue"],"version":"5.6.3"}
|
||||
|
|
@ -30,6 +30,11 @@ export default defineConfig({
|
|||
],
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['@wangeditor/editor-for-vue']
|
||||
}
|
||||
}
|
||||
// optimizeDeps: {
|
||||
// include: [
|
||||
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||
|
|
|
|||
|
|
@ -31,6 +31,11 @@ export default defineConfig({
|
|||
],
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['@wangeditor/editor-for-vue']
|
||||
}
|
||||
}
|
||||
// optimizeDeps: {
|
||||
// include: [
|
||||
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user