feat: 新增动态表单示例
This commit is contained in:
JaguarJack
parent
51be5c648b
commit
1d694a81c5
@ -1,11 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
$END$
|
||||
<div>
|
||||
<CatchForm :schema="form" @onSubmit="submit"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<script lang="ts" setup>
|
||||
const form = {
|
||||
items: [
|
||||
{
|
||||
name: 'Grid_FhAuLh',
|
||||
props: {
|
||||
columns: 2
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'Grid_qRvhpR',
|
||||
props: {
|
||||
columns: 1
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'type',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮'
|
||||
}
|
||||
],
|
||||
optionType: 'button'
|
||||
},
|
||||
label: '菜单类型',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 1
|
||||
},
|
||||
{
|
||||
name: 'permission_name',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '菜单名称',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'module',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '权限管理',
|
||||
value: 'permissions'
|
||||
},
|
||||
{
|
||||
label: '动态表单',
|
||||
value: 'test'
|
||||
},
|
||||
{
|
||||
label: 'Testss',
|
||||
value: 'tests'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '所属模块',
|
||||
component: 'select',
|
||||
class: 'mt-4',
|
||||
required: true,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'route',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '路由Path',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
required: true,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'redirect',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '重定向',
|
||||
component: 'input',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'sort',
|
||||
props: {
|
||||
clearable: true,
|
||||
min: 1,
|
||||
max: 10000
|
||||
},
|
||||
label: '排序',
|
||||
component: 'input_number',
|
||||
class: 'mt-4',
|
||||
initialValue: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
props: {
|
||||
columns: 1
|
||||
},
|
||||
component: 'grid',
|
||||
children: [
|
||||
{
|
||||
name: 'parent_id',
|
||||
props: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
parent_id: 0,
|
||||
permission_name: '权限管理',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
parent_id: 1,
|
||||
permission_name: '角色管理'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
parent_id: 1,
|
||||
permission_name: '菜单管理'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
parent_id: 1,
|
||||
permission_name: '岗位管理'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
parent_id: 1,
|
||||
permission_name: '部门管理'
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
parent_id: 1,
|
||||
permission_name: '创建菜单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
parent_id: 0,
|
||||
permission_name: '测试',
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
parent_id: 30,
|
||||
permission_name: '测试看看'
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
parent_id: 30,
|
||||
permission_name: '创建'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
label: 'permission_name',
|
||||
valueKey: 'id',
|
||||
value: 'id',
|
||||
'show-all-levels': false,
|
||||
checkStrictly: true,
|
||||
class: 'w-full'
|
||||
},
|
||||
label: '上级菜单',
|
||||
component: 'cascader',
|
||||
class: 'mt-4'
|
||||
},
|
||||
{
|
||||
name: 'permission_mark',
|
||||
props: {
|
||||
clearable: true,
|
||||
api: 'options/controllers',
|
||||
query: {
|
||||
module: '{{ $values.module }}'
|
||||
}
|
||||
},
|
||||
label: '权限标识',
|
||||
component: '{{$values.type == 3 ? "input" : "select"}}',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 1}}',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'icon',
|
||||
props: {
|
||||
clearable: true
|
||||
},
|
||||
label: '图标',
|
||||
component: 'icon_select',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'component',
|
||||
props: {
|
||||
clearable: true,
|
||||
"allow-create": true
|
||||
},
|
||||
label: '所属组件',
|
||||
component: 'select',
|
||||
class: 'mt-4',
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'hidden',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '否'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '是否隐藏',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 2,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
},
|
||||
{
|
||||
name: 'keepalive',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '否'
|
||||
}
|
||||
]
|
||||
},
|
||||
label: '是否缓存',
|
||||
component: 'radio',
|
||||
class: 'mt-4',
|
||||
initialValue: 2,
|
||||
hidden: '{{$values.type == 3}}'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// @ts-nocheck
|
||||
/**import { useCreate } from '@/form/composables/useCreate'
|
||||
const props = defineProps({
|
||||
primary: [String, Number],
|
||||
api: String,
|
||||
})
|
||||
|
||||
</style>
|
||||
|
||||
const { form } = useCreate(props.api, props.primary)
|
||||
*/
|
||||
const submit = (formData) => {
|
||||
console.log(formData)
|
||||
}
|
||||
</script>
|
||||
|
||||
53
modules/Develop/views/dymaic/index.vue
Normal file
53
modules/Develop/views/dymaic/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<catch-table
|
||||
:columns="[
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'role_name'
|
||||
},
|
||||
{
|
||||
label: '角色标识',
|
||||
prop: 'description'
|
||||
},
|
||||
{
|
||||
label: '角色描述',
|
||||
prop: 'role_name'
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'created_at'
|
||||
},
|
||||
{
|
||||
type: 'operate',
|
||||
label: '操作',
|
||||
width: 200
|
||||
}
|
||||
]"
|
||||
:api="api"
|
||||
:search-form="[
|
||||
{
|
||||
type: 'input',
|
||||
label: '角色名称',
|
||||
name: 'role_name'
|
||||
}
|
||||
]"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #dialog="row">
|
||||
<Create :primary="row?.id" :api="api"/>
|
||||
</template>
|
||||
</catch-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// @ts-nocheck
|
||||
// import Create from './form/create.vue'
|
||||
import Create from './create.vue'
|
||||
|
||||
const api = 'permissions/roles'
|
||||
|
||||
</script>
|
||||
|
||||
@ -25,6 +25,12 @@ const router: RouteRecordRaw[] = [
|
||||
meta: { title: '代码生成', hidden: true, active_menu: '/develop/schemas' },
|
||||
component: () => import('./generate/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'dymaic',
|
||||
name: 'dymaic',
|
||||
meta: { title: '动态表格' },
|
||||
component: () => import('./dymaic/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user