98 lines
3.5 KiB
Vue
98 lines
3.5 KiB
Vue
<template>
|
||
<AppForm v-model="visible" :initForm="detailData" :categoryList="categoryList" :isEdit="true" :loading="submitting"
|
||
@submit="handleSubmit" @cancel="visible = false" @reset-secret="handleResetSecret" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import AppForm from "./AppForm.vue";
|
||
import MyConfirm from '@/components/MyConfirm'
|
||
|
||
/* ---------- 对外暴露 ---------- */
|
||
const visible = ref(false);
|
||
const categoryList = ref<any[]>([]);
|
||
|
||
// 编辑模式：从 appList 中根据 id 取出详情回填（无独立详情接口）
|
||
const detailData = ref<Record<string, any>>({});
|
||
const currentId = ref<number | null>(null);
|
||
|
||
// 成功后回调
|
||
let onSuccessCallback: (() => void) | null = null;
|
||
|
||
// useForm 托管提交——currentId 是 ref，闭包内 .value 在 sendForm 时取当前值
|
||
const { form, loading: submitting, send: sendForm, onSuccess, onError } = useForm(
|
||
(dto) => Apis.AppSettings.editApp({ pathParams: { id: currentId.value }, data: dto }),
|
||
{ initialForm: { id: null, name: '', categoryId: undefined, desc: '', clients: [], pcUrl: '', pcIcon: '', appUrl: '', appIcon: '', officialAccountUrl: '', dingtalkUrl: '' }, resetAfterSubmiting: true }
|
||
);
|
||
|
||
onSuccess(() => {
|
||
Message.success('编辑应用成功！');
|
||
visible.value = false;
|
||
onSuccessCallback?.();
|
||
});
|
||
onError((event) => {
|
||
Message.error(event?.error?.message || '编辑失败');
|
||
});
|
||
|
||
/* ---------- 打开编辑弹窗 ---------- */
|
||
/**
|
||
* @param id - 应用 ID
|
||
* @param row - 当前行完整数据（来自表格列表），直接用作回填数据
|
||
* @param categories - 应用类型列表
|
||
* @param onSuccess - 编辑成功后的回调
|
||
*/
|
||
function open(id: number, row: any, categories: any[], onSuccess?: () => void) {
|
||
currentId.value = id;
|
||
categoryList.value = categories || [];
|
||
// 直接用行数据回填（appList 接口返回的字段与表单一致）
|
||
detailData.value = { ...row };
|
||
onSuccessCallback = onSuccess || null;
|
||
visible.value = true;
|
||
}
|
||
|
||
/* ---------- 提交：由 useForm 接管 loading 与异常处理 ---------- */
|
||
async function handleSubmit(formData: Record<string, any>) {
|
||
if (!currentId.value) return;
|
||
form.value = {
|
||
id: currentId.value,
|
||
name: formData.name,
|
||
categoryId: formData.categoryId,
|
||
desc: formData.desc,
|
||
clients: formData.clients,
|
||
pcUrl: formData.pcUrl,
|
||
pcIcon: formData.pcIcon,
|
||
appUrl: formData.appUrl,
|
||
appIcon: formData.appIcon,
|
||
officialAccountUrl: formData.officialAccountUrl,
|
||
dingtalkUrl: formData.dingtalkUrl,
|
||
};
|
||
await sendForm();
|
||
}
|
||
|
||
/* ---------- 重置密钥（非表单提交，直接 MyConfirm + await） ---------- */
|
||
async function handleResetSecret() {
|
||
if (!currentId.value) return;
|
||
try {
|
||
await MyConfirm({
|
||
msg: '确定要重置该应用的 Secret 吗？',
|
||
info: '重置后原 Secret 将立即失效！',
|
||
async onOk() {
|
||
const newSecret = await Apis.AppSettings.resetAppSecret({
|
||
pathParams: { id: currentId.value! },
|
||
});
|
||
Message.success('密钥已重置！新 Secret: ' + (newSecret || ''));
|
||
// 更新表单中的 secret 回显值
|
||
if (newSecret) {
|
||
detailData.value = { ...detailData.value, appSecret: newSecret };
|
||
}
|
||
return true;
|
||
},
|
||
});
|
||
} catch {
|
||
// 用户取消
|
||
}
|
||
}
|
||
|
||
defineExpose({ open, visible });
|
||
</script>
|