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>
      <a-textarea
        v-model:value="noticeContent"
        :maxlength="150"
        placeholder="公告信息最多输入150个字"
        style="margin-top: -10px; height: 120px"
      />
      <div class="publish">
        <div class="iconPub"></div>
        <div class="btnText" @click="pubNotice">发布</div>
      </div>
    </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";
export default {
  name: "NoticePub",
  props: {
    projectId: {
      type: Number,
      default: null,
    },
  },
  setup(props) {
    const state = reactive({
      noticeChecked: true,
      projectInfo: {},
      noticeContent: "",
    });
    const getTaskInfo = () => {
      getTask({ projectId: props.projectId }).then((res) => {
        console.log("公告获取项目", res.data.data.projectInfo);
        state.projectInfo = res.data.data.projectInfo;
      });
    };
    const pubNotice = () => {
      if (state.noticeContent == "") {
        message.destroy();
        return message.warning("请输入公告内容");
      } else {
        let result = state.projectInfo;
        let obj = {
          attach: result.attach,
          beginTime: result.beginTime,
          boeFlag: result.boeFlag,
          category: result.category,
          courseSyncFlag: result.courseSyncFlag,
          endTime: result.endTime,
          level: result.level,
          manager: result.manager,
          managerId: result.managerId,
          name: result.name,
          notice: state.noticeContent,
          noticeFlag: 1,
          parentId: result.parentId,
          picUrl: result.picUrl,
          projectId: result.projectId,
          remark: result.remark,
          sourceBelongId: result.sourceBelongId,
          status: result.status,
          systemId: result.systemId,
          templateId: result.templateId,
          type: result.type,
        };
        // console.log(result, obj, result.type);
        editProj(obj)
          .then((res) => {
            message.destroy();
            message.success("发布成功", res);
            state.noticeContent = null;
          })
          .catch((err) => {
            message.destroy();
            message.warning("发布失败");
            console.log(err);
          });
      }
    };
    onMounted(() => {
      getTaskInfo();
    });
    return {
      ...toRefs(state),
      getTaskInfo,
      pubNotice,
    };
  },
};
</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;
    }
  }
}
</style>