Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c297e89c 编写于 作者: W wuyb@phxg.cn
浏览文件
操作

form

上级 a8ce8423
隐藏空白更改
内联 并排
Showing with 413 addition and 101 deletion
vite-demo/index.html
浏览文件 @ c297e89c
......@@ -8,6 +8,7 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
vite-demo/package.json
浏览文件 @ c297e89c
......@@ -13,6 +13,8 @@
"element-plus": "^2.1.9",
"js-cookie": "^3.0.1",
"less": "^4.1.2",
"mavon-editor": "^2.10.4",
"md-editor-v3": "^1.11.9",
"pako": "^2.0.4",
"sass": "^1.50.0",
"scss": "^0.2.4",
......
vite-demo/src/components/configForm/form.md
浏览文件 @ c297e89c
1. 基本使用
### configForm 组件
#### 基本使用
```vue
<template>
<configForm :config="configListForm"></configForm>
......@@ -17,9 +18,6 @@
{
inputType: "text",
fieldName: "vehicleNo",
defaultVal: 1,
required: true,
disabled: true,
label: "测试1",
placeholder: "请输入"
}
......@@ -33,12 +31,141 @@
</script>
```
3. 校验
4. 参数禁用
5. 插槽
5. 参数配置
#### 校验
```vue
<script >
import configForm from '@c/configForm/form.vue'
import {reactive} from 'vue'
export default {
components:{
configForm
},
setup(){
let check = async (rule, value) => {
if (!value) {
return Promise.reject('参数不能为空');
}
if (!Number.isInteger(value)) {
return Promise.reject('必须为数字');
} else {
if (value < 18) {
return Promise.reject('参数必须大于18');
} else {
return Promise.resolve();
}
}
};
let configListForm = reactive({
data: [
{
inputType: "text",
fieldName: "vehicleNo",
required: true, // 设置参数为必填 - 提示为参数不能为空
label: "测试1",
placeholder: "请输入"
},
{
inputType: "text",
fieldName: "vehicleNo",
required: true, // 设置参数为必填
validator: check, // 自定义验证提示
label: "测试1",
placeholder: "请输入"
}
],
})
return {
configListForm
}
}
}
</script>
```
#### 表单 - 参数禁用
```vue
<script >
import {reactive} from 'vue'
export default {
setup(){
let configListForm = reactive({
data: [
{
inputType: "text",
fieldName: "vehicleNo",
label: "测试1",
disabled:false, // 当前表单可以输入
placeholder: "请输入"
},
{
inputType: "text",
fieldName: "vehicleNo",
label: "测试1",
placeholder: "请输入"
}
],
// 禁用所有表单
disabled:true
})
return {
configListForm
}
}
}
</script>
```
#### 插槽 使用
```vue
<template>
<configForm :config="configListForm">
<template #formItem>
<a-switch/>
</template>
</configForm>
</template>
<script >
import configForm from '@c/configForm/form.vue'
export default {
components:{
configForm
}
}
</script>
```
#### 参数配置(api)
| 参数 | 说明 | 类型 | 默认值 |
| ---- | ------------ | ---- | ------ |
| data | 表单参数配置 | Array | |
| disabled | 是否禁用表单 | boolean | false |
- data 参数
| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| | | | |
| inputType | 组件类型 | string | -- |
| fieldName | v-model值 | string | -- |
| defaultVal | v-model默认值 | - | -- |
| required | 是否必填 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| label | label参数 | string | -- |
- inputType
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------- | ---- | ------ |
| type | input | | |
| number | input数字类型 | | |
| textarea | 多行输入 | | |
| radio | 单选 | | |
| checkbox | 多选 | | |
| select | 下拉 | | |
| date | 时间选择 | | |
| range | 时间段 | | |
| range | 时间段 | | |
vite-demo/src/components/configForm/form.vue
浏览文件 @ c297e89c
......@@ -137,7 +137,6 @@
}]
}
}
}
});
console.log('rules', rulesForm);
......
vite-demo/src/main.js
浏览文件 @ c297e89c
......@@ -4,13 +4,26 @@ import store from "./store";
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import ElementPlus from 'element-plus'
import {ElCard,ElButton, ElForm, ElFormItem, ElDatePicker,ElSelect,ElInput,ElAlert} from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import './permission'
const app = createApp(App)
app.component('MdEditor', MdEditor)
// element-plus
app.component('ElCard', ElCard)
app.component('ElButton', ElButton)
app.component('ElForm', ElForm)
app.component('ElFormItem', ElFormItem)
app.component('ElDatePicker', ElDatePicker)
app.component('ElSelect', ElSelect)
app.component('ElInput', ElInput)
app.component('ElAlert', ElAlert)
app.use(Antd)
app.use(router)
......
vite-demo/src/permission.js
浏览文件 @ c297e89c
......@@ -6,7 +6,7 @@ import {accessControl} from './config'
const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
console.log(to, from);
console.log('11111111111111111111',to, from);
const hasToken = getToken()
if (hasToken) {
if (to.path === 'login') {
......
vite-demo/src/router/backRouter.js
浏览文件 @ c297e89c
......@@ -7,38 +7,61 @@ export default [
},
component: 'Layout',
children: [
// {
// path: 'page',
// name: 'page',
// meta: {
// title: '表单配置',
// },
// component: '/views/form/index.vue',
// },
{
path: 'page',
name: 'page',
path: 'elementPlus',
name: 'elementPlus',
meta: {
title: '表单配置',
title: 'element-plus',
},
component: '/views/form/index.vue',
redirect: '/form/elementPlus/elementFrom',
children: [
{
path: 'elementFrom',
name: 'elementFrom',
meta: {
title: '表单筛选',
},
component: '/views/form/element/from.vue',
},
]
},
{
path: 'element',
name: 'element',
path: 'antdVue',
name: 'antdVue',
meta: {
title: '表单配置-element',
title: 'antdVue',
},
component: '/views/form/element/from.vue',
},
{
path: 'antdForm',
name: 'antdForm',
meta: {
title: 'antd表单',
},
component: '/views/form/antd/form.vue',
},
{
path: 'screening',
name: 'screening',
meta: {
title: '条件筛选',
},
component: '/views/form/antd/screeningForm.vue',
component: '/views/form/index.vue',
redirect: '/form/antdVue/antdForm',
children:[
{
path: 'antdForm',
name: 'antdForm',
meta: {
title: 'antd表单',
},
component: '/views/form/antd/form.vue',
},
{
path: 'screening',
name: 'screening',
meta: {
title: '条件筛选',
},
component: '/views/form/antd/screeningForm.vue',
},
]
},
]
},
{
......@@ -87,5 +110,24 @@ export default [
},
]
},
{
path: '/tool',
name: 'tool',
meta: {
title: '工具库',
},
component: 'Layout',
children: [
{
path: 'md',
name: 'md',
title: 'md编译器',
meta: {
title: 'md编译器',
},
component: '/views/tool/mdEditor.vue',
},
]
}
]
vite-demo/src/router/baseRouter.js
浏览文件 @ c297e89c
......@@ -11,21 +11,22 @@ export default [
path: '/',
component: Layout,
redirect: '/welcome',
name:'welcome',
title:'欢迎页',
meta:{
name: 'welcome',
title: '欢迎页',
meta: {
title: '欢迎页',
},
children: [
{
path: 'welcome',
name: 'welcome',
title:'欢迎页',
meta:{
title: '欢迎页',
meta: {
title: '欢迎页',
},
component: () => import('@/views/welcome/index.vue')
}
]
}
},
{path: '/:pathToRegexp(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
]
\ No newline at end of file
vite-demo/src/views/antd/index.vue
浏览文件 @ c297e89c
<template>
<div>antd封装</div>
<div>antd封装 - views/antd/index</div>
<modal v-model:isShow="isShow" title="新增" @modalOk="modalOk">
<div>1232</div>
</modal>
......
vite-demo/src/views/form/antd/form.vue
浏览文件 @ c297e89c
<template>
<div>antd - form</div>
<configForm :config="configListForm">
<template #formItem>
<a-switch/>
</template>
</configForm>
<a-alert type="info" message="antd配置form表单"></a-alert>
<a-card>
<configForm :config="configListForm">
<template #formItem>
<a-switch/>
</template>
</configForm>
</a-card>
<md-editor v-model="mdText" previewOnly showCodeRowNumber></md-editor>
</template>
<script>
import configForm from '@c/configForm/form.vue'
import {reactive} from 'vue'
import formMD from '@c/configForm/form.md?raw'
export default {
name: "form",
components: {
configForm
},
setup() {
const mdText = formMD;
let checkAge = async (rule, value) => {
if (!value) {
return Promise.reject('Please input the age');
......@@ -127,6 +131,7 @@
//
return {
mdText,
configListForm
}
}
......
vite-demo/src/views/form/antd/sc.md 0 → 100644
浏览文件 @ c297e89c
## 条件筛选
### 基本使用
> 默认一个 input 一个 select 查询
```vue
<template>
<screening @screen="screen"
@Reset="Reset"
types="pro_type"
labelName="项目名称"
labelType="业务类型">
<template #other>124</template>
<template #toggleOther>
<a-col :md="6" :sm="12">
<a-form-item label="关键字">
<a-input allowClear placeholder="请输入关键字"></a-input>
</a-form-item>
</a-col>
</template>
</screening>
</template>
<script>
import screening from '@c/screening/screening.vue'
export default {
components: {
screening
},
methods: {
screen() {
console.log('查询')
},
Reset() {
console.log('重置')
}
}
}
```
### 插槽
> 当查询的数据比较多的时候可以通过插槽配置
```vue
<template>
<screening :is-more="true">
// #other 当需要更多查询默认展示的时候
<template #other>
<a-form-item label="默认展示">
<a-input allowClear placeholder="这是通过插槽配置的"></a-input>
</a-form-item>
</template>
// #toggleOther 当is-more设置为true的时候，通过插槽配置显示更多的查询
<template #toggleOther>
<a-col :md="6" :sm="12">
<a-form-item label="更多">
<a-input allowClear placeholder="这是通过插槽配置的更多查询"></a-input>
</a-form-item>
</a-col>
</template>
</screening>
</template>
```
### api
| 参数 | 说明 | 类型 | 默认 |
| --------- | ---------------------- | -------- | ---- |
| is-more | 是否显示展开按钮 | boolean | - |
| labelName | input 的 label 属性 | string | -- |
| labelType | select 的 label 属性 | string | -- |
| options | select 的 options 属性 | Array | -- |
| @screen | 查询方法 | function | -- |
| @Reset | 重置方法 | function | -- |
\ No newline at end of file
vite-demo/src/views/form/antd/screeningForm.vue
浏览文件 @ c297e89c
<template>
<div>antd - 筛选</div>
<screening :is-more="true"
@screen="screen"
@Reset="Reset"
types="pro_type"
labelName="项目名称"
labelType="业务类型">
<template #other>
124
</template>
<template #toggleOther>
<a-col :md="6" :sm="12">
<a-form-item label="关键字">
<a-input allowClear placeholder="请输入关键字"></a-input>
<a-alert message="antd - 条件筛选" type="info" />
<a-card title="条件筛选">
<screening :is-more="true"
@screen="screen"
@Reset="Reset"
types="pro_type"
labelName="项目名称"
labelType="业务类型">
<template #other>
<a-form-item label="默认展示">
<a-input allowClear placeholder="这是通过插槽配置的"></a-input>
</a-form-item>
</a-col>
</template>
</screening>
</template>
<template #toggleOther>
<a-col :md="6" :sm="12">
<a-form-item label="更多">
<a-input allowClear placeholder="这是通过插槽配置的更多查询"></a-input>
</a-form-item>
</a-col>
</template>
</screening>
</a-card>
<md-editor v-model="text" previewOnly showCodeRowNumber />
</template>
<script>
import screening from '@c/screening/screening.vue'
import sc from './sc.md?raw'
export default {
name: "screeningForm",
components: {
screening
},
data() {
return {
text: sc,
previewOnly:true,// 仅预览模式
showCodeRowNumber:true // 代码块显示行号
};
},
methods: {
screen() {
......
vite-demo/src/views/form/element/from.vue
浏览文件 @ c297e89c
<template>
<div>element-plus -</div>
<el-alert title="element-plus配置筛选项" type="success"></el-alert>
<div>
<listFilter
:config="listFiltersConfig"
......
vite-demo/src/views/form/index.vue
浏览文件 @ c297e89c
<template>
<div>vue动态表单配置 - element</div>
<!-- <div>vue动态表单配置 - element view/form/index</div>-->
<router-view></router-view>
</template>
<script>
......
vite-demo/src/views/layout/sidebar/index.vue
浏览文件 @ c297e89c
......@@ -12,47 +12,28 @@
v-model:selectedKeys="selectedKeys"
>
<div v-for="(item,index) in router" :key="index">
<!-- <a-menu-item key="2">-->
<!-- <template #icon>-->
<!-- <DesktopOutlined/>-->
<!-- </template>-->
<!-- <span>Option 2</span>-->
<!-- </a-menu-item>-->
<!-- <a-menu-item key="3">-->
<!-- <template #icon>-->
<!-- <InboxOutlined/>-->
<!-- </template>-->
<!-- <span>Option 3</span>-->
<!-- </a-menu-item>-->
<!-- <a-sub-menu :key="'sub'+index" v-if="!item.hidden">-->
<!-- <template #icon>-->
<!-- <MailOutlined/>-->
<!-- </template>-->
<!-- <template #title>{{item.title}} - sub{{index}}</template>-->
<!-- <a-menu-item >-->
<!-- <router-link :to="{name:c.path}">{{c.title}}</router-link>-->
<!-- </a-menu-item>-->
<!-- </a-sub-menu>-->
<a-sub-menu :key="'sub'+index" v-if="!item.hidden">
<!-- :key="'sub'+index"-->
<a-sub-menu :key="item.path" v-if="!item.hidden">
<template #icon>
<AppstoreOutlined/>
</template>
<template #title>{{item.meta.title}}</template>
<div v-if="item.children" v-for="(c,cIndex) in item.children">
<a-sub-menu :key="'sub'+(index + (index + cIndex))"
<!--'sub'+(index + (index + cIndex))-->
<a-sub-menu :key="c.path"
:title="c.meta.title"
v-if="c.children">
<!-- 三级-->
<!-- 三级 :key="index + cIndex + childIndex + (index+cIndex)"-->
<a-menu-item v-for="(child,childIndex) in c.children"
:key="index + cIndex + childIndex + (index+cIndex)">
:key="child.path">
<router-link :to="{name:child.path}">{{child.meta.title}}
</router-link>
</a-menu-item>
</a-sub-menu>
<!--二级-->
<a-menu-item v-else :key="c.path + index + cIndex">
<!-- <a-menu-item v-else :key="c.path + index + cIndex">-->
<a-menu-item v-else :key="c.path">
<router-link :to="{name:c.path}">{{c.meta.title}}</router-link>
</a-menu-item>
......@@ -75,7 +56,7 @@
</div>
</template>
<script>
import {defineComponent, reactive, toRefs, watch} from 'vue';
import {defineComponent, reactive, toRefs, markRaw, watch, computed} from 'vue';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
......@@ -85,6 +66,7 @@
InboxOutlined,
AppstoreOutlined,
} from '@ant-design/icons-vue';
import {useRoute} from 'vue-router'
export default defineComponent({
props: {
......@@ -96,26 +78,43 @@
}
},
setup() {
const route = useRoute()
const state = reactive({
collapsed: false,
selectedKeys: [1], //当前选中的
openKeys: ['sub1'], // 当前展开的 SubMenu 菜单项 key 数组
// selectedKeys: ['welcome'], //当前选中的
openKeys: ['/'], // 当前展开的 SubMenu 菜单项 key 数组
preOpenKeys: ['sub1'],
});
watch(
() => state.openKeys,
(val, oldVal) => {
console.log('openKeys', val);
state.preOpenKeys = oldVal;
},
);
const selectedKeys = computed(() => {
console.log('useRoute', route.path);
let path = route.path.split('/')
// console.log('path', path, path[path.length - 1]);
// state.openKeys = '/' + [path[path.length - 2]]
// return [path[path.length - 1]]
})
console.log('selectedKeys', selectedKeys);
// activeMenu() {
// const route = this.$route
// const { meta, path } = route
// // if set path, the sidebar will highlight the path you set
// if (meta.activeMenu) {
// return meta.activeMenu
// }
// return path
// },
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
return {...toRefs(state), toggleCollapsed};
return {...toRefs(state), toggleCollapsed, selectedKeys};
},
components: {
......
vite-demo/src/views/tool/md-editor-v3.md 0 → 100644
浏览文件 @ c297e89c
## md-editor-v3编辑器
[md-editor-v3](https://imzbf.github.io/md-editor-v3/demo/index)
```
text: mdEditorV3, // 显示内容
previewOnly: true,// 仅预览模式
showCodeRowNumber: true // 代码块显示行号
```
\ No newline at end of file
vite-demo/src/views/tool/mdEditor.vue 0 → 100644
浏览文件 @ c297e89c
<template>
<a-alert message="md-editor-v3 Markdown编辑器Vue3版本" type="info"></a-alert>
<md-editor v-model="text" previewOnly showCodeRowNumber/>
</template>
<script>
import mdEditorV3 from './md-editor-v3.md?raw'
export default {
name: "editor",
data() {
return {
text: mdEditorV3,
previewOnly: true,// 仅预览模式
showCodeRowNumber: true // 代码块显示行号
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或