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

<template>
  <div class="app-container" v-loading="loading">
    <div class="div-box">
      <div style="text-align: center">
        <span class="div-title"> {{ $route.query.title }}</span>
      </div>
      <div
        v-if="listData.infos && listData.infos.length"
        @click="handleAdd"
        class="div-add1"
      >
        <i class="el-icon-circle-plus-outline"></i>
        新增一级会议标题
      </div>
      <div v-else @click="handleAdd" class="div-add">
        <i class="el-icon-circle-plus-outline"></i>
        新增一级会议标题
      </div>
      <div class="div-ul">
        <MeetingList
          @handleRefresh="handleRefresh"
          :infos="listData.infos"
        ></MeetingList>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="'新增'"
      :visible.sync="open"
      width="780px"
      append-to-body
      class="popup"
    >
      <el-form
        class="formStep"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="类型" prop="type">
          <el-select
            v-model="form.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="form.type == 'title'">
          <el-input v-model="form.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          label="内容"
          prop="content"
          v-if="form.type == 'richtext'"
        >
          <el-input
            v-model="form.richtext"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="content" v-if="form.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="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  meetingDetails,
  meetingDetailsAdd,
  listUser,
  meetingAdd,
} from "@/api/meeting";
import MeetingList from "../components/MeetingList.vue";
import { getToken } from "@/utils/auth";
export default {
  name: "Notice",
  dicts: ["sys_notice_status", "sys_notice_type"],
  components: { MeetingList },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
        deptId: localStorage.getItem("hospitalId"),
      },
      uploadFileUrl:
        process.env.VUE_APP_API_QZURL + "/datangMeeting/common/upload", // 上传文件服务器地址
      fileList: [],
      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() {
    console.log("process.env.VUE_APP_API_QZURL", process.env.VUE_APP_IMG_URL);

    this.getList();
  },
  watch: {
    // 删除后重新获取列表
    "$store.state.meetingOpen"(newVal, oldVal) {
      this.open = newVal;
    },
    // 删除后重新获取列表
    "$store.state.metinQuery"(newVal, oldVal) {
      this.getList();
    },
    // 数据变化处理数据
    "$store.state.meetingItme"(newVal, oldVal) {
      this.fileList = [];
      if (newVal.type == "file-pdf") {
        this.fileList = [
          {
            name: newVal.filePdfName,
            url: newVal.filePdfUrl,
          },
        ];
      }
      this.form = newVal;
    },
  },

  methods: {
    handleCancel() {
      this.$store.commit("seteMetingOpen", false);
    },
    // 类型切换
    handleChange(_item) {
      this.form.title = "";
      this.form.richtext = "";
      this.form.filePdfName = "";
      this.form.filePdfUrl = "";
    },
    // 上传成功回 - pdg
    handleUploadPdfAdd1(res) {
      if (res.code == 200) {
        this.form.filePdfName = res.originalFilename;
        this.form.filePdfUrl =
          process.env.VUE_APP_API_QZURL + "/datangMeeting" + res.fileName;
        console.log("this.form", this.form);
        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: {
          meetingId: this.$route.query.id,
        },
      }).then((res) => {
        this.loading = false;
        this.listData = res.data;
      });
    },
    /** 详情按钮操作 */
    handleDetails(row) {
      this.infosOpen = true;
      this.title = "会议详情";
      this.$router.push({ path: "/meeting/details", query: { id: row.id } });
    },
    handleAdd() {
      this.$store.commit("seteMetingOpen", true);
      this.form = {
        parentId: 0,
        meetingId: this.$route.query.id,
        type: "title",
        title: "",
        richtext: "",
        filePdfName: "",
        filePdfUrl: "",
      };
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          meetingDetailsAdd(this.form).then((response) => {
            this.$modal.msgSuccess("操作成功");
            this.$store.commit("seteMetingOpen", 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;
}
.div-add1 {
  width: 100%;
  font-size: 20px;
  color: #1890ff;
  border: 2px dashed #1890ff;
  text-align: center;
  line-height: 50px;
  margin-bottom: 16px;
}

.div-add {
  width: 100%;
  height: 300px;
  color: #1890ff;
  font-size: 30px;
  line-height: 300px;
  border: 2px dashed #1890ff;
  text-align: center;
}
.div-title {
  display: inline-block;
  border: 1px solid #000;
  padding: 0 14px;
  margin-bottom: 16px;
  line-height: 50px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: bold;
}
</style>