提交 d5bb958c authored 作者: 龙菲's avatar 龙菲

增加展览和文物的详情预览,3D文物的在线预览

上级 7328c1b0
// 文物的展示字段
export const crTabletitle = [{
prop: "name",
label: "名称",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "levelLabel",
label: "文物级别",
columnAlign: 'center',
},
{
prop: "detailSize",
label: "尺寸",
columnAlign: 'center',
showOverFlowToolTip: true
},
{
prop: "textureTypeLabel",
label: "质地",
columnAlign: 'center',
},
{
prop: "typeLabel",
label: "类别",
width: 100,
columnAlign: 'center',
isCulturalRelicType: true
},
// {
// prop: "createId",
// label: "创建人",
// columnAlign: 'center',
// },
{
prop: "createTime",
label: "创建时间",
columnAlign: 'center',
showOverFlowToolTip: true
},
{
prop: "deptName",
label: "馆藏单位",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "regionName",
label: "所属地",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "intro",
label: "馆藏介绍",
columnAlign: 'center',
showOverFlowToolTip: true,
width: 120,
},
{
prop: "themeWord",
label: "主题词",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "faceImagePressUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
showOverFlowToolTip: true
},
{
prop: "imagesVo",
label: "文物图片",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "audiosVo",
label: "文物音频",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "videosVo",
label: "文物视频",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "literatureVo",
label: "相关文献",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "file3dUrl",
label: "3D文物",
columnAlign: 'center',
},
{
prop: "statusLabel",
label: "上下架状态",
width: 100,
columnAlign: 'center',
isStatus: true
},
{
prop: "num",
label: "数量",
columnAlign: 'center',
},
{
prop: "sourceWay",
label: "来源方式",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "remark",
label: "备注",
columnAlign: 'center',
},
// directory 文件夹
// flag3d 是否有3d图片
// updateId 更新人
]
......@@ -55,11 +55,11 @@
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="authors" label="作者"></el-table-column>
<el-table-column prop="source" label="来源"></el-table-column>
<el-table-column prop="source" label="操作">
<!-- <el-table-column prop="source" label="操作">
<template slot-scope="scope">
<el-button type="text">预览</el-button>
<el-button type="text" @click="$bizCommon.openliterature(scope.row)">预览</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<RichTextShow
......@@ -74,6 +74,16 @@
/>
<span v-else></span>
</div>
<div v-else-if="item.prop === 'file3dUrl' && info['file3dUrl']">
<el-button type="text" @click="handleToggle3d">{{
show3d ? "收起" : "在线预览"
}}</el-button>
<Viewer3d
:url="info['file3dUrl']"
v-if="show3d"
class="container-3d"
/>
</div>
<span v-else>{{ info[item.prop] || "无" }}</span>
</el-descriptions-item>
</el-descriptions>
......@@ -82,13 +92,15 @@
</template>
<script>
import { crTabletitle } from "../../config";
import { crTabletitle } from "./config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
import Viewer3d from "@/components/Viewer3d";
export default {
components: {
VideoPlayer,
AudioPlayer,
Viewer3d,
},
props: {
info: {
......@@ -121,8 +133,14 @@ export default {
data() {
return {
crTabletitle,
show3d: false,
};
},
methods: {
handleToggle3d() {
this.show3d = !this.show3d;
},
},
};
</script>
......@@ -134,6 +152,9 @@ export default {
::v-deep .el-descriptions-item__content {
flex: 1;
}
::v-deep .el-descriptions-item__container {
align-items: center;
}
.image {
margin-right: 20px;
......@@ -148,4 +169,9 @@ export default {
border: 1px solid #dadada;
border-radius: 4px;
}
.container-3d {
border: 1px solid #dadada;
border-radius: 4px;
}
</style>
// 展览的展示字段
export const displayTabletitle = [{
prop: "title",
label: "标题",
columnAlign: 'center',
width: 120,
showOverFlowToolTip: true,
},
{
prop: "keyword",
label: "关键词",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "type",
label: "展览类型",
columnAlign: 'center',
isDisplayType: true,
showOverFlowToolTip: true,
},
{
prop: "deptName",
label: "展览单位",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "regionName",
label: "所在地区",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "faceImagePressUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
width: 130
},
{
prop: "intro",
label: "展览介绍",
columnAlign: 'center',
},
{
prop: "literatureVo",
label: "关联文献",
columnAlign: 'center',
width: 100
},
{
prop: "themeType",
label: "模板主题",
columnAlign: 'center',
},
{
prop: "remark",
label: "备注",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "imagesVo",
label: "展览图片",
columnAlign: 'center',
isImages: true
},
{
prop: "audiosVo",
label: "展览音频",
columnAlign: 'center',
isAudios: true
},
{
prop: "videosVo",
label: "展览视频",
columnAlign: 'center',
isVideos: true
},
]
\ No newline at end of file
......@@ -82,11 +82,11 @@
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="authors" label="作者"></el-table-column>
<el-table-column prop="source" label="来源"></el-table-column>
<el-table-column prop="source" label="操作">
<!-- <el-table-column prop="source" label="操作">
<template slot-scope="scope">
<el-button type="text">预览</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<span v-else>暂无文献</span>
......@@ -95,7 +95,6 @@
v-else-if="item.prop === 'intro'"
:richText="info['intro']"
></RichTextShow>
<span v-else>{{ info[item.prop] || "无" }}</span>
</el-descriptions-item>
</el-descriptions>
......@@ -105,7 +104,7 @@
</template>
<script>
import { displayTabletitle } from "../../config";
import { displayTabletitle } from "./config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
export default {
......
<template>
<!-- 展览效果预览图 -->
<div>
<div class="container" v-if="info">
<NavBar />
<NormalStyle
v-if="info.themeType == NORMAL_STYLE.value"
:displayDetail="info"
:dicts="dicts"
/>
<ChStyle
v-if="info.themeType == CH_STYLE.value"
:displayDetail="info"
:dicts="dicts"
/>
<RedStyle
v-if="info.themeType == RED_STYLE.value"
:displayDetail="info"
:dicts="dicts"
/>
<Footer />
</div>
<el-empty v-else />
</div>
</template>
<script>
import NormalStyle from "@/views/display/components/templates/NormalStyle.vue";
import ChStyle from "@/views/display/components/templates/ChStyle.vue";
import RedStyle from "@/views/display/components/templates/RedStyle.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { THEME_TYPE } from "@/contants/display";
export default {
components: {
NormalStyle,
ChStyle,
RedStyle,
NavBar,
Footer,
},
props: {
// 展览本身信息
info: {
type: Object,
default: () => ({}),
},
// 字典值
dicts: {
type: Object,
default: () => ({}),
},
},
data() {
return {
...THEME_TYPE,
};
},
};
</script>
<style></style>
......@@ -2,7 +2,7 @@
<!-- online_3d_viewer -->
<div
class="online_3d_viewer"
model="/static/3d/yshl.FBX"
:model="url"
:backgroundcolor="backgroundcolor"
></div>
</template>
......@@ -19,7 +19,7 @@ export default {
// 模型背景颜色
backgroundcolor: {
type: String,
default: "0,0,0,80%",
default: "0,0,0",
},
},
mounted() {
......@@ -41,7 +41,7 @@ export default {
.online_3d_viewer {
width: 100%;
height: 100%;
min-height: 600px;
min-height: 400px;
min-width: 300px;
}
</style>
const boutiqueTool = {
// 精品展的key-label,统一在此处配置
boutiqueList: [{
key: 'smgz',
label: '神秘贵州'
},
{
key: 'ylgdyw',
label: '夜郎的疑问'
},
{
key: 'sdcs',
label: '四渡赤水出奇兵'
},
{
key: 'jyycc',
label: '记忆与传承'
},
{
key: 'lzst',
label: '梭戛博物馆陈列展览'
},
{
key: 'zggz',
label: '中共贵州省工委旧址纪念馆'
}, {
key: 'jysg',
label: '贵州教育史馆'
},
{
key: 'frgz',
label: '富饶贵州'
},
{
key: 'zs',
label: '追随-贵州奋斗者的故事'
},
{
key: 'lphy',
label: '黎平会议纪念馆'
},
{
key: 'wmsh',
label: '人类起源·乌蒙史话'
},
],
/**
* 通过key获取精品展对应的label
*/
getAllLabels() {
const labels = this.boutiqueList.map(item => {
return item.label
})
return labels
},
/**
* 通过key获取精品展对应的label
*/
getAllKeys() {
const keys = this.boutiqueList.map(item => {
return item.keys
})
return keys
},
/**
* 通过key获取精品展对应的label
* @param {string} key 精品展对应的key
* @returns {string}精品展对应的label
*/
getLabelByKey(key) {
const keyToLabel = {}
this.boutiqueList.forEach(item => {
keyToLabel[item.key] = item.label
})
return keyToLabel[key]
},
/**
* 通过label获取精品展对应的key
* @param {string} key 精品展对应的key
* @returns {string}精品展对应的label
*/
getKeyByLabel(label) {
const labelToKey = {}
this.boutiqueList.forEach(item => {
labelToKey[item.label] = item.key
})
return labelToKey[label]
},
/**
* 通过label判断是否是精品展
* @param {string} label 展览的标题
* @returns {boolean} 是否是精品展
*/
isBoutique(label) {
const labels = this.getAllLabels()
return labels.includes(label)
},
}
export default boutiqueTool
\ No newline at end of file
//此处为配置需跳转为精品展的展览
//在此处添加title后需在@/views/boutique/index.vue中引入对应的页面组件
export var titles = [
"神秘贵州",
"四渡赤水出奇兵",
"记忆与传承",
"夜郎的疑问",
"贵州教育史馆",
"梭戛博物馆陈列展览",
"中共贵州省工委旧址纪念馆"
];
<template>
<el-dialog
:visible.sync="dialogVisible"
:visible.sync="visible"
width="50%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
title="预览文物"
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<el-main style="height: 100%">
<el-row v-if="videos.length == 1" style="height: 100%">
<el-col :span="24" style="height: 100%" class="video-container">
<video
:src="videos[0]"
style="height: auto; width: 100%"
controls
muted
loop
></video>
</el-col>
</el-row>
<el-row v-if="videos.length > 1" style="height: 100%" :gutter="16">
<template v-for="(item, index) in videos">
<el-col
:span="16"
:key="item"
v-if="index == 0"
style="height: 100%"
class="video-container"
>
<video
:src="videos[0]"
style="height: auto; width: 100%"
controls
loop
></video>
</el-col>
<el-col :span="8" :key="item" v-else>
<video
:src="videos[index]"
style="height: auto; width: 100%"
class="video-container"
controls
loop
></video>
</el-col>
</template>
</el-row>
</el-main>
<div class="dialog-footer">
<el-button type="primary" size="mini" @click="handleClose">关闭</el-button>
</div>
<CulturalRelicInfo :info="info" />
</div>
</el-dialog>
</template>
<script>
import { dialogMixins } from "./dialogMixins";
import CulturalRelicInfo from "@/components/CulturalRelicInfo";
export default {
name: "PreviewDialog",
components: {},
props: {
visible: {
type: Boolean,
default: false,
},
videos: {
type: Array,
default: () => [],
},
components: {
CulturalRelicInfo,
},
computed: {
dialogVisible: {
get: function () {
return this.visible;
},
set: function () {},
},
title() {
return "查看视频";
props: {
info: {
type: Object,
default: () => ({}),
},
},
dicts: [],
data() {
return {};
return {
visible: false,
};
},
methods: {
// 取消编辑
cancelForm() {
this.$emit("handleClose");
},
handleClose(done) {
this.$emit("handleClose");
handleClose() {
this.visible = false;
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.title {
display: flex;
margin-bottom: 16px;
......@@ -117,25 +53,9 @@ export default {
font-weight: bold;
}
}
.dialog-content {
padding: 0 32px;
display: flex;
flex-direction: column;
.relate {
flex: 1;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
}
.video-container {
background-color: #000;
display: flex;
justify-content: center;
}
.el-dialog__body {
padding: 0 20px 30px 20px;
.dialog-content {
height: 65vh;
overflow: auto;
}
</style>
\ No newline at end of file
</style>
......@@ -255,7 +255,14 @@ export const operates = {
label: "操作",
titleAlign: "center",
columnAlign: "center",
width: "180px",
width: "260px",
}
// 预览按钮
export const previewButton = {
type: 'view',
title: '详情',
perms: 'bizCulturalRelic:list'
}
// 编辑按钮
......
......@@ -128,11 +128,9 @@
@handleClose="handleImportRecordClose"
/>
<View3dDialog
ref="View3dDialog"
:visible="view3dDialogVisible"
@handleClose="handleView3dDialogClose"
/>
<View3dDialog ref="View3dDialog" />
<PreviewDialog ref="PreviewDialog" :info="previewInfo" />
<el-image-viewer
v-if="imgViewerVisible"
......@@ -147,6 +145,7 @@ import {
passedTitle,
unPassedTitle,
operates,
previewButton,
editButton,
deleteButton,
editDisabledButton,
......@@ -163,15 +162,17 @@ import {
import InfoEditDialog from "./components/InfoEditDialog";
import UploadDialog from "@/components/UploadDialog"; //上传弹窗
import ImportRecordDialog from "./components/ImportRecordDialog";
import PreviewDialog from "./components/PreviewDialog";
import View3dDialog from "./components/View3dDialog";
import { rules } from "./configs/validateRules";
import boutiqueTool from "@/utils/boutique";
export default {
components: {
InfoEditDialog,
ImportRecordDialog,
UploadDialog,
View3dDialog,
PreviewDialog,
},
data() {
return {
......@@ -197,11 +198,11 @@ export default {
imgViewerVisible: false,
importRecordVisible: false, //上传记录
imgList: [],
view3dDialogVisible: false, //3D文件在线浏览弹窗可见性
passedTitle,
unPassedTitle,
operates,
tabActive: "unPassed",
previewInfo: {},
};
},
watch: {
......@@ -227,12 +228,12 @@ export default {
getOperations(row) {
return (row) => {
if (this.tabActive == "passed") {
return [deleteButton];
return [previewButton, deleteButton];
} else if (row.checkStatus == 0) {
// 审核中的禁用编辑
return [editDisabledButton, deleteButton];
return [previewButton, editDisabledButton, deleteButton];
} else {
return [editButton, deleteButton];
return [previewButton, editButton, deleteButton];
}
};
},
......@@ -325,37 +326,82 @@ export default {
};
this.$refs.InfoEditDialog.visible = true;
break;
case "view":
this.view(row);
break;
case "view3D":
this.$refs.View3dDialog.visible = true;
this.view3d(row);
break;
case "edit":
this.$refs.InfoEditDialog.visible = true;
let detailRes = await getRCDetailByIdTemp({ crId: row.crId });
if (detailRes.code == 0) {
this.form = detailRes.data;
this.editVisible = true;
}
this.edit(row);
break;
case "delete":
let deleteRes = await deleteCultralRelic([row.crId]);
if (deleteRes.code == 0) {
this.$message.success("删除成功!");
this.loadData();
}
this.deleteRow(row);
break;
case "multiAdd":
this.$refs.UploadDialog.visible = true;
this.multiAdd();
break;
case "downloadTemplate":
this.handleDownloadTemplate();
break;
case "viewImportRecord":
this.importRecordVisible = true;
this.viewImport();
break;
}
},
async view(row) {
if (!row) {
return;
}
if (boutiqueTool.isBoutique(row.title)) {
this.$message.info("精品展暂不支持预览!");
return;
}
const request = this.getCurrentPreviewRequest();
const { crId } = row;
let res = await request({
crId,
});
if (res.data) {
this.previewInfo = res.data;
this.$refs.PreviewDialog.visible = true;
} else {
this.$message.error("暂无数据!");
}
},
view3d(row) {
this.$refs.View3dDialog.visible = true;
},
getCurrentPreviewRequest() {
const currentRequest =
this.tabActive == "passed" ? getRCDetailById : getRCDetailByIdTemp;
return currentRequest;
},
async edit(row) {
const { crId } = row;
let detailRes = await getRCDetailByIdTemp({ crId });
if (detailRes.code == 0) {
this.form = detailRes.data;
this.$refs.InfoEditDialog.visible = true;
}
},
async deleteRow(row) {
let deleteRes = await deleteCultralRelic([row.crId]);
if (deleteRes.code == 0) {
this.$message.success("删除成功!");
this.loadData();
}
},
multiAdd() {
this.$refs.UploadDialog.visible = true;
},
viewImport() {
this.importRecordVisible = true;
},
//下载批量导入模板
handleDownloadTemplate() {
this.loading = true;
......@@ -411,10 +457,6 @@ export default {
handleImportRecordClose() {
this.importRecordVisible = false;
},
// 关闭预览3D弹窗
handleView3dDialogClose() {
this.view3dDialogVisible = false;
},
},
};
</script>
......
<template>
<el-dialog
v-loading="submitLoading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:element-loading-text="loadingText"
:visible.sync="dialogVisible"
width="80%"
:before-close="handleClose"
top="2vh"
lock-scroll
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">
{{ title }}
<span
v-if="dialogForm.exhibitionId"
style="font-size: 12px; margin-left: 10px; font-weight: 500"
>
<i class="el-icon-warning-outline"></i
>点击左右切换按钮可切换展览。<span style="color: #f56c6c">
注意:切换前请注意保存当前展览信息
</span>
</span>
</div>
</div>
<div class="el-dialog-div">
<div class="dialog-content" v-if="dialogVisible" id="dialog-content">
<el-form
size="mini"
:model="dialogForm"
class="basic-info"
:rules="rules"
ref="form"
>
<el-row :gutter="50">
<el-col :span="12">
<el-form-item
label="展览标题"
:label-width="formLabelWidth"
prop="title"
>
<el-input
v-model="dialogForm.title"
autocomplete="off"
placeholder="请输入展览标题"
clearable
></el-input>
</el-form-item>
<el-form-item
label="展览单位"
:label-width="formLabelWidth"
prop="deptId"
>
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择展览单位"
clearable
>
</el-cascader>
</el-form-item>
<el-form-item label="展览地区" :label-width="formLabelWidth">
<el-cascader
class="years item"
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
clearable
>
</el-cascader>
</el-form-item>
<el-form-item label="展览类型" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
placeholder="请选择展览类型"
style="width: 100%"
clearable
>
<el-option
v-for="(value, key) in dicts.displayType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="展览性质"
:label-width="formLabelWidth"
style="display: none"
>
<el-select
v-model="dialogForm.displayCharacter"
placeholder="请选择展览性质"
style="width: 100%"
clearable
>
<el-option
v-for="(value, key) in dicts.displayCharacter"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="模板主题" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.themeType"
placeholder="请选择模板主题"
style="width: 100%"
clearable
>
<el-option
v-for="item in themeTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展览介绍" :label-width="formLabelWidth">
<VueQuillEditor
v-model="dialogForm.intro"
placeholder="请输入展览介绍"
/>
</el-form-item>
<el-form-item label="关键词" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.keyword"
autocomplete="off"
placeholder="请输入关键词"
clearable
></el-input>
</el-form-item>
<el-form-item label="展览文物" :label-width="formLabelWidth">
<el-select
v-model="crIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文物"
:remote-method="searchCR"
:loading="loading"
style="width: 100%"
clearable
>
<el-option
v-for="item in crList"
:key="item.crId"
:label="item.name"
:value="item.crId"
>
</el-option>
</el-select>
<!-- <PageSelect
ref="PageSelect"
label="name"
value="crId"
:select.sync="value"
:url="pageSelectUrl"
filter-key="name"
/> -->
</el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureIdArr"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文献"
:remote-method="searchLiterature"
:loading="loading"
style="width: 100%"
ref="literatureSelect"
clearable
>
<el-option
v-for="item in literatureList"
:key="item.literatureId"
:label="item.name"
:value="item.literatureId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="关联虚拟展厅" :label-width="formLabelWidth">
<el-select
v-model="vrIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索虚拟展厅"
:remote-method="searchVirtual"
:loading="loading"
style="width: 100%"
ref="virtualSelect"
clearable
>
<el-option
v-for="item in vrList"
:key="item.bvId"
:label="item.name"
:value="item.bvId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否上架" :label-width="formLabelWidth">
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入备注"
v-model="dialogForm.remark"
maxlength="100"
show-word-limit
clearable
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="展览封面" :label-width="formLabelWidth">
<ManualUploader
:fileLimit="1"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
:files="faceImage"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="images"
:advice="imagesAdvice"
/>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
:fileType="['mp3']"
listType="card"
ref="audios"
/>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="500"
:fileType="['mp4']"
listType="card"
ref="videos"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="展览单元" :label-width="formLabelWidth">
<ExhibitionUnit
:exhibitionUnits="dialogForm.exhibitionUnits"
ref="exhibitionUnits"
/>
</el-form-item>
</el-row>
</el-form>
</div>
<div class="dialog-footer">
<el-button
size="mini"
icon="el-icon-top"
@click.native="handleToTop"
></el-button>
<el-button
size="mini"
@click="cancelForm"
icon="el-icon-circle-close"
type="warning"
>取 消</el-button
>
<!-- <el-button
size="mini"
type="primary"
@click="handleSubmit(0)"
:disabled="loading"
icon="el-icon-document-checked"
>
只保存
</el-button> -->
<!-- <el-button @click="handlePreview">预 览</el-button> -->
<!-- <el-button
size="mini"
type="primary"
@click="handleSubmit(1)"
icon="el-icon-circle-check"
:disabled="loading"
>保存并提交审核
</el-button> -->
<el-button
size="mini"
type="primary"
@click="handleSubmit"
icon="el-icon-circle-check"
:disabled="loading"
>提交
</el-button>
</div>
</div>
<el-tooltip
class="item"
effect="dark"
content="下一展览"
placement="top-start"
>
<div
class="next btn"
v-if="dialogForm.exhibitionId"
@click="handleChangeDisplay('next')"
>
<i class="el-icon-arrow-right"></i>
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="上一展览"
placement="top-start"
>
<div
class="prev btn"
v-if="dialogForm.exhibitionId"
@click="handleChangeDisplay('prev')"
>
<i class="el-icon-arrow-left"></i>
</div>
</el-tooltip>
</el-dialog>
</template>
<script>
import { addOrUpdateDisplayTemp } from "@/api/display";
import { mapGetters, mapActions } from "vuex";
import ExhibitionUnit from "./ExhibitionUnit.vue";
import { uploadV1 } from "@/utils/file";
import { themeTypeOptions } from "../contants";
import { deleteFiles } from "@/api/file";
import { getVirtualListPer } from "@/api/vitual";
import { rules } from "../configs/validateRules";
import { pageSelectUrl, upLoadAddress } from "../configs/urls";
import transformData from "@/utils/bizTransform";
import fileUploadFunctions from "@/utils/bizUploadFunctions";
import unitsFunctions from "./units";
const {
faceImageToClient,
literatureIdArrToStr,
literatureListToIds,
statusBoolToNum,
statusStrToBool,
getDeptIdArr,
getDeptIdStr,
file3dToClient,
} = transformData;
const {
getNeedUploadFormData,
getNewIdsObj,
getOldIdsObj,
getMergedIdsObj,
getDeleteFileArr,
isFormDataHasData,
isFileRaw,
} = fileUploadFunctions;
export default {
name: "InfoEditDialog",
components: {
ExhibitionUnit,
},
props: {
visible: {
type: Boolean,
default: false,
},
form: {
type: Object,
default: () => ({}),
},
currentPageIds: {
type: Array,
default: () => [],
},
},
computed: {
...mapGetters(["userInfo", "dicts"]),
title() {
if (this.dialogForm.exhibitionId) {
return "修改信息";
} else {
return "发布展览";
}
},
themeTypeOptions() {
return themeTypeOptions;
},
},
watch: {
visible: {
handler: function (value) {
this.dialogVisible = value;
},
deep: true,
immediate: true,
},
form: {
handler: function (value) {
if (!value) {
return;
}
this.coverServerData(value);
},
immediate: true,
},
"dialogForm.themeType": {
handler: function (value) {
switch (value) {
case "2":
this.imagesAdvice =
"中国风主题建议上传10张以上的展览图片,效果更好";
break;
default:
this.imagesAdvice = "";
break;
}
},
},
currentId(value) {
this.$emit("changeDisplay", value);
},
},
data() {
return {
dialogForm: {
...this.form,
},
formLabelWidth: "100px",
loading: false,
submitLoading: false,
loadingText: "",
typeOptions: [{ label: "展览类型", value: 1 }], //后期从vuex中取
disabled: false,
exhibitionUnits: [],
literatureList: [], //文献列表
literatureIdArr: [], //选中的文献列表
crList: [], //文物列表
crIds: [], //选中的文物列表
vrList: [], //虚拟展厅列表
vrIds: [],
faceImage: [],
images: [],
videos: [],
audios: [],
orgTreeData: [],
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true,
},
regionTree: [],
imagesAdvice: "",
dialogVisible: false,
nextDiaplayId: null,
prevDiaplayId: null,
currentId: null,
pageSelectUrl,
upLoadAddress,
rules,
mediaKeys: ["faceImage", "images", "videos", "audios"],
};
},
async created() {
await this.getDictList(["displayType", "displayCharacter"]);
this.orgTreeData = await this.getMuseumTreeData(false);
this.loadRegionTree();
},
methods: {
...mapActions("dict", ["getDictList", "getLtList", "getCrList"]),
...mapActions("org", ["getMuseumTreeData", "getSysRegionTreeData"]),
...unitsFunctions, //全部导入布展单元的所有函数
coverServerData(value) {
if (value) {
this.dialogForm = JSON.parse(JSON.stringify(value));
if (!this.dialogForm.exhibitionId) {
this.dialogForm.deptId = this.userInfo.deptId;
this.dialogForm.regionCode = this.userInfo.regionCode;
} else {
this.currentId = this.dialogForm.exhibitionId;
}
const {
faceImageUrl,
faceImagePressUrl,
imagesVo,
videosVo,
audiosVo,
status,
literatureVo,
deptId,
exhibitionUnits,
} = this.dialogForm;
this.faceImage = faceImageToClient(faceImagePressUrl, faceImageUrl);
this.images = imagesVo || [];
this.videos = videosVo || [];
this.audios = audiosVo || [];
this.crList = this.getClientCrList();
this.crIds = this.getClientCrIds();
this.vrList = this.getClientVrList();
this.vrIds = this.getClientVrIds();
this.dialogForm.status = statusStrToBool(status);
this.literatureIdArr = literatureListToIds(literatureVo);
this.dialogForm.deptId = getDeptIdArr(deptId, this.userInfo);
this.dialogForm.exhibitionUnits = this.getClientUnit(exhibitionUnits);
}
},
// 获取前端需要的文物list
getClientCrList(culturalRelicVo) {
if (!culturalRelicVo || culturalRelicVo.length == 0) {
return;
}
return culturalRelicVo;
},
// 获取前端需要的文物id合集
getClientCrIds(culturalRelicVo) {
if (!culturalRelicVo || culturalRelicVo.length == 0) {
return;
}
const crIds = culturalRelicVo.map((item) => {
return item.crId;
});
return crIds;
},
// 获取前端需要的虚拟展list
getClientVrList(virtualVo) {
if (!virtualVo || virtualVo.length == 0) {
return;
}
return virtualVo;
},
// 获取前端需要的虚拟展id合集
getClientVrIds(virtualVo) {
if (!virtualVo || virtualVo.length == 0) {
return;
}
const vrIds = virtualVo.map((item) => {
return item.bvId;
});
return vrIds;
},
// 获取前端需要的布展单元
getClientUnit(exhibitionUnits) {
function loopUnit(arr) {
arr.forEach((unit) => {
if (unit.length > 0) {
// 如果有文物,回填文物
if (unit.culturalRelics && uni.culturalRelics.length > 0) {
this.$set(unit, "crIds", unit.culturalRelics);
}
if (unit.children) {
loopUnit(unit.children);
}
}
});
return arr;
}
if (!exhibitionUnits || exhibitionUnits.length == 0) {
return;
}
const newUnits = loopUnit(exhibitionUnits);
return newUnits;
},
// 关联文献查询
searchLiterature(queryString) {
if (!queryString.trim()) {
this.literatureList = [];
return;
}
this.loading = true;
const params = {
name: queryString,
page: "1",
limit: "100",
};
setTimeout(async () => {
this.loading = false;
const res = await this.getLtList(params);
if (res.code == 0) {
this.literatureList = res.data.records;
} else {
this.literatureList = [];
this.$message.error(res.msg);
}
}, 500);
},
// 关联虚拟展厅查询
searchVirtual(queryString) {
let that = this;
if (!queryString.trim()) {
that.vrList = [];
return;
}
that.loading = true;
const params = {
name: queryString,
page: "1",
limit: "100",
};
setTimeout(async () => {
that.loading = false;
let res = await getVirtualListPer(params);
if (res.code == 0) {
that.vrList = res.data.records;
} else {
that.vrList = [];
that.$message.error(res.msg);
}
}, 500);
},
// 关联文物查询
searchCR(queryString) {
let that = this;
if (!queryString.trim()) {
that.crList = [];
return;
}
that.loading = true;
const params = {
name: queryString,
page: "1",
limit: "100",
};
setTimeout(async () => {
that.loading = false;
const res = await this.getCrList({
params,
isReload: true,
});
if (res.code == 0) {
that.crList = res.data.records;
} else {
that.crList = [];
that.$message.error(res.msg);
}
}, 500);
},
// 取消编辑
cancelForm() {
if (this.loading) {
this.loading = false;
}
if (this.submitLoading) {
this.submitLoading = false;
}
this.reload();
},
handleToTop() {
let el = document.getElementById("dialog-content");
el.scrollIntoView({ block: "start", behavior: "smooth" });
},
loadRegionTree() {
function loopTree(arr) {
if (!arr || arr.length == 0) {
return;
}
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
let parentId = "";
this.getSysRegionTreeData(parentId).then((res) => {
this.regionTree = res;
loopTree(res);
});
},
handleChangeDisplay(dir) {
let index = this.currentPageIds.indexOf(this.currentId);
switch (dir) {
case "next":
if (this.currentPageIds[index + 1]) {
this.currentId = this.currentPageIds[index + 1];
} else {
this.$message.info("已经是此页最后一个!");
}
console.log("this.currentId", this.currentId);
break;
case "prev":
if (this.currentPageIds[index - 1]) {
this.currentId = this.currentPageIds[index - 1];
} else {
this.$message.info("已经是此页第一个!");
}
console.log("this.currentId", this.currentId);
break;
}
},
handleSubmit() {
// this.loading = true;
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
// 添加文件并上传文件
this.uploadMediaFiles(this.mediaKeys, this.dialogForm)
.then((form) => {})
.catch((err) => {
console.log(err);
this.submitLoading = false;
});
}
});
},
/**
* 上传对应的媒体文件,并返回一个promise
* @param {array} dialogForm 当前需要提交的表单
* @param {array} mediaKeys 媒体keys数组
* @returns {object} 传入的媒体key对应的id字符串,多个以逗号隔开
*/
async uploadMediaFiles(mediaKeys, dialogForm) {
return new Promise(async (resolve, reject) => {
const formData = getNeedUploadFormData(this, mediaKeys);
const unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
const oldUnitData = JSON.parse(JSON.stringify(unitData));
// console.log(123, unitData);
// return;
this.addUnitImageToFormData(unitData, formData);
try {
if (isFormDataHasData(formData)) {
this.loadingText = "正在上传文件...请耐心等待";
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
this.dialogForm.exhibitionUnits = this.getNewUnits(
unitData,
upLoadRes
);
console.log(
"this.dialogForm.exhibitionUnits ",
this.dialogForm.exhibitionUnits
);
// return;
// 除去布展单元之外的id对象;
const newIdObj = getNewIdsObj(mediaKeys, upLoadRes);
//除去布展单元之外的ID对象
const oldIdObj = getOldIdsObj(mediaKeys, this.dialogForm);
//除去布展单元之外的合并后的id对象
const displayMediaForm = getMergedIdsObj(
oldIdObj,
newIdObj,
mediaKeys
);
this.dialogForm = Object.assign(
this.dialogForm,
displayMediaForm
);
// 除去布展单元之外的需要删除的id对象
const deleteIdArr = getDeleteFileArr(
oldIdObj,
newIdObj,
mediaKeys
);
const unitDeleteArr = getUnitDeleteArr(oldUnitData);
const delArr = [...deleteIdArr, ...unitDeleteArr];
handleDeleteFiles(delArr);
resolve(this.dialogForm);
}
} else {
console.log("uploadMediaFiles nothing to upload");
resolve(this.dialogForm);
}
} catch (error) {
console.error("uploadMediaFiles error");
reject(error);
}
});
},
/**
* 回填布展单元的字符串
*/
backUpUnit(units, uploadRes) {
if (units.length > 0) {
// 每个unitItem下方都有自己的images,让images回填idsStr
units.forEach((item) => {
const obj = this.getUnitFileIdstr(item.euId, uploadRes);
// 将媒体id字符串回填上去
item = Object.assign(item.obj);
});
if (units.children) {
this.backUpUnit(units.children, uploadRes);
}
}
},
// 清空编辑组件中的所有值
reload() {
//父组件将清空form绑定的值
this.$emit("handleClose");
// 清空文献
this.literatureIdArr = [];
// 清空文物
this.crIds = [];
// this.literatureNames = [];
// 清空布展单元
this.exhibitionUnits = [
{
euId: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元,暂时忽略
title: "", //单元标题,类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
},
];
this.images = [];
this.videos = [];
this.audios = [];
this.faceImage = [];
},
handleClose(done) {
this.$confirm("确认关闭?")
.then((_) => {
done();
this.reload();
this.submitLoading = false;
})
.catch((_) => {});
},
refresh() {
this.$emit("refresh");
},
},
};
</script>
<style lang="scss" scoped>
.title {
display: flex;
margin-bottom: 16px;
.divider {
width: 8px;
border-left: 4px solid #409eff;
margin-right: 8px;
}
.label {
font-weight: bold;
}
}
.el-dialog-div {
height: 80vh;
overflow-x: hidden;
}
.dialog-content {
padding: 0 32px;
display: flex;
.basic-info {
flex: 1;
margin-right: 48px;
}
.relate {
flex: 1;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
margin: 20px 50px;
position: sticky;
bottom: 0;
}
.video-lists {
display: flex;
}
::v-deep .el-dialog__body {
position: relative;
}
.btn {
width: 80px;
height: 80px;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 40%;
cursor: pointer;
i {
font-size: 50px;
color: #fff;
}
}
.prev {
left: -8%;
}
.next {
right: -8%;
}
</style>
@/utils/bizTransform@/utils/bizUploadFunctions
\ No newline at end of file
......@@ -378,7 +378,6 @@ import { rules } from "../configs/validateRules";
import { pageSelectUrl, upLoadAddress } from "../configs/urls";
import transformData from "@/utils/bizTransform";
import fileUploadFunctions from "@/utils/bizUploadFunctions";
import unitsFunctions from "./units";
import submit from "./submit";
const {
faceImageToClient,
......@@ -499,7 +498,7 @@ export default {
upLoadAddress,
rules,
mediaKeys: ["faceImage", "images", "videos", "audios"],
removedIds:[]
removedIds: [],
};
},
async created() {
......@@ -511,7 +510,6 @@ export default {
methods: {
...mapActions("dict", ["getDictList", "getLtList", "getCrList"]),
...mapActions("org", ["getMuseumTreeData", "getSysRegionTreeData"]),
...unitsFunctions, //全部导入布展单元的所有函数
coverServerData(value) {
if (value) {
this.dialogForm = JSON.parse(JSON.stringify(value));
......@@ -534,7 +532,7 @@ export default {
deptId,
exhibitionUnits,
culturalRelicVo,
virtualVo
virtualVo,
} = this.dialogForm;
this.faceImage = faceImageToClient(
faceImage,
......@@ -875,4 +873,4 @@ export default {
right: -8%;
}
</style>
@/utils/bizTransform@/utils/bizUploadFunctions
\ No newline at end of file
@/utils/bizTransform@/utils/bizUploadFunctions
<template>
<el-dialog
:visible.sync="dialogVisible"
width="94%"
:visible.sync="visible"
width="70%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
title="预览展览"
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<NavBar/>
<NormalStyle
v-if="displayDetail.themeType == '1'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<ChStyle
v-if="displayDetail.themeType == '2'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<RedStyle
v-if="displayDetail.themeType == '3'"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<Footer/>
<div class="dialog-footer">
<el-button size="mini" type="primary" @click="handleClose">关闭</el-button>
</div>
<el-tabs v-model="activeName">
<el-tab-pane name="基本信息" label="基本信息">
<DisplayBaseInfo :info="info" />
</el-tab-pane>
<el-tab-pane name="效果预览" label="效果预览">
<DislplayRender :info="info" />
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script>
import NormalStyle from "./templates/NormalStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./templates/ChStyle.vue";
import RedStyle from "./templates/RedStyle.vue";
import NavBar from '@/components/NavBar';
import Footer from '@/components/Footer';
import { mapGetters } from "vuex";
import DisplayBaseInfo from "@/components/DisplayBaseInfo";
import DislplayRender from "@/components/DisplayRender";
export default {
name: "PreviewDialog",
components: {
NormalStyle,
ChStyle,
RedStyle,
NavBar,
Footer,
DisplayBaseInfo,
DislplayRender,
},
props: {
visible: {
type: Boolean,
default: false,
},
displayDetail: {
info: {
type: Object,
default: () => ({}),
},
},
computed: {
...mapGetters(["dicts"]),
title() {
return "预览——" + this.displayDetail.title;
},
},
watch: {
visible: {
handler: function (value) {
this.dialogVisible = value;
},
immediate: true,
deep: true,
},
},
data() {
return {
dialogVisible: false,
visible: false,
activeName: "基本信息",
};
},
async mounted() {
await this.$store.dispatch("dict/getDictList", [
"displayType",
"displayCharacter",
]);
},
methods: {
handleClose(done) {
this.$emit("handleClose");
handleClose() {
this.visible = false;
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.title {
display: flex;
margin-bottom: 16px;
......@@ -113,26 +63,9 @@ export default {
font-weight: bold;
}
}
.dialog-content {
padding: 0 32px;
display: flex;
flex-direction: column;
.relate {
flex: 1;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
margin-top: 40px;
}
}
.video-container {
background-color: #000;
display: flex;
justify-content: center;
}
.el-dialog__body {
padding: 0 20px 30px 20px;
.dialog-content {
height: 65vh;
overflow: auto;
}
</style>
\ No newline at end of file
</style>
import fileUploadFuctions from "@/utils/bizUploadFunctions";
const unitsFunctions = {
/**
* 获取新的布展单元,实装媒体id,
* @param {*} exhibitionUnits
* @param {*} upLoadRes
* @returns
*/
getNewUnits(exhibitionUnits, upLoadRes) {
const unitCopy = JSON.parse(JSON.stringify(exhibitionUnits))//不要修改原本的数据
const callback = (arr) => {
arr.forEach(unitItem => {
// 每一个unitItem有自己的euid,有唯一的一个images,唯一的一个videos
// 目的是要让每一个unitItem的images,videos实装回去,crId拼接回去
// mediaObj形如{
// images: "1,2,3",
// videos: "4,5,6",
// }
const mediaForm = unitsFunctions.getMediaForm(unitItem, upLoadRes)
const crForm = unitsFunctions.getCrForm(unitItem)
unitItem = Object.assign(unitItem, mediaForm, crForm)
});
}
// 遍历布展单元,并执行callback
unitsFunctions.loopUnits(unitCopy, callback)
return unitCopy
},
getMediaForm(unitItem, upLoadRes) {
const { euId } = unitItem
const mediaForm = unitsFunctions.getUnitFileIdstrObj(euId, upLoadRes)
return mediaForm
},
getCrForm(unitItem) {
const obj = {
crIds: ''
}
const { crIds } = unitItem
if (crIds instanceof Array) {
obj.crIds = crIds.join(",");
} else if (crIds) {
obj.crIds = crIds
}
return obj
},
/**
*
* @param {Array} arr 布展单元的数组
* @param {Function} callback 循环处理什么事
*/
loopUnits(arr, callback) {
if (arr.length > 0) {
callback(arr)
if (arr.children) {
unitsFunctions.loopUnits(arr.children, callback)
}
}
},
/**
* 获取布展单元下面的媒体的id字符串
* @param {String} euId 布展单元的key euId
* @param {String} res 上传后的结果 如unit-images-${euid}
* @returns {Obj} euId对应媒体文件ID字符串
* 形如{
images: "1,2,3",
videos: "4,5,6",
}item.fileId
*/
getUnitFileIdstrObj(euId, res) {
const obj = {};
const unitMediaKeys = ["images"];
const unitMediaFileIdArr = unitMediaKeys.map((mediaKey) => {
const filterArr = res.data.filter((item) => {
// 如果是当前的euId下的文件
const str1 = `unit-${mediaKey}-${euId}`
const arr = item.fileKey.split('-')
const str2 = arr.slice(0, 3).join('-') //前三位拼接
return str1 === str2
});
const arr = filterArr.map(item => {
return item.fileId
})
return arr;
});
unitMediaKeys.forEach((key, index) => {
if (unitMediaFileIdArr[index].length > 0) {
obj[key] = unitMediaFileIdArr[index].join(",");
} else {
obj[key] = "";
}
});
return obj;
},
/**
* 添加布展单元的图片至formData
* @param {array} unitData 布展单元数据
* @param {FormData} formData 需要上传的表单
*/
addUnitImageToFormData(unitData, formData) {
const callback = (arr) => {
arr.forEach(unitItem => {
unitsFunctions.appendMediaItemToFormData(unitItem, formData, "images");
})
}
unitsFunctions.loopUnits(unitData, callback)
},
/**
* 添加布展单元媒体item至formData
* @param {array} unitItem 布展单元的item
* @param {FormData} media 表单中存储ids的key
* @param {FormData} mediaVo 表单中存储文件List的key
*/
appendMediaItemToFormData(unitItem, formData, mediaKey) {
const mediaVo = unitItem[`${mediaKey}Vo`];
if (mediaVo && mediaVo.length > 0) {
mediaVo.forEach((file, index) => {
if (fileUploadFuctions.isFileRaw(file)) {
const uploadKey = `unit-${mediaKey}-${unitItem.euId}-${index}`;
formData.append(uploadKey, file.raw);
}
});
}
},
getUnitDeleteArr(newUnit, oldUnit) {
const deleteArr = []
return deleteArr
}
}
export default unitsFunctions
\ No newline at end of file
......@@ -260,11 +260,18 @@ export const unPassedTitle = [
export const operates = {
operate: true,
label: "操作",
width: "140px",
width: "220px",
titleAlign: "center",
columnAlign: "center",
};
// 预览按钮
export const previewButton = {
type: 'view',
title: '预览',
perms: 'bizCulturalRelic:list'
}
// 编辑按钮
export const editButton = {
type: 'edit',
......@@ -280,7 +287,7 @@ export const editDisabledButton = {
disabled: true
}
// 编辑按钮
// 删除按钮
export const deleteButton = {
type: 'delete',
title: '删除',
......
......@@ -124,12 +124,7 @@
@changeDisplay="reloadDisplay"
ref="InfoEditDialog"
/>
<PreviewDialog
v-if="Object.keys(curPreviewObj).length > 0"
ref="PreviewDialog"
:displayDetail="curPreviewObj"
@handleClose="handleClosePreviewDialog"
/>
<PreviewDialog ref="PreviewDialog" :info="curPreview" />
<ImportRecordDialog ref="ImportRecordDialog" @reload="loadData" />
<UploadListDialog
......@@ -160,11 +155,13 @@ import {
editButton,
editDisabledButton,
deleteButton,
previewButton,
} from "./configs/list";
import {
getListPer,
getListPerTemp,
deleteDisplay,
getDisplayById,
deleteDisplayTemp,
getDisplayByIdTemp,
editDisplay,
......@@ -178,7 +175,7 @@ import { mapGetters } from "vuex";
import { themeTypeCode } from "./contants";
import { getToken } from "@/utils/auth";
import { importZip } from "@/utils/file";
import { titles } from "@/utils/boutiqueTitles";
import boutiqueTool from "@/utils/boutique";
import { searchConfig } from "./configs/list";
export default {
components: {
......@@ -232,7 +229,6 @@ export default {
copyDialogVisible: false,
previewVideos: [],
displayTypes: {},
curPreviewObj: {}, //当前预览的对象
currentPageIds: [], //当前的id数组,用于给详情页切换用
multiUploadVisible: false, //控制批量上传弹窗显示
importRecordVisible: false, //上传记录
......@@ -244,6 +240,7 @@ export default {
passedTitle,
unPassedTitle,
operates,
curPreview: {}, //当前预览的对象
};
},
computed: {
......@@ -269,12 +266,12 @@ export default {
getOperations(row) {
return (row) => {
if (this.tabActive == "passed") {
return [deleteButton];
return [previewButton, deleteButton];
} else if (row.checkStatus == 0) {
// 状态为审核中的禁用编辑
return [editDisabledButton, deleteButton];
return [editDisabledButton, previewButton, deleteButton];
} else {
return [editButton, deleteButton];
return [editButton, previewButton, deleteButton];
}
};
},
......@@ -389,15 +386,16 @@ export default {
// 预览展览
async handleView(row) {
if (row) {
if (titles.includes(row.title)) {
if (boutiqueTool.isBoutique(row.title)) {
this.$message.info("精品展暂不支持预览!");
return;
}
let res = await getDisplayByIdTemp({
const request = this.getCurrentPreviewRequest();
let res = await request({
exhibitionId: row.exhibitionId,
});
if (res.data) {
this.curPreviewObj = res.data;
this.curPreview = res.data;
this.openDialog("PreviewDialog");
} else {
this.$message.error("暂无数据!");
......@@ -405,6 +403,12 @@ export default {
}
},
getCurrentPreviewRequest() {
const currentRequest =
this.tabActive == "passed" ? getDisplayById : getDisplayByIdTemp;
return currentRequest;
},
// 编辑展览
async handleEdit(row) {
let editRes = await getDisplayByIdTemp({
......
......@@ -46,9 +46,9 @@
<script>
import { mapGetters } from "vuex";
import CulturalRelicBaseInfo from "./culturalRelic/CulturalRelicInfo.vue";
import CulturalRelicBaseInfo from "@/components/CulturalRelicInfo";
import DisplayBaseInfo from "@/components/DisplayBaseInfo";
import CulturalRelicTable from "./culturalRelic/CulturalRelicTable.vue";
import DisplayBaseInfo from "./display/DisplayBaseInfo.vue";
import ApprovalInfo from "./approval/ApprovalInfo.vue";
import DisplayRender from "./display/DisplayRender.vue";
export default {
......
......@@ -46,7 +46,7 @@
</template>
<script>
import CulturalRelicBaseInfo from "./CulturalRelicInfo.vue";
import CulturalRelicBaseInfo from "@/components/CulturalRelicInfo";
import { crTabletitle } from "../../config";
import { getListFlowCulturalRelicByPage } from "@/api/approval";
export default {
......
......@@ -83,7 +83,7 @@
</template>
<script>
import { addCcProduct, updateCcProduct } from "@/api/literature";
import { addCcProduct, updateCcProduct } from "@/api/product";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import { deleteFiles } from "@/api/file";
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论