1747191978@qq.com
4 months ago
6 changed files with 564 additions and 23 deletions
@ -1,25 +1,41 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
import app from './modules/app' |
|||
import dict from './modules/dict' |
|||
import user from './modules/user' |
|||
import tagsView from './modules/tagsView' |
|||
import permission from './modules/permission' |
|||
import settings from './modules/settings' |
|||
import getters from './getters' |
|||
import Vue from "vue"; |
|||
import Vuex from "vuex"; |
|||
import app from "./modules/app"; |
|||
import dict from "./modules/dict"; |
|||
import user from "./modules/user"; |
|||
import tagsView from "./modules/tagsView"; |
|||
import permission from "./modules/permission"; |
|||
import settings from "./modules/settings"; |
|||
import getters from "./getters"; |
|||
|
|||
Vue.use(Vuex) |
|||
Vue.use(Vuex); |
|||
|
|||
const store = new Vuex.Store({ |
|||
state: { |
|||
meetingItme: {}, |
|||
meetingOpen: false, |
|||
metinQuery: false, |
|||
}, |
|||
mutations: { |
|||
setMeetingItme(state, getters) { |
|||
state.meetingItme = getters; |
|||
}, |
|||
seteMetingOpen(state, getters) { |
|||
state.meetingOpen = getters; |
|||
}, |
|||
seteMetinQuery(state, getters) { |
|||
state.metinQuery = !state.metinQuery; |
|||
}, |
|||
}, |
|||
modules: { |
|||
app, |
|||
dict, |
|||
user, |
|||
tagsView, |
|||
permission, |
|||
settings |
|||
settings, |
|||
}, |
|||
getters |
|||
}) |
|||
getters, |
|||
}); |
|||
|
|||
export default store |
|||
export default store; |
|||
|
|||
@ -0,0 +1,255 @@ |
|||
<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 }}</div> |
|||
<div class="li-item-cz"> |
|||
<div @click="handleInfoUpd(item)">修改</div> |
|||
<div @click="handleInfoDel(item, index)">删除</div> |
|||
</div> |
|||
</div> |
|||
<div class="li-item" v-if="item.type == 'file-pdf'"> |
|||
<div class="li-pdf" @click="handlePdf(item)"> |
|||
{{ item.filePdfName }} |
|||
<div class="li-item-cz"> |
|||
<div @click="handleInfoUpd(item)">修改</div> |
|||
<div @click="handleInfoDel(item, index)">删除</div> |
|||
</div> |
|||
</div> |
|||
<div class="div-pdf" v-if="pdfId == item.id"> |
|||
<div class="tools"> |
|||
<button |
|||
:theme="'default'" |
|||
type="submit" |
|||
:title="'基础按钮'" |
|||
@click.stop="prePage" |
|||
class="mr10" |
|||
> |
|||
上一页 |
|||
</button> |
|||
<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div> |
|||
<button |
|||
:theme="'default'" |
|||
type="submit" |
|||
:title="'基础按钮'" |
|||
@click.stop="nextPage" |
|||
class="mr10" |
|||
> |
|||
下一页 |
|||
</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> |
|||
<div class="li-item" v-if="item.type == 'richtext'"> |
|||
<div class="li-text">{{ item.richtext }}</div> |
|||
<div class="li-item-cz"> |
|||
<div @click="handleInfoUpd(item)">修改</div> |
|||
<div @click="handleInfoDel(item, index)">删除</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="div-ul" |
|||
style="padding: 16px 0 10px 10px; border: 1px solid #000" |
|||
v-if="item.infos && item.infos.length" |
|||
> |
|||
<MeetingList :infos="item.infos"></MeetingList> |
|||
</div> |
|||
<div style="display: flex; justify-content: flex-end"> |
|||
<div @click="handleInfoAdd(item)">新增</div> |
|||
</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 { |
|||
margin: 16px 0; |
|||
padding: 16px; |
|||
border: 1px solid #999; |
|||
.tools { |
|||
display: flex; |
|||
uni-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; |
|||
} |
|||
|
|||
.div-pdf { |
|||
width: 70%; |
|||
} |
|||
|
|||
.li-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
background: pink; |
|||
|
|||
uni-div { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
} |
|||
|
|||
.li-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 30px; |
|||
} |
|||
.li-item-cz { |
|||
display: flex; |
|||
div { |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style></style> |
|||
@ -0,0 +1,265 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="loading"> |
|||
<div class="div-box"> |
|||
<span class="div-title"> {{ listData.title }}</span> |
|||
<div class="div-ul"> |
|||
<MeetingList |
|||
@handleRefresh="handleRefresh" |
|||
:infos="listData.infos" |
|||
></MeetingList> |
|||
</div> |
|||
</div> |
|||
<!-- 新增弹窗 --> |
|||
<el-dialog |
|||
:title="'新增'" |
|||
:visible.sync="$store.state.meetingOpen" |
|||
width="780px" |
|||
append-to-body |
|||
class="popup" |
|||
> |
|||
<el-form |
|||
class="formStep" |
|||
ref="form" |
|||
:model="$store.state.meetingItme" |
|||
:rules="rules" |
|||
label-width="80px" |
|||
> |
|||
<el-form-item label="类型" prop="type"> |
|||
<el-select |
|||
v-model="$store.state.meetingItme.type" |
|||
placeholder="请选择" |
|||
@change="handleChange" |
|||
> |
|||
<el-option label="标题" value="title"> </el-option> |
|||
<el-option label="文本" value="richtext"> </el-option> |
|||
<el-option label="pdf" value="file-pdf"> </el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="标题" |
|||
prop="content" |
|||
v-if="$store.state.meetingItme.type == 'title'" |
|||
> |
|||
<el-input |
|||
v-model="$store.state.meetingItme.title" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="内容" |
|||
prop="content" |
|||
v-if="$store.state.meetingItme.type == 'richtext'" |
|||
> |
|||
<el-input |
|||
v-model="$store.state.meetingItme.richtext" |
|||
type="textarea" |
|||
:rows="2" |
|||
placeholder="请输入内容" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="" |
|||
prop="content" |
|||
v-if="$store.state.meetingItme.type == 'file-pdf'" |
|||
> |
|||
<div> |
|||
<el-upload |
|||
:limit="1" |
|||
class="avatar-uploader wj-uploader" |
|||
:headers="headers" |
|||
:action="uploadFileUrl" |
|||
accept=".pdf" |
|||
:before-upload="handleBeforePdfUpload1" |
|||
:on-success="handleUploadPdfAdd1" |
|||
:file-list="fileList" |
|||
:show-file-list="true" |
|||
> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text"> |
|||
将文件拖到此处，或 |
|||
<em>点击上传</em> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="open = false">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
meetingDetails, |
|||
meetingDetailsAdd, |
|||
listUser, |
|||
meetingAdd, |
|||
} from "@/api/meeting"; |
|||
import MeetingList from "../components/MeetingList.vue"; |
|||
export default { |
|||
name: "Notice", |
|||
dicts: ["sys_notice_status", "sys_notice_type"], |
|||
components: { MeetingList }, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
listData: [], |
|||
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" }], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
"$store.state.metinQuery"(newVal, oldVal) { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
// 类型切换 |
|||
handleChange(_item) { |
|||
form.title = ""; |
|||
form.richtext = ""; |
|||
form["file-pdf"] = {}; |
|||
}, |
|||
// 上传成功回 - pdg |
|||
handleUploadPdfAdd1(res) { |
|||
if (res.code == 200) { |
|||
this.itemData["file-pdf"].name = res.originalFilename; |
|||
this.itemData["file-pdf"].link = |
|||
process.env.VUE_APP_API_QZURL + res.fileName; |
|||
console.log(" this.itemData", this.itemData); |
|||
this.$modal.msgSuccess("上传成功"); |
|||
} else { |
|||
this.$message.error(res.msg || "上传失败"); |
|||
this.fileList = []; |
|||
} |
|||
}, |
|||
// 上传前校检格式和大小 - 图片 |
|||
handleBeforeUpload1(file) { |
|||
const isLt2M = file.size / 1024 / 1024 < 100; |
|||
// 校检文件大小 |
|||
if (!isLt2M) { |
|||
this.$message.error("上传文件大小不能超过 100MB!"); |
|||
} |
|||
return isLt2M; |
|||
}, |
|||
// 上传前校检格式和大小 - 文件 |
|||
handleBeforePdfUpload1(file) { |
|||
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1); |
|||
const whiteList = ["pdf"]; |
|||
if (whiteList.indexOf(fileSuffix) === -1) { |
|||
this.$message.error("上传文件只能是.pdf格式!"); |
|||
return false; |
|||
} |
|||
}, |
|||
handleRefresh() { |
|||
this.getList(); |
|||
}, |
|||
/** 查询公告列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
meetingDetails({ |
|||
param: { |
|||
id: this.$route.query.id, |
|||
}, |
|||
}).then((res) => { |
|||
this.loading = false; |
|||
this.listData = res.data; |
|||
}); |
|||
}, |
|||
|
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "新增会议"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.open = true; |
|||
this.title = "修改会议"; |
|||
this.form = JSON.parse(JSON.stringify(row)); |
|||
}, |
|||
/** 详情按钮操作 */ |
|||
handleDetails(row) { |
|||
this.infosOpen = true; |
|||
this.title = "会议详情"; |
|||
this.$router.push({ path: "/meeting/details", query: { id: row.id } }); |
|||
}, |
|||
submitForm1() { |
|||
console.log("infosForm", this.infosForm); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function () { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
meetingDetailsAdd(this.$store.state.meetingItme).then((response) => { |
|||
this.$modal.msgSuccess("操作成功"); |
|||
this.$store.commit("seteMetingOpen", false); |
|||
this.getList(); |
|||
}); |
|||
// if (this.form.id != undefined) { |
|||
|
|||
// } else { |
|||
// meetingAdd(this.form).then((response) => { |
|||
// this.$modal.msgSuccess("新增成功"); |
|||
// this.open = false; |
|||
// this.getList(); |
|||
// }); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
let idList = []; |
|||
if (row.id) { |
|||
idList = [row.id]; |
|||
} else { |
|||
idList = this.ids; |
|||
} |
|||
|
|||
this.$modal |
|||
.confirm("是否确认删除当前选择的数据？") |
|||
.then(function () { |
|||
return meetingDel({ idList: idList }); |
|||
}) |
|||
.then(() => { |
|||
this.getList(); |
|||
this.$modal.msgSuccess("删除成功"); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped src="@/assets/styles/common.css"></style> |
|||
<style scoped> |
|||
.div-ul { |
|||
text-align: left; |
|||
margin-bottom: 16px; |
|||
} |
|||
.div-li { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue