会议详情

大唐会议后台/src/api/meeting.js

@@ -40,6 +40,14 @@ export function meetingDetailsAdd(data) {
     data: data,
   });
 }
+// 删除会议详情
+export function meetingDetailsDel(data) {
+  return request({
+    url: "/admin/meeting/deleteMeetingInfo",
+    method: "post",
+    data: data,
+  });
+}
 // 查询用户列表
 export function listUser(query) {
   return request({

大唐会议后台/src/store/index.js

@@ -1,25 +1,41 @@
-import Vue from 'vue'
+import Vue from "vue";
-import Vuex from 'vuex'
+import Vuex from "vuex";
-import app from './modules/app'
+import app from "./modules/app";
-import dict from './modules/dict'
+import dict from "./modules/dict";
-import user from './modules/user'
+import user from "./modules/user";
-import tagsView from './modules/tagsView'
+import tagsView from "./modules/tagsView";
-import permission from './modules/permission'
+import permission from "./modules/permission";
-import settings from './modules/settings'
+import settings from "./modules/settings";
-import getters from './getters'
+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;

大唐会议后台/src/views/components/MeetingList.vue

@@ -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>

大唐会议后台/src/views/meeting/index.vue

@@ -261,7 +261,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm1">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="infosOpen = false">取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -392,13 +392,10 @@ export default {
     handleDetails(row) {
       this.infosOpen = true;
       this.title = "会议详情";
-      this.infosForm = {
+      this.$router.push({
-        id: row.id,
+        path: "/meetingDetails/index",
-        title: row.title,
+        query: { id: row.id },
-        infos: [
+      });
-          { type: "", title: "", richtext: "", "file-pdf": {}, infos: [] },
-        ],
-      };
     },
     submitForm1() {
       console.log("infosForm", this.infosForm);

大唐会议后台/src/views/meeting/meetingList.vue

@@ -60,7 +60,7 @@
       </div>
     </div>
     <div style="display: flex">
-      <div @click="handleInfoAdd1">新增1</div>
+      <div @click="handleInfoAdd1">新增</div>
     </div>
   </div>
 </template>

大唐会议后台/src/views/meetingDetails/index.vue

@@ -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>