From b3fcdf4c1b3db81353c752b9d509be800db2bbd9 Mon Sep 17 00:00:00 2001 From: "DESKTOP-VMMLSOQ\\wangzg" <1161909281@qq.com> Date: Sun, 18 Feb 2024 19:15:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=BA=E7=A1=80=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=B8=83=E5=B1=80=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/mixin.less | 6 + layouts/manager.vue | 161 ++++++++++++++++++ nuxt.config.js | 4 +- pages/manager/test.vue | 15 ++ pages/test/index.vue | 13 ++ templates/base.js | 4 + .../dynamicForm/createControlComponent.js | 53 ++++++ templates/dynamicForm/createFormComponent.js | 20 +++ templates/dynamicForm/index.js | 67 ++++++++ templates/dynamicForm/utils.js | 14 ++ templates/form.js | 5 + templates/table.vue | 23 +++ 12 files changed, 384 insertions(+), 1 deletion(-) create mode 100644 layouts/manager.vue create mode 100644 pages/manager/test.vue create mode 100644 pages/test/index.vue create mode 100644 templates/base.js create mode 100644 templates/dynamicForm/createControlComponent.js create mode 100644 templates/dynamicForm/createFormComponent.js create mode 100644 templates/dynamicForm/index.js create mode 100644 templates/dynamicForm/utils.js create mode 100644 templates/form.js create mode 100644 templates/table.vue diff --git a/assets/styles/mixin.less b/assets/styles/mixin.less index 222e270..3bebb23 100644 --- a/assets/styles/mixin.less +++ b/assets/styles/mixin.less @@ -71,4 +71,10 @@ height: auto !important; _height: @height; } +.flex-start(@type: row) { + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: @type; +} diff --git a/layouts/manager.vue b/layouts/manager.vue new file mode 100644 index 0000000..e798b0c --- /dev/null +++ b/layouts/manager.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/nuxt.config.js b/nuxt.config.js index af4a12d..71dc1f4 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -17,7 +17,9 @@ export default { ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } - ] + ], + css: [], + js: [] }, // Global CSS: https://go.nuxtjs.dev/config-css diff --git a/pages/manager/test.vue b/pages/manager/test.vue new file mode 100644 index 0000000..f5eff81 --- /dev/null +++ b/pages/manager/test.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/pages/test/index.vue b/pages/test/index.vue new file mode 100644 index 0000000..54b19c1 --- /dev/null +++ b/pages/test/index.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/templates/base.js b/templates/base.js new file mode 100644 index 0000000..21c19b1 --- /dev/null +++ b/templates/base.js @@ -0,0 +1,4 @@ +export default { + name: "manager", + layout: 'manager' +} diff --git a/templates/dynamicForm/createControlComponent.js b/templates/dynamicForm/createControlComponent.js new file mode 100644 index 0000000..eca6012 --- /dev/null +++ b/templates/dynamicForm/createControlComponent.js @@ -0,0 +1,53 @@ +import {recursionTree} from "./utils"; + +const mapComponents = { + complete: 'a-auto-complete', + cascader: 'a-cascader', + checkbox: 'a-checkbox-group', + radio: 'a-radio-group', + datePicker: 'a-date-picker', + monthPicker: 'a-month-picker', + rangePicker: 'a-range-picker', + weekPicker: 'a-week-picker', + timePicker: 'a-time-picker', + input: 'a-input', + rate: 'a-rate', + slider: 'a-slider', + switch: 'a-switch', + upload: 'a-upload', + button: 'a-button', + inputNumber: 'a-input-number', + mentions: ['a-mentions', 'a-mentions-option'], + select: ['a-select', 'a-select-option'], + treeSelect: ['a-tree-select', 'a-tree-select-node'], +} + +export default function createControlComponent (h, componentType, vueCreateElementProps = {}) { + const component = mapComponents[componentType] + // 没有子组件的情况下直接导出 + if (typeof component === "string") { + return h(component, vueCreateElementProps) + } + // 子组件进行判断是否提供子内容 + const { props } = vueCreateElementProps + if (!props.children || !Array.isArray(props.children)) { + return null + } + const [ outer, inner ] = component + + return h( + outer, + vueCreateElementProps, + recursionTree(props.children, (node) => { + const {label, value, ...otherProps} = node + return h(inner, { + props: { + value: value, + title: label, + ...otherProps + } + }, [h(label)]) + }) + ) +} + diff --git a/templates/dynamicForm/createFormComponent.js b/templates/dynamicForm/createFormComponent.js new file mode 100644 index 0000000..0d9964c --- /dev/null +++ b/templates/dynamicForm/createFormComponent.js @@ -0,0 +1,20 @@ +/** + * 创建具有栅格化的表单项 + * @param h + * @param formItemProps + * @param rowConfig + * @param colConfig + * @param children + * @returns {*} + */ +export default function createFormComponent(h, formItemProps, rowConfig, colConfig, children = []) { + if (rowConfig) { + return h('a-row', rowConfig, [ + h('a-col', colConfig, [ + h('a-form-item', formItemProps, children) + ]) + ]) + } + + return h('a-form-item', formItemProps, children) +} diff --git a/templates/dynamicForm/index.js b/templates/dynamicForm/index.js new file mode 100644 index 0000000..60ef5d8 --- /dev/null +++ b/templates/dynamicForm/index.js @@ -0,0 +1,67 @@ +import createControlComponent from "./createControlComponent"; +import createFormComponent from "./createFormComponent"; + +export default { + name: 'dynamicForm', + props: { + /** + * 表单配置项 + */ + formOption: { + type: Object, + default: () => ({}) + }, + /** + * 控件列表配置项 + */ + options: { + type: Array, + default: () => [] + }, + + /** + * 表单全局列配置 + */ + colOption: { + type: Object, + default: () => ({}) + }, + + /** + * 表单全局行配置 + */ + rowOption: { + type: Object, + default: null + } + }, + methods: { + + /** + * 校验结果，正确触发回调 + * @param cb + */ + validate (cb) {}, + + /** + * 重置表单内容 + */ + reset () {} + }, + + render (h) { + return h( + 'a-form-model', + this.formOption, + this.options.map(({ type, formItemOption, elementOption }) => { + return createFormComponent( + h, formItemOption, + this.rowOption, + this.colOption, + [createControlComponent(h, type, elementOption)] + ) + }) + ) + + } +} diff --git a/templates/dynamicForm/utils.js b/templates/dynamicForm/utils.js new file mode 100644 index 0000000..3df8ec2 --- /dev/null +++ b/templates/dynamicForm/utils.js @@ -0,0 +1,14 @@ +/** + * 递归处理树节点 + * @param treeNodes + * @param cb + * @returns {*[]} + */ +export const recursionTree = function (treeNodes, cb) { + return ([].concat(treeNodes)).map(node => { + if (node.children && node.children.length > 0) { + node.children = recursionTree(node.children, cb) + } + return cb(node) + }) +} diff --git a/templates/form.js b/templates/form.js new file mode 100644 index 0000000..319a7d7 --- /dev/null +++ b/templates/form.js @@ -0,0 +1,5 @@ +import base from './base' +export default { + name: "form", + extends: base +} diff --git a/templates/table.vue b/templates/table.vue new file mode 100644 index 0000000..3619fe0 --- /dev/null +++ b/templates/table.vue @@ -0,0 +1,23 @@ + + + +