717f5a3c34
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
CI / Test (windows-latest) (push) Has been cancelled
CI / Lint (ubuntu-latest) (push) Has been cancelled
CI / Lint (windows-latest) (push) Has been cancelled
CI / Check (ubuntu-latest) (push) Has been cancelled
CI / Check (windows-latest) (push) Has been cancelled
CodeQL / Analyze (${{ matrix.language }}) (none, javascript-typescript) (push) Has been cancelled
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
CI / CI OK (push) Has been cancelled
92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
||
import { addAdminConfig } from '#/api/core/admin.user';
|
||
import { useVbenModal } from '@vben/common-ui';
|
||
import { useVbenForm } from '#/adapter/form';
|
||
import type { AdminConfig } from '#/api/core/admin.user';
|
||
import JsonEitorVue from 'json-editor-vue';
|
||
import {ref} from 'vue';
|
||
const config_value = ref();
|
||
const [Form, FormApi] = useVbenForm({
|
||
// 所有表单项共用，可单独在表单内覆盖s
|
||
commonConfig: {
|
||
// 所有表单项
|
||
componentProps: {
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
|
||
// 使用 tailwindcss grid布局
|
||
// 提交函数
|
||
// 垂直布局，label和input在不同行，值为vertical
|
||
layout: 'horizontal',
|
||
// 水平布局，label和input在同一行
|
||
schema: [
|
||
{
|
||
component: 'Input',
|
||
componentProps: {
|
||
placeholder: 'key',
|
||
},
|
||
formItemClass: 'col-span-2',
|
||
fieldName: 'key',
|
||
rules: 'required',
|
||
label: 'Key',
|
||
},
|
||
{
|
||
component: 'Input',
|
||
componentProps: {},
|
||
rules: 'required',
|
||
fieldName: 'value',
|
||
label: '值',
|
||
formItemClass: 'col-span-2',
|
||
},
|
||
{
|
||
component: 'Textarea',
|
||
componentProps: {},
|
||
rules: 'required',
|
||
fieldName: 'remark',
|
||
label: '备注',
|
||
formItemClass: 'col-span-2',
|
||
},
|
||
],
|
||
showDefaultActions: false,
|
||
// 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
|
||
wrapperClass: 'grid-cols-2',
|
||
});
|
||
const [Modal, modalApi] = useVbenModal({
|
||
confirmText: '提交',
|
||
onOpenChange: () => { },
|
||
onConfirm: async () => {
|
||
// 提交表单
|
||
const values = await FormApi.getValues();
|
||
const cfgjson =
|
||
typeof config_value.value === 'string'
|
||
? JSON.parse(config_value.value)
|
||
: config_value.value;
|
||
const jsonString = JSON.stringify(cfgjson);
|
||
const Parms: AdminConfig = {
|
||
key: values.key,
|
||
value: jsonString,
|
||
remark: values.remark,
|
||
};
|
||
await addAdminConfig(Parms);
|
||
modalApi.close();
|
||
},
|
||
});
|
||
defineOptions({
|
||
name: 'AddServerModal',
|
||
});
|
||
defineExpose({
|
||
FormApi,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Modal title="添加配置" :width="800">
|
||
<Form >
|
||
<template #value>
|
||
<JsonEitorVue v-model="config_value" v-bind="{/* local props & attrs */}" class="w-[100%] h-[500px]"/>
|
||
</template>
|
||
</Form>>
|
||
</Modal>
|
||
</template>
|