zhbsq-vue-web/src/views/JOINTCONFERENCE/callback.vue

<template>
  <div class="cmain">
    <div class="detail_item">
      <div class="title">标题：</div>
      <p>{{ form.conference.conferenceTitle }}</p>
    </div>
    <div class="detail_item content">
      <div class="title">内容：</div>
      <span v-html="form.conference.conferenceContent"></span>
    </div>

    <div class="detail_item">
      <div class="title">回 复：</div>
      <textarea
        v-model="queryData.reply"
        style="width: 60%; height: 200px"
      ></textarea>
    </div>

    <div class="detail_item">
      <div class="title">附 件：</div>
      <el-upload
        class="upload-demo"
        ref="upload"
        :headers="{
          Authorization: 'Bearer ' + token,
        }"
        accept=".doc,.docx,.xls,.xlsx"
        name="file"
        list-type="doc/docx/xls/xlsx"
        :action="ip + '/common/upload'"
        :on-change="handleSelect"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="beforeFileUpload"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <!-- <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        > -->
        <div slot="tip" class="el-upload__tip">
          只能上传 doc/docx/xls/xlsx 文件
        </div>
      </el-upload>
    </div>

    <div class="mfooter">
      <el-button type="primary" @click="submitUpload">回 复</el-button>
      <el-button @click="$layer.close(layerid)">返 回</el-button>
    </div>
  </div>
</template>

<script>
import {
  getAttendMeetingDetail,
  setMeetingReply,
} from "@/api/portal/JOINTCONFERENCE/JOINTCONFERENCE";
export default {
  data() {
    return {
      form: {
        conference: {},
        reply: [],
      },
      fileList: [],

      fileUplodList: [],

      queryData: {
        conferenceId: "",
        reply: "",
        attachment: "",
      },
      imgList: [],

      ip: null,
      token: null,
    };
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
    },
  },
  created() {
    this.token = this.$store.state.user.token;
    this.ip = process.env.VUE_APP_BASE_IP;
    if (this.param.id) {
      getAttendMeetingDetail(this.param.id).then((response) => {
        this.form = response.data;
        console.log(this.form);
      });
    }
  },
  methods: {
    handleSelect(file, list) {
      this.fileList = list;
    },
    handleRemove(file, list) {},
    handleSuccess(response, file, fileList) {
      this.imgList = [];
      fileList.forEach((i) => {
        if (i.response.fileName) {
          this.imgList.push(i.response.fileName + "");
        }
      });

      this.queryData.conferenceId = this.form.conference.id;
      this.queryData.attachment = this.imgList.toString();

      setMeetingReply(this.queryData).then((res) => {
        if (res.code == 200) {
          if (res.msg == "该会议已回复") {
            this.$message.error(res.msg);
            this.$layer.close(this.layerid);
            return;
          }
          this.$parent.getList();
          this.$modal.msgSuccess(res.msg);
          this.$layer.close(this.layerid);
        }
      });
    },
    submitUpload() {
      if (this.fileList.length == 0) {
        this.queryData.conferenceId = this.form.conference.id;
        // this.queryData.attachment = this.imgList.toString();

        setMeetingReply(this.queryData).then((res) => {
          if (res.code == 200) {
            if (res.msg == "该会议已回复") {
              this.$message.error(res.msg);
              this.$layer.close(this.layerid);
              return;
            }
            this.$parent.getList();
            this.$modal.msgSuccess(res.msg);
            this.$layer.close(this.layerid);
          }
        });
        return;
      }
      this.$refs.upload.submit();
    },

    beforeFileUpload(file) {
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);

      let is =
        type == "doc" || type == "docx" || type == "xls" || type == "xlsx";
      if (!is) {
        this.$message.warning("文件只支持doc/ docx/ xls/ xlsx");
      }
      return is;
    },
  },
};
</script>

<style scoped lang="scss">
.cmain .detail_item {
  display: flex;
  align-items: flex-start;
  justify-content: start;
  margin-bottom: 20px;
  color: #333333;
  font-size: 16px;
}
.content{
  align-items: center;
}
.detail_item .title {
  width: 100px;
  margin: 0;
}
.cmain .detail_item p {
  margin: 0;
}

textarea:focus{
   outline: none;
 }
</style>