form 表单 预览
This commit is contained in:
@ -98,7 +98,12 @@
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<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
|
||||
|
||||
178
src/views/flowable/form/test.json
Normal file
178
src/views/flowable/form/test.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -73,13 +73,7 @@ const layouts = {
|
||||
key={config.renderKey}
|
||||
conf={currentItem}
|
||||
onInput={(event) => {
|
||||
// console.log(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;
|
||||
config.defaultValue = event;
|
||||
}}
|
||||
>
|
||||
{{
|
||||
@ -170,7 +164,7 @@ const layouts = {
|
||||
key={config.renderKey}
|
||||
conf={currentItem}
|
||||
onInput={(event) => {
|
||||
this.currentItem.__config__.defaultValue = event;
|
||||
config.defaultValue = event;
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
|
||||
@ -206,7 +206,7 @@
|
||||
:modelValue="activeData.min"
|
||||
:min="0"
|
||||
placeholder="至少应选"
|
||||
@input="$set(activeData, 'min', $event ? $event : undefined)"
|
||||
@input="activeData.min = $event ? $event : undefined"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -217,7 +217,7 @@
|
||||
:modelValue="activeData.max"
|
||||
:min="0"
|
||||
placeholder="最多可选"
|
||||
@input="$set(activeData, 'max', $event ? $event : undefined)"
|
||||
@input="activeData.max = $event ? $event : undefined"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
|
||||
Reference in New Issue
Block a user