添加基地概况，科学研究页面
This commit is contained in:
@@ -51,6 +51,10 @@
|
||||
<el-icon><Memo /></el-icon>
|
||||
<template #title>发布文章</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/baseoverview">
|
||||
<el-icon><Memo /></el-icon>
|
||||
<template #title>编辑基地概况</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ const NewsView = () => import('../views/news/NewsView.vue')
|
||||
const PublishView = () => import('../views/publish/PublishView.vue')
|
||||
const CommunityView = () => import('../views/community/CommunityView.vue')
|
||||
const ResourceView = () => import('../views/resource/ResourceView.vue')
|
||||
const BaseOverview = ()=> import('../views/baseoverview/BaseOverView.vue')
|
||||
|
||||
// 定义路由规则（现在 RouteRecordRaw 导入正确）
|
||||
const routes: RouteRecordRaw[] = [
|
||||
@@ -74,6 +75,16 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: {
|
||||
title: '关于我们'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
path: '/baseoverview',
|
||||
name: 'baseoverview',
|
||||
component: BaseOverview,
|
||||
meta: {
|
||||
title: '编辑基地概况',
|
||||
requiresAuth: false
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
242
management/src/views/baseoverview/BaseOverView.vue
Normal file
242
management/src/views/baseoverview/BaseOverView.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="base-overview-admin">
|
||||
<!-- 页面标题 -->
|
||||
<el-card class="page-header-card">
|
||||
<h1 class="page-title">基地概况管理</h1>
|
||||
</el-card>
|
||||
|
||||
<!-- 标签页切换 -->
|
||||
<el-tabs v-model="activeTab" type="card" class="mt-4">
|
||||
|
||||
<el-tab-pane label="基地简介" name="introduction">
|
||||
<el-card class="mt-2">
|
||||
<el-form ref="introductionForm" :model="formData" label-width="120px">
|
||||
<el-form-item label="简介内容">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.introduction"
|
||||
rows="10"
|
||||
placeholder="请输入基地简介内容"
|
||||
clearable
|
||||
resize="vertical"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="基地成员" name="members">
|
||||
<el-card class="mt-2">
|
||||
<el-form ref="membersForm" :model="formData" label-width="120px">
|
||||
<el-form-item label="主任">
|
||||
<el-input v-model="formData.director" placeholder="请输入主任姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="副主任">
|
||||
<el-input v-model="formData.deputyDirector" placeholder="请输入副主任姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="研究人员">
|
||||
<el-input v-model="formData.researchers" placeholder="请输入研究人员（逗号分隔）" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="规章制度" name="regulations">
|
||||
<el-card class="mt-2">
|
||||
<el-form ref="regulationsForm" :model="formData" label-width="120px">
|
||||
<el-form-item label="制度内容">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.regulations"
|
||||
rows="10"
|
||||
placeholder="请输入规章制度内容"
|
||||
clearable
|
||||
resize="vertical"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="联系我们" name="contact">
|
||||
<el-card class="mt-2">
|
||||
<el-form ref="contactForm" :model="formData" label-width="120px">
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="formData.address" placeholder="请输入地址" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="formData.phone" placeholder="请输入电话" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="网站">
|
||||
<el-input v-model="formData.website" placeholder="请输入网站地址" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons mt-4">
|
||||
<el-button type="primary" @click="saveAll">保存全部</el-button>
|
||||
<el-button @click="saveCurrent">保存当前标签</el-button>
|
||||
<el-button type="info" @click="outputIntroduction">输出简介内容</el-button>
|
||||
<el-button @click="resetAll">重置全部</el-button>
|
||||
<el-button @click="resetCurrent">重置当前标签</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 激活的标签页（默认显示基地简介）
|
||||
const activeTab = ref('introduction');
|
||||
|
||||
// 统一管理表单数据（与数据库字段对应）
|
||||
const formData = reactive({
|
||||
introduction: '探索健康设计的新路径，引领知识创新的新范式...',
|
||||
director: '张三',
|
||||
deputyDirector: '李四',
|
||||
researchers: '王五,赵六,孙七',
|
||||
regulations: '1. 科研项目管理办法...',
|
||||
address: '湖北省武汉市江夏区阳光大道1号',
|
||||
phone: '027-87186XXX',
|
||||
email: 'hldrcenter@wtu.edu.cn',
|
||||
website: 'http://www.wtu.edu.cn/hldrcenter',
|
||||
});
|
||||
|
||||
// 保存全部内容（打印原始数据 + Markdown格式）
|
||||
const saveAll = () => {
|
||||
// 1. 打印可直接存入数据库的原始数据（保留所有格式）
|
||||
console.log('【数据库存储格式】基地概况完整原始数据：');
|
||||
console.log('='.repeat(50));
|
||||
console.log(formData); // 直接打印对象，保留原始文本格式
|
||||
console.log('\n【原始文本详情】：');
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
console.log(`- ${key}：`);
|
||||
console.log(value); // 单独打印每个字段的原始文本
|
||||
console.log('---');
|
||||
});
|
||||
|
||||
// 2. 构建Markdown格式内容（仅用于展示，不影响原始数据）
|
||||
const mdContent = `# 基地概况\n\n` +
|
||||
`## 基地简介\n${formData.introduction}\n\n` + // 不做格式化，直接使用原始文本
|
||||
`## 基地成员\n` +
|
||||
`- 主任：${formData.director}\n` +
|
||||
`- 副主任：${formData.deputyDirector}\n` +
|
||||
`- 研究人员：${formData.researchers}\n\n` +
|
||||
`## 规章制度\n${formData.regulations}\n\n` + // 不做格式化
|
||||
`## 联系我们\n` +
|
||||
`- 地址：${formData.address}\n` +
|
||||
`- 电话：${formData.phone}\n` +
|
||||
`- 邮箱：${formData.email}\n` +
|
||||
`- 网站：${formData.website}`;
|
||||
|
||||
console.log('\n\n【Markdown格式】基地概况内容：\n');
|
||||
console.log(mdContent);
|
||||
|
||||
ElMessage.success('全部内容保存成功，已在控制台输出原始数据和Markdown格式内容');
|
||||
};
|
||||
|
||||
// 单独输出基地简介（仅打印原始文本）
|
||||
const outputIntroduction = () => {
|
||||
console.log('【数据库存储格式】基地简介原始内容：');
|
||||
console.log('='.repeat(50));
|
||||
console.log('原始文本（可直接存入数据库）：');
|
||||
console.log(formData.introduction); // 直接打印原始文本，保留所有换行和格式
|
||||
|
||||
// 可选：同时打印带换行符标记的文本，方便查看换行位置
|
||||
console.log('\n\n带换行符标记的文本（便于调试）：');
|
||||
console.log(formData.introduction.replace(/\n/g, '\\n'));
|
||||
|
||||
// Markdown格式仍使用原始文本
|
||||
const introMd = `# 基地简介\n\n${formData.introduction}`;
|
||||
console.log('\n\n【Markdown格式】基地简介内容：\n');
|
||||
console.log(introMd);
|
||||
|
||||
ElMessage.success('基地简介内容已在控制台输出');
|
||||
};
|
||||
|
||||
// 保存当前标签页内容（打印原始数据）
|
||||
const saveCurrent = () => {
|
||||
const currentKey = activeTab.value as keyof typeof formData;
|
||||
const currentValue = formData[currentKey];
|
||||
|
||||
console.log(`【数据库存储格式】当前标签（${activeTab.value}）原始内容：`);
|
||||
console.log('='.repeat(50));
|
||||
console.log('字段名：', currentKey);
|
||||
console.log('原始文本：');
|
||||
console.log(currentValue); // 直接打印原始文本
|
||||
console.log('\n带换行符标记的文本：');
|
||||
console.log(currentValue.replace(/\n/g, '\\n')); // 便于调试换行位置
|
||||
|
||||
ElMessage.success(`当前标签（${activeTab.value}）内容保存成功，已在控制台输出原始数据`);
|
||||
};
|
||||
|
||||
// 重置全部内容到初始值
|
||||
const resetAll = () => {
|
||||
Object.assign(formData, {
|
||||
introduction: '探索健康设计的新路径，引领知识创新的新范式...',
|
||||
director: '张三',
|
||||
deputyDirector: '李四',
|
||||
researchers: '王五,赵六,孙七',
|
||||
regulations: '1. 科研项目管理办法...',
|
||||
address: '湖北省武汉市江夏区阳光大道1号',
|
||||
phone: '027-87186XXX',
|
||||
email: 'hldrcenter@wtu.edu.cn',
|
||||
website: 'http://www.wtu.edu.cn/hldrcenter',
|
||||
});
|
||||
ElMessage.info('全部内容已重置！');
|
||||
};
|
||||
|
||||
// 重置当前标签页内容到初始值
|
||||
const resetCurrent = () => {
|
||||
const initialValues = {
|
||||
introduction: '探索健康设计的新路径，引领知识创新的新范式...',
|
||||
director: '张三',
|
||||
deputyDirector: '李四',
|
||||
researchers: '王五,赵六,孙七',
|
||||
regulations: '1. 科研项目管理办法...',
|
||||
address: '湖北省武汉市江夏区阳光大道1号',
|
||||
phone: '027-87186XXX',
|
||||
email: 'hldrcenter@wtu.edu.cn',
|
||||
website: 'http://www.wtu.edu.cn/hldrcenter',
|
||||
};
|
||||
|
||||
formData[activeTab.value as keyof typeof initialValues] = initialValues[activeTab.value as keyof typeof initialValues];
|
||||
ElMessage.info('当前标签内容已重置！');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-overview-admin {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap; /* 适配小屏幕换行 */
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
min-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user