wangchengming/voltage_Safety_Vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加百科数据库详情页

Browse Source
This commit is contained in:
wangchengming 2025-07-20 12:27:14 +08:00
parent ef44f43a71
commit f26a183ff2
6 changed files with 433 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/TEditor/index.vue
View File

@ -216,6 +216,7 @@ const init = reactive({
},
// 设置初始化内容（初始化结束后执行）
init_instance_callback: function (editor) {
console.log('初始化内容', props.value)
editor.setContent(props.value); // 设置默认文本内容
emits('update:modelValue', editor.getContent()) //更新
// 设置高度
@ -276,13 +277,13 @@ window.onresize = function temp() {
};
// 设置值
const handleSetContent = (content) => {
const handleSetContent = (content) => {
tinymce.activeEditor.setContent(content);
};
// 获取值
const handleGetContent = () => {
return tinymce.activeEditor.getContent();
return tinymce.activeEditor.getContent();
};
const updateModelValue = (val) => {
@ -292,7 +293,7 @@ const updateModelValue = (val) => {
const content = editor.getContent()
const isEmpty = checkEmptyContent(editor)
console.log('dsfsdaf', content, isEmpty)
// 更新绑定值
myValue.value = content
emits('update:modelValue', content)

14
src/router/index.js
View File

@ -446,6 +446,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/libaryDetail',
component: Layout,
hidden: true,
permissions: ['databaseLibary:view'],
children: [
{
path: ':Id(\\d+)?',
component: () => import('@/views/databaseLibary/components/libaryDetail'),
name: 'libaryDetail',
meta: { title: '百科数据库预览', activeMenu: '/databaseLibary' }
}
]
},
{
path: '/system/userApprovalForm',
component: Layout,

41
src/views/databaseLibary/components/card.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="organization-container">
<!-- 新建按钮 -->
<div class="myoptionBtn">
<div class="myoptionBtn" v-hasPermi="['databaseLibary:add']">
<el-button type="primary" class="qualificationApplyBtn" @click="handleOpenAddForm">
<img :src="addIcon" class="custom-icon" />
新增
@ -14,21 +14,23 @@
<div class="fileContainer">
<img :src="item.organPic" />
<div class="optionBtns">
<el-button type="primary" class="editIconBtn">
<el-button type="primary" class="editIconBtn" v-hasPermi="['databaseLibary:edit']"
@click="handleEdit(item.id)">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<el-button type="primary" class="editIconBtn" v-hasPermi="['databaseLibary:delete']"
@click="handleDetele(item.id)">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="fileNameLable">{{ item.title }}</div>
</div>
</div>
<!-- 加载更多按钮 -->
<div class="moreoptionBtn">
<el-button class="moreBtn">
<el-button class="moreBtn" @click="handleLoadMore">
加载更多…
</el-button>
</div>
@ -59,16 +61,39 @@ const getBusEncyclopediaDatabasePageList = () => {
getBusEncyclopediaDatabasePage(queryParams.value).then(res => {
console.log('查询结果', res)
if (res.code == 200) {
tableData.value = res.data.list
if (res.data.list.length > 0) tableData.value = tableData.value.concat(res.data.list)
else {
queryParams.value.pageIndex = queryParams.value.pageIndex - 1
proxy.$modal.msgSuccess("没有更多了")
}
}
loading.value = false
}).catch(() => {
loading.value = false
})
}
// 加载更多
const handleLoadMore = () => {
queryParams.value.pageIndex = queryParams.value.pageIndex + 1
getBusEncyclopediaDatabasePageList()
}
// 删除
const handleDetele = (recordId) => {
proxy.$modal.confirm('是否确认删除该项数据项？').then(function () {
return deleteBusEncyclopediaDatabase(recordId)
}).then(() => {
tableData.value = []
queryParams.value.pageIndex = 1
getBusEncyclopediaDatabasePageList();
proxy.$modal.msgSuccess("删除成功")
}).catch(() => { })
}
const handleOpenAddForm = () => {
router.push('/databaseLibaryForm')
}
const handleEdit = (recordId) => {
router.push('/databaseLibaryForm/' + recordId)
}
// 暴露给父组件的参数和方法
defineExpose({
@ -167,7 +192,7 @@ defineExpose({
margin: 6px;
}
}
&:hover .optionBtns {
opacity: 1;
visibility: visible;
@ -183,7 +208,7 @@ defineExpose({
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
text-align: center;
}
.optionBtns {

312
src/views/databaseLibary/components/libaryDetail.vue Normal file
View File

@ -0,0 +1,312 @@
<template>
<div class="app-page-container">
<el-breadcrumb class="app-breadcrumb" separator=">">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="index == levelList.length - 1" class="link-redirect">{{
item.title }}</span>
<span v-else class="no-redirect">{{ item.title }}</span>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
<div class="myRootContainer clearBoth">
<el-card>
<template #header>
<div class="card-header">
<span>{{ detailForm.title }}</span>
</div>
</template>
<div class="applyFormContainer">
<el-row class="myRow" :gutter="40">
<el-col :span="17">
<div class="fileViewContainer">
<div class="document-content" v-html="detailForm.mainText"></div>
<div class="document-footer">
<span class="publish-date">发布于{{ detailForm.createTime }}</span>
</div>
</div>
</el-col>
<el-col :span="7">
<div class="resource-container">
<!-- 文档部分 -->
<section class="document-section">
<div class="section-title">相关文档</div>
<ul class="resource-list">
<li v-for="(doc, index) in docUploadList" :key="'doc-' + index"
class="resource-link">
<span class="documentIcon">#</span>
<span class="documentName">{{ doc.name }}</span>
</li>
</ul>
</section>
<!-- 链接部分 -->
<section class="link-section">
<div class="section-title">相关链接</div>
<ul class="resource-list">
<li v-for="(link, index) in links" :key="'link-' + index" class="resource-item">
<a :href="link.linkUrl" target="_blank" class="resource-link">
<span class="linkIcon">.</span>
<span class="documentName">{{ link.name }}:{{ link.linkUrl }}</span>
</a>
</li>
</ul>
</section>
</div>
</el-col>
</el-row>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getBusEncyclopediaDatabase } from "@/api/databaseLibary"
// import { DocumentText as DocumentIcon, Link as LinkIcon } from '@element-plus/icons-vue';
const route = useRoute()
const levelList = ref([
{ title: '百科数据库', path: '/databaseLibary' },
{ title: '预览', path: '/databaseLibaryDetail' },
])
const detailForm = ref({})
// 相关附件集合
const docUploadList = ref([])
// 显示相关链接数据
const showTableData = ref([])
const links = ref([
{ name: '开发平台', linkUrl: 'http://open.dingtaccc…' },
{ name: '开发者文档', linkUrl: 'http://open.dingtab…' },
{ name: '开放平台', linkUrl: 'http://open.dingtabb…' },
{ name: '开发平台', linkUrl: 'http://open.dingtaaaa…' },
{ name: '开发者文档', linkUrl: 'http://open.dingtbcg…' },
{ name: '开放平台', linkUrl: 'http://open.dingtaxxxx…' }
]);
// 初始化
onMounted(() => {
const id = route.params && route.params.Id
if (id) {
getDetailInfo(id)
}
});
// 获取详情
const getDetailInfo = (id) => {
showTableData.value = []
getBusEncyclopediaDatabase(id).then(res => {
if (res.code == 200) {
detailForm.value = res.data
docUploadList.value = JSON.parse(res.data.fileContent)
// ruleForm.value.year = res.data.year.toString()
// escUserName.value = res.data.escUserName
// escWorkNo.value = res.data.workNo
// escUserId.value = res.data.escUserId
// res.data.reviewProblemList.forEach(item => {
// item.editFlag = false
// showTableData.value.push(item)
// cachShowTableData.value.push(item)
// });
}
})
}
</script>
<style lang='scss'>
.app-main {
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
background-color: #F8F8F8;
}
.app-breadcrumb.el-breadcrumb {
width: 1200px;
margin: 0 auto;
height: 44px;
line-height: 44px;
font-size: 18px;
background: #f8f8f8;
.el-breadcrumb__item {
.el-breadcrumb__separator {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #000000 !important;
margin: 0 9px;
}
}
.no-redirect {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #000000;
cursor: text;
}
.link-redirect {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #0090FF;
cursor: text;
text-decoration: underline;
text-underline-offset: 4px;
}
}
.clearBoth {
clear: both;
}
.myRootContainer {
width: 1200px;
margin: 0 auto;
min-height: calc(100vh - 140px);
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
}
.el-card {
border: none;
}
.el-card__header {
min-height: 50px;
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 20px;
text-align: left;
color: #000000;
border-bottom: 1px solid #DCDCDC;
box-sizing: border-box;
padding: 10px 20px 17px 20px;
}
.el-card__body {
padding: 20px 0px !important;
}
.el-card.is-always-shadow {
box-shadow: none;
}
.headerTitle {
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 18px;
text-align: left;
color: #000000;
background: #e9e9e9;
padding: 6px 14px;
}
.myRow {
margin-left: 0 !important;
margin-right: 0 !important;
}
.fileViewContainer {
padding-right: 20px;
}
.document-content {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #000000;
margin: 0 0 16px 0;
line-height: 22px;
}
.document-footer {
display: flex;
justify-content: flex-start;
margin-top: 40px;
}
.publish-date {
font-family: Adobe Heiti Std;
font-weight: 400;
font-size: 16px;
color: #ACABAB;
}
.resource-container {
width: 100%;
}
.section-title {
border-left: 4px solid #4276D1;
font-family: Microsoft YaHei;
font-weight: 600;
font-size: 18px;
text-align: left;
color: #000000;
padding-left: 14px;
}
.resource-list {
list-style: none;
color: #000000;
font-weight: 400;
font-family: Microsoft YaHei;
font-size: 16px;
text-align: left;
line-height: 36px;
padding: 0px !important;
margin: 6px 0px;
}
.documentIcon {
width: 16px;
display: inline-block;
text-align: left;
}
.documentName {
display: inline-block;
width: calc(100% - 16px);
display: -webkit-box;
-webkit-line-clamp: 1;
/* 限制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.linkIcon {
width: 16px;
display: inline-block;
text-align: left;
line-height: 4px;
font-size: 50px;
}
.resource-link {
display: flex;
align-items: flex-start;
text-decoration: none;
color: #000000;
transition: all 0.2s ease;
cursor: pointer;
}
.resource-link:hover {
color: #0090FF;
transform: translateY(-2px);
}
.document-section {
margin-bottom: 70px;
}
</style>

46
src/views/databaseLibary/components/libaryForm.vue
View File

@ -13,7 +13,7 @@
<el-card>
<template #header>
<div class="card-header">
<span>新建</span>
<span>{{ formTitle }}</span>
</div>
</template>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
@ -58,7 +58,7 @@
<myFileUpload ref="organPicRef" @set-form-file="handleSetorganPic" />
</el-form-item>
<el-form-item label="正文内容" prop="mainText">
<t-editor v-model="ruleForm.mainText" @update:modelValue="updateEditor"
<t-editor ref="editorRef" :value="ruleForm.mainText" @update:modelValue="updateEditor"
:height="400"></t-editor>
</el-form-item>
<el-form-item label="相关附件">
@ -78,20 +78,20 @@
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="remark" label="链接名称" min-width="260">
<el-table-column prop="name" label="链接名称" min-width="260">
<template #default="scope">
<span v-show="!scope.row.editFlag">
{{ scope.row.remark }}
{{ scope.row.name }}
</span>
<el-input v-show="scope.row.editFlag" v-model="scope.row.remark" clearable />
<el-input v-show="scope.row.editFlag" v-model="scope.row.name" clearable />
</template>
</el-table-column>
<el-table-column prop="remark" label="链接地址" min-width="260">
<el-table-column prop="linkUrl" label="链接地址" min-width="260">
<template #default="scope">
<span v-show="!scope.row.editFlag">
{{ scope.row.remark }}
{{ scope.row.linkUrl }}
</span>
<el-input v-show="scope.row.editFlag" v-model="scope.row.remark" clearable />
<el-input v-show="scope.row.editFlag" v-model="scope.row.linkUrl" clearable />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150"
@ -142,7 +142,7 @@ import { getCustomerBusDependencyPage } from "@/api/system/dependency"
import { uploadFile } from "@/api/qualification/myQualifications"
import { addBusEncyclopediaDatabase, updateBusEncyclopediaDatabase, getBusEncyclopediaDatabase } from "@/api/databaseLibary"
import TEditor from '@/components/TEditor/index.vue'
import myFileUpload from './myFileUpload.vue'
import myFileUpload from './myFileUpload.vue'
import grayAddIcon from '@/assets/images/grayAddIcon.png'
const router = useRouter()
@ -159,6 +159,7 @@ const showTableData = ref([])
const cachShowTableData = ref([])
// 相关附件集合
const docUploadList = ref([])
const editorRef = ref(null)
const { proxy } = getCurrentInstance()
// 一级类目和二级类目字典
@ -229,15 +230,21 @@ const getDetailInfo = (id) => {
getBusEncyclopediaDatabase(id).then(res => {
if (res.code == 200) {
ruleForm.value = res.data
ruleForm.value.year = res.data.year.toString()
escUserName.value = res.data.escUserName
escWorkNo.value = res.data.workNo
escUserId.value = res.data.escUserId
res.data.reviewProblemList.forEach(item => {
item.editFlag = false
showTableData.value.push(item)
cachShowTableData.value.push(item)
});
categorySelectedValue.value = [res.data.category]
categoryTwoSelectedValue.value = [res.data.categoryTwo]
editorRef.value.handleSetContent(res.data.mainText)
docUploadList.value = JSON.parse(res.data.fileContent)
// ruleForm.value.year = res.data.year.toString()
// escUserName.value = res.data.escUserName
// escWorkNo.value = res.data.workNo
// escUserId.value = res.data.escUserId
// res.data.reviewProblemList.forEach(item => {
// item.editFlag = false
// showTableData.value.push(item)
// cachShowTableData.value.push(item)
// });
}
})
}
@ -331,8 +338,9 @@ const handleCancel = () => {
})
}
const handleSubmit = () => {
proxy.$refs["ruleFormRef"].validate(valid => {
proxy.$refs["ruleFormRef"].validate(valid => {
if (valid) {
ruleForm.value.fileContent = JSON.stringify(docUploadList.value)
ruleForm.value.encyclopediaDatabaseLinkList = showTableData.value
if (ruleForm.value.id != undefined) {
updateBusEncyclopediaDatabase(ruleForm.value).then(response => {

55
src/views/databaseLibary/components/list.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="document-container">
<!-- 新建按钮 -->
<div class="myoptionBtn">
<div class="myoptionBtn" v-hasPermi="['databaseLibary:add']">
<el-button type="primary" class="qualificationApplyBtn" @click="handleOpenAddForm">
<img :src="addIcon" class="custom-icon" />
新增
@ -9,9 +9,9 @@
</div>
<!-- 文档列表 -->
<div class="document-list" v-loading="loading">
<div class="document-card" v-for="item in tableData">
<div class="document-header">
<div class="document-list" v-loading="loading" v-if="tableData.length > 0">
<div class="document-card" v-for="item in tableData" >
<div class="document-header" @click="handleViewDetail(item.id)">
<span class="document-title">{{ item.title }}</span>
<span class="document-tag">{{ item.category }}</span>
<span class="document-tagTwo">{{ item.categoryTwo }}</span>
@ -20,10 +20,10 @@
<div class="document-footer">
<span class="publish-date">发布于{{ item.createTime }}</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<el-button type="primary" class="editIconBtn" v-hasPermi="['databaseLibary:edit']" @click="handleEdit(item.id)">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<el-button type="primary" class="editIconBtn" v-hasPermi="['databaseLibary:delete']" @click="handleDetele(item.id)">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
@ -31,11 +31,12 @@
</div>
</div>
<!-- 加载更多按钮 -->
<div class="moreoptionBtn">
<el-button class="moreBtn">
<div class="moreoptionBtn" v-if="tableData.length > 0">
<el-button class="moreBtn" @click="handleLoadMore">
加载更多…
</el-button>
</div>
<el-empty :image-size="200" v-if="tableData.length == 0" />
</div>
</template>
<script setup>
@ -45,9 +46,10 @@ import addIcon from '@/assets/images/addIcon.png'
import editIcon from '@/assets/images/editIcon.png'
import deleteIcon from '@/assets/images/deleteIcon.png'
import { getBusEncyclopediaDatabasePage } from "@/api/databaseLibary"
import { getBusEncyclopediaDatabasePage, deleteBusEncyclopediaDatabase } from "@/api/databaseLibary"
const router = useRouter()
const { proxy } = getCurrentInstance()
const queryParams = ref({
pageIndex: 1,
pageSize: 10,
@ -63,16 +65,43 @@ const getBusEncyclopediaDatabasePageList = () => {
getBusEncyclopediaDatabasePage(queryParams.value).then(res => {
console.log('查询结果', res)
if (res.code == 200) {
tableData.value = res.data.list
if (res.data.list.length > 0) tableData.value = tableData.value.concat(res.data.list)
else {
queryParams.value.pageIndex = queryParams.value.pageIndex - 1
proxy.$modal.msgSuccess("没有更多了")
}
}
loading.value = false
}).catch(() => {
loading.value = false
})
}
const handleOpenAddForm = () => {
// 加载更多
const handleLoadMore = () => {
queryParams.value.pageIndex = queryParams.value.pageIndex + 1
getBusEncyclopediaDatabasePageList()
}
// 删除
const handleDetele = (recordId) => {
proxy.$modal.confirm('是否确认删除该项数据项？').then(function () {
return deleteBusEncyclopediaDatabase(recordId)
}).then(() => {
tableData.value = []
queryParams.value.pageIndex = 1
getBusEncyclopediaDatabasePageList();
proxy.$modal.msgSuccess("删除成功")
}).catch(() => { })
}
const handleOpenAddForm = (recordId) => {
router.push('/databaseLibaryForm')
}
const handleEdit = (recordId) => {
router.push('/databaseLibaryForm/' + recordId)
}
const handleViewDetail = (recordId) => {
console.log('点击预览', recordId)
router.push('/libaryDetail/' + recordId)
}
// 暴露给父组件的参数和方法
defineExpose({
@ -133,6 +162,7 @@ defineExpose({
justify-content: flex-start;
align-items: center;
margin-bottom: 12px;
cursor: pointer;
}
.document-title {
@ -172,6 +202,7 @@ defineExpose({
text-align: center;
color: #DDA100;
}
.document-content {
font-family: Microsoft YaHei;
font-weight: 400;
@ -184,7 +215,7 @@ defineExpose({
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
line-height: 22px;
}
.document-footer {