cxc/car_management
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

form 表单 预览

Browse Source
This commit is contained in:
cxc
2022-12-21 17:16:20 +08:00
parent 0926b42051
commit 7c35ccd910
7 changed files with 197 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Editor/index.vue
View File

@ -56,7 +56,7 @@ export default {
}, },
minHeight: { minHeight: {
type: [String, Number], type: [String, Number],
default: 300, default: 150,
}, },
height: { height: {
type: [String, Number], type: [String, Number],
@ -64,7 +64,7 @@ export default {
}, },
width: { width: {
type: [String, Number], type: [String, Number],
default: 820, // default: 820,
}, },
mode: { mode: {
type: String, type: String,

7
src/utils/generator/parser.jsx
View File

@ -4,8 +4,6 @@ import render from "@/utils/generator/render";
import axios from "axios"; import axios from "axios";
import { defineComponent } from "vue"; import { defineComponent } from "vue";
// Vue.prototype.$axios = axios;
const ruleTrigger = { const ruleTrigger = {
"el-input": "blur", "el-input": "blur",
"el-input-number": "blur", "el-input-number": "blur",
@ -23,7 +21,7 @@ const layouts = {
colFormItem(h, scheme) { colFormItem(h, scheme) {
const config = scheme.__config__; const config = scheme.__config__;
const listeners = buildListeners.call(this, scheme); const listeners = buildListeners.call(this, scheme);
console.log(listeners, "28");
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null; let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null;
if (config.showLabel === false) labelWidth = "0"; if (config.showLabel === false) labelWidth = "0";
return ( return (
@ -101,6 +99,7 @@ function renderFormItem(h, elementList) {
const layout = layouts[config.layout]; const layout = layouts[config.layout];
if (layout) { if (layout) {
console.log(layout);
return layout.call(this, h, scheme); return layout.call(this, h, scheme);
} }
throw new Error(`没有与${config.layout}匹配的layout`); throw new Error(`没有与${config.layout}匹配的layout`);
@ -114,6 +113,7 @@ function renderChildren(h, scheme) {
} }
function setValue(event, config, scheme) { function setValue(event, config, scheme) {
console.log(event, config, scheme, "serval");
config.defaultValue = event; config.defaultValue = event;
this[this.formConf.formModel][scheme.__vModel__] = event; this[this.formConf.formModel][scheme.__vModel__] = event;
} }
@ -134,6 +134,7 @@ function buildListeners(scheme) {
} }
export default defineComponent({ export default defineComponent({
name: "Parser",
components: { components: {
render, render,
}, },

87
src/utils/generator/render.jsx
View File

@ -54,10 +54,7 @@ keys.forEach((key) => {
function vModel(dataObject, defaultValue) { function vModel(dataObject, defaultValue) {
dataObject.props.value = defaultValue; dataObject.props.value = defaultValue;
dataObject.on.input = (val) => { dataObject.on["update:modelValue"] = (val) => {
this.$emit("input", val);
};
dataObject.on.change = (val) => {
this.$emit("input", val); this.$emit("input", val);
}; };
} }
@ -227,15 +224,13 @@ export default defineComponent({
// 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）” // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
buildDataObject.call(this, confClone, dataObject); buildDataObject.call(this, confClone, dataObject);
const Tag = formComponentsMap[this.$props.conf.__config__.tag]; const Tag = formComponentsMap[this.$props.conf.__config__.tag];
// return h(Tag, dataObject.attrs, children);
return ( return (
<> <>
{children.length > 0 ? ( {children.length > 0 ? (
<Tag <Tag
{...dataObject.attrs} {...dataObject.attrs}
on={dataObject.on} on={dataObject.on}
v-model={this.$props.conf.__config__.defaultValue} modelValue={this.$props.conf.__config__.defaultValue}
> >
{children} {children}
</Tag> </Tag>
@ -243,86 +238,10 @@ export default defineComponent({
<Tag <Tag
{...dataObject.attrs} {...dataObject.attrs}
on={dataObject.on} on={dataObject.on}
v-model={this.$props.conf.__config__.defaultValue} modelValue={this.$props.conf.__config__.defaultValue}
></Tag> ></Tag>
)} )}
</> </>
// <Tag options={dataObject.attrs.options} />
); );
}, },
// render() {
// return (
// <>
// {tag == "el-input" ? (
// <el-input
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children}
// </el-input>
// ) : tag == "el-input-number" ? (
// <el-input-number
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children}
// </el-input-number>
// ) : tag == "el-slider" ? (
// <el-slider
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children}
// </el-slider>
// ) : tag == "el-time-picker" ? (
// <el-date-picker
// type="datetimerange"
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// />
// ) : tag === "el-switch" ? (
// <el-switch
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// ></el-switch>
// ) : tag === "el-color-picker" ? (
// <el-color-picker
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// ></el-color-picker>
// ) : tag === "el-button" ? (
// <el-button
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children[1]}
// </el-button>
// ) : tag === "el-select" ? (
// <el-select
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children}
// </el-select>
// ) : tag === "el-date-picker" ? (
// <el-date-picker
// {...dataObject.attrs}
// on={dataObject.on}
// modelValue={confClone.__config__.defaultValue}
// >
// {children}
// </el-date-picker>
// ) : null}
// </>
// );
// },
}); });

7
src/views/flowable/form/index.vue
View File

@ -98,7 +98,12 @@
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template #default="{ row }"> <template #default="{ row }">
<el-button size="small" link icon="view" @click="handleDetail(row)" <el-button
size="small"
type="primary"
link
icon="view"
@click="handleDetail(row)"
>详情</el-button >详情</el-button
> >
<el-button <el-button

178
src/views/flowable/form/test.json Normal file
View File

@ -0,0 +1,178 @@
{
"formRef": "elForm",
"formModel": "formData",
"size": "default",
"labelPosition": "right",
"labelWidth": 100,
"formRules": "rules",
"gutter": 15,
"disabled": false,
"span": 24,
"formBtns": true,
"fields": [
{
"__config__": {
"label": "日期范围",
"tag": "el-date-picker",
"tagIcon": "date-range",
"defaultValue": ["2022-12-01", "2023-01-31"],
"span": 24,
"showLabel": true,
"labelWidth": null,
"required": true,
"layout": "colFormItem",
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/date-picker",
"formId": 101,
"renderKey": "1011671526772143"
},
"style": { "width": "100%" },
"type": "daterange",
"range-separator": "至",
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"disabled": false,
"clearable": true,
"format": "YYYY-MM-DD",
"value-format": "YYYY-MM-DD",
"readonly": false,
"__vModel__": "field101"
},
{
"__config__": {
"label": "请假天数",
"labelWidth": null,
"showLabel": true,
"changeTag": true,
"tag": "el-input",
"tagIcon": "input",
"required": true,
"layout": "colFormItem",
"span": 24,
"document": "https://element.eleme.cn/#/zh-CN/component/input",
"regList": [],
"formId": 101,
"renderKey": "1011670568285013",
"defaultValue": "180"
},
"__slot__": { "prepend": "", "append": "" },
"placeholder": "请输入请假天数",
"style": { "width": "100%" },
"clearable": true,
"prefix-icon": "",
"suffix-icon": "",
"maxlength": null,
"show-word-limit": false,
"readonly": false,
"disabled": false,
"__vModel__": "day"
},
{
"__config__": {
"label": "日期选择",
"tag": "el-date-picker",
"tagIcon": "date",
"defaultValue": "2022-12-21",
"showLabel": true,
"labelWidth": null,
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/date-picker",
"formId": 108,
"renderKey": "1081671607770402"
},
"placeholder": "请选择日期选择日期选择",
"type": "date",
"style": { "width": "100%" },
"disabled": false,
"clearable": true,
"format": "YYYY-MM-DD",
"value-format": "YYYY-MM-DD",
"readonly": false,
"__vModel__": "field108"
},
{
"__config__": {
"label": "多选框组",
"tag": "el-checkbox-group",
"tagIcon": "checkbox",
"defaultValue": [],
"span": 24,
"showLabel": true,
"labelWidth": null,
"layout": "colFormItem",
"optionType": "default",
"required": true,
"regList": [],
"changeTag": true,
"border": false,
"document": "https://element-plus.org/zh-CN/component/checkbox",
"formId": 110,
"renderKey": "1101671607780270"
},
"__slot__": {
"options": [
{ "label": "选项一", "value": 1, "disabled": false },
{ "label": "选项二", "value": 2, "disabled": false }
]
},
"style": {},
"size": "default",
"min": null,
"max": null,
"disabled": false,
"__vModel__": "field110"
},
{
"__config__": {
"label": "滑块",
"tag": "el-slider",
"tagIcon": "slider",
"defaultValue": 44,
"span": 24,
"showLabel": true,
"layout": "colFormItem",
"labelWidth": null,
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/slider",
"formId": 109,
"renderKey": "1091671607775362"
},
"disabled": false,
"min": 0,
"max": 100,
"step": 1,
"show-stops": false,
"range": false,
"__vModel__": "field109"
},
{
"__config__": {
"label": "请假原因",
"showLabel": true,
"changeTag": true,
"labelWidth": null,
"tag": "editor",
"tagIcon": "edit",
"defaultValue": "",
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"document": "http://tinymce.ax-z.cn",
"formId": 101,
"renderKey": "1011671607523731"
},
"placeholder": "请输入请假原因",
"height": 227,
"branding": false,
"__vModel__": "reason"
}
]
}

10
src/views/tool/build/DraggableItem.jsx
View File

@ -73,13 +73,7 @@ const layouts = {
key={config.renderKey} key={config.renderKey}
conf={currentItem} conf={currentItem}
onInput={(event) => { onInput={(event) => {
// console.log(event); config.defaultValue = event;
// // console.log(this.currentItem.__config__.defaultValue);
// this.$set(config, "defaultValue", event);
// // console.log(this.currentItem.__config__.defaultValue);
this.currentItem.__config__.defaultValue = event;
// config.defaultValue = event;
// config.defaultValue = event;
}} }}
> >
{{ {{
@ -170,7 +164,7 @@ const layouts = {
key={config.renderKey} key={config.renderKey}
conf={currentItem} conf={currentItem}
onInput={(event) => { onInput={(event) => {
this.currentItem.__config__.defaultValue = event; config.defaultValue = event;
}} }}
> >
{child} {child}

4
src/views/tool/build/RightPanel.vue
View File

@ -206,7 +206,7 @@
:modelValue="activeData.min" :modelValue="activeData.min"
:min="0" :min="0"
placeholder="至少应选" placeholder="至少应选"
@input="$set(activeData, 'min', $event ? $event : undefined)" @input="activeData.min = $event ? $event : undefined"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@ -217,7 +217,7 @@
:modelValue="activeData.max" :modelValue="activeData.max"
:min="0" :min="0"
placeholder="最多可选" placeholder="最多可选"
@input="$set(activeData, 'max', $event ? $event : undefined)" @input="activeData.max = $event ? $event : undefined"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item