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" size="small" /><span
        style="margin-left: 16px"
      >
        开启
      </span>
    </div>
    <template v-if="noticeChecked">
      <p>公告内容</p>
      <!-- 预览 -->
      <template v-if="!editOn">
        <div style="height: 120px; border: 1px solid  rgb(217, 217, 217">
          {{ noticeContent }}
        </div>
        <div class="btn-content">
          <a-button type="primary" @click="handleEdit">编辑</a-button>
        </div>
      </template>
      <!-- 编辑 -->
      <template v-if="editOn">
        <div style="height: 120px; border: 1px solid  rgb(217, 217, 217">
          {{ noticeContent }}
        </div>
        <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>s
<script>
import { message } from "ant-design-vue";
import { reactive, toRefs, onMounted } from "vue";
import { 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: true,
      projectInfo: {},
      noticeContent: "",

      editOn: false,
    });
    const getTaskInfo = () => {
      getTask({ projectId: props.projectId }).then((res) => {
        console.log("公告获取项目", res.data.data.projectInfo);
        state.projectInfo = res.data.data.projectInfo;
      });
    };

    const handleEdit = () => {
      state.editOn = true;
    };
    const handleCancel = () => {
      state.editOn = false;
    };

    const pubNotice = () => {
      if (state.noticeContent == "") {
        message.destroy();
        return message.warning("请输入公告内容");
      } else {
        let obj = {
          // createId: state.projectInfo.createId,
          // createName: state.projectInfo.createName,
          notice: state.noticeContent,
          // noticeId: 0,
          projectId: props.projectId,
          title: "",
        };
        publishNotice(obj)
          .then((res) => {
            // console.log("res");
            // console.log(res);
            if (res.data.code === 200) {
              message.destroy();
              message.success("发布成功", res);
              state.noticeContent = 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,
    };
  },
};
</script>
<style lang="scss">
.noticeTitle {
  margin-left: 32px;
  margin-right: 32px;
  // padding-top: 20px;
  .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;
    }
  }
}
</style>