MaxKB/ui/src/views/application/ApplicationAccess.vue

<template>
  <div class="p-16-24">
    <h4 class="mb-16">{{ $t('views.application.applicationAccess.title') }}</h4>

    <el-row :gutter="16">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-16"
        v-for="(item, index) in platforms"
        :key="index"
      >
        <el-card shadow="hover" class="border-none cursor">
          <div class="flex-between">
            <div class="flex align-center ml-8 mr-8">
              <img :src="item.logoSrc" alt="" class="icon" />
              <div class="ml-12">
                <h5 class="mb-4">{{ item.name }}</h5>
                <el-text type="info" style="font-size: 12px">{{ item.description }}</el-text>
              </div>
            </div>
            <div>
              <el-switch
                size="small"
                v-model="item.isActive"
                @change="changeStatus(item.key, item.isActive)"
                :disabled="!item.exists"
                v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
                RoleConst.USER.getWorkspaceRole,
                PermissionConst.APPLICATION_ACCESS_EDIT.getWorkspacePermission]"
              />
              <el-divider direction="vertical" />
              <el-button class="mr-4" @click="openDrawer(item.key)"
                v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
                RoleConst.USER.getWorkspaceRole,
                PermissionConst.APPLICATION_ACCESS_EDIT.getWorkspacePermission]"
              >{{
                $t('views.application.applicationAccess.setting')
              }}</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <AccessSettingDrawer ref="AccessSettingDrawerRef" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import AccessSettingDrawer from './component/AccessSettingDrawer.vue'
import applicationApi from '@/api/application/application'
import { MsgSuccess } from '@/utils/message'
import { useRoute } from 'vue-router'
import { t } from '@/locales'
import { PermissionConst, RoleConst } from '@/utils/permission/data'
import { hasPermission } from '@/utils/permission/index'

// 平台数据
const platforms = reactive([
  {
    key: 'wecom',
    logoSrc: new URL(`../../assets/logo/logo_wechat-work.svg`, import.meta.url).href,
    name: t('views.application.applicationAccess.wecom'),
    description: t('views.application.applicationAccess.wecomTip'),
    isActive: false,
    exists: false,
  },
  {
    key: 'dingtalk',
    logoSrc: new URL(`../../assets/logo/logo_dingtalk.svg`, import.meta.url).href,
    name: t('views.application.applicationAccess.dingtalk'),
    description: t('views.application.applicationAccess.dingtalkTip'),
    isActive: false,
    exists: false,
  },
  {
    key: 'wechat',
    logoSrc: new URL(`../../assets/logo/logo_wechat.svg`, import.meta.url).href,
    name: t('views.application.applicationAccess.wechat'),
    description: t('views.application.applicationAccess.wechatTip'),
    isActive: false,
    exists: false,
  },
  {
    key: 'feishu',
    logoSrc: new URL(`../../assets/logo/logo_lark.svg`, import.meta.url).href,
    name: t('views.application.applicationAccess.lark'),
    description: t('views.application.applicationAccess.larkTip'),
    isActive: false,
    exists: false,
  },
  {
    key: 'slack',
    logoSrc: new URL(`../../assets/logo/logo_slack.svg`, import.meta.url).href,
    name: t('views.application.applicationAccess.slack'),
    description: t('views.application.applicationAccess.slackTip'),
    isActive: false,
    exists: false,
  },
])

const AccessSettingDrawerRef = ref()
const loading = ref(false)
const route = useRoute()
const {
  params: { id },
} = route as any

function openDrawer(key: string) {
  AccessSettingDrawerRef.value.open(id, key)
}

function refresh() {
  getPlatformStatus()
}

function getPlatformStatus() {
  loading.value = true
  applicationApi.getPlatformStatus(id).then((res: any) => {
    platforms.forEach((platform) => {
      platform.isActive = res.data[platform.key][1]
      platform.exists = res.data[platform.key][0]
    })
    loading.value = false
  })
}

function changeStatus(type: string, value: boolean) {
  const data = {
    type: type,
    status: value,
  }
  applicationApi.updatePlatformStatus(id, data).then(() => {
    MsgSuccess(t('common.saveSuccess'))
  })
}

onMounted(() => {
  // getPlatformStatus()
})
</script>

<style lang="scss" scoped></style>