Situation-Awareness-Platform-Frontend/src/components/Discussion/Module/Select/index.vue

<script setup lang="ts">
import DiscussionTypeItem from '../components/DiscussionTypeItem.vue';
import { ref } from 'vue';
import type {
  discussionTypeOrSection,
  categoryType
} from '@/api/discussion/types';
import { useRouter } from 'vue-router';
import { getAllTypes } from '@/api/discussion';
import { DISCUSS_FORMAT } from '@/constant/discuss';
import isArray from 'lodash/isArray';
import isEmpty from 'lodash/isEmpty';
import { useDiscussGetUserInfo, useDiscussionOpen } from '@/api/discussion/hook';
import { orgInfoStore } from '@/stores/Org';
import { repoInfoStore } from '@/stores/Repo';
import { Message } from 'vue-devui/message';

defineOptions({
  name: 'DiscussionSelectType'
});

const props = withDefaults(defineProps<{
  sourceType: 1|2; // 组织1，项目2
  orgNamespace?: string; // 组织namespace
}>(), {
  sourceType: 1
});

const router = useRouter();

// 获取当前用户信息 & 是否登录
const { isLogin = false, userInfo = {}} = useDiscussGetUserInfo();
if (!isLogin) router.push('/404');

// 确认讨论是否开启
const { id: source_id, discussOpen, getDiscussionStatus } = useDiscussionOpen(props.sourceType, props.orgNamespace);

// 获取当前用户项目/组织权限
const access_level = props.sourceType === 1 ? orgInfoStore().access_level : repoInfoStore().access_level;

const loading = ref(false);
const typeList = ref([] as discussionTypeOrSection[]);
// 获取所有 type
const getDiscussionTypeList = async() => {
  loading.value = true;
  const res = await getAllTypes({ id: source_id.value, source_type: props.sourceType });
  if (!res.error) {
    const resData = res?.data?.data;
    const tempData = access_level > 30 ? resData : resData.filter((item:categoryType) => item.category_type !== DISCUSS_FORMAT.ANNOUNCE);
    // 赋值
    typeList.value =
      isArray(resData) && !isEmpty(resData)
        ? tempData.map((item: categoryType) => ({
          id: item.id,
          icon: item.category_icon,
          title: item.category_name,
          desc: item.category_desc,
          answerAcceptEnable: item.category_type === 2,
          isGroup: false
        }))
        : [];
  }
  loading.value = false;
};

const initialData = async() => {
  await getDiscussionStatus();
  if (source_id.value && discussOpen.value === '1') {
    await getDiscussionTypeList();
  } else {
    Message.warning(`${props.sourceType === 1 ? '组织' : '项目'}讨论未开启`);
    router.replace('/404');
  }
};
initialData();

const onDiscussionCreate = (item: discussionTypeOrSection) => {
  router.push({
    name: `${props.sourceType === 1 ? 'org' : 'repo'}DiscussionCreate`,
    params: {
      discussionTypeId: item.id
    }
  });
};

const goToTypeManage = () => {
  router.push({ name: `${props.sourceType === 1 ? 'org' : 'repo'}DiscussionType` });
};

</script>

<template>
  <div class="discussion-select space-y-20 mt-6">
  <d-skeleton :loading="loading">
    <header>
      <p class="discussion-select__title">请选择你要创建的讨论类型</p>
      <d-button v-if="access_level>30" variant="solid" color="primary" @click="goToTypeManage">
        讨论内容分类设置
      </d-button>
    </header>
    <Card simple>
      <DiscussionTypeItem v-for="item in typeList" :key="item.id" :info="item">
        <!-- 替换为 emoji -->
        <template #icon>
          <span class="emoji-icon">{{ item.icon }}</span>
        </template>
        <template #tools>
          <d-button class="create-btn" size="md" @click="onDiscussionCreate(item)"
            >发起讨论</d-button
          >
        </template>
      </DiscussionTypeItem>
    </Card>
  </d-skeleton>
  </div>
</template>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
.discussion-select {
  & > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__title {
    font-size: 18px;
    font-weight: 500;
    color: #2d2d2e;
    line-height: 32px;
  }
  :deep(.discussion-type-item) {
    border-top: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: none;
    &:first-of-type {
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }
    &:last-of-type {
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
      border-bottom: none;
    }
  }
}

.create-btn {
  padding: 6px 20px;
  border-radius: var(--border-radius);
  font-weight: 500;
}
</style>