119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<template>
|
|
<n-modal
|
|
v-model:show="showModal"
|
|
preset="dialog"
|
|
:show-icon="false"
|
|
:title="'外部服务配置 - ' + serviceLabel"
|
|
:style="{ width: dialogWidth }"
|
|
>
|
|
<n-form ref="formRef" :model="formValue" label-placement="left" label-width="90">
|
|
<n-form-item label="服务商">
|
|
<n-input v-model:value="formValue.provider" placeholder="请输入服务商" />
|
|
</n-form-item>
|
|
<n-form-item label="端点">
|
|
<n-input v-model:value="formValue.endpoint" placeholder="请输入服务端点" />
|
|
</n-form-item>
|
|
<n-form-item label="启用">
|
|
<n-switch v-model:value="enabledValue" />
|
|
</n-form-item>
|
|
<n-form-item label="普通配置">
|
|
<n-input
|
|
v-model:value="formValue.configJson"
|
|
type="textarea"
|
|
:autosize="{ minRows: 5, maxRows: 10 }"
|
|
placeholder="请输入JSON配置"
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="敏感配置">
|
|
<n-input
|
|
v-model:value="formValue.secretJson"
|
|
type="textarea"
|
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
|
placeholder="留空则保持原敏感配置"
|
|
/>
|
|
</n-form-item>
|
|
</n-form>
|
|
<template #action>
|
|
<n-space>
|
|
<n-button @click="closeForm">取消</n-button>
|
|
<n-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</n-button>
|
|
</n-space>
|
|
</template>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useMessage } from 'naive-ui';
|
|
import { useDictStore } from '@/store/modules/dict';
|
|
import { adaModalWidth } from '@/utils/hotgo';
|
|
import { newState, State } from './model';
|
|
import { Update } from '@/api/imExternalConfig';
|
|
|
|
const emit = defineEmits(['reloadTable']);
|
|
const message = useMessage();
|
|
const dict = useDictStore();
|
|
const showModal = ref(false);
|
|
const submitLoading = ref(false);
|
|
const formRef = ref();
|
|
const formValue = ref<State>(newState(null));
|
|
const dialogWidth = computed(() => adaModalWidth(760));
|
|
const serviceLabel = computed(
|
|
() =>
|
|
dict.getLabel('ImExternalServiceOptions', formValue.value.service) || formValue.value.service
|
|
);
|
|
const enabledValue = computed({
|
|
get: () => formValue.value.enabled === 1,
|
|
set: (value: boolean) => {
|
|
formValue.value.enabled = value ? 1 : 0;
|
|
},
|
|
});
|
|
|
|
function closeForm() {
|
|
showModal.value = false;
|
|
}
|
|
|
|
function parseJson(value: string, field: string) {
|
|
const text = (value || '').trim();
|
|
if (!text) return null;
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch {
|
|
throw new Error(`${field}不是合法JSON`);
|
|
}
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
submitLoading.value = true;
|
|
try {
|
|
const configJson = parseJson(formValue.value.configJson || '{}', '普通配置') || {};
|
|
const secretJson = parseJson(formValue.value.secretJson, '敏感配置');
|
|
await Update({
|
|
tenantId: formValue.value.tenantId,
|
|
service: formValue.value.service,
|
|
provider: formValue.value.provider,
|
|
endpoint: formValue.value.endpoint,
|
|
enabled: formValue.value.enabled,
|
|
configJson,
|
|
secretJson,
|
|
});
|
|
message.success('操作成功');
|
|
closeForm();
|
|
emit('reloadTable');
|
|
} catch (e: any) {
|
|
message.error(e.message || '操作失败');
|
|
} finally {
|
|
submitLoading.value = false;
|
|
}
|
|
}
|
|
|
|
function openModal(state: State) {
|
|
formValue.value = newState(state);
|
|
formValue.value.secretJson = '';
|
|
if (!formValue.value.configJson) formValue.value.configJson = '{}';
|
|
showModal.value = true;
|
|
}
|
|
|
|
defineExpose({ openModal });
|
|
</script>
|