<script lang="ts" setup>
|
import type { FormSchema } from '@jnpf/ui/form';
|
|
import { computed, reactive, toRefs } from 'vue';
|
|
import { useGlobSetting, useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicPopup, usePopupInner } from '@jnpf/ui/popup';
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { create, getAppSecret, getInfo, update } from '#/api/systemData/interfaceOauth';
|
import { $t } from '#/locales';
|
|
import Info from './components/Info.vue';
|
|
interface State {
|
showLoading: boolean;
|
id: string;
|
isDetail: boolean;
|
dataForm: any;
|
tableList: any[];
|
userTableList: any[];
|
activeKey: string;
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
showLoading: false,
|
id: '',
|
isDetail: false,
|
dataForm: {},
|
tableList: [],
|
userTableList: [],
|
activeKey: '1',
|
});
|
const { showLoading, id } = toRefs(state);
|
const schemas: FormSchema[] = [
|
{
|
field: 'appId',
|
label: 'appId',
|
component: 'Input',
|
componentProps: { placeholder: '请输入', maxlength: 100 },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
{
|
field: 'appSecret',
|
label: '获取秘钥',
|
component: 'Input',
|
slot: 'appSecret',
|
rules: [{ required: true, trigger: 'change', message: '必填' }],
|
},
|
{
|
ifShow: () => !state.isDetail,
|
field: 'appName',
|
label: '应用名称',
|
component: 'Input',
|
componentProps: { placeholder: '请输入' },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
{
|
field: 'verifySignature',
|
label: '验证签名',
|
component: 'Switch',
|
defaultValue: 0,
|
slot: 'verifySignature',
|
helpMessage: '开启后需要验证消息签名的真实性',
|
},
|
{
|
field: 'usefulLife',
|
label: '使用期限',
|
component: 'DatePicker',
|
helpMessage: '未选择日期默认永久有效',
|
componentProps: { placeholder: '请选择' },
|
},
|
{
|
field: 'whiteList',
|
label: '白名单',
|
component: 'Textarea',
|
helpMessage: '多个IP设置，用英文符号隔开，如192.168.0.1,192.168.0.2',
|
componentProps: { rows: 5, placeholder: '请输入' },
|
},
|
{
|
field: 'sortCode',
|
label: '排序',
|
component: 'InputNumber',
|
defaultValue: 0,
|
componentProps: { min: '0', max: '999999', placeholder: '请输入' },
|
},
|
{
|
field: 'enabledMark',
|
label: '状态',
|
defaultValue: 1,
|
component: 'Switch',
|
},
|
{
|
field: 'description',
|
label: '说明',
|
component: 'Textarea',
|
componentProps: { rows: 5, placeholder: '请输入' },
|
},
|
{
|
ifShow: () => !!state.isDetail,
|
field: 'list',
|
label: '',
|
slot: 'table',
|
component: 'Input',
|
},
|
];
|
|
const title = computed(() => (state.isDetail ? state.dataForm.appName : state.id ? $t('common.editText') : $t('common.addText')));
|
|
const { createMessage } = useMessage();
|
const globSetting = useGlobSetting();
|
const [registerInfo, { openModal: openInfoModal }] = useModal();
|
const [registerForm, { setFieldsValue, validate, resetFields }] = useForm({ labelWidth: 90, schemas });
|
const [registerPopup, { closePopup, changeLoading, changeOkLoading }] = usePopupInner(init);
|
const interfaceColumns: any = [
|
{ type: 'expand', width: 50, slots: { content: 'expandedRowRender' } },
|
{ title: '接口名称', field: 'fullName', width: 120 },
|
{ title: '接口编码', field: 'enCode', width: 80 },
|
{ title: '接口地址', field: 'url' },
|
{ title: '接口类型', field: 'dataType', width: 80, slots: { default: 'dataType' } },
|
];
|
const paramColumns = [
|
{ title: '参数名称', field: 'field' },
|
{ title: '参数类型', field: 'dataType', width: 100 },
|
{ title: '默认值', field: 'defaultValue', width: 100 },
|
];
|
const userColumns = [
|
{ title: '用户名', field: 'userName', width: 200 },
|
{ title: 'userKey', field: 'userKey' },
|
];
|
|
function init(data) {
|
state.showLoading = false;
|
resetFields();
|
state.id = data.id;
|
state.isDetail = !!data.isDetail || false;
|
state.tableList = [];
|
state.userTableList = [];
|
if (state.id) {
|
changeLoading(true);
|
getInfo(state.id).then((res) => {
|
const data = res.data;
|
state.dataForm = data;
|
setFieldsValue(data);
|
const tenantId = data.tenantId ? data.tenantId : '';
|
if (data.list) {
|
data.list.map((item) => {
|
item.url = `${globSetting.apiURL}/api/system/DataInterface/${item.id}/Actions/Response${tenantId ? `?tenantId=${tenantId}` : ''}`;
|
if (item.parameterJson) item.paramList = [...JSON.parse(item.parameterJson)];
|
if (item.paramList?.length) {
|
item.paramList.forEach((elem) => {
|
const options = [
|
{ label: '字符串', value: 'varchar' },
|
{ label: '整型', value: 'int' },
|
{ label: '日期时间', value: 'datetime' },
|
{ label: '浮点', value: 'decimal' },
|
{ label: '长整型', value: 'bigint' },
|
{ label: '文本', value: 'text' },
|
];
|
options.map((option) => {
|
if (option.value == elem.dataType) elem.dataType = option.label;
|
return option;
|
});
|
});
|
}
|
return item;
|
});
|
state.tableList = data.list || [];
|
}
|
state.userTableList = data.userList || [];
|
changeLoading(false);
|
});
|
}
|
}
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
changeOkLoading(true);
|
values.oracleExtend = !!values.oracleExtend;
|
const query = {
|
...values,
|
id: id.value,
|
};
|
const formMethod = id.value ? update : create;
|
formMethod(query)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closePopup();
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
}
|
function handleAppSecret() {
|
state.showLoading = true;
|
getAppSecret()
|
.then((res) => {
|
state.showLoading = false;
|
setFieldsValue({
|
appSecret: res.data,
|
});
|
})
|
.then(() => {
|
state.showLoading = false;
|
});
|
}
|
function showVerifyTips() {
|
openInfoModal(true);
|
}
|
</script>
|
<template>
|
<BasicPopup v-bind="$attrs" @register="registerPopup" :title="title" :show-ok-btn="!state.isDetail" @ok="handleSubmit" destroy-on-close>
|
<a-row class="mt-[20px] h-full overflow-auto">
|
<a-col :span="14" :offset="5">
|
<BasicForm @register="registerForm" :disabled="state.isDetail">
|
<template #appSecret="{ model, field }">
|
<a-input-password v-model:value="model[field]" placeholder="请输入" readonly show-password :disabled="state.isDetail">
|
<template #addonAfter v-if="!state.isDetail">
|
<LoadingOutlined class="mr-[5px]" v-if="showLoading" />
|
<span class="cursor-pointer" @click="handleAppSecret">获取秘钥</span>
|
</template>
|
</a-input-password>
|
</template>
|
<template #verifySignature="{ model, field }">
|
<jnpf-switch v-model:value="model[field]" :disabled="state.isDetail" />
|
<a class="float-right" @click="showVerifyTips">验证签名使用说明</a>
|
</template>
|
<template #table>
|
<a-tabs v-model:active-key="state.activeKey">
|
<a-tab-pane key="1" tab="接口集合">
|
<VxeGrid :data="state.tableList" :columns="interfaceColumns" border="inner">
|
<template #expandedRowRender="{ row }">
|
<VxeGrid :columns="paramColumns" :data="row.paramList" border="inner" :min-height="0" />
|
</template>
|
<template #dataType>
|
<a-tag color="blue">POST</a-tag>
|
</template>
|
</VxeGrid>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="用户集合">
|
<VxeGrid :data="state.userTableList" :columns="userColumns" border="inner" />
|
</a-tab-pane>
|
</a-tabs>
|
</template>
|
</BasicForm>
|
</a-col>
|
</a-row>
|
<Info @register="registerInfo" />
|
</BasicPopup>
|
</template>
|
