mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
perf: Platform card page
This commit is contained in:
fit2cloud-chenyw
committed by
fit2cloud-chenyw
fit2cloud-chenyw
parent
01ca5ec125
commit
2599534cfe
@@ -447,7 +447,8 @@
|
||||
"enable": "Enabled",
|
||||
"disable": "Disabled",
|
||||
"local_creation": "Local",
|
||||
"feishu": "Feishu",
|
||||
"lark": "Lark",
|
||||
"larksuite": "Larksuite",
|
||||
"dingtalk": "DingTalk",
|
||||
"wechat_for_business": "WeChat for business",
|
||||
"1240_results": "{msg} results",
|
||||
|
||||
@@ -447,7 +447,8 @@
|
||||
"enable": "활성화",
|
||||
"disable": "비활성화",
|
||||
"local_creation": "로컬 생성",
|
||||
"feishu": "페이슈",
|
||||
"lark": "페이슈",
|
||||
"larksuite": "페이수 (Pei-su)",
|
||||
"dingtalk": "딩톡",
|
||||
"wechat_for_business": "기업용 위챗",
|
||||
"1240_results": "{msg}개 결과 ",
|
||||
|
||||
@@ -447,7 +447,8 @@
|
||||
"enable": "启用",
|
||||
"disable": "禁用",
|
||||
"local_creation": "本地创建",
|
||||
"feishu": "飞书",
|
||||
"lark": "飞书",
|
||||
"larksuite": "国际飞书",
|
||||
"dingtalk": "钉钉",
|
||||
"wechat_for_business": "企业微信",
|
||||
"1240_results": "{msg} 个结果 ",
|
||||
|
||||
@@ -6,12 +6,8 @@
|
||||
name="wecom"
|
||||
></el-tab-pane>
|
||||
<el-tab-pane v-if="props.dingtalk" :label="t('user.dingtalk')" name="dingtalk"></el-tab-pane>
|
||||
<el-tab-pane v-if="props.lark" :label="t('user.feishu')" name="lark"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="props.larksuite"
|
||||
:label="t('system.international_feishu')"
|
||||
name="larksuite"
|
||||
></el-tab-pane>
|
||||
<el-tab-pane v-if="props.lark" :label="t('user.lark')" name="lark"></el-tab-pane>
|
||||
<el-tab-pane v-if="props.larksuite" :label="t('user.larksuite')" name="larksuite"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-if="activeName === 'wecom'" class="login-qrcode">
|
||||
<div class="title">
|
||||
@@ -51,7 +47,7 @@
|
||||
<el-icon>
|
||||
<Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
{{ t('system.international_feishu') }}
|
||||
{{ t('user.larksuite') }}
|
||||
</div>
|
||||
<div class="qrcode">
|
||||
<larksuite-qr v-if="activeName === 'larksuite'" />
|
||||
|
||||
+89
-100
@@ -4,72 +4,50 @@ import { ElMessage, ElLoading } from 'element-plus-secondary'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
||||
import { settingMapping } from './common/SettingTemplate'
|
||||
const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
|
||||
const wecomForm = ref<FormInstance>()
|
||||
interface WecomkForm {
|
||||
corpid?: string
|
||||
agent_id?: string
|
||||
corpsecret?: string
|
||||
}
|
||||
const platformForm = ref<FormInstance>()
|
||||
|
||||
const state = reactive({
|
||||
form: reactive<WecomkForm>({
|
||||
agent_id: '',
|
||||
corpid: '',
|
||||
corpsecret: '',
|
||||
}),
|
||||
form: reactive<any>({}),
|
||||
settingList: [] as any[],
|
||||
})
|
||||
const origin = ref(6)
|
||||
const id = ref()
|
||||
const rule = reactive<FormRules>({
|
||||
agent_id: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
corpid: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
corpsecret: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 100,
|
||||
message: t('common.input_limit', [5, 100]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const rule = reactive<FormRules>({})
|
||||
const formTitle = ref('')
|
||||
const busiMapping = {
|
||||
6: 'wecom',
|
||||
7: 'dingtalk',
|
||||
8: 'lark',
|
||||
9: 'larksuite',
|
||||
} as any
|
||||
const initForm = (row: any) => {
|
||||
state.settingList.forEach((item: any) => {
|
||||
const key = item.realKey
|
||||
rule[key] = [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 255,
|
||||
message: t('common.input_limit', [5, 255]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
]
|
||||
state.form[key] = row[key]
|
||||
})
|
||||
}
|
||||
const edit = (row: any) => {
|
||||
state.form = {
|
||||
agent_id: row.agent_id,
|
||||
corpid: row.corpid,
|
||||
corpsecret: row.corpsecret,
|
||||
}
|
||||
state.settingList = settingMapping[row.type]
|
||||
initForm(row)
|
||||
origin.value = row.type
|
||||
formTitle.value = row.title
|
||||
if (row?.id) {
|
||||
id.value = row.id
|
||||
}
|
||||
@@ -86,7 +64,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
const data = {
|
||||
id: origin.value,
|
||||
type: origin.value,
|
||||
name: 'wecom',
|
||||
name: busiMapping[origin.value],
|
||||
config: JSON.stringify(param),
|
||||
}
|
||||
const method = id.value
|
||||
@@ -122,10 +100,15 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
id.value = null
|
||||
origin.value = 6
|
||||
formTitle.value = ''
|
||||
state.settingList = []
|
||||
const keys = Object.keys(rule)
|
||||
keys.forEach((key: string) => delete rule[key])
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
resetForm(wecomForm.value)
|
||||
resetForm(platformForm.value)
|
||||
}
|
||||
|
||||
const showLoading = () => {
|
||||
@@ -137,28 +120,34 @@ const closeLoading = () => {
|
||||
loadingInstance.value?.close()
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const url = '/system/authentication/status'
|
||||
const config_data = state.form
|
||||
const data = {
|
||||
type: origin.value,
|
||||
name: 'wecom',
|
||||
config: JSON.stringify(config_data),
|
||||
}
|
||||
showLoading()
|
||||
request
|
||||
.patch(url, data)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
ElMessage.success(t('ds.connection_success'))
|
||||
} else {
|
||||
ElMessage.error(t('ds.connection_failed'))
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
closeLoading()
|
||||
emits('saved')
|
||||
})
|
||||
const validate = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
const url = '/system/authentication/status'
|
||||
const config_data = state.form
|
||||
const data = {
|
||||
type: origin.value,
|
||||
name: busiMapping[origin.value],
|
||||
config: JSON.stringify(config_data),
|
||||
}
|
||||
showLoading()
|
||||
request
|
||||
.patch(url, data)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
ElMessage.success(t('ds.connection_success'))
|
||||
} else {
|
||||
ElMessage.error(t('ds.connection_failed'))
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
closeLoading()
|
||||
emits('saved')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
@@ -169,46 +158,46 @@ defineExpose({
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="dialogVisible"
|
||||
:title="t('user.wechat_for_business')"
|
||||
:title="formTitle"
|
||||
modal-class="platform-info-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
<el-form
|
||||
ref="wecomForm"
|
||||
ref="platformForm"
|
||||
require-asterisk-position="right"
|
||||
:model="state.form"
|
||||
:rules="rule"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="Corpid" prop="corpid">
|
||||
<el-input v-model="state.form.corpid" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="AgentId" prop="agent_id">
|
||||
<el-input v-model="state.form.agent_id" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="APP Secret" prop="corpsecret">
|
||||
<el-form-item
|
||||
v-for="setting in state.settingList"
|
||||
:key="setting.realKey"
|
||||
:label="setting.pkey"
|
||||
:prop="setting.realKey"
|
||||
>
|
||||
<el-input
|
||||
v-model="state.form.corpsecret"
|
||||
v-if="setting.type === 'password'"
|
||||
v-model="state.form[setting.realKey]"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('common.please_input')"
|
||||
/>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="state.form[setting.realKey]"
|
||||
:placeholder="t('common.please_input')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetForm(wecomForm)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
:disabled="!state.form.corpid || !state.form.corpsecret || !state.form.agent_id"
|
||||
@click="validate"
|
||||
>
|
||||
<el-button @click="resetForm(platformForm)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button @click="validate(platformForm)">
|
||||
{{ t('ds.check') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="submitForm(wecomForm)">
|
||||
<el-button type="primary" @click="submitForm(platformForm)">
|
||||
{{ t('common.save') }}
|
||||
</el-button>
|
||||
</span>
|
||||
+69
-58
@@ -4,9 +4,9 @@
|
||||
<div class="platform-setting-head-left">
|
||||
<div class="lead-left-icon">
|
||||
<el-icon>
|
||||
<Icon name="logo_wechat-work"><logo_wechatWork class="svg-icon" /></Icon>
|
||||
<Icon name="logo_wechat-work"><component :is="state.cardIcon" class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<span>{{ t('user.wechat_for_business') }}</span>
|
||||
<span>{{ cardTitle }}</span>
|
||||
</div>
|
||||
<div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
|
||||
<span>{{
|
||||
@@ -45,79 +45,89 @@
|
||||
<InfoTemplate
|
||||
v-if="existInfo"
|
||||
class="platform-setting-main"
|
||||
:copy-list="copyList"
|
||||
setting-key="wecom"
|
||||
setting-title=""
|
||||
:copy-list="state.copyList"
|
||||
:hide-head="true"
|
||||
:setting-data="settingList"
|
||||
:setting-data="state.settingList"
|
||||
@edit="edit"
|
||||
/>
|
||||
<div v-if="existInfo" class="platform-foot-container">
|
||||
<el-button type="primary" @click="edit">
|
||||
{{ t('datasource.edit') }}
|
||||
</el-button>
|
||||
<el-button secondary :disabled="!info.corpid || !info.corpsecret" @click="validate">{{
|
||||
t('ds.check')
|
||||
}}</el-button>
|
||||
<el-button secondary :disabled="!formValid" @click="validate">{{ t('ds.check') }}</el-button>
|
||||
</div>
|
||||
<wecom-edit ref="editor" @saved="search" />
|
||||
<platform-form ref="editor" @saved="search" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
|
||||
import { ref, reactive } from 'vue'
|
||||
import InfoTemplate from '../common/InfoTemplate.vue'
|
||||
import WecomEdit from './WecomEdit.vue'
|
||||
import { ref, type PropType, watch, reactive } from 'vue'
|
||||
import InfoTemplate from './common/InfoTemplate.vue'
|
||||
import PlatformForm from './PlatformForm.vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
import { getPlatformCardConfig, type PlatformCard } from './common/SettingTemplate'
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
cardInfo: {
|
||||
type: Object as PropType<PlatformCard>,
|
||||
required: true,
|
||||
default: () =>
|
||||
({
|
||||
type: 6,
|
||||
name: 'wecom',
|
||||
config: {},
|
||||
enable: false,
|
||||
valid: false,
|
||||
}) as PlatformCard,
|
||||
},
|
||||
})
|
||||
|
||||
const info = ref({}) as any
|
||||
const state = reactive({
|
||||
settingList: [] as any[],
|
||||
copyList: [] as string[],
|
||||
cardIcon: null,
|
||||
})
|
||||
|
||||
const existInfo = ref(false)
|
||||
const editor = ref()
|
||||
const origin = ref(6)
|
||||
const copyList = ['CorpId', 'APP Secret']
|
||||
const settingList = reactive([
|
||||
{
|
||||
pkey: 'CorpId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
pkey: 'AgentId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
pkey: 'APP Secret',
|
||||
pval: '',
|
||||
type: 'pwd',
|
||||
sort: 3,
|
||||
},
|
||||
])
|
||||
const info = ref({}) as any
|
||||
const mappingArray = ['corpid', 'agent_id', 'corpsecret', 'enable']
|
||||
const search = () => {
|
||||
const url = `system/authentication/${origin.value}`
|
||||
request.get(url).then((res) => {
|
||||
const config = res?.config
|
||||
let configData = { enable: res?.enable, valid: res?.valid } as any
|
||||
if (config) {
|
||||
const configObj = JSON.parse(config)
|
||||
Object.assign(configData, configObj)
|
||||
}
|
||||
|
||||
const cardTitle = ref('')
|
||||
const formValid = ref(false)
|
||||
watch(
|
||||
() => props.cardInfo,
|
||||
() => {
|
||||
const configData: any = props.cardInfo.config
|
||||
configData['id'] = props.cardInfo.id
|
||||
configData['enable'] = !!props.cardInfo.enable
|
||||
configData['valid'] = !!props.cardInfo.valid
|
||||
info.value = configData
|
||||
if (res?.id) {
|
||||
info.value['id'] = res.id
|
||||
}
|
||||
existInfo.value = info.value['agent_id']
|
||||
for (let index = 0; index < settingList.length; index++) {
|
||||
const element = settingList[index]
|
||||
const key = mappingArray[index]
|
||||
element['pval'] = configData[key] || '-'
|
||||
}
|
||||
})
|
||||
origin.value = props.cardInfo.type
|
||||
|
||||
const platformConfig = getPlatformCardConfig(props.cardInfo.type)
|
||||
const list = [...platformConfig.settingList]
|
||||
list.forEach((item) => {
|
||||
item['pval'] = info.value[item.realKey] || '-'
|
||||
// delete item.realKey
|
||||
})
|
||||
state.settingList = list
|
||||
|
||||
existInfo.value = !!props.cardInfo.id
|
||||
cardTitle.value = t(platformConfig.title)
|
||||
|
||||
state.copyList = platformConfig.copyField
|
||||
state.cardIcon = platformConfig.icon
|
||||
|
||||
formValid.value = list.every((item: any) => !!info.value[item.realKey])
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
const emits = defineEmits(['saved'])
|
||||
const search = () => {
|
||||
emits('saved')
|
||||
}
|
||||
|
||||
const switchEnableApi = (enable: any) => {
|
||||
@@ -128,7 +138,8 @@ const switchEnableApi = (enable: any) => {
|
||||
})
|
||||
}
|
||||
const edit = () => {
|
||||
editor?.value.edit(info.value)
|
||||
const data = { ...{ type: origin.value, title: cardTitle.value }, ...info.value }
|
||||
editor?.value.edit(data)
|
||||
}
|
||||
const validate = () => {
|
||||
if (info.value?.agent_id && info.value?.corpsecret) {
|
||||
@@ -153,7 +164,7 @@ const validateHandler = () => {
|
||||
info.value.valid = false
|
||||
})
|
||||
}
|
||||
search()
|
||||
// search()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -1,3 +1,6 @@
|
||||
import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
|
||||
import logo_lark from '@/assets/svg/logo_lark.svg'
|
||||
import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
|
||||
export interface SettingRecord {
|
||||
pkey: string
|
||||
pval: string
|
||||
@@ -9,3 +12,138 @@ export interface ToolTipRecord {
|
||||
key: string
|
||||
val: string
|
||||
}
|
||||
|
||||
export interface PlatformCard {
|
||||
id?: number
|
||||
type: number
|
||||
name: string
|
||||
config: object
|
||||
enable: boolean
|
||||
valid: boolean
|
||||
}
|
||||
|
||||
export const settingMapping = {
|
||||
6: [
|
||||
{
|
||||
realKey: 'corpid',
|
||||
pkey: 'CorpId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
realKey: 'agent_id',
|
||||
pkey: 'AgentId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
realKey: 'corpsecret',
|
||||
pkey: 'APP Secret',
|
||||
pval: '',
|
||||
type: 'pwd',
|
||||
sort: 3,
|
||||
},
|
||||
],
|
||||
7: [
|
||||
{
|
||||
realKey: 'corpid',
|
||||
pkey: 'CorpId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
realKey: 'client_id',
|
||||
pkey: 'APP Key',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
realKey: 'client_secret',
|
||||
pkey: 'APP Secret',
|
||||
pval: '',
|
||||
type: 'pwd',
|
||||
sort: 3,
|
||||
},
|
||||
],
|
||||
8: [
|
||||
{
|
||||
realKey: 'corpid',
|
||||
pkey: 'CorpId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
realKey: 'client_id',
|
||||
pkey: 'APP Key',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
realKey: 'client_secret',
|
||||
pkey: 'APP Secret',
|
||||
pval: '',
|
||||
type: 'pwd',
|
||||
sort: 3,
|
||||
},
|
||||
],
|
||||
9: [
|
||||
{
|
||||
realKey: 'corpid',
|
||||
pkey: 'CorpId',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
realKey: 'client_id',
|
||||
pkey: 'APP Key',
|
||||
pval: '',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
realKey: 'client_secret',
|
||||
pkey: 'APP Secret',
|
||||
pval: '',
|
||||
type: 'pwd',
|
||||
sort: 3,
|
||||
},
|
||||
],
|
||||
} as any
|
||||
|
||||
export const cardMapping = {
|
||||
6: {
|
||||
title: 'user.wechat_for_business',
|
||||
icon: logo_dingtalk,
|
||||
settingList: settingMapping[6],
|
||||
copyField: ['CorpId', 'APP Secret'],
|
||||
},
|
||||
7: {
|
||||
title: 'user.dingtalk',
|
||||
icon: logo_wechatWork,
|
||||
settingList: settingMapping[7],
|
||||
copyField: ['CorpId', 'APP Secret'],
|
||||
},
|
||||
8: {
|
||||
title: 'user.lark',
|
||||
icon: logo_lark,
|
||||
settingList: settingMapping[8],
|
||||
copyField: ['CorpId', 'APP Secret'],
|
||||
},
|
||||
9: {
|
||||
title: 'user.larksuite',
|
||||
icon: logo_lark,
|
||||
settingList: settingMapping[9],
|
||||
copyField: ['CorpId', 'APP Secret'],
|
||||
},
|
||||
} as any
|
||||
|
||||
export const getPlatformCardConfig = (origin: number) => {
|
||||
return cardMapping[origin]
|
||||
}
|
||||
|
||||
@@ -1,280 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage, ElLoading } from 'element-plus-secondary'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
||||
const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
|
||||
const dingtalkForm = ref<FormInstance>()
|
||||
interface DingtalkForm {
|
||||
agentId?: string
|
||||
appKey?: string
|
||||
appSecret?: string
|
||||
callBack?: string
|
||||
enable?: string
|
||||
valid?: string
|
||||
}
|
||||
const state = reactive({
|
||||
form: reactive<DingtalkForm>({
|
||||
agentId: '',
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
callBack: '',
|
||||
enable: 'false',
|
||||
valid: 'false',
|
||||
}),
|
||||
})
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
const validateUrl = (rule, value, callback) => {
|
||||
const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error(t('system.incorrect_please_re_enter')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const rule = reactive<FormRules>({
|
||||
agentId: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
appKey: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
appSecret: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 100,
|
||||
message: t('common.input_limit', [5, 100]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
callBack: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
max: 100,
|
||||
message: t('common.input_limit', [10, 100]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ required: true, validator: validateUrl, trigger: 'blur' },
|
||||
],
|
||||
enable: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
valid: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const edit = (row: any) => {
|
||||
state.form = {
|
||||
agentId: row.agentId,
|
||||
appKey: row.appKey,
|
||||
appSecret: row.appSecret,
|
||||
callBack: row.callBack,
|
||||
enable: row.enable,
|
||||
valid: row.valid,
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const emits = defineEmits(['saved'])
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
const param = { ...state.form }
|
||||
const method = request.post('/dingtalk/create', param)
|
||||
showLoading()
|
||||
method
|
||||
.then((res) => {
|
||||
if (!res.msg) {
|
||||
ElMessage.success(t('common.save_success'))
|
||||
emits('saved')
|
||||
reset()
|
||||
}
|
||||
closeLoading()
|
||||
})
|
||||
.catch(() => {
|
||||
closeLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
resetForm(dingtalkForm.value)
|
||||
}
|
||||
|
||||
const showLoading = () => {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
target: '.platform-info-drawer',
|
||||
})
|
||||
}
|
||||
const closeLoading = () => {
|
||||
loadingInstance.value?.close()
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const url = '/dingtalk/validate'
|
||||
const data = state.form
|
||||
showLoading()
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
state.form.valid = 'true'
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
state.form.enable = 'false'
|
||||
state.form.valid = 'false'
|
||||
})
|
||||
.finally(() => {
|
||||
closeLoading()
|
||||
emits('saved')
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="dialogVisible"
|
||||
:title="t('system.dingtalk_settings')"
|
||||
modal-class="platform-info-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
<el-form
|
||||
ref="dingtalkForm"
|
||||
require-asterisk-position="right"
|
||||
:model="state.form"
|
||||
:rules="rule"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="AgentId" prop="agentId">
|
||||
<el-input v-model="state.form.agentId" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="APP Key" prop="appKey">
|
||||
<el-input v-model="state.form.appKey" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="APP Secret" prop="appSecret">
|
||||
<el-input
|
||||
v-model="state.form.appSecret"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('common.please_input')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('system.callback_domain_name')" prop="callBack">
|
||||
<el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetForm(dingtalkForm)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
:disabled="!state.form.appKey || !state.form.appSecret || !state.form.callBack"
|
||||
@click="validate"
|
||||
>
|
||||
{{ t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="submitForm(dingtalkForm)">
|
||||
{{ t('commons.save') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.platform-info-drawer {
|
||||
.ed-drawer__footer {
|
||||
height: 64px !important;
|
||||
padding: 16px 24px !important;
|
||||
.dialog-footer {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ed-form-item__label {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.platform-info-drawer {
|
||||
.ed-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.is-error {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
.input-with-select {
|
||||
.ed-input-group__prepend {
|
||||
width: 72px;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<div class="platform-head-container" :class="{ 'just-head': !existInfo }">
|
||||
<div class="platform-setting-head">
|
||||
<div class="platform-setting-head-left">
|
||||
<div class="lead-left-icon">
|
||||
<el-icon>
|
||||
<Icon name="logo_dingtalk"><logo_dingtalk class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<span>{{ t('user.dingtalk') }}</span>
|
||||
</div>
|
||||
<div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
|
||||
<span>{{
|
||||
info.valid ? t('datasource.valid') : info.appKey ? t('datasource.invalid') : ''
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="existInfo" class="platform-setting-head-right">
|
||||
<span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
|
||||
<el-switch
|
||||
v-if="info.valid"
|
||||
v-model="info.enable"
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
<el-tooltip
|
||||
v-else
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="t('platform.can_enable_it')"
|
||||
placement="top"
|
||||
>
|
||||
<el-switch
|
||||
v-model="info.enable"
|
||||
disabled=""
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-else class="platform-setting-head-right-btn">
|
||||
<el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<InfoTemplate
|
||||
v-if="existInfo"
|
||||
class="platform-setting-main"
|
||||
:copy-list="copyList"
|
||||
setting-key="dingtalk"
|
||||
setting-title=""
|
||||
:hide-head="true"
|
||||
:setting-data="settingList"
|
||||
@edit="edit"
|
||||
/>
|
||||
<div v-if="existInfo" class="platform-foot-container">
|
||||
<el-button type="primary" @click="edit">
|
||||
{{ t('commons.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
secondary
|
||||
:disabled="!info.appKey || !info.appSecret || !info.callBack"
|
||||
@click="validate"
|
||||
>{{ t('commons.validate') }}</el-button
|
||||
>
|
||||
</div>
|
||||
<dingtalk-edit ref="editor" @saved="search" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
|
||||
import { ref, reactive } from 'vue'
|
||||
import InfoTemplate from '../common/InfoTemplate.vue'
|
||||
import DingtalkEdit from './DingtalkEdit.vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
const existInfo = ref(false)
|
||||
const { t } = useI18n()
|
||||
const editor = ref()
|
||||
const copyList = ['APP Key', 'APP Secret']
|
||||
const settingList = reactive([
|
||||
{
|
||||
pkey: 'AgentId',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'text',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
pkey: 'APP Key',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'text',
|
||||
sort: 3,
|
||||
},
|
||||
{
|
||||
pkey: 'APP Secret',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'pwd',
|
||||
sort: 4,
|
||||
},
|
||||
{
|
||||
pkey: t('system.callback_domain_name'),
|
||||
pval: 'https://de.fit2cloud.com',
|
||||
type: 'text',
|
||||
sort: 5,
|
||||
},
|
||||
])
|
||||
const info = ref({}) as any
|
||||
const mappingArray = ['agentId', 'appKey', 'appSecret', 'callBack', 'enable']
|
||||
const search = () => {
|
||||
const url = '/dingtalk/info'
|
||||
request.get(url).then((res) => {
|
||||
info.value = res.data
|
||||
existInfo.value = info.value['agentId']
|
||||
for (let index = 0; index < settingList.length; index++) {
|
||||
const element = settingList[index]
|
||||
const key = mappingArray[index]
|
||||
if (index === 4) {
|
||||
element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
|
||||
} else {
|
||||
element['pval'] = res.data[key] || '-'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const switchEnableApi = (enable: any) => {
|
||||
const url = '/dingtalk/switchEnable'
|
||||
const data = { enable }
|
||||
request.post(url, data).catch(() => {
|
||||
info.value.enable = false
|
||||
})
|
||||
}
|
||||
const edit = () => {
|
||||
editor?.value.edit(info.value)
|
||||
}
|
||||
const validate = () => {
|
||||
if (info.value?.appKey && info.value?.appSecret && info.value?.callBack) {
|
||||
validateHandler()
|
||||
}
|
||||
}
|
||||
const validateHandler = () => {
|
||||
const url = '/dingtalk/validate'
|
||||
const data = info.value
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
info.value.valid = true
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
info.value.enable = false
|
||||
info.value.valid = false
|
||||
})
|
||||
}
|
||||
search()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.platform-head-container {
|
||||
height: 41px;
|
||||
border-bottom: 1px solid #1f232926;
|
||||
}
|
||||
.just-head {
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
}
|
||||
.platform-setting-head {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.platform-setting-head-left {
|
||||
display: flex;
|
||||
.lead-left-icon {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
align-items: center;
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
margin-left: 4px;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.lead-left-status {
|
||||
margin-left: 4px;
|
||||
height: 24px;
|
||||
background: #34c72433;
|
||||
padding: 0 6px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
span {
|
||||
line-height: 24px;
|
||||
color: #2ca91f;
|
||||
}
|
||||
}
|
||||
.invalid {
|
||||
background: #f54a4533 !important;
|
||||
span {
|
||||
color: #d03f3b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.platform-setting-head-right-btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.platform-setting-head-right {
|
||||
height: 22px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
span {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.status-switch {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-setting-main {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 0 0 0 !important;
|
||||
::v-deep(.info-template-content) {
|
||||
display: contents !important;
|
||||
}
|
||||
}
|
||||
.platform-foot-container {
|
||||
height: 32px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
</style>
|
||||
@@ -2,28 +2,39 @@
|
||||
<p class="router-title">{{ t('platform.title') }}</p>
|
||||
|
||||
<div class="sys-setting-p">
|
||||
<div class="container-sys-platform">
|
||||
<wecom-info />
|
||||
<div v-for="card in state.cardList" :key="card.type" class="container-sys-platform">
|
||||
<platform-info :card-info="card" @saved="loadData" />
|
||||
</div>
|
||||
<!-- <div class="container-sys-platform not-first">
|
||||
<dingtalk-info />
|
||||
</div> -->
|
||||
<!-- <div class="container-sys-platform not-first">
|
||||
<lark-info />
|
||||
</div>
|
||||
<div class="container-sys-platform not-first">
|
||||
<larksuite-info />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import WecomInfo from './wecom/WecomInfo.vue'
|
||||
/* import DingtalkInfo from './dingtalk/DingtalkInfo.vue' */
|
||||
/* import LarkInfo from './lark/LarkInfo.vue'
|
||||
import LarksuiteInfo from './larksuite/LarksuiteInfo.vue' */
|
||||
import PlatformInfo from './PlatformInfo.vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { request } from '@/utils/request'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import type { PlatformCard } from './common/SettingTemplate'
|
||||
const { t } = useI18n()
|
||||
|
||||
const state = reactive({
|
||||
cardList: [] as PlatformCard[],
|
||||
})
|
||||
|
||||
const loadData = () => {
|
||||
const url = '/system/platform'
|
||||
request.get(url).then((res: any) => {
|
||||
state.cardList = res
|
||||
.map((item: any) => {
|
||||
item.config = JSON.parse(item.config)
|
||||
return item
|
||||
})
|
||||
.filter((card: any) => card.type < 7)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.router-title {
|
||||
@@ -43,6 +54,9 @@ const { t } = useI18n()
|
||||
height: calc(100vh - 136px);
|
||||
box-sizing: border-box;
|
||||
margin-top: 16px;
|
||||
row-gap: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container-sys-platform {
|
||||
padding: 24px;
|
||||
|
||||
@@ -1,262 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage, ElLoading } from 'element-plus-secondary'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
||||
const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
|
||||
const larkForm = ref<FormInstance>()
|
||||
interface LarkForm {
|
||||
appId?: string
|
||||
appSecret?: string
|
||||
callBack?: string
|
||||
enable?: string
|
||||
valid?: string
|
||||
}
|
||||
const state = reactive({
|
||||
form: reactive<LarkForm>({
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
callBack: '',
|
||||
enable: 'false',
|
||||
valid: 'false',
|
||||
}),
|
||||
})
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
const validateUrl = (rule, value, callback) => {
|
||||
const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error(t('system.incorrect_please_re_enter')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const rule = reactive<FormRules>({
|
||||
appId: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
appSecret: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 50,
|
||||
message: t('common.input_limit', [5, 50]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
callBack: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
max: 100,
|
||||
message: t('common.input_limit', [10, 100]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ required: true, validator: validateUrl, trigger: 'blur' },
|
||||
],
|
||||
enable: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
valid: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const edit = (row: any) => {
|
||||
state.form = {
|
||||
appId: row.appId,
|
||||
appSecret: row.appSecret,
|
||||
callBack: row.callBack,
|
||||
enable: row.enable,
|
||||
valid: row.valid,
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const emits = defineEmits(['saved'])
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
const param = { ...state.form }
|
||||
const method = request.post('/lark/create', param)
|
||||
showLoading()
|
||||
method
|
||||
.then((res) => {
|
||||
if (!res.msg) {
|
||||
ElMessage.success(t('common.save_success'))
|
||||
emits('saved')
|
||||
reset()
|
||||
}
|
||||
closeLoading()
|
||||
})
|
||||
.catch(() => {
|
||||
closeLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
resetForm(larkForm.value)
|
||||
}
|
||||
|
||||
const showLoading = () => {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
target: '.platform-info-drawer',
|
||||
})
|
||||
}
|
||||
const closeLoading = () => {
|
||||
loadingInstance.value?.close()
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const url = '/lark/validate'
|
||||
const data = state.form
|
||||
showLoading()
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
state.form.valid = 'true'
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
state.form.enable = 'false'
|
||||
state.form.valid = 'false'
|
||||
})
|
||||
.finally(() => {
|
||||
closeLoading()
|
||||
emits('saved')
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="dialogVisible"
|
||||
:title="t('system.feishu_settings')"
|
||||
modal-class="platform-info-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
<el-form
|
||||
ref="larkForm"
|
||||
require-asterisk-position="right"
|
||||
:model="state.form"
|
||||
:rules="rule"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="APP Key" prop="appId">
|
||||
<el-input v-model="state.form.appId" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="APP Secret" prop="appSecret">
|
||||
<el-input
|
||||
v-model="state.form.appSecret"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('common.please_input')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('system.callback_domain_name')" prop="callBack">
|
||||
<el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button secondary @click="resetForm(larkForm)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
secondary
|
||||
:disabled="!state.form.appId || !state.form.appSecret || !state.form.callBack"
|
||||
@click="validate"
|
||||
>
|
||||
{{ t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="submitForm(larkForm)">
|
||||
{{ t('commons.save') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.platform-info-drawer {
|
||||
.ed-drawer__footer {
|
||||
height: 64px !important;
|
||||
padding: 16px 24px !important;
|
||||
.dialog-footer {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ed-form-item__label {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.platform-info-drawer {
|
||||
.ed-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.is-error {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
.input-with-select {
|
||||
.ed-input-group__prepend {
|
||||
width: 72px;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="platform-head-container" :class="{ 'just-head': !existInfo }">
|
||||
<div class="platform-setting-head">
|
||||
<div class="platform-setting-head-left">
|
||||
<div class="lead-left-icon">
|
||||
<el-icon>
|
||||
<Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<span>{{ t('user.feishu') }}</span>
|
||||
</div>
|
||||
<div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
|
||||
<span>{{
|
||||
info.valid ? t('datasource.valid') : info.appId ? t('datasource.invalid') : ''
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="existInfo" class="platform-setting-head-right">
|
||||
<span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
|
||||
<el-switch
|
||||
v-if="info.valid"
|
||||
v-model="info.enable"
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
<el-tooltip
|
||||
v-else
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="t('platform.can_enable_it')"
|
||||
placement="top"
|
||||
>
|
||||
<el-switch
|
||||
v-model="info.enable"
|
||||
disabled=""
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-else class="platform-setting-head-right-btn">
|
||||
<el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<InfoTemplate
|
||||
v-if="existInfo"
|
||||
class="platform-setting-main"
|
||||
:copy-list="copyList"
|
||||
setting-key="lark"
|
||||
setting-title=""
|
||||
:hide-head="true"
|
||||
:setting-data="settingList"
|
||||
@edit="edit"
|
||||
/>
|
||||
<div v-if="existInfo" class="platform-foot-container">
|
||||
<el-button type="primary" @click="edit">
|
||||
{{ t('commons.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
secondary
|
||||
:disabled="!info.appId || !info.appSecret || !info.callBack"
|
||||
@click="validate"
|
||||
>{{ t('commons.validate') }}</el-button
|
||||
>
|
||||
</div>
|
||||
<lark-edit ref="editor" @saved="search" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import logo_lark from '@/assets/svg/logo_lark.svg'
|
||||
import { ref, reactive } from 'vue'
|
||||
import InfoTemplate from '../common/InfoTemplate.vue'
|
||||
import LarkEdit from './LarkEdit.vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
const existInfo = ref(false)
|
||||
const { t } = useI18n()
|
||||
const editor = ref()
|
||||
const copyList = ['APP Key', 'APP Secret']
|
||||
const settingList = reactive([
|
||||
{
|
||||
pkey: 'APP Key',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
pkey: 'APP Secret',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'pwd',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
pkey: t('system.callback_domain_name'),
|
||||
pval: 'https://de.fit2cloud.com',
|
||||
type: 'text',
|
||||
sort: 3,
|
||||
},
|
||||
])
|
||||
const info = ref({}) as any
|
||||
const mappingArray = ['appId', 'appSecret', 'callBack', 'enable']
|
||||
const search = () => {
|
||||
const url = '/lark/info'
|
||||
request.get(url).then((res) => {
|
||||
info.value = res.data
|
||||
existInfo.value = info.value['appId']
|
||||
for (let index = 0; index < settingList.length; index++) {
|
||||
const element = settingList[index]
|
||||
const key = mappingArray[index]
|
||||
if (index === 3) {
|
||||
element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
|
||||
} else {
|
||||
element['pval'] = res.data[key] || '-'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const switchEnableApi = (enable: any) => {
|
||||
const url = '/lark/switchEnable'
|
||||
const data = { enable }
|
||||
request.post(url, data).catch(() => {
|
||||
info.value.enable = false
|
||||
})
|
||||
}
|
||||
const edit = () => {
|
||||
editor?.value.edit(info.value)
|
||||
}
|
||||
const validate = () => {
|
||||
if (info.value?.appId && info.value?.appSecret && info.value?.callBack) {
|
||||
validateHandler()
|
||||
}
|
||||
}
|
||||
const validateHandler = () => {
|
||||
const url = '/lark/validate'
|
||||
const data = info.value
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
info.value.valid = true
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
info.value.enable = false
|
||||
info.value.valid = false
|
||||
})
|
||||
}
|
||||
search()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.platform-head-container {
|
||||
height: 41px;
|
||||
border-bottom: 1px solid #1f232926;
|
||||
}
|
||||
.just-head {
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
}
|
||||
.platform-setting-head {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.platform-setting-head-left {
|
||||
display: flex;
|
||||
.lead-left-icon {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
align-items: center;
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
margin-left: 4px;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.lead-left-status {
|
||||
margin-left: 4px;
|
||||
height: 24px;
|
||||
background: #34c72433;
|
||||
padding: 0 6px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
span {
|
||||
line-height: 24px;
|
||||
color: #2ca91f;
|
||||
}
|
||||
}
|
||||
.invalid {
|
||||
background: #f54a4533 !important;
|
||||
span {
|
||||
color: #d03f3b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.platform-setting-head-right-btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.platform-setting-head-right {
|
||||
height: 22px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
span {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.status-switch {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-setting-main {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 0 0 0 !important;
|
||||
::v-deep(.info-template-content) {
|
||||
display: contents !important;
|
||||
}
|
||||
}
|
||||
.platform-foot-container {
|
||||
height: 32px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,262 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage, ElLoading } from 'element-plus-secondary'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
||||
const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
|
||||
const larksuiteForm = ref<FormInstance>()
|
||||
interface LarksuiteForm {
|
||||
appId?: string
|
||||
appSecret?: string
|
||||
callBack?: string
|
||||
enable?: string
|
||||
valid?: string
|
||||
}
|
||||
const state = reactive({
|
||||
form: reactive<LarksuiteForm>({
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
callBack: '',
|
||||
enable: 'false',
|
||||
valid: 'false',
|
||||
}),
|
||||
})
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
const validateUrl = (rule, value, callback) => {
|
||||
const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error(t('system.incorrect_please_re_enter')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const rule = reactive<FormRules>({
|
||||
appId: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: t('common.input_limit', [5, 20]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
appSecret: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 5,
|
||||
max: 50,
|
||||
message: t('common.input_limit', [5, 50]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
callBack: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
max: 100,
|
||||
message: t('common.input_limit', [10, 100]),
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ required: true, validator: validateUrl, trigger: 'blur' },
|
||||
],
|
||||
enable: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
valid: [
|
||||
{
|
||||
required: true,
|
||||
message: t('common.require'),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const edit = (row: any) => {
|
||||
state.form = {
|
||||
appId: row.appId,
|
||||
appSecret: row.appSecret,
|
||||
callBack: row.callBack,
|
||||
enable: row.enable,
|
||||
valid: row.valid,
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const emits = defineEmits(['saved'])
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
const param = { ...state.form }
|
||||
const method = request.post('/larksuite/create', param)
|
||||
showLoading()
|
||||
method
|
||||
.then((res) => {
|
||||
if (!res.msg) {
|
||||
ElMessage.success(t('common.save_success'))
|
||||
emits('saved')
|
||||
reset()
|
||||
}
|
||||
closeLoading()
|
||||
})
|
||||
.catch(() => {
|
||||
closeLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
resetForm(larksuiteForm.value)
|
||||
}
|
||||
|
||||
const showLoading = () => {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
target: '.platform-info-drawer',
|
||||
})
|
||||
}
|
||||
const closeLoading = () => {
|
||||
loadingInstance.value?.close()
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const url = '/larksuite/validate'
|
||||
const data = state.form
|
||||
showLoading()
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
state.form.valid = 'true'
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
state.form.enable = 'false'
|
||||
state.form.valid = 'false'
|
||||
})
|
||||
.finally(() => {
|
||||
closeLoading()
|
||||
emits('saved')
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="dialogVisible"
|
||||
:title="t('system.international_feishu_settings')"
|
||||
modal-class="platform-info-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
<el-form
|
||||
ref="larksuiteForm"
|
||||
require-asterisk-position="right"
|
||||
:model="state.form"
|
||||
:rules="rule"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="APP Key" prop="appId">
|
||||
<el-input v-model="state.form.appId" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="APP Secret" prop="appSecret">
|
||||
<el-input
|
||||
v-model="state.form.appSecret"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('common.please_input')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('system.callback_domain_name')" prop="callBack">
|
||||
<el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button secondary @click="resetForm(larksuiteForm)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
secondary
|
||||
:disabled="!state.form.appId || !state.form.appSecret || !state.form.callBack"
|
||||
@click="validate"
|
||||
>
|
||||
{{ t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="submitForm(larksuiteForm)">
|
||||
{{ t('commons.save') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.platform-info-drawer {
|
||||
.ed-drawer__footer {
|
||||
height: 64px !important;
|
||||
padding: 16px 24px !important;
|
||||
.dialog-footer {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.ed-form-item__label {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.platform-info-drawer {
|
||||
.ed-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.is-error {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
.input-with-select {
|
||||
.ed-input-group__prepend {
|
||||
width: 72px;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,241 +0,0 @@
|
||||
<template>
|
||||
<div class="platform-head-container" :class="{ 'just-head': !existInfo }">
|
||||
<div class="platform-setting-head">
|
||||
<div class="platform-setting-head-left">
|
||||
<div class="lead-left-icon">
|
||||
<el-icon>
|
||||
<Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<span>{{ t('system.international_feishu') }}</span>
|
||||
</div>
|
||||
<div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
|
||||
<span>{{
|
||||
info.valid ? t('datasource.valid') : info.appId ? t('datasource.invalid') : ''
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="existInfo" class="platform-setting-head-right">
|
||||
<span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
|
||||
<el-switch
|
||||
v-if="info.valid"
|
||||
v-model="info.enable"
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
<el-tooltip
|
||||
v-else
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="t('platform.can_enable_it')"
|
||||
placement="top"
|
||||
>
|
||||
<el-switch
|
||||
v-model="info.enable"
|
||||
disabled=""
|
||||
class="status-switch"
|
||||
@change="switchEnableApi"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-else class="platform-setting-head-right-btn">
|
||||
<el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<InfoTemplate
|
||||
v-if="existInfo"
|
||||
class="platform-setting-main"
|
||||
:copy-list="copyList"
|
||||
setting-key="larksuite"
|
||||
setting-title=""
|
||||
:hide-head="true"
|
||||
:setting-data="settingList"
|
||||
@edit="edit"
|
||||
/>
|
||||
<div v-if="existInfo" class="platform-foot-container">
|
||||
<el-button type="primary" @click="edit">
|
||||
{{ t('commons.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
secondary
|
||||
:disabled="!info.appId || !info.appSecret || !info.callBack"
|
||||
@click="validate"
|
||||
>{{ t('commons.validate') }}</el-button
|
||||
>
|
||||
</div>
|
||||
<larksuite-edit ref="editor" @saved="search" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import logo_lark from '@/assets/svg/logo_lark.svg'
|
||||
import { ref, reactive } from 'vue'
|
||||
import InfoTemplate from '../common/InfoTemplate.vue'
|
||||
import LarksuiteEdit from './LarksuiteEdit.vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
const { t } = useI18n()
|
||||
|
||||
const existInfo = ref(false)
|
||||
const editor = ref()
|
||||
const copyList = ['APP Key', 'APP Secret']
|
||||
const settingList = reactive([
|
||||
{
|
||||
pkey: 'APP Key',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'text',
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
pkey: 'APP Secret',
|
||||
pval: 'smtp.exmail.qq.com',
|
||||
type: 'pwd',
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
pkey: t('system.callback_domain_name'),
|
||||
pval: 'https://de.fit2cloud.com',
|
||||
type: 'text',
|
||||
sort: 3,
|
||||
},
|
||||
])
|
||||
const info = ref({}) as any
|
||||
const mappingArray = ['appId', 'appSecret', 'callBack', 'enable']
|
||||
const search = () => {
|
||||
const url = '/larksuite/info'
|
||||
request.get(url).then((res) => {
|
||||
info.value = res.data
|
||||
existInfo.value = info.value['appId']
|
||||
for (let index = 0; index < settingList.length; index++) {
|
||||
const element = settingList[index]
|
||||
const key = mappingArray[index]
|
||||
if (index === 3) {
|
||||
element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
|
||||
} else {
|
||||
element['pval'] = res.data[key] || '-'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const switchEnableApi = (enable: any) => {
|
||||
const url = '/larksuite/switchEnable'
|
||||
const data = { enable }
|
||||
request.post(url, data).catch(() => {
|
||||
info.value.enable = false
|
||||
})
|
||||
}
|
||||
const edit = () => {
|
||||
editor?.value.edit(info.value)
|
||||
}
|
||||
const validate = () => {
|
||||
if (info.value?.appId && info.value?.appSecret && info.value?.callBack) {
|
||||
validateHandler()
|
||||
}
|
||||
}
|
||||
const validateHandler = () => {
|
||||
const url = '/larksuite/validate'
|
||||
const data = info.value
|
||||
request
|
||||
.post(url, data)
|
||||
.then(() => {
|
||||
info.value.valid = true
|
||||
ElMessage.success(t('datasource.validate_success'))
|
||||
})
|
||||
.catch(() => {
|
||||
info.value.enable = false
|
||||
info.value.valid = false
|
||||
})
|
||||
}
|
||||
search()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.platform-head-container {
|
||||
height: 41px;
|
||||
border-bottom: 1px solid #1f232926;
|
||||
}
|
||||
.just-head {
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
}
|
||||
.platform-setting-head {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.platform-setting-head-left {
|
||||
display: flex;
|
||||
.lead-left-icon {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
align-items: center;
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
span {
|
||||
margin-left: 4px;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.lead-left-status {
|
||||
margin-left: 4px;
|
||||
height: 24px;
|
||||
background: #34c72433;
|
||||
padding: 0 6px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
span {
|
||||
line-height: 24px;
|
||||
color: #2ca91f;
|
||||
}
|
||||
}
|
||||
.invalid {
|
||||
background: #f54a4533 !important;
|
||||
span {
|
||||
color: #d03f3b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.platform-setting-head-right-btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.platform-setting-head-right {
|
||||
height: 22px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
span {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.status-switch {
|
||||
line-height: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-setting-main {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 0 0 0 !important;
|
||||
::v-deep(.info-template-content) {
|
||||
display: contents !important;
|
||||
}
|
||||
}
|
||||
.platform-foot-container {
|
||||
height: 32px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user