fe-manage/src/components/drawers/NoticePub.vue

<!--发布公告-->
<template>
  <!-- <div class="split"></div> -->
  <div class="noticeTitle">
    <!-- <div class="notitle"><span class="titlespan">公告</span></div> -->
    <div class="switch">
      <a-switch
        v-model:checked="noticeChecked"
        @click="noticeFlag"
        size="small"
      /><span style="margin-left: 16px"> 开启 </span>
    </div>
    <template v-if="noticeChecked">
      <p>当前公告内容：</p>
      <!-- 预览 -->
      <template v-if="!editOn">
        <div class="txt-content">
          {{ noticeContent1 ? noticeContent1 : "暂无公告" }}
        </div>
        <div class="btn-content">
          <a-button type="primary" @click="handleEdit">编辑</a-button>
        </div>
      </template>
      <!-- 编辑 -->
      <template v-if="editOn">
        <div class="txt-content">
          {{ noticeContent1 ? noticeContent1 : "暂无公告" }}
        </div>
        <p>编辑新公告：</p>
        <a-textarea
          v-model:value="noticeContent"
          :maxlength="150"
          placeholder="公告信息最多输入150个字"
          style="margin-top: -10px; height: 120px"
        />
        <div class="btn-content">
          <a-button class="cancel" @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="pubNotice" class="sure">
            发布
          </a-button>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import { reactive, toRefs, onMounted } from "vue";
import { editProj, getTask } from "../../api/indexTaskadd";
// import { editProj } from "../../api/indexTaskadd";
import { publishNotice } from "../../api/indexNotice";
import emitter from "../../utils/bus";
export default {
  name: "NoticePub",
  props: {
    projectId: {
      type: Number,
      default: null,
    },
  },
  setup(props) {
    const state = reactive({
      noticeChecked: false,
      projectInfo: {},
      noticeContent1: "",
      noticeContent: "",
      editOn: false,
    });
    const getTaskInfo = () => {
      getTask({ projectId: props.projectId }).then((res) => {
        console.log("公告获取项目", res.data.data.projectInfo);
        state.projectInfo = res.data.data.projectInfo;
        state.noticeContent1 = state.projectInfo.notice;
        state.noticeContent = state.projectInfo.notice;
        state.noticeChecked = state.projectInfo.noticeFlag == 0 ? false : true;
      });
      console.log("state.noticeChecked", state.noticeChecked);
    };

    const handleEdit = () => {
      state.editOn = true;
    };
    const handleCancel = () => {
      state.editOn = false;
    };
    const noticeFlag = () => {
      //state.noticeChecked = !state.noticeChecked;
      console.log("111", state.projectInfo);
      state.projectInfo.noticeFlag = state.noticeChecked ? 1 : 0;
      editProj(state.projectInfo)
        .then((res) => {
          console.log("res5555555555", res);
        })
        .catch((error) => {
          console.log(error);
        });
      console.log("222", state.projectInfo);
    };
    const pubNotice = () => {
      if (state.noticeContent == "") {
        message.destroy();
        return message.warning("请输入公告内容");
      } else {
        let obj = {
          notice: state.noticeContent,
          projectId: props.projectId,
          title: "",
        };
        publishNotice(obj); //加入历史
        state.projectInfo.notice = state.noticeContent;
        console.log("222444444", state.projectInfo);
        state.noticeContent1 =
          state.noticeContent == "" ? "暂无公告" : state.noticeContent;
        message.success("发布成功");
        handleCancel();
        editProj(state.projectInfo)
          .then((res) => {
            // console.log("res");
            // console.log(res);
            if (res.data.code === 200) {
              message.destroy();
              // message.success("发布成功");
              state.noticeContent1 =
                res.data.data.notice == "" ? "暂无公告" : res.data.data.notice;
              handleCancel();
              emitter.emit("setNotice", false);
            }
          })
          .catch((err) => {
            message.destroy();
            message.warning("发布失败");
            console.log(err);
          });
      }
    };
    onMounted(() => {
      getTaskInfo();
    });
    return {
      ...toRefs(state),
      getTaskInfo,
      pubNotice,
      handleEdit,
      handleCancel,
      noticeFlag,
    };
  },
};
</script>
<style lang="scss">
.noticeTitle {
  margin-left: 32px;
  margin-right: 32px;
  margin-bottom: 100px;
  .notitle {
    height: 55px;
    border-bottom: 1px solid #ededed;
    position: relative;
    .titlespan {
      font-size: 18px;
      position: absolute;
      left: 0;
      bottom: 0px;
    }
  }
  .switch {
    display: flex;
    align-items: center;
    height: 90px;
  }

  .publish {
    width: 100px;
    height: 38px;
    background: rgb(64, 158, 255);
    border-radius: 8px;
    border: 1px solid rgba(64, 158, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    float: right;
    margin-top: 24px;
    margin-bottom: 60px;
    margin-right: 20px;
    cursor: pointer;
    .iconPub {
      width: 15px;
      height: 15px;
      background-image: url(@/assets/images/taskpage/pub0.png);
      background-size: 100% 100%;
      color: rgb(255, 255, 255);
    }
    .btnText {
      font-size: 14px;
      font-weight: 400;
      color: rgb(255, 255, 255);
      line-height: 36px;
      margin-left: 5px;
    }
  }
  .btn-content {
    margin-top: 20px;
    text-align: right;
    .cancel {
      margin-right: 10px;
    }
  }
  .txt-content {
    margin: 24px 0 32px;
    text-indent: 2em;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  }
  .txt-contain {
    margin-bottom: 18px;
    display: flex;
    span {
      display: inline-block;
      width: 50px;
    }
    .txt-content-tip {
      width: calc(100% - 50px);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 22px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }
}
</style>