You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
7.0 KiB
289 lines
7.0 KiB
<template>
|
|
<div>
|
|
<div class="div-li" v-for="(item, index) in infos" :key="index">
|
|
<div class="li-item" v-if="item.type == 'title'">
|
|
<div class="li-title">
|
|
{{ item.title }}
|
|
<!-- <span style="display: inline-block"> -->
|
|
<span class="div-but" @click.stop="handleInfoAdd(item)">
|
|
<i class="el-icon-circle-plus-outline"></i> 新增子级
|
|
</span>
|
|
<span class="div-but" @click.stop="handleInfoUpd(item)">
|
|
<i class="el-icon-edit"></i> 修改
|
|
</span>
|
|
<span class="div-but" @click.stop="handleInfoDel(item, index)">
|
|
<i class="el-icon-remove-outline"></i> 删除
|
|
</span>
|
|
<!-- </span> -->
|
|
</div>
|
|
</div>
|
|
<div class="li-item" v-if="item.type == 'file-pdf'">
|
|
<div class="li-pdf" @click.stop="handlePdf(item)">
|
|
{{ item.filePdfName }}
|
|
<span class="div-but" @click.stop="handleInfoAdd(item)">
|
|
<i class="el-icon-circle-plus-outline"></i> 新增子级
|
|
</span>
|
|
<span class="div-but" @click.stop="handleInfoUpd(item)">
|
|
<i class="el-icon-edit"></i> 修改
|
|
</span>
|
|
<span class="div-but" @click.stop="handleInfoDel(item, index)">
|
|
<i class="el-icon-remove-outline"></i> 删除
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="div-pdf" v-if="pdfId == item.id">
|
|
<div class="tools">
|
|
<button type="submit" @click.stop="prePage" class="mr10">
|
|
上一页
|
|
</button>
|
|
<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
|
|
<button type="submit" @click.stop="nextPage" class="mr10">
|
|
下一页
|
|
</button>
|
|
<button
|
|
style="max-width: 100px"
|
|
type="submit"
|
|
@click.stop="pdfId = ''"
|
|
>
|
|
关闭
|
|
</button>
|
|
</div>
|
|
<pdf
|
|
ref="pdf"
|
|
:page="pageNum"
|
|
@progress="loadedRatio = $event"
|
|
@page-loaded="pageLoaded($event)"
|
|
@num-pages="pageTotalNum = $event"
|
|
@error="pdfError($event)"
|
|
@link-clicked="page = $event"
|
|
:src="item.filePdfUrl"
|
|
>
|
|
</pdf>
|
|
</div>
|
|
<div class="li-item li-item1" v-if="item.type == 'richtext'">
|
|
<div class="li-text">
|
|
{{ item.richtext }}
|
|
</div>
|
|
<div style="flex-shrink: 0; text-align: center">
|
|
<span class="div-but" @click.stop="handleInfoAdd(item)">
|
|
<i class="el-icon-circle-plus-outline"></i> 新增子级
|
|
</span>
|
|
<div>
|
|
<span class="div-but" @click.stop="handleInfoUpd(item)">
|
|
<i class="el-icon-edit"></i> 修改
|
|
</span>
|
|
<span class="div-but" @click.stop="handleInfoDel(item, index)">
|
|
<i class="el-icon-remove-outline"></i> 删除
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="div-ul" v-if="item.infos && item.infos.length">
|
|
<MeetingList :infos="item.infos"></MeetingList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { meetingDetailsDel } from "@/api/meeting";
|
|
import pdf from "vue-pdf";
|
|
export default {
|
|
name: "MeetingList",
|
|
props: ["infos"],
|
|
components: {
|
|
pdf,
|
|
},
|
|
data() {
|
|
return {
|
|
url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
|
|
pageNum: 1,
|
|
pageTotalNum: 1,
|
|
// 加载进度
|
|
loadedRatio: 0,
|
|
curPageNum: 0,
|
|
pdfId: "",
|
|
open: false,
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
title: [
|
|
{ required: true, message: "会议标题不能为空", trigger: "blur" },
|
|
],
|
|
type: [{ required: true, message: "类型不能为空", trigger: "change" }],
|
|
|
|
place: [
|
|
{ required: true, message: "会议地点不能为空", trigger: "blur" },
|
|
],
|
|
users: [{ required: true, message: "参与者不能为空", trigger: "blur" }],
|
|
},
|
|
};
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
handleInfoAdd(_item, _type) {
|
|
this.$store.commit("setMeetingItme", {
|
|
meetingId: this.$route.query.id,
|
|
parentId: _item.id,
|
|
type: "title",
|
|
title: "",
|
|
richtext: "",
|
|
"file-pdf": {},
|
|
});
|
|
this.$store.commit("seteMetingOpen", true);
|
|
},
|
|
handleInfoUpd(_item) {
|
|
console.log("_item", _item);
|
|
this.$store.commit("setMeetingItme", {
|
|
..._item,
|
|
});
|
|
this.$store.commit("seteMetingOpen", true);
|
|
},
|
|
handleInfoDel(_item) {
|
|
meetingDetailsDel({ idList: [_item.id] }).then((res) => {
|
|
this.$modal.msgSuccess("操作成功");
|
|
this.$store.commit("seteMetinQuery");
|
|
});
|
|
},
|
|
|
|
// 上一页函数，
|
|
prePage() {
|
|
var page = this.pageNum;
|
|
page = page > 1 ? page - 1 : this.pageTotalNum;
|
|
this.pageNum = page;
|
|
},
|
|
// 下一页函数
|
|
nextPage() {
|
|
var page = this.pageNum;
|
|
page = page < this.pageTotalNum ? page + 1 : 1;
|
|
this.pageNum = page;
|
|
},
|
|
// 页面加载回调函数，其中e为当前页数
|
|
pageLoaded(e) {
|
|
this.curPageNum = e;
|
|
},
|
|
// 其他的一些回调函数。
|
|
pdfError(error) {
|
|
console.error(error);
|
|
},
|
|
// 显示pdf
|
|
handlePdf(_item) {
|
|
this.pdfId = _item.id;
|
|
},
|
|
},
|
|
created() {},
|
|
// 页面显示调用接口
|
|
onLoad() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.div-pdf {
|
|
width: 50%;
|
|
margin: 16px 0;
|
|
padding: 16px;
|
|
border: 1px solid #999;
|
|
.tools {
|
|
display: flex;
|
|
button {
|
|
font-size: 18px;
|
|
line-height: 44px;
|
|
height: 44px;
|
|
flex: 1;
|
|
}
|
|
.page {
|
|
line-height: 44px;
|
|
height: 44px;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pathsName {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pdfBox .el-button {
|
|
background: rgba(255, 255, 255, 0);
|
|
border: none;
|
|
/* width: 30px; */
|
|
}
|
|
|
|
.pdfBox >>> .el-icon-arrow-left,
|
|
.pdfBox >>> .el-icon-arrow-right {
|
|
font-size: 18px;
|
|
color: #000;
|
|
}
|
|
|
|
.pdfBox .page {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.pdfBox .el-button-group {
|
|
width: 100%;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.pdfBox {
|
|
padding-bottom: 20px;
|
|
margin-top: 20px;
|
|
background: #fff;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.contLeft-pane >>> .el-form-item__label {
|
|
text-align: right;
|
|
margin-right: 10px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.contLeft-pane >>> .el-form-item--medium .el-form-item__content {
|
|
flex: 1;
|
|
}
|
|
|
|
.li-item {
|
|
display: flex;
|
|
align-items: center;
|
|
//justify-content: space-between;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
//background: pink;
|
|
|
|
uni-div {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
.li-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
}
|
|
.li-pdf {
|
|
width: 100%;
|
|
// justify-content: space-between;
|
|
}
|
|
.li-item-cz {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
div {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
.div-but {
|
|
color: #1890ff;
|
|
margin-left: 10px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.li-item1 {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
<style></style>
|
|
|