Skip to content

E
exhibition_backstage
提交 00636e6f authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

新增展览审批的文物单个、批量及展览的详情页面

上级 52986b37
隐藏空白字符变更
内嵌 并排
正在显示 包含 1068 行增加 和 609 行删除
src/components/SearchBar/index.vue
浏览文件 @ 00636e6f
......@@ -12,7 +12,6 @@
@keyup.enter.native="handleSearch"
clearable
></el-input>
<!-- @input="handleInputChange" -->
<el-select
v-if="item.type == 'select'"
v-model="searchData[item.prop]"
......@@ -29,7 +28,6 @@
></el-option>
</el-select>
<!-- @change="handleSelectChange" -->
<el-date-picker
v-if="item.type == 'dateTimeRange'"
v-model="searchData[item.prop]"
......
src/components/Table/TablePage.vue
浏览文件 @ 00636e6f
......@@ -11,7 +11,8 @@
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
<el-table-column type="index" width="50" label="序号" align="center">
</el-table-column>
<el-table-column v-if="hasMultiSelection" type="selection" width="55" />
<el-table-column
v-for="(item, index) in tableTitle"
......@@ -29,6 +30,9 @@
<template v-if="item.prop == 'faceImageUrl'">
<slot name="faceImageUrl" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop == 'faceImagePressUrl'">
<slot name="faceImagePressUrl" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop == 'images'">
<slot name="images" :scope="scope.row"></slot>
</template>
......@@ -41,12 +45,12 @@
<template v-else-if="item.isStatus">
<slot name="status" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop=='checkStatus'">
<template v-else-if="item.prop == 'checkStatus'">
<slot name="checkStatus" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop == 'years'">
<slot name="years" :scope="scope.row"></slot>
<slot name="years" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop == 'level'">
<slot name="level" :scope="scope.row"></slot>
......@@ -69,7 +73,7 @@
<template v-else-if="item.needTimeTag">
<slot name="createTime" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop=='optType'">
<template v-else-if="item.prop == 'optType'">
<slot name="optType" :scope="scope.row"></slot>
</template>
<span v-else>{{ scope.row[item.prop] }}</span>
......@@ -137,5 +141,4 @@ export default {
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/components/VideoPlayer/index.vue
浏览文件 @ 00636e6f
<template>
<div class="m-video">
<video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied" :playsinline="true" :options="playerOptions">
<video-player
ref="videoPlayer"
@play="autoIncrement"
@timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
>
</video-player>
</div>
</template>
......@@ -16,14 +22,14 @@ export default {
},
computed: {
player() {
return this.$refs.videoPlayer.player
return this.$refs.videoPlayer.player;
},
},
watch:{
src(newSrc){
console.log('newSrc',newSrc);
this.toggle(newSrc)
}
watch: {
src(newSrc) {
console.log("newSrc", newSrc);
this.toggle(newSrc);
},
},
data() {
return {
......@@ -76,11 +82,11 @@ export default {
let player = this.$refs.videoPlayer.player;
player.play();
},
playerReadied(player) { },
playerReadied(player) {},
toggle(newSrc){
this.player.src(newSrc)
}
toggle(newSrc) {
this.player.src(newSrc);
},
},
};
</script>
......@@ -91,10 +97,9 @@ export default {
::v-deep .video-player {
height: 100%;
.video-js {
&:hover{
.vjs-big-play-button{
&:hover {
.vjs-big-play-button {
// background-color: #fff;
// color: $themeColor;
}
......
src/contants/approval.js 0 → 100644
浏览文件 @ 00636e6f
// 关于审核的常量
export const APPROVAL_STATUS = {
PENDING_APPROVAL: {
value: 0,
desc: '待审核'
},
PASSED: {
value: 1,
desc: '已通过'
},
FAILED: {
value: -1,
desc: '未通过'
}
}
\ No newline at end of file
src/contants/culturalRelic.js 0 → 100644
浏览文件 @ 00636e6f
// 关于审核的常量
export const APPROVAL_STATUS = {
PENDING_APPROVAL: {
value: 0,
desc: '待审核'
},
PASSED: {
value: 1,
desc: '已通过'
},
FAILED: {
value: -1,
desc: '未通过'
}
}
\ No newline at end of file
src/contants/display.js 0 → 100644
浏览文件 @ 00636e6f
// 关于展览的常量
export const THEME_TYPE = {
NORMAL_STYLE: {
value: '1',
desc: '默认风格'
},
CH_STYLE: {
value: '2',
desc: '中国风'
},
RED_STYLE: {
value: '3',
desc: '红色文化'
}
}
\ No newline at end of file
src/main.js
浏览文件 @ 00636e6f
......@@ -14,17 +14,21 @@ import router from './router'
import '@/icons' // icon
import '@/permission' // permission control
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {
getFullUrl
} from '@/utils/index'
import { file } from '@/utils/file'
import * as echarts from 'echarts';
Vue.use(VideoPlayer)
Vue.prototype.$getFullUrl = getFullUrl
Vue.prototype.$echarts = echarts
Vue.prototype.$file = file
Vue.use(ElementUI)
......
src/utils/file.js
浏览文件 @ 00636e6f
......@@ -145,3 +145,13 @@ export function downloadBlob(url, fileName, typeSuffix) {
})
})
};
// 因为之前的全部都是单独引入，为了不改变以前的代码因此单独用file导出，后期方便$file.uploadFile进行使用
export const file = {
uploadFile,
uploadV1,
importZip,
downloadFile,
previewFile,
downloadBlob
}
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ 00636e6f
......@@ -77,9 +77,6 @@
$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
"
alt="暂无图片"
v-if="
$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
"
style="
cursor: pointer;
width: 80px;
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 00636e6f
......@@ -336,7 +336,6 @@ export default {
let that = this;
var checkFaceImage = (rule, value, callback) => {
if (that.faceImage.length == 0) {
// this.$message.info('请上传封面')
return callback(new Error("请上传封面"));
} else {
callback();
......@@ -451,7 +450,6 @@ export default {
};
setTimeout(async () => {
// debugger
that.loading = false;
let res = await getVirtualListPer(params);
if (res.code == 0) {
......@@ -477,7 +475,6 @@ export default {
};
setTimeout(async () => {
// debugger
that.loading = false;
const res = await that.$store.dispatch("dict/getCrList", {
params,
......
src/views/displayApproval/components/BaseInfo.vue deleted 100644 → 0
浏览文件 @ 52986b37
<template>
<div class="base-info">
<el-form :model="displayDetail" class="basic-info" ref="form" size="mini">
<el-row :gutter="50">
<el-col :span="10">
<el-form-item label="展览标题" :label-width="formLabelWidth">
<el-input disabled v-model="displayDetail.title" autocomplete="off" placeholder="无"
clearable></el-input>
</el-form-item>
<el-form-item label="展览介绍" :label-width="formLabelWidth">
<div v-if="(displayDetail.intro.length > 0)" class="intro" v-html="displayDetail.intro"></div>
<div v-else class="intro">暂无</div>
</el-form-item>
<el-form-item label="展览单位" :label-width="formLabelWidth">
<el-cascader disabled style="width: 100%" v-model="displayDetail.deptId" :options="orgTreeData"
:props="optionProps" placeholder="无" clearable>
</el-cascader>
</el-form-item>
<el-form-item label="展览地区" :label-width="formLabelWidth">
<el-cascader disabled class="years item" style="width: 100%" v-model="displayDetail.regionCode"
:options="regionTree" :props="culturalRegionProps" placeholder="无" filterable clearable>
</el-cascader>
</el-form-item>
<el-form-item label="展览类型" :label-width="formLabelWidth">
<el-select disabled v-model="displayDetail.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 disabled v-model="displayDetail.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 disabled v-model="displayDetail.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">
<el-input disabled v-model="displayDetail.keyword" autocomplete="off" placeholder="无"
clearable></el-input>
</el-form-item>
<el-form-item label="展览文物" :label-width="formLabelWidth">
<el-select disabled v-model="crIds" multiple filterable remote reserve-keyword placeholder="无"
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 disabled v-model="literatureValues" multiple filterable remote reserve-keyword
placeholder="无" 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 disabled v-model="vrIds" multiple filterable remote reserve-keyword placeholder="无"
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="displayDetail.status" disabled> </el-switch>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input disabled type="textarea" placeholder="无" v-model="displayDetail.remark"
maxlength="100" show-word-limit clearable>
</el-input>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="展览封面" :label-width="formLabelWidth">
<div v-if="displayDetail.faceImagePressUrl" class="img-container">
<ManualUploader :fileLimit="1" listType="picture-card" :fileType="['png', 'jpeg', 'jpg']"
:files="faceImage" ref="faceImage" onlyRead />
</div>
<div v-else>
无
</div>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<div class="images-group" v-if="displayDetail.imagesVo.length > 0">
<ManualUploader :files="images" :fileLimit="20" :fileSize="50" listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']" ref="images" onlyRead />
</div>
<div v-else>
无
</div>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<div class="images-group" v-if="displayDetail.audiosVo.length > 0">
<ManualUploader :files="audios" :fileLimit="1" :fileSize="50" :fileType="['mp3']"
listType="card" ref="audios" onlyRead />
</div>
<div v-else>
无
</div>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<div class="images-group" v-if="displayDetail.videosVo.length > 0">
<ManualUploader :files="videos" :fileLimit="6" :fileSize="500" :fileType="['mp4']"
listType="card" ref="videos" onlyRead />
</div>
<div v-else>
无
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="展览单元" :label-width="formLabelWidth">
<ExhibitionUnit :exhibitionUnits="displayDetail.exhibitionUnits" :isDisableEvent="true"
ref="exhibitionUnits" />
</el-form-item>
</el-row>
</el-form>
</div>
</template>
<script>
import { themeTypeOptions } from "@/views/display/contants";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ExhibitionUnit from "@/views/display/components/ExhibitionUnit.vue";
export default {
name: 'BaseInfo',
components: {
ExhibitionUnit,
ManualUploader
},
props: {
displayDetail: {
type: Object,
default: () => ({})
},
dicts: {
type: Object,
default: () => ({})
},
},
computed: {
themeTypeOptions() {
return themeTypeOptions;
},
},
watch: {
displayDetail: {
handler: function (value) {
if (Object.keys(value).length == 0) {
return
}
// 回填媒体资源
if (
this.displayDetail.faceImageUrl ||
this.displayDetail.faceImagePressUrl
) {
this.faceImage = [
{
name: "",
url: this.displayDetail.faceImageUrl || "",
pressUrl:
this.displayDetail.faceImagePressUrl ||
this.displayDetail.faceImageUrl ||
"",
fileId: this.displayDetail.faceImage || "",
},
];
} else {
this.faceImage = [];
}
this.images = this.displayDetail.imagesVo || [];
this.videos = this.displayDetail.videosVo || [];
this.audios = this.displayDetail.audiosVo || [];
// 回填状态
this.displayDetail.status = Boolean(Number(this.displayDetail.status));
// 回填文献
this.literatureValues = [];
if (
this.displayDetail.literatureVo &&
this.displayDetail.literatureVo.length > 0
) {
this.literatureList = this.displayDetail.literatureVo;
this.displayDetail.literatureVo.forEach((lt) => {
if (this.literatureValues) {
this.literatureValues.push(lt.literatureId);
}
});
}
// 回填文物
this.crIds = [];
if (
this.displayDetail.culturalRelicVo &&
this.displayDetail.culturalRelicVo.length > 0
) {
this.crList = this.displayDetail.culturalRelicVo;
this.displayDetail.culturalRelicVo.forEach((cr) => {
if (this.crIds) {
this.crIds.push(cr.crId);
}
});
}
// 回填虚拟展厅
this.vrIds = [];
if (
this.displayDetail.virtualVo &&
this.displayDetail.virtualVo.length > 0
) {
this.vrList = this.displayDetail.virtualVo;
this.displayDetail.virtualVo.forEach((vr) => {
if (this.vrIds) {
this.vrIds.push(vr.bvId);
}
});
}
},
deep: true,
immediate: true
}
},
data() {
return {
formLabelWidth: "100px",
orgTreeData: [],
regionTree: [],
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true,
},
faceImage: [],
images: [],
videos: [],
audios: [],
literatureList: [], //文献列表
literatureValues: [], //选中的文献列表
crList: [], //文物列表
crIds: [], //选中的文物列表
vrList: [], //虚拟展厅列表
vrIds: [],
}
},
async created() {
await this.$store.dispatch("dict/getDictList", [
"displayType",
"displayCharacter",
]);
this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.orgTreeData = res[0].children; //去掉根节点的文旅厅
this.orgTreeData = res;
});
this.loadRegionTree();
},
methods: {
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
}
}
</script>
<style lang="scss" scoped>
.img-container {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
cursor: pointer;
margin-right: 2px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.images-group {
// width: 450px;
// display: flex;
// flex-wrap: wrap;
// padding-top: 10px;
}
.intro {
background-color: #F5F7FA;
border: 1px solid #E4E7ED;
color: #C0C4CC;
padding: 0 10px;
border-radius: 4px;
}
.base-info {
overflow-x: hidden;
}
</style>
\ No newline at end of file
src/views/displayApproval/components/PreviewDialog.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<el-dialog
:visible.sync="visible"
fullscreen
:before-close="handleClose"
lock-scroll
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ prviewType == "view" ? "预览" : "审核" }}</div>
</div>
<div class="dialog-content">
<el-tabs v-model="activeName">
<el-tab-pane
v-for="(item, index) in tabs"
:key="index"
:label="item"
:name="item"
>
<ApprovalInfo :info="aprrovalInfo" v-if="item == '审批详情'" />
<CulturalRelicBaseInfo
:info="culturalRelicBaseInfo"
v-if="item == '文物基本信息'"
/>
<CulturalRelicTable :crList="crList" v-if="item == '文物列表'" />
<DisplayBaseInfo :info="displayInfo" v-if="item == '展览基本信息'" />
<DisplayRender :info="displayInfo" v-if="item == '展览基本信息'" />
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import CulturalRelicBaseInfo from "./culturalRelic/CulturalRelicInfo.vue";
import CulturalRelicTable from "./culturalRelic/CulturalRelicTable.vue";
import DisplayBaseInfo from "./display/DisplayBaseInfo.vue";
import ApprovalInfo from "./approval/ApprovalInfo.vue";
import { cr, crList, display } from "../mock";
export default {
name: "PreviewDialog",
components: {
CulturalRelicBaseInfo,
CulturalRelicTable,
ApprovalInfo,
DisplayBaseInfo
},
props: {
// 预览类型，view or approval
prviewType: {
type: String,
default: "view",
},
aprrovalInfo: {
type: Object,
default: () => ({}),
},
},
computed: {
...mapGetters(["dicts"]),
tabs() {
const tabs = ["审批详情"];
const { sourceType, addWay } = this.aprrovalInfo;
switch (sourceType) {
case "展览":
tabs.push("展览基本信息", "效果预览");
break;
case "文物":
if (addWay == "单个") {
tabs.push("文物基本信息");
} else {
tabs.push("文物列表");
}
break;
}
return tabs;
},
},
data() {
return {
visible: false,
activeName: "审批详情",
culturalRelicBaseInfo: cr, //单个文物的信息
crList,
displayInfo: display,
};
},
methods: {
handleClose(done) {
this.visible = false;
},
},
};
</script>
<style lang="scss" scoped></style>
src/views/displayApproval/components/approval/ApprovalForm.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<div>
<!-- 审批表单 -->
<el-button
size="mini"
@click.native="handleCancel"
style="margin-right: 6px"
>取消</el-button
>
<el-popover
placement="top-end"
width="400"
trigger="manual"
v-model="popoverVisible"
>
<div>
<el-form
size="mini"
:model="dialogForm"
prop="remark"
:rules="rules"
ref="form"
>
<el-form-item label="驳回意见" prop="remark">
<el-input
type="textarea"
placeholder="驳回意见"
v-model="dialogForm.remark"
size="mini"
:rows="4"
>
</el-input>
<el-button
size="mini"
type="primary"
style="float: right; margin-top: 16px"
@click.native="handleCheck(-2)"
>确定</el-button
>
</el-form-item>
</el-form>
</div>
<el-button
size="mini"
slot="reference"
type="danger"
icon="el-icon-close"
@click.native="handleShowPopover"
>驳回</el-button
>
</el-popover>
<el-button
size="mini"
style="margin-left: 6px"
type="primary"
icon="el-icon-check"
@click.native="handleCheck(1)"
>同意</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
rules: {
remark: [
{
required: true,
message: "请输入驳回意见",
trigger: "blur",
},
],
},
};
},
methods: {
async handleCheck(checkStatus) {
if (checkStatus == -2) {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.dialogLoading = true;
const params = {
sourceId: this.displayDetail.exhibitionId,
checkStatus,
remark: this.dialogForm.remark,
sourceType: "biz_exhibition",
sourceName: this.displayDetail.title,
};
let res = await postCheck(params);
if (res.code == 0) {
this.$message.success("操作成功！");
this.handleClose();
this.$emit("refresh");
this.$refs.form.resetFields();
}
this.dialogLoading = false;
this.popoverVisible = false;
}
});
} else {
this.dialogLoading = true;
const params = {
sourceId: this.displayDetail.exhibitionId,
checkStatus,
remark: this.dialogForm.remark,
sourceType: "biz_exhibition",
sourceName: this.displayDetail.title,
};
let res = await postCheck(params);
if (res.code == 0) {
this.$message.success("操作成功！");
this.handleClose();
this.$emit("refresh");
this.$refs.form.resetFields();
}
this.dialogLoading = false;
this.popoverVisible = false;
}
},
},
};
</script>
<style></style>
src/views/displayApproval/components/approval/ApprovalInfo.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<!-- 审核的基本信息 -->
<div>
<el-card class="card" shadow="hover">
<el-descriptions title="审核基本详情">
<el-descriptions-item
:label="item.label"
v-for="(item, index) in approvleTableTitle"
:key="index"
>{{ info[item.prop] }}</el-descriptions-item
>
</el-descriptions>
</el-card>
<el-card shadow="hover">
<h3>审核流程</h3>
<el-steps :active="historyChecks.length">
<el-step
v-for="(item, index) in historyChecks"
:title="getStepTitle(item)"
:key="index"
:icon="getStepIcon(item)"
>
<div slot="description">
<div class="name">{{ item.createName }}</div>
<div class="time">{{ item.createTime }}</div>
<div class="desc">{{ item.remark }}</div>
</div>
</el-step>
</el-steps>
</el-card>
</div>
</template>
<script>
import { approvleTableTitle } from "../../config";
import { historyChecks } from "../../mock";
export default {
name: "AprrovalInfo",
props: {
// 审核的信息
info: {
type: Object,
default: () => ({}),
},
},
computed: {
getStepTitle(item) {
return (item) => {
switch (item.checkStatus) {
case 0:
return "发起审核";
case 1:
return "审核通过";
case -2:
return "驳回";
}
};
},
getStepIcon(item) {
return (item) => {
switch (item.checkStatus) {
case 0:
return "el-icon-s-promotion";
case 1:
return "el-icon-s-claim";
case -2:
return "el-icon-circle-close";
}
};
},
},
data() {
return {
approvleTableTitle,
historyChecks, //mock历史记录，后期通过后端接口返
};
},
};
</script>
<style lang="scss" scoped>
.card {
margin-bottom: 20px;
}
</style>
src/views/displayApproval/components/culturalRelic/CulturalRelicInfo.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<!-- 文物基本信息 -->
<div>
<el-card shadow="hover">
<el-descriptions title="文物基本详情" :column="1" labelClassName="label">
<el-descriptions-item
:label="item.label"
v-for="(item, index) in crTabletitle"
:key="index"
>
<el-image
class="image"
v-if="item.prop == 'faceImagePressUrl'"
:src="info['faceImagePressUrl']"
fit="contain"
>
</el-image>
<div v-else-if="item.prop == 'imagesVo'">
<el-image
v-for="(v, i) in info['imagesVo']"
:key="i"
class="image"
:src="v.pressUrl"
fit="contain"
>
</el-image>
</div>
<div v-else-if="item.prop == 'videosVo'">
<VideoPlayer
class="video"
v-for="(v, i) in info['videosVo']"
:key="i"
:src="v.url"
/>
</div>
<div v-else-if="item.prop == 'audiosVo'">
<AudioPlayer
v-for="(v, i) in info['audiosVo']"
:key="i"
:url="v.url"
ref="AudioPlayer"
/>
</div>
<div v-else-if="item.prop == 'literatureVo'">
<el-table stripe border :data="info['literatureVo']">
<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="操作">
<template slot-scope="scope">
<el-button type='text'>预览</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-else-if="item.prop === 'intro'" v-html="info['intro']"></div>
<span v-else>{{ info[item.prop] || "无" }}</span>
</el-descriptions-item>
</el-descriptions>
</el-card>
</div>
</template>
<script>
import { crTabletitle } from "../../config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
export default {
components: {
VideoPlayer,
AudioPlayer,
},
props: {
info: {
type: Object,
default: () => ({}),
},
},
data() {
return {
crTabletitle,
};
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
width: 90px;
display: inline-block;
}
::v-deep .el-descriptions-item__content {
flex: 1;
}
.image {
margin-right: 20px;
width: 200px;
height: 200px;
border: 1px solid #dadada;
border-radius: 4px;
}
.video {
width: 200px;
height: 200px;
border: 1px solid #dadada;
border-radius: 4px;
}
</style>
src/views/displayApproval/components/culturalRelic/CulturalRelicTable.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<div>
<!-- 文物清单表格 -->
<TablePage :data="crList.records" :tableTitle="crTabletitle">
<template v-slot:status="data">
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</template>
<template v-slot:faceImagePressUrl="data">
<img
:src="
$getFullUrl(data.scope.faceImagePressUrl)
"
alt="暂无图片"
style="
cursor: pointer;
width: 80px;
height: 80px;
object-fit: contain;
"
@click="handelPreviewImages(data.scope.faceImagePressUrl)"
/>
</template>
</TablePage>
<!-- <el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(crList.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(crList.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(crList.total)"
class="pagination"
>
</el-pagination> -->
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import { crTabletitle } from "../../config";
export default {
components: {
TablePage,
},
props: {
crList: {
type: Object,
default: () => ({}),
},
},
data() {
return {
crTabletitle,
};
},
methods: {
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
},
};
</script>
<style></style>
src/views/displayApproval/components/display/DisplayBaseInfo.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<!-- 文物基本信息 -->
<div>
<el-card shadow="hover">
<el-descriptions title="文物基本详情" :column="1" labelClassName="label">
<el-descriptions-item
:label="item.label"
v-for="(item, index) in displayTabletitle"
:key="index"
>
<el-image
class="image"
v-if="item.prop == 'faceImagePressUrl'"
:src="info['faceImagePressUrl']"
fit="contain"
>
</el-image>
<div v-else-if="item.prop == 'imagesVo'">
<el-image
v-for="(v, i) in info['imagesVo']"
:key="i"
class="image"
:src="v.pressUrl"
fit="contain"
>
</el-image>
</div>
<div v-else-if="item.prop == 'videosVo'">
<VideoPlayer
class="video"
v-for="(v, i) in info['videosVo']"
:key="i"
:src="v.url"
/>
</div>
<div v-else-if="item.prop == 'audiosVo'">
<AudioPlayer
v-for="(v, i) in info['audiosVo']"
:key="i"
:url="v.url"
ref="AudioPlayer"
/>
</div>
<div v-else-if="item.prop == 'literatureVo'">
<el-table stripe border :data="info['literatureVo']">
<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="操作">
<template slot-scope="scope">
<el-button type='text'>预览</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-else-if="item.prop === 'intro'" v-html="info['intro']"></div>
<span v-else>{{ info[item.prop] || "无" }}</span>
</el-descriptions-item>
</el-descriptions>
</el-card>
</div>
</template>
<script>
import { displayTabletitle } from "../../config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
export default {
components: {
VideoPlayer,
AudioPlayer,
},
props: {
info: {
type: Object,
default: () => ({}),
},
},
data() {
return {
displayTabletitle,
};
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
width: 90px;
display: inline-block;
}
::v-deep .el-descriptions-item__content {
flex: 1;
}
.image {
margin-right: 20px;
width: 200px;
height: 200px;
border: 1px solid #dadada;
border-radius: 4px;
}
.video {
width: 200px;
height: 200px;
border: 1px solid #dadada;
border-radius: 4px;
}
</style>
src/views/displayApproval/components/display/DisplayRender.vue 0 → 100644
浏览文件 @ 00636e6f
<template>
<!-- 展览效果预览图 -->
<div class="container" v-if="dicts && Object.keys(displayDetail).length > 0">
<NavBar />
<NormalStyle
v-if="displayDetail.themeType == NORMAL_STYLE.value"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<ChStyle
v-if="displayDetail.themeType == CH_STYLE.value"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<RedStyle
v-if="displayDetail.themeType == RED_STYLE.value"
:displayDetail="displayDetail"
:dicts="dicts"
/>
<Footer />
</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>
src/views/displayApproval/config.js
浏览文件 @ 00636e6f
export const displayTabletitle = [{
prop: "title",
label: "标题",
columnAlign: 'center',
width: 120,
showOverFlowToolTip: true,
},
// {
// prop: "keyword",
// label: "关键词",
// columnAlign: 'center',
// showOverFlowToolTip: true,
// },
{
prop: "deptName",
label: "展览单位",
columnAlign: 'center',
prop: "keyword",
label: "关键词",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
......@@ -25,7 +21,20 @@ export const displayTabletitle = [{
},
{
prop: "faceImageUrl",
prop: "deptName",
label: "展览单位",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "regionName",
label: "所在地区",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "faceImagePressUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
......@@ -33,16 +42,46 @@ export const displayTabletitle = [{
},
{
prop: "checkStatus",
label: "状态",
prop: "intro",
label: "展览介绍",
columnAlign: 'center',
},
{
prop: "literatureVo",
label: "关联文献",
columnAlign: 'center',
width:100
},
{
prop: "themeType",
label: "模板主题",
columnAlign: 'center',
},
{
prop: "checkRemark",
prop: "remark",
label: "备注",
columnAlign: 'center',
showOverFlowToolTip: true,
showOverFlowToolTip: true,
},
{
prop: "imagesVo",
label: "展览图片",
columnAlign: 'center',
isImages: true
},
{
prop: "audiosVo",
label: "展览音频",
columnAlign: 'center',
isAudios: true
},
{
prop: "videosVo",
label: "展览视频",
columnAlign: 'center',
isVideos: true
},
]
export const operates = {
......@@ -54,16 +93,29 @@ export const operates = {
columnAlign: "center",
}
export const approvalOperations = [{
type: 'approval',
title: '审批'
}
]
// export const approvalOperations = [
// {
// type: 'approval',
// title: '审批'
// }
// ]
export const viewOperations = [{
type: 'view',
title: '查看详情'
}
// export const viewOperations = [{
// type: 'view',
// title: '查看详情'
// }
// ]
export const operations = [
{
type: 'view',
title: '查看详情'
},
{
type: 'approval',
title: '审批'
}
]
......@@ -75,38 +127,38 @@ export const crTabletitle = [{
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "level",
// label: "文物级别",
// columnAlign: 'center',
// },
// {
// prop: "detailSize",
// label: "尺寸",
// columnAlign: 'center',
// },
// {
// prop: "textureType",
// label: "质地",
// columnAlign: 'center',
// },
// {
// prop: "type",
// label: "类别",
// width: 100,
// columnAlign: 'center',
// isCulturalRelicType:true
// },
// {
// prop: "createId",
// label: "创建人",
// columnAlign: 'center',
// },
// {
// prop: "createTime",
// label: "创建时间",
// columnAlign: 'center',
// },
{
prop: "levelLabel",
label: "文物级别",
columnAlign: 'center',
},
{
prop: "detailSize",
label: "尺寸",
columnAlign: 'center',
},
{
prop: "textureTypeLabel",
label: "质地",
columnAlign: 'center',
},
{
prop: "typeLabel",
label: "类别",
width: 100,
columnAlign: 'center',
isCulturalRelicType:true
},
{
prop: "createId",
label: "创建人",
columnAlign: 'center',
},
{
prop: "createTime",
label: "创建时间",
columnAlign: 'center',
},
{
prop: "deptName",
......@@ -120,13 +172,13 @@ export const crTabletitle = [{
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "intro",
// label: "馆藏介绍",
// columnAlign: 'center',
// showOverFlowToolTip: true,
// width: 120,
// },
{
prop: "intro",
label: "馆藏介绍",
columnAlign: 'center',
showOverFlowToolTip: true,
width: 120,
},
{
prop: "themeWord",
......@@ -135,13 +187,37 @@ export const crTabletitle = [{
showOverFlowToolTip: true,
},
{
prop: "faceImageUrl",
prop: "faceImagePressUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "status",
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: "statusLabel",
label: "上下架状态",
width: 100,
columnAlign: 'center',
......@@ -187,4 +263,48 @@ export const importOperates = {
export const importOperations = [{
type: 'delete',
title: '删除记录及文物'
},]
\ No newline at end of file
},]
export const approvleTableTitle = [
{
prop: "title",
label: "标题",
columnAlign: 'center',
},
{
prop: "deptName",
label: "所属博物馆",
columnAlign: 'center',
},
{
prop: "sourceType",
label: "资源类型",
columnAlign: 'center',
},
{
prop: "addWay",
label: "添加方式",
columnAlign: 'center',
},
{
prop: "status",
label: "审核状态",
columnAlign: 'center',
isStatus: true
},
{
prop: "createUser",
label: "创建人",
columnAlign: 'center',
},
{
prop: "createTime",
label: "创建时间",
columnAlign: 'center',
},
{
prop: "remark",
label: "备注",
columnAlign: 'center',
},
]
\ No newline at end of file
src/views/displayApproval/index.vue
浏览文件 @ 00636e6f
......@@ -2,181 +2,150 @@
<div class="app-container">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<!-- <el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
发布</el-button
>
</div> -->
</div>
<el-tabs v-model="activeName" type="border-card" ref="tabs">
<el-tab-pane :label="item.label" :name="item.name" v-for="(item, tabIndex) in tabs" :key="tabIndex">
<TablePage :data="dataList[tabIndex].records" :tableTitle="tableTitle" :operates="tableOperates" v-loading="loading">
<template v-slot:checkStatus="data">
<!-- {{ data.scope.checkStatus }} -->
<el-tag type="primary" v-if="data.scope.checkStatus == 0">
待审核
</el-tag>
<el-tag type="success" v-if="data.scope.checkStatus == 1">
已通过
</el-tag>
<el-tag type="danger" v-if="data.scope.checkStatus == -2">
已驳回
</el-tag>
</template>
<template v-slot:displayType="data">
{{ dicts.displayType[data.scope.type] }}
</template>
<template v-slot:faceImageUrl="data">
<img :src="
$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
" alt="暂无图片" v-if="$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)"
style="cursor: pointer" width="100px" @click="handelPreviewImages(data.scope.faceImageUrl)" />
</template>
<template v-slot:operates="scope">
<TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
</TableOperation>
</template>
</TablePage>
<el-pagination style="margin: 16px 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="Number(dataList[currentTabIndex].current)" :page-sizes="[10, 20, 50, 100]"
:page-size="Number(dataList[currentTabIndex].size)" layout="total, sizes, prev, pager, next, jumper"
:total="Number(dataList[currentTabIndex].total)" class="pagination">
</el-pagination>
</el-tab-pane>
</el-tabs>
<PreviewDisplayDialog v-if="Object.keys(curPreviewObj).length > 0"
:visible="previewDialogVisible"
:displayDetail="curPreviewObj"
:loading="previewLoading"
@handleClose="handleClosePreviewDialog"
@refresh="loadData" />
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
<TablePage
:data="dataList.records"
:tableTitle="approvleTableTitle"
:operates="operates"
v-loading="loading"
>
<template v-slot:status="data">
<el-tag type="primary" v-if="data.scope.status == 0"> 待审核 </el-tag>
<el-tag type="success" v-if="data.scope.status == 1"> 已通过 </el-tag>
<el-tag type="danger" v-if="data.scope.status == -2"> 已驳回 </el-tag>
</template>
<!-- <template v-slot:displayType="data">
{{ dicts.displayType[data.scope.type] }}
</template> -->
<template v-slot:operates="scope">
<TableOperation
:operations="operations"
:rawData="scope.scope.row"
@handleOperation="handleOperation"
>
</TableOperation>
</template>
</TablePage>
<el-pagination
style="margin: 16px 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(dataList.current)"
:page-sizes="[10, 20, 50, 100]"
:page-size="Number(dataList.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(dataList.total)"
class="pagination"
>
</el-pagination>
<PreviewDialog
ref="PreviewDialog"
:aprrovalInfo="aprrovalInfo"
:prviewType="prviewType"
:dicts="dicts"
@handleClose="handleClosePreviewDialog"
@refresh="loadData"
/>
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import PreviewDisplayDialog from './components/PreviewDisplayDialog.vue'
import { displayTabletitle, operates, approvalOperations, viewOperations } from "./config";
import {
getListPer,
getDisplayCheckById,
} from "@/api/display";
import PreviewDialog from "./components/PreviewDialog.vue";
import { approvleTableTitle, operates, operations } from "./config";
import { getListPer } from "@/api/display";
import SearchBar from "@/components/SearchBar";
import { mapGetters } from "vuex";
import { approvalData } from "./mock";
export default {
components: {
TablePage,
TableOperation,
SearchBar,
PreviewDisplayDialog,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
PreviewDialog,
},
data() {
let that = this;
return {
dataList: [
dataList: {
record: [],
size: 10,
current: 1,
total: 0,
},
searchConfig: [
{
record: [],
size: 10,
current: 1,
total: 0,
prop: "title",
type: "input",
label: "标题",
},
{
record: [],
size: 10,
current: 1,
total: 0,
prop: "type",
type: "select",
label: "类别",
selectOptions: [
{
label: "文物",
value: "1",
},
{
label: "展览",
value: "2",
},
],
},
{
record: [],
size: 10,
current: 1,
total: 0,
}
],
searchConfig: [
{
prop: "title",
type: "input",
label: "展览名称",
prop: "status",
type: "select",
label: "审核状态",
selectOptions: [
{
label: "已审核",
value: "true",
},
{
label: "待审核",
value: "false",
},
],
},
],
loading: false,
imgViewerVisible: false,
previewDialogVisible: false,
curPreviewObj: {}, //当前预览的对象
currentPageIds: [], //当前的id数组，用于给详情页切换用
tabs: [{
name: '0',
label: '待审核'
}, {
name: '1',
label: '已通过'
},
{
name: '-2',
label: '已驳回'
}
],
activeName: '0',
currentTabIndex: 0,
dialogLoading:false
previewDialogVisible: false, //预览可见性
aprrovalInfo: {}, //审核的相关信息
prviewType: "view", //预览类型，view-查看详情，approval-审批
operates,
operations,
approvleTableTitle,
};
},
computed: {
...mapGetters(["dicts"]),
tableTitle() {
return displayTabletitle;
},
tableOperates() {
return operates;
},
tableOperations() {
if (this.activeName == '0') {
return approvalOperations
} else {
return viewOperations
}
}
},
watch: {
activeName(value) {
this.currentTabIndex = Number(Math.abs(value)) //当前索引正好对应状态的绝对值
this.loadData()
}
},
async created() {
await this.$store.dispatch("dict/getDictList", ["displayType"]);
this.loadData();
},
methods: {
async search(form) {
var params = {
page: 1,
limit: this.dataList[this.currentTabIndex].size,
...form,
};
if (params.status == "") {
delete params.status;
}
let res = await getListPer(params);
if (res.code == 0) {
this.$set(this.dataList, this.currentTabIndex, res.data)
// this.dataList[this.currentTabIndex] = res.data
// this.currentPageIds = this.dataList[this.currentTabIndex].records.map((item) => {
// return item.exhibitionId;
// });
}
this.loadData();
// var params = {
// page: 1,
// limit: this.dataList[this.currentTabIndex].size,
// ...form,
// };
// if (params.status == "") {
// delete params.status;
// }
// let res = await getListPer(params);
// if (res.code == 0) {
// this.$set(this.dataList, this.currentTabIndex, res.data);
// // this.dataList[this.currentTabIndex] = res.data
// // this.currentPageIds = this.dataList[this.currentTabIndex].records.map((item) => {
// // return item.exhibitionId;
// // });
// }
},
reset() {
this.loadData();
......@@ -184,35 +153,26 @@ export default {
// 加载表格数据
async loadData() {
this.loading = true
var params = {
page: this.dataList[this.currentTabIndex].current,
limit: this.dataList[this.currentTabIndex].size,
checkStatus: Number(this.activeName)
};
let res = await getListPer(params);
if (res.code == 0) {
this.$set(this.dataList, this.currentTabIndex, res.data)
// this.currentPageIds = this.dataList[this.currentTabIndex].records.map((item) => {
// return item.exhibitionId;
// });
}
this.loading = false
this.loading = true;
this.dataList = approvalData;
// var params = {
// page: this.dataList.current,
// limit: this.dataList.size,
// checkStatus: Number(this.activeName),
// };
// let res = await getListPer(params);
// if (res.code == 0) {
// this.$set(this.dataList, this.currentTabIndex, res.data);
// }
this.loading = false;
},
async handleOperation(value, row) {
console.log(value, row);
// debugger
if (value.type == 'approval' || value.type == 'view') {
this.previewLoading = true
if (row) {
this.previewDialogVisible = true;
let res = await getDisplayCheckById({ exhibitionId: row.exhibitionId });
this.curPreviewObj = res.data;
this.previewLoading = false;
}
}
const { type } = value;
this.prviewType = type;
this.aprrovalInfo = row;
this.$refs.PreviewDialog.visible = true;
},
// 多选
......@@ -256,7 +216,7 @@ export default {
handleClosePreviewDialog() {
this.previewDialogVisible = false;
}
},
},
};
</script>
......@@ -283,4 +243,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
src/views/displayApproval/mock.js
浏览文件 @ 00636e6f
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论