feat: 普通表单
This commit is contained in:
wang_fan_w
parent
f053731356
commit
1b2c3c455e
@ -2,11 +2,11 @@ export default {
|
||||
language: {
|
||||
["login"]: "login",
|
||||
["home"]: "home",
|
||||
["basic-table"]: "basic table",
|
||||
["table-management"]: "table management",
|
||||
["common-table"]: "common table",
|
||||
["custom-table"]: "custom table",
|
||||
["common-components"]: "common components",
|
||||
["form-component"]: "form components",
|
||||
["form-management"]: "form management",
|
||||
["common-form"]: "common form",
|
||||
["dynamic-form"]: "dynamic form",
|
||||
["multilevel-menu"]: "multilevel menu",
|
||||
["second-menu-1"]: "second-menu-1",
|
||||
|
||||
@ -2,11 +2,11 @@ export default {
|
||||
language: {
|
||||
["login"]: "登录",
|
||||
["home"]: "首页",
|
||||
["basic-table"]: "表格 Table",
|
||||
["common-table"]: "普通表格",
|
||||
["custom-table"]: "自定义表格",
|
||||
["common-components"]: "常用组件",
|
||||
["form-component"]: "表单组件",
|
||||
["table-management"]: "列表管理",
|
||||
["common-table"]: "普通列表",
|
||||
["custom-table"]: "自定义列表",
|
||||
["form-management"]: "表单管理",
|
||||
["common-form"]: "普通表单",
|
||||
["dynamic-form"]: "动态表单",
|
||||
["multilevel-menu"]: "多级菜单",
|
||||
["second-menu-1"]: "二级菜单-1",
|
||||
|
||||
@ -66,11 +66,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/basic-table",
|
||||
name: "basic-table",
|
||||
redirect: "/basic-table/common-table",
|
||||
path: "/table-management",
|
||||
name: "table-management",
|
||||
redirect: "/table-management/common-table",
|
||||
meta: {
|
||||
title: "basic-table",
|
||||
title: "table-management",
|
||||
link: "",
|
||||
hide: false,
|
||||
keepAlive: true,
|
||||
@ -81,9 +81,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/basic-table/common-table",
|
||||
path: "/table-management/common-table",
|
||||
name: "common-table",
|
||||
component: () => import("@/views/basic-table/common-table/common-table.vue"),
|
||||
component: () => import("@/views/table-management/common-table/common-table.vue"),
|
||||
meta: {
|
||||
title: "common-table",
|
||||
link: "",
|
||||
@ -96,9 +96,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/basic-table/custom-table",
|
||||
path: "/table-management/custom-table",
|
||||
name: "custom-table",
|
||||
component: () => import("@/views/basic-table/custom-table/custom-table.vue"),
|
||||
component: () => import("@/views/table-management/custom-table/custom-table.vue"),
|
||||
meta: {
|
||||
title: "custom-table",
|
||||
link: "",
|
||||
@ -113,11 +113,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/common-components",
|
||||
name: "common-components",
|
||||
redirect: "/common-components/form-component",
|
||||
path: "/form-management",
|
||||
name: "form-management",
|
||||
redirect: "/form-management/common-form",
|
||||
meta: {
|
||||
title: "common-components",
|
||||
title: "form-management",
|
||||
link: "",
|
||||
hide: false,
|
||||
keepAlive: true,
|
||||
@ -128,11 +128,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/common-components/form-component",
|
||||
name: "form-component",
|
||||
component: () => import("@/views/common-components/form-component/form-component.vue"),
|
||||
path: "/form-management/common-form",
|
||||
name: "common-form",
|
||||
component: () => import("@/views/form-management/common-form/common-form.vue"),
|
||||
meta: {
|
||||
title: "form-component",
|
||||
title: "common-form",
|
||||
link: "",
|
||||
hide: false,
|
||||
keepAlive: true,
|
||||
@ -143,9 +143,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/common-components/dynamic-form",
|
||||
path: "/form-management/dynamic-form",
|
||||
name: "dynamic-form",
|
||||
component: () => import("@/views/common-components/dynamic-form/dynamic-form.vue"),
|
||||
component: () => import("@/views/form-management/dynamic-form/dynamic-form.vue"),
|
||||
meta: {
|
||||
title: "dynamic-form",
|
||||
link: "",
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>表单数据</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
188
src/views/form-management/common-form/common-form.vue
Normal file
188
src/views/form-management/common-form/common-form.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="dc-page">
|
||||
<a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
|
||||
<a-form-item field="size" label="表单大小">
|
||||
<a-radio-group v-model="form.size" type="button">
|
||||
<a-radio value="mini">迷你</a-radio>
|
||||
<a-radio value="small">偏小</a-radio>
|
||||
<a-radio value="medium">中等</a-radio>
|
||||
<a-radio value="large">偏大</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="name"
|
||||
label="用户名称"
|
||||
:rules="[
|
||||
{ required: true, message: '用户名称不能为空' },
|
||||
{ minLength: 5, message: '必须大于 5 个字符' }
|
||||
]"
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<a-input v-model="form.name" placeholder="请输入用户名称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="age"
|
||||
label="年龄"
|
||||
:rules="[
|
||||
{ required: true, message: '年龄为必填项' },
|
||||
{ type: 'number', max: 200, message: '年龄上限为 200 岁' }
|
||||
]"
|
||||
>
|
||||
<a-input-number v-model="form.age" placeholder="请输入您的年龄" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="section" label="选项" :rules="[{ required: true, message: '选项不能为空' }]">
|
||||
<a-select v-model="form.section" placeholder="请选择" allow-clear>
|
||||
<a-option value="section one">Section One</a-option>
|
||||
<a-option value="section two">Section Two</a-option>
|
||||
<a-option value="section three">Section Three</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="province" label="地区" :rules="[{ required: true, message: '地区不能为空' }]">
|
||||
<a-cascader v-model="form.province" :options="options" placeholder="请选择地区" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="options" label="爱好" :rules="[{ type: 'array', minLength: 2, message: '请选择' }]">
|
||||
<a-checkbox-group v-model="form.options">
|
||||
<a-checkbox value="option one">听歌</a-checkbox>
|
||||
<a-checkbox value="option two">看电影</a-checkbox>
|
||||
<a-checkbox value="option three">旅游</a-checkbox>
|
||||
<a-checkbox value="option four">电竞</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item field="date" label="日期">
|
||||
<a-date-picker v-model="form.date" placeholder="请选择日期" />
|
||||
</a-form-item>
|
||||
<a-form-item field="time" label="时间">
|
||||
<a-time-picker v-model="form.time" placeholder="请选择时间" />
|
||||
</a-form-item>
|
||||
<a-form-item field="radio" label="性别" :rules="[{ required: true, message: '性别不能为空' }]">
|
||||
<a-radio-group v-model="form.radio">
|
||||
<a-radio value="man">男</a-radio>
|
||||
<a-radio value="woman">女</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item field="slider" label="进度" :rules="[{ type: 'number', min: 5, message: '最小为5' }]">
|
||||
<a-slider v-model="form.slider" :max="10" />
|
||||
</a-form-item>
|
||||
<a-form-item field="score" label="评分">
|
||||
<a-rate v-model="form.score" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="switch" label="状态" :rules="[{ type: 'boolean', true: true, message: '请打开开关' }]">
|
||||
<a-switch v-model="form.switch" />
|
||||
</a-form-item>
|
||||
<a-form-item field="multiSelect" label="多选">
|
||||
<a-select v-model="form.multiSelect" placeholder="请选择" multiple>
|
||||
<a-option value="section one">多选一</a-option>
|
||||
<a-option value="section two">多选二</a-option>
|
||||
<a-option value="section three">多选三</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="treeSelect" label="分组">
|
||||
<a-tree-select :data="treeData" v-model="form.treeSelect" placeholder="请选择分组" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button html-type="submit">提交</a-button>
|
||||
<a-button @click="$refs.formRef.resetFields()">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
{{ form }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handleSubmit = ({ values, errors }) => {
|
||||
console.log("values:", values, "\nerrors:", errors);
|
||||
};
|
||||
|
||||
const form = reactive({
|
||||
size: "medium",
|
||||
name: "",
|
||||
age: undefined,
|
||||
section: "",
|
||||
province: "guanggu",
|
||||
options: [],
|
||||
date: "",
|
||||
time: "",
|
||||
radio: "man",
|
||||
slider: 5,
|
||||
score: 5,
|
||||
switch: false,
|
||||
multiSelect: ["section one"],
|
||||
treeSelect: "node1"
|
||||
});
|
||||
const options = [
|
||||
{
|
||||
value: "hubei",
|
||||
label: "湖北",
|
||||
children: [
|
||||
{
|
||||
value: "wuhan",
|
||||
label: "武汉",
|
||||
children: [
|
||||
{
|
||||
value: "guanggu",
|
||||
label: "光谷"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "xiaogan",
|
||||
label: "孝感"
|
||||
},
|
||||
{
|
||||
value: "huanggang",
|
||||
label: "黄冈"
|
||||
},
|
||||
{
|
||||
value: "xianning",
|
||||
label: "咸宁"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "hunan",
|
||||
label: "湖南",
|
||||
children: [
|
||||
{
|
||||
value: "changsha",
|
||||
label: "长沙",
|
||||
children: [
|
||||
{
|
||||
value: "yuelu",
|
||||
label: "岳麓"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
const treeData = [
|
||||
{
|
||||
key: "node1",
|
||||
title: "分组01",
|
||||
children: [
|
||||
{
|
||||
key: "node1-01",
|
||||
title: "分组01-01"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "node2",
|
||||
title: "分组02",
|
||||
children: [
|
||||
{
|
||||
key: "node2-01",
|
||||
title: "分组02-01"
|
||||
},
|
||||
{
|
||||
key: "node2-01",
|
||||
title: "分组02-02"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -140,12 +140,11 @@
|
||||
@page-change="pageChange"
|
||||
@page-size-change="pageSizeChange"
|
||||
>
|
||||
|
||||
<template #content="{ record }">
|
||||
<a-space>
|
||||
<SvgIcon :name="'word'" :size="18" v-if="record.content == '图文'" />
|
||||
<SvgIcon :name="'video'" :size="18" v-if="record.content == '视频'"/>
|
||||
<SvgIcon :name="'mp3'" :size="18" v-if="record.content == '音频'"/>
|
||||
<SvgIcon :name="'video'" :size="18" v-if="record.content == '视频'" />
|
||||
<SvgIcon :name="'mp3'" :size="18" v-if="record.content == '音频'" />
|
||||
<span>{{ record.content }}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
@ -208,7 +207,7 @@ const columns = ref([
|
||||
title: "内容载体",
|
||||
dataIndex: "content",
|
||||
checked: true,
|
||||
slotName: "content",
|
||||
slotName: "content"
|
||||
},
|
||||
{
|
||||
title: "筛选方式",
|
||||
@ -390,7 +389,6 @@ const popupVisibleChange = (visible: boolean) => {
|
||||
onEnd(e: any) {
|
||||
// 移动结束后，获得新旧下标，这里不会实际更改原始值
|
||||
const { oldIndex, newIndex } = e;
|
||||
console.log("移动",columns.value, columnsShow.value);
|
||||
// 根据新旧下标更改原始值，更改弹窗columns和列表columns
|
||||
exchangeArray(columns.value, oldIndex, newIndex);
|
||||
exchangeArray(columnsShow.value, oldIndex, newIndex);
|
||||
Loading…
x
Reference in New Issue
Block a user