imChat/src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-notification.vue

<template>
  <main class="notification">
    <input v-if="isEdit" type="text" v-model="title" placeholder="请输入标题" maxlength="15" />
    <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile" placeholder="请输入内容"></textarea>
    <section v-else>
      <p v-if="!groupList.content">
        {{ $t(`TUIChat.manage.暂无公告`) }}
      </p>
      <article v-else>
        <h2>{{ groupList.title }}</h2>
        {{ groupList.content }}
      </article>
    </section>
    <footer v-if="isAuth">
      <button class="btn" v-if="isEdit" @click="updateProfile">
        {{ $t(`TUIChat.manage.发布`) }}
      </button>
      <button class="btn" v-else @click="isEdit = !isEdit">
        {{ $t(`TUIChat.manage.编辑`) }}
      </button>
    </footer>
  </main>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs, onMounted } from "vue";
import { imGroupNoticePage, imGroupNoticeSave, imGroupNoticeUpdate } from "../../../../api";

const ManageNotification = defineComponent({
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    isAuth: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: any, ctx: any) {
    const data: any = reactive({
      groupProfile: {},
      title: "",
      input: "",
      groupList: {},
      isEdit: false,
    });
    const getNotification = async () => {
      try {
        // 获取群公告
        let res = await imGroupNoticePage({
          groupId: data.groupProfile.groupID,
          page: 1,
          rows: 1,
        });
        const result = res.data.rows || [];
        if (result.length > 0) {
          data.input = result[0].content;
          data.title = result[0].title;
          data.groupList = result[0];
        }
      } catch (e: any) {
        //
      }
    };

    watchEffect(() => {
      data.groupProfile = props.data;
      // 不使用默认的数据，从我们自己的数据库中选择
      // data.input = data.groupProfile.notification;
      getNotification();
    });

    // 更新群资料
    const updateProfile = async () => {
      if (data.title && data.input) {
        // ctx.emit("update", { key: "notification", value: data.input });
        // data.groupProfile.notification = data.input;
        // data.input = "";
        try {
          const params = {
            clientType: "TEACHER",
            groupId: data.groupProfile.groupID,
            content: data.input,
            title: data.title,
          };
          if (data.groupList.id) {
            await imGroupNoticeUpdate({
              ...params,
              id: data.groupList.id,
            });
          } else {
            await imGroupNoticeSave(params);
          }
          data.groupList.content = data.input;
          ctx.emit("update", { key: "notification", value: data.title });
          data.groupProfile.notification = data.title;
          data.groupList.content = data.input;
          data.groupList.title = data.title;
          data.input = "";
        } catch {
          //
        }
      }
      data.isEdit = !data.isEdit;
    };

    return {
      ...toRefs(data),
      updateProfile,
    };
  },
});
export default ManageNotification;
</script>

<style lang="scss" scoped>
@import url("../../../styles/common.scss");
@import url("../../../styles/icon.scss");
.notification {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  section {
    flex: 1;
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-word;
    p {
      text-align: center;
      padding-bottom: 20px;
    }
  }
  textarea {
    margin-bottom: 20px;
    flex: 1;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #e8e8e9;
    resize: none;
    font-size: 14px;
  }

  input {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #e8e8e9;
    resize: none;
    font-size: 14px;
  }

  h2 {
    font-size: 16px;
  }

  footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
}
.btn {
  background: #3370ff;
  border: 0 solid #2f80ed;
  padding: 4px 28px;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  line-height: 24px;
  border-radius: 4px;
  &-cancel {
    background: #ffffff;
    border: 1px solid #dddddd;
    color: #828282;
  }
}
</style>