Compare commits
2 Commits
11a118c28a
...
4d872e2d5a
| Author | SHA1 | Date |
|---|---|---|
 zzq
|
4d872e2d5a | |
|
zzq
|
9584bbd290 |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,610 @@
|
|||
export default [
|
||||
{
|
||||
title:'布局组件',
|
||||
list:[
|
||||
{
|
||||
type: 'gridtable',
|
||||
label: '设计子表',
|
||||
icon: 'learun-icon-layout-design-child-table',
|
||||
span: 24,
|
||||
isAddBtn:true,
|
||||
addBtnText:'新增一行',
|
||||
isRemoveBtn:true,
|
||||
isShowNum:true,
|
||||
dataSource:[],
|
||||
children:[
|
||||
],
|
||||
changeDataEvent:'',
|
||||
isDESC:false
|
||||
}
|
||||
,{
|
||||
type: 'card',
|
||||
label: '卡片布局',
|
||||
icon: 'learun-icon-layout-card-layout',
|
||||
span: 24,
|
||||
children:[],
|
||||
shadow:''
|
||||
}
|
||||
,{
|
||||
type: 'divider',
|
||||
label: '分割线',
|
||||
html:'分割线',
|
||||
contentPosition:'center',
|
||||
icon: 'learun-icon-layout-divider',
|
||||
span: 24,
|
||||
labelWidth:0,
|
||||
display: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'输入组件',
|
||||
list:[
|
||||
{
|
||||
type: 'input',
|
||||
label: '单行文本',
|
||||
icon: 'learun-icon-input-textfield',
|
||||
placeholder:'请输入',
|
||||
span: 24,
|
||||
patterns:[],
|
||||
display: true,
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'textarea',
|
||||
label: '多行文本',
|
||||
icon: 'learun-icon-input-multiline-text',
|
||||
placeholder:'请输入',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'texteditor',
|
||||
label: '编辑器',
|
||||
icon: 'learun-icon-input-editor',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'number',
|
||||
label: '计数器',
|
||||
icon: 'learun-icon-input-counter',
|
||||
placeholder:'请输入',
|
||||
controlsPosition:'default',
|
||||
controls: true,
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'',
|
||||
disabled:false
|
||||
}
|
||||
,{
|
||||
type: 'password',
|
||||
label: '密码',
|
||||
icon: 'learun-icon-input-password',
|
||||
placeholder:'请输入',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'选择组件',
|
||||
list:[
|
||||
{
|
||||
type: 'radio',
|
||||
label: '单选框组',
|
||||
icon: 'learun-icon-choose-single-selection-box',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'1',
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
upCtrl:'',
|
||||
|
||||
options:[{
|
||||
value:'1',
|
||||
label:'选项1'
|
||||
},{
|
||||
value:'2',
|
||||
label:'选项2'
|
||||
},
|
||||
{
|
||||
value:'3',
|
||||
label:'选项3'
|
||||
}],
|
||||
}
|
||||
,{
|
||||
type: 'checkbox',
|
||||
label: '多选框组',
|
||||
icon: 'learun-icon-choose-multiple-selection-box',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'',
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
upCtrl:'',
|
||||
options:[{
|
||||
value:'1',
|
||||
label:'选项1'
|
||||
},{
|
||||
value:'2',
|
||||
label:'选项2'
|
||||
},
|
||||
{
|
||||
value:'3',
|
||||
label:'选项3'
|
||||
}]
|
||||
}
|
||||
,{
|
||||
type: 'select',
|
||||
label: '下拉选择',
|
||||
icon: 'learun-icon-choose-pull-down-box',
|
||||
span: 24,
|
||||
display: true,
|
||||
placeholder:'请选择',
|
||||
|
||||
default:'',
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
upCtrl:'',
|
||||
options:[{
|
||||
value:'1',
|
||||
label:'选项1'
|
||||
},{
|
||||
value:'2',
|
||||
label:'选项2'
|
||||
},
|
||||
{
|
||||
value:'3',
|
||||
label:'选项3'
|
||||
}]
|
||||
}
|
||||
,{
|
||||
type: 'selectMultiple',
|
||||
label: '下拉多选',
|
||||
icon: 'learun-icon-choose-drop-down-box',
|
||||
span: 24,
|
||||
display: true,
|
||||
multiple: true,
|
||||
placeholder:'请选择',
|
||||
|
||||
default:'',
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
upCtrl:'',
|
||||
collapseTags:false,
|
||||
options:[{
|
||||
value:'1',
|
||||
label:'选项1'
|
||||
},{
|
||||
value:'2',
|
||||
label:'选项2'
|
||||
},
|
||||
{
|
||||
value:'3',
|
||||
label:'选项3'
|
||||
}]
|
||||
}
|
||||
,{
|
||||
key:1,
|
||||
type: 'treeselect',
|
||||
label: '树形选择',
|
||||
icon: 'learun-icon-choose-tree-selection',
|
||||
span: 24,
|
||||
display: true,
|
||||
placeholder:'请选择',
|
||||
|
||||
default:'',
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
dataIdKey:'',
|
||||
dataPIdKey:'',
|
||||
upCtrl:'',
|
||||
options: [
|
||||
{
|
||||
label: '选项一',
|
||||
value: '0',
|
||||
children: [{
|
||||
label: '选项1-1',
|
||||
value: '11',
|
||||
}, {
|
||||
label: '选项1-2',
|
||||
value: '12',
|
||||
}]
|
||||
},
|
||||
{ label: '选项二', value: '1' },
|
||||
{ label: '选项三', value: '2' },
|
||||
]
|
||||
}
|
||||
,{
|
||||
type: 'layerselect',
|
||||
label: '弹窗选择',
|
||||
icon: 'learun-icon-choose-popup-window',
|
||||
span: 24,
|
||||
placeholder:'请选择',
|
||||
display: true,
|
||||
|
||||
multiple:false,
|
||||
isPage:true,
|
||||
columns:[],
|
||||
height:504,
|
||||
width:960,
|
||||
|
||||
|
||||
default:'',
|
||||
dataType:'2', // 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
upCtrl:'',
|
||||
}
|
||||
/*,{
|
||||
key:1,
|
||||
type: 'cascader',
|
||||
label: '级联选择',
|
||||
icon: 'fa fa-share-alt',
|
||||
span: 24,
|
||||
display: true,
|
||||
placeholder:'请选择',
|
||||
|
||||
default:[],
|
||||
dataType:'1', // 1 静态数据 2 数据字典 3 远端数据
|
||||
dataCode:'',
|
||||
dataValueKey:'',
|
||||
dataLabelKey:'',
|
||||
options: [
|
||||
{
|
||||
label: '选项一',
|
||||
value: '0',
|
||||
children: [{
|
||||
label: '选项1-1',
|
||||
value: '11',
|
||||
}, {
|
||||
label: '选项1-2',
|
||||
value: '12',
|
||||
}]
|
||||
},
|
||||
{ label: '选项二', value: '1' },
|
||||
{ label: '选项三', value: '2' },
|
||||
]
|
||||
}*/
|
||||
|
||||
,{
|
||||
type: 'time',
|
||||
label: '时间选择',
|
||||
icon: 'learun-icon-choose-time-selection',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'',
|
||||
placeholder:'选择时间',
|
||||
format: 'HH:mm:ss',
|
||||
readonly:false,
|
||||
clearable:true,
|
||||
selectableRange:''
|
||||
}
|
||||
,{
|
||||
type: 'timerange',
|
||||
label: '时间范围',
|
||||
icon: 'learun-icon-choose-time-range',
|
||||
span: 24,
|
||||
display: true,
|
||||
|
||||
startPlaceholder:'开始时间',
|
||||
endPlaceholder:'结束时间',
|
||||
format: 'HH:mm:ss',
|
||||
default:'',
|
||||
readonly:false,
|
||||
clearable:true,
|
||||
isRange:true
|
||||
}
|
||||
,{
|
||||
type: 'datetime',
|
||||
label: '日期选择',
|
||||
icon: 'learun-icon-choose-date-selection',
|
||||
span: 24,
|
||||
display: true,
|
||||
dateType:'date',
|
||||
format: 'yyyy-MM-dd',
|
||||
readonly:false,
|
||||
clearable:true,
|
||||
placeholder:'选择日期',
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'datetimerange',
|
||||
label: '日期范围',
|
||||
icon: 'learun-icon-choose-date-selection',
|
||||
span: 24,
|
||||
display: true,
|
||||
isRange: true,
|
||||
dateType:'daterange',
|
||||
|
||||
startPlaceholder:'开始时间',
|
||||
endPlaceholder:'结束时间',
|
||||
format: 'yyyy-MM-dd',
|
||||
readonly:false,
|
||||
clearable:true,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'areaselect',
|
||||
label: '省市区',
|
||||
icon: 'learun-icon-choose-provinces',
|
||||
span: 24,
|
||||
placeholder:'请选择',
|
||||
display: true,
|
||||
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'layerbmap',
|
||||
label: '地图选择',
|
||||
icon: 'learun-icon-choose-nextmap-choose',
|
||||
span: 24,
|
||||
placeholder:'请输入地址',
|
||||
display: true,
|
||||
|
||||
bindaddr:'',
|
||||
bindaddrpoint:'',
|
||||
height:504,
|
||||
width:960,
|
||||
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'上传组件',
|
||||
list:[
|
||||
{
|
||||
type: 'upload',
|
||||
label: '文件上传',
|
||||
icon: 'learun-icon-upload-file-upload',
|
||||
span: 24,
|
||||
display: true,
|
||||
maxSize:'2',
|
||||
sizeType:'MB',
|
||||
limit:1,
|
||||
default:''
|
||||
}
|
||||
,{
|
||||
type: 'uploadimg',
|
||||
label: '图片上传',
|
||||
icon: 'learun-icon-upload-image-upload',
|
||||
span: 24,
|
||||
display: true,
|
||||
listType:'picture-card',
|
||||
maxSize:'2',
|
||||
sizeType:'MB',
|
||||
limit:9,
|
||||
default:''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'系统组件',
|
||||
list:[
|
||||
{
|
||||
type: 'guid',
|
||||
label: 'GUID主键',
|
||||
icon: 'learun-icon-system-guid',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'companySelect',
|
||||
label: '公司选择',
|
||||
icon: 'learun-icon-system-companies-choose',
|
||||
span: 24,
|
||||
display: true,
|
||||
isLogin:false,
|
||||
default: ''
|
||||
},
|
||||
{
|
||||
type: 'departmentSelect',
|
||||
label: '部门选择',
|
||||
icon: 'learun-icon-department-of-management',
|
||||
span: 24,
|
||||
display: true,
|
||||
isLogin:false,
|
||||
default: ''
|
||||
},
|
||||
{
|
||||
type: 'userSelect',
|
||||
label: '人员选择',
|
||||
icon: 'learun-icon-system-personnel-selection',
|
||||
span: 24,
|
||||
display: true,
|
||||
isLogin:false,
|
||||
default: ''
|
||||
},
|
||||
|
||||
{
|
||||
type: 'company',
|
||||
label: '所属公司',
|
||||
icon: 'learun-icon-system-subordinate-companies',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'department',
|
||||
label: '所属部门',
|
||||
icon: 'learun-icon-system-department',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'createuser',
|
||||
label: '创建人员',
|
||||
icon: 'learun-icon-system-create-personnel',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'modifyuser',
|
||||
label: '修改人员',
|
||||
icon: 'learun-icon-system-modify-staff',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'createtime',
|
||||
label: '创建时间',
|
||||
icon: 'learun-icon-system-creation-time',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'modifytime',
|
||||
label: '修改时间',
|
||||
icon: 'learun-icon-system-Modify-time',
|
||||
span: 24,
|
||||
display: false,
|
||||
default:''
|
||||
},
|
||||
{
|
||||
type: 'encode',
|
||||
label: '单据编码',
|
||||
icon: 'learun-icon-documents-coding',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'',
|
||||
code:''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'视图组件',
|
||||
list:[
|
||||
{
|
||||
type: 'viewtable',
|
||||
label: '视图表格',
|
||||
icon: 'learun-icon-view-view-form',
|
||||
span: 24,
|
||||
|
||||
display: true,
|
||||
paramFiled:'',
|
||||
dataCode:'',
|
||||
columns:[]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'操作组件',
|
||||
list:[
|
||||
{
|
||||
type: 'btn',
|
||||
label: '按钮组件',
|
||||
icon: 'learun-icon-handle-button',
|
||||
span: 24,
|
||||
display: true,
|
||||
size:'mini',
|
||||
plain:false,
|
||||
round:false,
|
||||
circle:false,
|
||||
myIcon:'',
|
||||
myType:''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'其它组件',
|
||||
list:[
|
||||
{
|
||||
type: 'icon',
|
||||
label: '图标',
|
||||
icon: 'learun-icon-other-icon',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:'',
|
||||
},
|
||||
{
|
||||
type: 'rate',
|
||||
label: '评分',
|
||||
icon: 'learun-icon-other-score',
|
||||
span: 24,
|
||||
display: true,
|
||||
max:5,
|
||||
disabled:false,
|
||||
allowHalf:false,
|
||||
lowThreshold:2,
|
||||
highThreshold:4,
|
||||
colors:['#F7BA2A', '#F7BA2A', '#F7BA2A'],
|
||||
voidColor:'#C6D1DE',
|
||||
disabledVoidColor:'#EFF2F7',
|
||||
iconClasses:['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'],
|
||||
voidIconClass:'el-icon-star-off',
|
||||
disabledVoidIconClass:'el-icon-star-on',
|
||||
showText:false,
|
||||
showScore:false,
|
||||
textColor:'#1F2D3D',
|
||||
texts:['极差', '失望', '一般', '满意', '惊喜'],
|
||||
default:0,
|
||||
}
|
||||
,{
|
||||
type: 'switch',
|
||||
label: '开关',
|
||||
icon: 'learun-icon-other-on-off',
|
||||
span: 24,
|
||||
display: true,
|
||||
disabled:false,
|
||||
width:40,
|
||||
default:false,
|
||||
activeIconClass:'',
|
||||
inactiveIconClass:'',
|
||||
activeText:'',
|
||||
inactiveText:'',
|
||||
valueType:'boolean',
|
||||
activeValue:'true',
|
||||
inactiveValue:'false',
|
||||
activeColor:'#409EFF',
|
||||
inactiveColor:'#C0CCDA'
|
||||
}
|
||||
,{
|
||||
type: 'slider',
|
||||
label: '滑块',
|
||||
icon: 'learun-icon-other-slider',
|
||||
span: 24,
|
||||
display: true,
|
||||
default:0,
|
||||
min:0,
|
||||
max:100,
|
||||
step:1,
|
||||
showInput:false,
|
||||
showInputControls:true,
|
||||
showStops:false,
|
||||
showTooltip:true
|
||||
}
|
||||
,{
|
||||
type: 'color',
|
||||
label: '颜色选择',
|
||||
icon: 'learun-icon-other-color-choices',
|
||||
span: 24,
|
||||
default:'',
|
||||
display: true,
|
||||
disabled:false,
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-area-select v-model="data.default"></l-area-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-areaselect",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('按钮类型')">
|
||||
<l-select v-model="data.myType" :options="typeOptions" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('按钮尺寸')">
|
||||
<el-radio-group v-model="data.size">
|
||||
<el-radio-button label="medium">{{$t('中等')}}</el-radio-button>
|
||||
<el-radio-button label="small">{{$t('较小')}}</el-radio-button>
|
||||
<el-radio-button label="mini">{{$t('迷你')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('按钮图标')">
|
||||
<l-input-icon onlyFirst v-model="data.myIcon" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('朴素按钮')">
|
||||
<el-switch v-model="data.plain" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('圆角按钮')">
|
||||
<el-switch v-model="data.round" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('圆形按钮')">
|
||||
<el-switch v-model="data.circle" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-btn",
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
typeOptions:[
|
||||
{value:'primary',label:'primary'},
|
||||
{value:'success',label:'success'},
|
||||
{value:'warning',label:'warning'},
|
||||
{value:'danger',label:'danger'},
|
||||
{value:'info',label:'info'},
|
||||
{value:'text',label:'text'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('显示阴影')">
|
||||
<l-select v-model="data.shadow" :options="shadowOptions" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('自定义类')">
|
||||
<el-input v-model="data.myclass" ></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-card",
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
shadowOptions:[
|
||||
{label:'总是',value:'always'},
|
||||
{label:'悬浮显示',value:'hover'},
|
||||
{label:'不显示',value:'never'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-cascader
|
||||
:key="data.key"
|
||||
v-model="value"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:props="{ multiple: true }"
|
||||
:options="data.options"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<el-tree ref="tree"
|
||||
:data="data.options"
|
||||
default-expand-all
|
||||
draggable
|
||||
node-key="value"
|
||||
:expand-on-click-node="false">
|
||||
<span class="custom-tree-node"
|
||||
slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<el-button type="text"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click="handleNodeAdd(data)"></el-button>
|
||||
<!-- <el-button class="warning" type="text" size="mini" icon="el-icon-edit"-->
|
||||
<!-- @click="handleNodeEdit(data)"></el-button>-->
|
||||
<el-button class="danger"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="handleNodeRemove(node, data)"></el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<div style="margin-left: 22px;">
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleParentNodeAdd" >
|
||||
{{$t('添加父级')}}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:data="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="lr_dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值字段')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="colNames"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('名字段')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="colNames"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`id ${$t('字段')}` ">
|
||||
<l-select
|
||||
v-model="data.dataIdKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="colNames"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`pid ${$t('字段')}`">
|
||||
<l-select
|
||||
v-model="data.dataPIdKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="colNames"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<l-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
:height="200"
|
||||
|
||||
@close="closeDialog"
|
||||
@ok="handleDialogAdd"
|
||||
>
|
||||
<div class="l-from-body" >
|
||||
<el-form :model="dialogForm" size="mini" :rules="dialogRules" ref="dialogForm" label-width="80px" >
|
||||
<el-form-item :label="$t('选项名')" prop="label">
|
||||
<el-input v-model="dialogForm.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('选项值')" prop="value">
|
||||
<el-input v-model="dialogForm.value"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</l-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-cascader",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
dialogTitle:this.$t('添加选项'),
|
||||
dialogVisible:false,
|
||||
dialogForm: {},
|
||||
dialogRules: {
|
||||
label: { required: true, message: this.$t('请输入') ,trigger:'null' },
|
||||
value: { required: true, message: this.$t('请输入') ,trigger:'null'},
|
||||
},
|
||||
selectData:undefined,
|
||||
|
||||
colNames:[],
|
||||
dataSourceData:[],
|
||||
|
||||
|
||||
value:[],
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
return this.$toTree(this.lr_dataItemClassifys,"f_ItemId","f_ParentId","f_ItemCode","f_ItemName")
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newVal){
|
||||
console.log(newVal);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearValue(){
|
||||
this.$set(this.data, 'default', []);
|
||||
this.data.key++;
|
||||
},
|
||||
handleDataTypeChange(){
|
||||
this.clearValue();
|
||||
this.data.dataCode = undefined;
|
||||
this.data.dataIdKey = undefined;
|
||||
this.data.dataPIdKey = undefined;
|
||||
this.data.dataValueKey = undefined;
|
||||
this.data.dataLabelKey = undefined;
|
||||
this.data.options = [];
|
||||
this.dataSourceData = [];
|
||||
},
|
||||
handleParentNodeAdd(){
|
||||
this.selectData = undefined;
|
||||
this.dialogTitle = this.$t('添加父级选项')
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleNodeAdd(data){
|
||||
console.log(data);
|
||||
this.selectData = data;
|
||||
this.dialogTitle = `${this.$t('添加')}【${data.label}】${this.$t('子选项')}`
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleNodeRemove(node, data){
|
||||
this.clearValue();
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data;
|
||||
const index = children.findIndex(d => d.id === data.id);
|
||||
children.splice(index, 1);
|
||||
|
||||
},
|
||||
handleDialogAdd () {
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const { label, value } = this.dialogForm;
|
||||
const node = this.$refs.tree.getNode(value)
|
||||
if (node) this.$message.error(`${this.$t('选项值重复')}`)
|
||||
else {
|
||||
const data = this.selectData
|
||||
const newNode = {
|
||||
label,
|
||||
value: this.dialogInputType == 'number' ? Number(value) : value,
|
||||
}
|
||||
if (data) {
|
||||
if (!data.children) this.$set(data, 'children', [])
|
||||
data.children.push(newNode)
|
||||
} else {
|
||||
this.$set(this.data.options, this.data.options.length, newNode)
|
||||
}
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeDialog () {
|
||||
this.$refs.dialogForm.clearValidate()
|
||||
this.dialogForm = {}
|
||||
},
|
||||
handleDataItemChange(val){
|
||||
if(!val) return;
|
||||
this.clearValue();
|
||||
this.lr_updateDataItemDetails(val).then(res => {
|
||||
this.data.options = this.$toTree(res,'f_ItemDetailId','f_ParentId','f_ItemValue','f_ItemName');
|
||||
})
|
||||
},
|
||||
handleDataSourceChange(val){
|
||||
if(!val) return;
|
||||
this.clearValue();
|
||||
this.lr_updateDataSourceColName(val).then(res => {
|
||||
const _data = [];
|
||||
res.forEach(item => {
|
||||
var point = {
|
||||
value:item,
|
||||
label:item
|
||||
}
|
||||
_data.push(point);
|
||||
});
|
||||
|
||||
this.colNames = _data;
|
||||
this.data.dataValueKey = res[0];
|
||||
this.data.dataLabelKey = res[0];
|
||||
this.data.dataIdKey = res[0];
|
||||
this.data.dataPIdKey = res[0];
|
||||
this.lr_updateDataSourceData(val).then(res2 => {
|
||||
this.data.options = this.$toTree(res2,res[0],res[0],res[0],res[0]);
|
||||
this.dataSourceData = res2;
|
||||
})
|
||||
})
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
console.log('test')
|
||||
this.data.options = this.$toTree(this.dataSourceData,this.data.dataIdKey,this.data.dataPIdKey,this.data.dataValueKey,this.data.dataLabelKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-select
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myOptions"
|
||||
:multiple="true"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<draggable
|
||||
:list="data.options"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.options"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input
|
||||
style="width:49%;margin-right:2%;"
|
||||
size="mini"
|
||||
v-model="item.label"
|
||||
:placeholder="$t('选项名')"></el-input>
|
||||
<el-input
|
||||
style="width:49%;"
|
||||
size="mini"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('选项值')"></el-input>
|
||||
<el-button
|
||||
@click="handleRemoveDatas(index)"
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
class="delete-item"
|
||||
style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;" >
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddDatas" >{{$t('添加选项卡')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-checkbox",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
this.data.default = '';
|
||||
},
|
||||
handleAddDatas(){
|
||||
this.data.options.push({label:'选项' + (this.data.options.length + 1) ,value:this.data.options.length + 1});
|
||||
},
|
||||
handleRemoveDatas(index){
|
||||
let defaultList = this.data.default.split(',');
|
||||
let dindex = defaultList.indexOf(this.data.options[index].value);
|
||||
if( dindex != -1){
|
||||
defaultList.splice(dindex,1)
|
||||
this.data.default =String(defaultList);
|
||||
}
|
||||
this.data.options.splice(index,1);
|
||||
},
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-input-color v-model="data.default"
|
||||
:placeholder="$t('请选择')" ></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-color",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-company",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('登录公司')">
|
||||
<el-switch v-model="data.isLogin" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-companySelect",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<div class="component-config">
|
||||
<el-form
|
||||
v-if="this.data && Object.keys(this.data).length > 0"
|
||||
label-width="88px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<el-form-item label="ID" >
|
||||
<el-input readonly="readonly" v-model="data.prop" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('数据表')" v-if="hasTableSetting">
|
||||
<el-select v-model="data.table" :placeholder="$t('请选择')" @change="handleTableChange" >
|
||||
<el-option
|
||||
v-for="item in dbTables"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('字段名')" v-if="!['gridtable','divider','viewtable','card','btn'].includes(data.type)">
|
||||
<l-select :options="getFields(data.table)" v-model="data.field" @change="handleFiledChange" >
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="data.type == 'btn'? $t('按钮名称'):$t('标题名')" v-if="!['divider'].includes(data.type)">
|
||||
<el-input v-model="data.label"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="data.subfield? $t('单元格宽度'):$t('标题宽度')" v-if="!['gridtable','divider','viewtable','card','btn'].includes(data.type)"
|
||||
>
|
||||
<el-input-number v-model="data.labelWidth"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('占位提示')"
|
||||
v-if="!['btn','card','gridtable','divider','texteditor','radio','timerange','datetimerange','upload','uploadimg','guid','rate','company','department','modifytime','modifyuser','createtime','createuser','viewtable'].includes(data.type)">
|
||||
<el-input v-model="data.placeholder"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('开始占位')"
|
||||
v-if="['timerange','datetimerange'].includes(data.type)">
|
||||
<el-input v-model="data.startPlaceholder" :placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('结束占位')"
|
||||
v-if="['timerange','datetimerange'].includes(data.type)">
|
||||
<el-input v-model="data.endPlaceholder" :placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('表单栅格')"
|
||||
v-if="!data.subfield && !['gridtable','texteditor','viewtable'].includes(data.type)">
|
||||
<el-slider
|
||||
v-model="data.span"
|
||||
:step="6"
|
||||
:min="6"
|
||||
:max="24"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<component :is="getComponent"
|
||||
:data="data"></component>
|
||||
|
||||
<template v-if="!data.subfield && !isNoScript">
|
||||
<el-divider v-if="['btn','radio','checkbox','select','selectMultiple','treeselect','layerselect','areaselect','companySelect','departmentSelect','userSelect','switch'].includes(data.type)" >脚本</el-divider>
|
||||
<div class="mt-8" v-if="['radio','checkbox','select','selectMultiple','treeselect','layerselect','areaselect','companySelect','departmentSelect','userSelect','switch'].includes(data.type)" >
|
||||
<el-button @click="handleBtnClick('changeCode','值改变脚本')" type="primary" size="mini" >值改变脚本</el-button>
|
||||
</div>
|
||||
<div class="mt-8" v-else-if="['btn'].includes(data.type)" >
|
||||
<el-button @click="handleBtnClick('clickCode','按钮点击脚本')" type="primary" size="mini" >点击脚本</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-form>
|
||||
<div v-else style="width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 100%;color:#909399;" >
|
||||
{{$t('请选中组件进行设置')}}!
|
||||
</div>
|
||||
|
||||
<l-dialog
|
||||
:title="$t(formTitle)"
|
||||
:visible.sync="formVisible"
|
||||
:height="528"
|
||||
:width="1000"
|
||||
@ok="handleCodeSave"
|
||||
@opened="handleOpenedForm"
|
||||
>
|
||||
<l-layout :right="320">
|
||||
<l-code-mirror v-model="code" isHint :handleHint="handleHint" mode="application/javascript" ></l-code-mirror>
|
||||
<template #right>
|
||||
<div class="l-rblock" style="padding:8px;overflow: auto;" >
|
||||
<el-alert
|
||||
title="脚本参数说明,只支持ES5语法（兼容小程序）"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
>
|
||||
prop:组件id;
|
||||
<br/>data:组件改变数据;
|
||||
<br/>isUpdate:表单状态,新增或更新;
|
||||
<br/>get(path):获取数据方法,
|
||||
如果想获取某一个组件值就设置path参数值为组件id,
|
||||
如果是子表的一行数据值就设置子表id.行号,
|
||||
如果是子表某一行某一列值就设置子表id.行号.子组件id;
|
||||
<br/>set(path,value):设置值方法,path说明和get方法一致;
|
||||
<br/>getLabel(prop):获取组件的显示值,prop为组件id;
|
||||
<br/>setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false
|
||||
<br/>setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false
|
||||
<br/>setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false
|
||||
<br/>httpGet(option):get请求方法
|
||||
<br/>httpPost(option):post请求方法
|
||||
<br/>httpDelete(option):delete请求方法
|
||||
<br/>httpPut(option):put请求方法
|
||||
<br/>option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法
|
||||
返回结果为请求数据
|
||||
<br/>loading:显示加载状态
|
||||
<br/>hideLoading:隐藏加载状态
|
||||
<br/>message:显示提示消息
|
||||
<br/>loginUser:当前登录者信息
|
||||
<br/>callback:回调方法,在脚本里使用了http方法后才需要使用
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</l-layout>
|
||||
</l-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
const requireComponent = require.context('./', true, /\.vue$/)
|
||||
const myComponents = {}
|
||||
requireComponent.keys().map(fileName => {
|
||||
const name = fileName.split('/')[1].split('.')[0]
|
||||
if(name != 'cascader'){
|
||||
myComponents[`config-${name}`] = requireComponent(fileName).default
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'component-config',
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
components:{
|
||||
...myComponents
|
||||
},
|
||||
computed: {
|
||||
config(){
|
||||
return this.data
|
||||
},
|
||||
getComponent () {
|
||||
const prefix = 'config-'
|
||||
const { type } = this.data
|
||||
return prefix + type
|
||||
},
|
||||
dbTables(){
|
||||
if(this.data.type == 'gridtable'){
|
||||
return this.formDesign.dbTables.filter(t=>t.type == 'chlid')
|
||||
}
|
||||
else{
|
||||
return this.formDesign.dbTables
|
||||
}
|
||||
},
|
||||
hasTableSetting(){
|
||||
return !this.data.subfield && !['divider','viewtable','card','btn'].includes(this.data.type) //&& this.dbTables.length > 1
|
||||
},
|
||||
isNoScript(){
|
||||
return this.formDesign.isNoScript;
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formVisible:false,
|
||||
type:'',
|
||||
formTitle:'',
|
||||
code:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTableChange(val){
|
||||
if(this.data.type == 'gridtable' && this.data.children){
|
||||
this.data.children.forEach(item => {
|
||||
item.table = val
|
||||
})
|
||||
}
|
||||
},
|
||||
getFields(tableName){
|
||||
let table = this.formDesign.dbTables.find(t=>t.name == tableName) || {}
|
||||
const columns = table.columns || []
|
||||
return columns.map(t=>({...t,value:t.name,label:t.coment? `${t.name}(${t.coment})` : t.name}))
|
||||
},
|
||||
handleFiledChange(obj){
|
||||
if(obj){
|
||||
this.config.csType = obj.csType
|
||||
if(['switch'].includes(this.config.type)){
|
||||
switch(this.config.csType){
|
||||
case 'int':
|
||||
this.config.activeValue = '1'
|
||||
this.config.inactiveValue = '0'
|
||||
this.config.valueType = 'number'
|
||||
break
|
||||
case 'bool':
|
||||
this.config.activeValue = 'true'
|
||||
this.config.inactiveValue = 'false'
|
||||
this.config.valueType = 'boolean'
|
||||
break
|
||||
default:
|
||||
this.config.valueType = 'string'
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.config.csType = ''
|
||||
}
|
||||
|
||||
if(obj.coment){
|
||||
this.config.label = obj.coment
|
||||
}
|
||||
|
||||
//console.log(obj,'字段选择')
|
||||
},
|
||||
|
||||
handleBtnClick(type,title){
|
||||
this.type = type
|
||||
this.formTitle = title
|
||||
this.formVisible = true
|
||||
},
|
||||
getEvent(strEvent){
|
||||
// 获取事件方法
|
||||
if(!this.$validatenull(strEvent)){
|
||||
if(strEvent.indexOf('=>') != -1){
|
||||
// 表示是老版本，提示其修改为新的版本
|
||||
console.warn('当前脚本不支持ES6语法，只支持ES5语法')
|
||||
return {res:false,msg:'脚本没有更新为最新的版本！'}
|
||||
}
|
||||
else{
|
||||
strEvent = `(function(){function fn(learun) {${strEvent}} return fn})()`
|
||||
return this.$getFunction(strEvent)
|
||||
}
|
||||
}
|
||||
else{
|
||||
return {res:true}
|
||||
}
|
||||
},
|
||||
handleCodeSave(){
|
||||
const {res,msg} = this.getEvent(this.code)
|
||||
if(res){
|
||||
this.data[this.type] = this.code
|
||||
this.formVisible = false
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `脚本错误:${msg}`
|
||||
})
|
||||
}
|
||||
},
|
||||
handleOpenedForm(){
|
||||
this.code = this.data[this.type] || ''
|
||||
},
|
||||
handleHint(text){
|
||||
text = text.replace(/'/g,'')
|
||||
text = text.replace(/"/g,'')
|
||||
const list = this.formDesign.nowComponentList.filter(t=>(t.label.indexOf(text) != -1 || t.prop.indexOf(text) != -1))
|
||||
return list.map(t=>`/*${t.label}*/"${t.prop}"`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-createtime",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-createuser",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-date
|
||||
v-model="data.default"
|
||||
:dateType="data.dateType"
|
||||
:format="data.format"
|
||||
:placeholder="$t('请选择')" >
|
||||
</l-date>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间类型')">
|
||||
<l-select v-model="data.dateType" :options="dateTypeOpions" @change="handleChange" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间格式')">
|
||||
<el-input v-model="data.format" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否清空')">
|
||||
<el-switch v-model="data.clearable"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-datetime",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
dateTypeOpions:[
|
||||
{value:'date',label:this.$t('日期')},
|
||||
{value:'month',label:this.$t('月')},
|
||||
{value:'year',label:this.$t('年')},
|
||||
{value:'datetime',label:this.$t('日期时间')},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(){
|
||||
switch(this.data.dateType){
|
||||
case 'date':
|
||||
this.data.format = 'yyyy-MM-dd';
|
||||
break;
|
||||
case 'month':
|
||||
this.data.format = 'yyyy-MM';
|
||||
break;
|
||||
case 'year':
|
||||
this.data.format = 'yyyy';
|
||||
break;
|
||||
case 'datetime':
|
||||
this.data.format = 'yyyy-MM-dd HH:mm:ss';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-date
|
||||
clearable
|
||||
v-model="data.default"
|
||||
:dateType="data.dateType"
|
||||
:format="data.format"
|
||||
:startPlaceholder="data.startPlaceholder"
|
||||
:endPlaceholder="data.endPlaceholder"
|
||||
:placeholder="$t('请选择')" >
|
||||
</l-date>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间类型')">
|
||||
<l-select v-model="data.dateType" :options="dateTypeOpions" @change="handleChange" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间格式')">
|
||||
<el-input v-model="data.format" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否清空')">
|
||||
<el-switch v-model="data.clearable"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-datetimerange",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
dateTypeOpions:[
|
||||
{value:'daterange',label:this.$t('日期范围')},
|
||||
{value:'monthrange',label:this.$t('月范围')},
|
||||
{value:'datetimerange',label:this.$t('日期时间范围')},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange({value}){
|
||||
switch(value){
|
||||
case 'daterange':
|
||||
this.data.format = 'yyyy-MM-dd';
|
||||
break;
|
||||
case 'monthrange':
|
||||
this.data.format = 'yyyy-MM';
|
||||
break;
|
||||
case 'datetimerange':
|
||||
this.data.format = 'yyyy-MM-dd HH:mm:ss';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-department",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('登录部门')">
|
||||
<el-switch v-model="data.isLogin" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-departmentSelect",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('文案')">
|
||||
<el-input v-model="data.html"
|
||||
:placeholder="$t('请输入文案')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('文案对齐')">
|
||||
<el-radio-group v-model="data.contentPosition">
|
||||
<el-radio-button label="left">{{$t('左')}}</el-radio-button>
|
||||
<el-radio-button label="center">{{$t('中')}}</el-radio-button>
|
||||
<el-radio-button label="right">{{$t('右')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-divider",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('单据编码')">
|
||||
<l-select
|
||||
v-model="data.code"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="codeList"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-encode",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
codeList(){
|
||||
if(this.lr_codeList){
|
||||
const list = this.lr_codeList || []
|
||||
return list.map(t=>{
|
||||
return {label:t.f_FullName,value:t.f_EnCode}
|
||||
})
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadCodeList && this.lr_loadCodeList()
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<div class="form-config-container">
|
||||
<el-form label-position="left"
|
||||
label-width="80px"
|
||||
size="mini">
|
||||
<el-form-item :label="$t('表单尺寸')">
|
||||
<el-radio-group v-model="formInfo.size">
|
||||
<el-radio-button label="medium">{{$t('中等')}}</el-radio-button>
|
||||
<el-radio-button label="small">{{$t('较小')}}</el-radio-button>
|
||||
<el-radio-button label="mini">{{$t('迷你')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签对齐')">
|
||||
<el-radio-group v-model="formInfo.labelPosition">
|
||||
<el-radio-button label="right">{{$t('右')}}</el-radio-button>
|
||||
<el-radio-button label="left">{{$t('左')}}</el-radio-button>
|
||||
<el-radio-button label="top">{{$t('顶部')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标题宽度')">
|
||||
<el-input-number v-model="formInfo.labelWidth"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('栅格间隔')">
|
||||
<el-input-number v-model="formInfo.gutter"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('打开方式')">
|
||||
<l-select v-model="formInfo.openType" :options="[{value:'1',label:$t('弹窗')},{value:'2',label:$t('抽屉')}]" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('弹窗宽度')" v-if="formInfo.openType == '1'">
|
||||
<el-input-number v-model="formInfo.dialogWidth"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('弹窗高度')" v-if="formInfo.openType == '1'">
|
||||
<el-input-number v-model="formInfo.dialogHeight"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('抽屉宽度')" v-if="formInfo.openType == '2'">
|
||||
<el-input-number v-model="formInfo.drawerWidth"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('数据历史')">
|
||||
<el-radio-group v-model="formInfo.historyType">
|
||||
<el-radio-button label="0">{{$t('无')}}</el-radio-button>
|
||||
<el-radio-button label="1">{{$t('公用')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('私有')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('表单选项卡')}}</el-divider>
|
||||
<draggable
|
||||
:list="tabList"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in tabList"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="item.text"
|
||||
:placeholder="$t('选项卡名称')"></el-input>
|
||||
<el-button
|
||||
v-if="tabList.length > 1"
|
||||
@click="handleRemoveTabs(index)"
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
class="delete-item"
|
||||
style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;" >
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddTabs" >{{$t('添加选项卡')}}</el-button>
|
||||
</div>
|
||||
|
||||
<template v-if="!isNoScript">
|
||||
<el-divider>{{$t('脚本')}}</el-divider>
|
||||
<div class="mt-8" >
|
||||
<el-button @click="handleBtnClick('beforeSetData','添加赋值前脚本')" type="primary" size="mini" >添加赋值前脚本</el-button>
|
||||
<el-button @click="handleBtnClick('afterValidateForm','添加校验后脚本')" type="primary" size="mini" >添加校验后脚本</el-button>
|
||||
</div>
|
||||
<div class="mt-8" >
|
||||
<el-button @click="handleBtnClick('afterSaveEvent','添加保存后脚本')" type="primary" size="mini" >添加保存后脚本</el-button>
|
||||
<el-button @click="handleBtnClick('changeDataEvent','添加数据改变脚本')" type="primary" size="mini" >添加数据改变脚本</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-form>
|
||||
<l-dialog
|
||||
:title="formTitle"
|
||||
:visible.sync="formVisible"
|
||||
:height="528"
|
||||
:width="1000"
|
||||
@ok="handleCodeSave"
|
||||
@opened="handleOpenedForm"
|
||||
>
|
||||
<l-layout :right="320">
|
||||
<l-code-mirror v-model="code" isHint :handleHint="handleHint" mode="application/javascript" ></l-code-mirror>
|
||||
<template #right>
|
||||
<div class="l-rblock" style="padding:8px;overflow: auto;" >
|
||||
<el-alert
|
||||
title="脚本参数说明,只支持ES5语法（兼容小程序）"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
>
|
||||
prop:组件id;
|
||||
<br/>data:组件改变数据;
|
||||
<br/>rowIndex:子表行号;
|
||||
<br/>isUpdate:表单状态,新增或更新;
|
||||
<br/>get(path):获取数据方法,
|
||||
如果想获取某一个组件值就设置path参数值为组件id,
|
||||
如果是子表的一行数据值就设置子表id.行号,
|
||||
如果是子表某一行某一列值就设置子表id.行号.子组件id;
|
||||
<br/>set(path,value):设置值方法,path说明和get方法一致;
|
||||
<br/>getLabel(prop):获取组件的显示值,prop为组件id;
|
||||
<br/>setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false
|
||||
<br/>setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false
|
||||
<br/>setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false
|
||||
<br/>httpGet(option):get请求方法
|
||||
<br/>httpPost(option):post请求方法
|
||||
<br/>httpDelete(option):delete请求方法
|
||||
<br/>httpPut(option):put请求方法
|
||||
<br/>option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法
|
||||
返回结果为请求数据
|
||||
<br/>loading:显示加载状态
|
||||
<br/>hideLoading:隐藏加载状态
|
||||
<br/>message:显示提示消息
|
||||
<br/>loginUser:当前登录者信息
|
||||
<br/>callback:回调方法,在脚本里使用了http方法后才需要使用
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
</l-layout>
|
||||
</l-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'form-config',
|
||||
components: {
|
||||
},
|
||||
inject: ["formDesign"],
|
||||
data () {
|
||||
return {
|
||||
formTitle:'',
|
||||
formVisible:false,
|
||||
code:'',
|
||||
type:'',
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
tabList(){
|
||||
return this.formDesign.formInfo.tabList;
|
||||
},
|
||||
formInfo(){
|
||||
return this.formDesign.formInfo;
|
||||
},
|
||||
isNoScript(){
|
||||
return this.formDesign.isNoScript;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleAddTabs(){
|
||||
this.tabList.push({
|
||||
components:[],
|
||||
text:this.$t('新建选项卡') + this.tabList.length
|
||||
});
|
||||
},
|
||||
handleRemoveTabs(index){
|
||||
if(`tab${index}` == this.formDesign.formActiveName){
|
||||
this.formDesign.formActiveName = 'tab0';
|
||||
}
|
||||
this.tabList.splice(index,1);
|
||||
},
|
||||
|
||||
handleBtnClick(type,title){
|
||||
this.type = type
|
||||
this.formTitle = title
|
||||
this.formVisible = true
|
||||
},
|
||||
|
||||
getEvent(strEvent){
|
||||
// 获取事件方法
|
||||
if(!this.$validatenull(strEvent)){
|
||||
if(strEvent.indexOf('=>') != -1){
|
||||
// 表示是老版本，提示其修改为新的版本
|
||||
console.warn('当前脚本不支持ES6语法，只支持ES5语法')
|
||||
return {res:false,msg:'脚本没有更新为最新的版本！'}
|
||||
}
|
||||
else{
|
||||
strEvent = `(function(){function fn(learun) {${strEvent}} return fn})()`
|
||||
return this.$getFunction(strEvent)
|
||||
}
|
||||
}
|
||||
else{
|
||||
return {res:true}
|
||||
}
|
||||
},
|
||||
|
||||
handleCodeSave(){
|
||||
const {res,msg} = this.getEvent(this.code)
|
||||
if(res){
|
||||
this.formInfo[this.type] = this.code
|
||||
this.formVisible = false
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${this.$t('脚本错误')}:${msg}`
|
||||
})
|
||||
}
|
||||
},
|
||||
handleOpenedForm(){
|
||||
this.code = this.formInfo[this.type]
|
||||
},
|
||||
handleHint(text){
|
||||
text = text.replace(/'/g,'')
|
||||
text = text.replace(/"/g,'')
|
||||
const list = this.formDesign.nowComponentList.filter(t=>(t.label.indexOf(text) != -1 || t.prop.indexOf(text) != -1))
|
||||
return list.map(t=>`/*${t.label}*/"${t.prop}"`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('排序字段')">
|
||||
<el-select v-model="data.orderId" filterable :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in getFields(data.table)"
|
||||
:key="item.name"
|
||||
:label=" item.coment? `${item.name}(${item.coment})` : item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="data.table" :label="$t('是否倒序')">
|
||||
<el-switch v-model="data.isDESC" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('添加按钮')">
|
||||
<el-switch v-model="data.isAddBtn" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('按钮文本')">
|
||||
<el-input v-model="data.addBtnText" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('删除按钮')">
|
||||
<el-switch v-model="data.isRemoveBtn" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('序号列')">
|
||||
<el-switch v-model="data.isShowNum" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
<div class="mt-8" v-if="!isNoScript" >
|
||||
<el-button @click="handleBtnClick('changeDataEvent','添加行数据改变脚本')" type="primary" size="mini" >添加行数据改变脚本</el-button>
|
||||
</div>
|
||||
<l-dialog
|
||||
:title="formTitle"
|
||||
:visible.sync="formVisible"
|
||||
:height="528"
|
||||
:width="1000"
|
||||
@ok="handleCodeSave"
|
||||
@opened="handleOpenedForm"
|
||||
>
|
||||
<l-layout :right="320">
|
||||
<l-code-mirror v-model="code" isHint :handleHint="handleHint" mode="application/javascript" ></l-code-mirror>
|
||||
<template #right>
|
||||
<div class="l-rblock" style="padding:8px;overflow: auto;" >
|
||||
<el-alert
|
||||
title="脚本参数说明,只支持ES5语法（兼容小程序）"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
>
|
||||
prop:组件id;
|
||||
<br/>data:组件改变数据;
|
||||
<br/>rowIndex:子表行号;
|
||||
<br/>isUpdate:表单状态,新增或更新;
|
||||
<br/>get(path):获取数据方法,
|
||||
如果想获取某一个组件值就设置path参数值为组件id,
|
||||
如果是子表的一行数据值就设置子表id.行号,
|
||||
如果是子表某一行某一列值就设置子表id.行号.子组件id;
|
||||
<br/>set(path,value):设置值方法,path说明和get方法一致;
|
||||
<br/>getLabel(prop):获取组件的显示值,prop为组件id;
|
||||
<br/>setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false
|
||||
<br/>setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false
|
||||
<br/>setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false
|
||||
<br/>httpGet(option):get请求方法
|
||||
<br/>httpPost(option):post请求方法
|
||||
<br/>httpDelete(option):delete请求方法
|
||||
<br/>httpPut(option):put请求方法
|
||||
<br/>option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法
|
||||
返回结果为请求数据
|
||||
<br/>loading:显示加载状态
|
||||
<br/>hideLoading:隐藏加载状态
|
||||
<br/>message:显示提示消息
|
||||
<br/>loginUser:当前登录者信息
|
||||
<br/>callback:回调方法,在脚本里使用了http方法后才需要使用
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
</l-layout>
|
||||
</l-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-gridtable",
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
formTitle:'',
|
||||
formVisible:false,
|
||||
code:'',
|
||||
type:''
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isNoScript(){
|
||||
return this.formDesign.isNoScript;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleBtnClick(type,title){
|
||||
this.type = type
|
||||
this.formTitle = title
|
||||
this.formVisible = true
|
||||
},
|
||||
getEvent(strEvent){
|
||||
// 获取事件方法
|
||||
if(!this.$validatenull(strEvent)){
|
||||
if(strEvent.indexOf('=>') != -1){
|
||||
// 表示是老版本，提示其修改为新的版本
|
||||
console.warn('当前脚本不支持ES6语法，只支持ES5语法')
|
||||
return {res:false,msg:'脚本没有更新为最新的版本！'}
|
||||
}
|
||||
else{
|
||||
strEvent = `(function(){function fn(learun) {${strEvent}} return fn})()`
|
||||
return this.$getFunction(strEvent)
|
||||
}
|
||||
}
|
||||
else{
|
||||
return {res:true}
|
||||
}
|
||||
},
|
||||
handleCodeSave(){
|
||||
const {res,msg} = this.getEvent(this.code)
|
||||
if(res){
|
||||
this.data[this.type] = this.code
|
||||
this.formVisible = false
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${this.$t('脚本错误')}:${msg}`
|
||||
})
|
||||
}
|
||||
},
|
||||
handleOpenedForm(){
|
||||
this.code = this.data[this.type] || ''
|
||||
},
|
||||
getFields(tableName){
|
||||
const table = this.formDesign.dbTables.find(t=>t.name == tableName) || {}
|
||||
return table.columns || []
|
||||
},
|
||||
handleHint(text){
|
||||
text = text.replace(/'/g,'')
|
||||
text = text.replace(/"/g,'')
|
||||
const myList = this.formDesign.nowComponentList.filter(t=>t.pprop == this.data.prop && (t.label.indexOf(text) != -1 || t.prop.indexOf(text) != -1))
|
||||
const list = this.formDesign.nowComponentList.filter(t=>t.pprop != this.data.prop && (t.label.indexOf(text) != -1 || t.prop.indexOf(text) != -1))
|
||||
|
||||
myList.push(...list)
|
||||
return myList.map(t=>`/*${t.label}*/"${t.prop}"`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-guid",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-input-icon :iconList="iconList" v-model="data.default" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-icon",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconList(){
|
||||
if(this.lr_icons){
|
||||
return this.lr_icons
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-input v-model="data.default"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('前缀')">
|
||||
<el-input v-model="data.prepend"
|
||||
:placeholder="$t('前缀')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('后缀')">
|
||||
<el-input v-model="data.append"
|
||||
:placeholder="$t('后缀')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('前图标')">
|
||||
<l-input-icon onlyFirst v-model="data.prefixIcon" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('后图标')">
|
||||
<l-input-icon onlyFirst v-model="data.suffixIcon" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('最大长度')">
|
||||
<el-input-number v-model="data.maxlength"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
<div class="reg-item" :key="index" v-for="(item,index) in data.patterns" >
|
||||
<el-form-item :label="$t('表达式')">
|
||||
<el-input v-model="item.reg"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('错误提示')" style="margin-bottom:0;" >
|
||||
<el-input v-model="item.msg"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-button :title="$t('删除')"
|
||||
@click="handleRemovePatterns(index)"
|
||||
class="reg-item-delete"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-close"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mt-8" >
|
||||
<el-dropdown @command="handleValidatorSelect" >
|
||||
<el-button type="primary" size="mini" >
|
||||
{{$t('添加常用校验')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" >
|
||||
<el-dropdown-item :key="item.name" :command="item" v-for="item in validatorRules" >{{item.name}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button class="ml-8" type="primary" size="mini" @click="handleCustmerReg" >{{$t('自定义规则')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "config-input",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validatorRules(){
|
||||
if(this.lr_validatorRules){
|
||||
return this.lr_validatorRules
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleValidatorSelect(val){
|
||||
this.data.patterns.push({
|
||||
msg:`${this.$t('请输入')}${val.name}`,
|
||||
reg:val.reg
|
||||
})
|
||||
},
|
||||
handleCustmerReg(){
|
||||
this.data.patterns.push({
|
||||
msg:'',
|
||||
reg:''
|
||||
})
|
||||
},
|
||||
handleRemovePatterns(index){
|
||||
this.data.patterns.splice(index,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('弹窗高')">
|
||||
<el-input-number v-model="data.height"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('弹窗宽')">
|
||||
<el-input-number v-model="data.width"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('字段绑定')}}</el-divider>
|
||||
<el-form-item :label="$t('地址字段')" style="margin-bottom:8px;" >
|
||||
<l-select v-model="data.bindaddr" :options="valueOptions"
|
||||
:placeholder="$t('请输入')"></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('经纬度字段')" style="margin-bottom:8px;" >
|
||||
<l-select v-model="data.bindaddrpoint" :options="valueOptions"
|
||||
:placeholder="$t('请输入')"></l-select>
|
||||
</el-form-item>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-layerbmap",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return{}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
computed:{
|
||||
valueOptions(){
|
||||
const res = []
|
||||
const formInfo = this.formDesign.toSaveData()
|
||||
if(!this.data.subfield){
|
||||
formInfo.tabList.forEach(tab=>{
|
||||
tab.components.forEach(com=>{
|
||||
if(!['divider','gridtable'].includes(com.type) && com.prop != this.data.prop ){
|
||||
res.push({value:com.prop,label:com.label})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
else{
|
||||
formInfo.tabList.forEach(tab=>{
|
||||
tab.components.forEach(com=>{
|
||||
if(['gridtable'].includes(com.type) && com.children.findIndex(t=>t.prop == this.data.prop) != -1 ){
|
||||
com.children.forEach(c=>{
|
||||
if(c.prop != this.data.prop ){
|
||||
res.push({value:c.prop,label:c.label})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-layer-select
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myOptions"
|
||||
:multiple="data.multiple"
|
||||
:columns="data.columns"
|
||||
:isPage="data.isPage"
|
||||
>
|
||||
</l-layer-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<!--<el-form-item label="是否多选">
|
||||
<el-switch v-model="data.multiple"></el-switch>
|
||||
</el-form-item>-->
|
||||
<el-form-item :label="$t('是否分页')">
|
||||
<el-switch v-model="data.isPage"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('弹窗高')">
|
||||
<el-input-number v-model="data.height"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('弹窗宽')">
|
||||
<el-input-number v-model="data.width"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('数据')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider>{{$t('数据列')}}</el-divider>
|
||||
<div class="reg-item" :key="index" v-for="(item,index) in data.columns" >
|
||||
<el-form-item :label="$t('列名')" style="margin-bottom:8px;">
|
||||
<el-input v-model="item.label"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('绑定字段')" style="margin-bottom:8px;" >
|
||||
<l-select v-model="item.prop" :options="data.dataType == 2?[{value:'f_ItemValue',label:$t('值')},{value:'f_ItemName',label:$t('名')}]:myColNameList" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('赋值字段')" style="margin-bottom:8px;" >
|
||||
<l-select v-model="item.valueKey" :options="valueOptions"
|
||||
:placeholder="$t('请输入')"></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('宽度')" style="margin-bottom:8px;" >
|
||||
<el-input v-model="item.width"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('对齐')" style="margin-bottom:0;" >
|
||||
<l-select v-model="item.align" :options="alignOptions" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('隐藏')" style="margin-bottom:0;" >
|
||||
<el-switch v-model="item.hidden"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-button :title="$t('删除')"
|
||||
@click="handleRemoveCol(index)"
|
||||
class="reg-item-delete"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-close"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mt-8" >
|
||||
<el-button class="ml-8" type="primary" size="mini" @click="handleAddCol" >{{$t('添加列')}}</el-button>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-layerselect",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
alignOptions:[{value:'left',label:'靠左'},{value:'center',label:'居中'},{value:'right',label:'靠右'}]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
valueOptions(){
|
||||
const res = []
|
||||
const formInfo = this.formDesign.toSaveData()
|
||||
if(!this.data.subfield){
|
||||
formInfo.tabList.forEach(tab=>{
|
||||
tab.components.forEach(com=>{
|
||||
if(!['divider','gridtable','card','btn'].includes(com.type) && com.prop != this.data.prop ){
|
||||
res.push({value:com.prop,label:com.label})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
else{
|
||||
formInfo.tabList.forEach(tab=>{
|
||||
tab.components.forEach(com=>{
|
||||
if(['gridtable'].includes(com.type) && com.children.findIndex(t=>t.prop == this.data.prop) != -1 ){
|
||||
com.children.forEach(c=>{
|
||||
if(c.prop != this.data.prop ){
|
||||
res.push({value:c.prop,label:c.label})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
console.log(this.formDesign.formInfo,'test')
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
|
||||
|
||||
this.data.default = '';
|
||||
},
|
||||
handleAddDatas(){
|
||||
this.data.options.push({label:'选项' + (this.data.options.length + 1) ,value:this.data.options.length + 1});
|
||||
},
|
||||
handleRemoveDatas(index){
|
||||
if(this.data.default == this.data.options[index].value){
|
||||
this.data.default = '';
|
||||
}
|
||||
this.data.options.splice(index,1);
|
||||
},
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
},
|
||||
|
||||
|
||||
handleAddCol(){
|
||||
this.data.columns.push({
|
||||
label:`第${this.data.columns.length}列`,
|
||||
prop:'',
|
||||
valueKey:'',
|
||||
width:100,
|
||||
align:'left',
|
||||
hidden:false
|
||||
})
|
||||
},
|
||||
handleRemoveCol(index){
|
||||
this.data.columns.splice(index,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-modifytime",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-modifyuser",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-input-number v-model="data.default"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最小值')">
|
||||
<el-input-number v-model="data.min"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最大值')">
|
||||
<el-input-number v-model="data.max"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('精度')">
|
||||
<el-input-number v-model="data.precision"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('步长')">
|
||||
<el-input-number v-model="data.step"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('步长倍数')">
|
||||
<el-switch v-model="data.stepStrictly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('按钮位置')">
|
||||
<el-radio-group v-model="data.controlsPosition">
|
||||
<el-radio-button label="default">{{$t('默认')}}</el-radio-button>
|
||||
<el-radio-button label="right">{{$t('右侧')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-number",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-input v-model="data.default"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('前缀')">
|
||||
<el-input v-model="data.prepend"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('后缀')">
|
||||
<el-input v-model="data.append"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('前图标')">
|
||||
<l-input-icon :iconList="iconList" v-model="data.prefixIcon" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('后图标')">
|
||||
<l-input-icon :iconList="iconList" v-model="data.suffixIcon" >
|
||||
</l-input-icon>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('最大长度')">
|
||||
<el-input-number v-model="data.maxlength"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "config-password",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconList(){
|
||||
if(this.lr_icons){
|
||||
return this.lr_icons
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-select
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<draggable
|
||||
:list="data.options"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.options"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input
|
||||
style="width:49%;margin-right:2%;"
|
||||
size="mini"
|
||||
v-model="item.label"
|
||||
:placeholder="$t('选项名')"></el-input>
|
||||
<el-input
|
||||
style="width:49%;"
|
||||
size="mini"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('选项值')"></el-input>
|
||||
<el-button
|
||||
@click="handleRemoveDatas(index)"
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
class="delete-item"
|
||||
style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;" >
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddDatas" >{{$t('添加选项')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-radio",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
this.data.default = '';
|
||||
},
|
||||
handleAddDatas(){
|
||||
this.data.options.push({label:'选项' + (this.data.options.length + 1) ,value:this.data.options.length + 1});
|
||||
},
|
||||
handleRemoveDatas(index){
|
||||
if(this.data.default == this.data.options[index].value){
|
||||
this.data.default = '';
|
||||
}
|
||||
this.data.options.splice(index,1);
|
||||
},
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-rate v-model="data.default"
|
||||
:max="data.max"
|
||||
:allowHalf="data.allowHalf"
|
||||
:lowThreshold="data.lowThreshold"
|
||||
:highThreshold="data.highThreshold"
|
||||
:colors="data.colors"
|
||||
:voidColor="data.voidColor"
|
||||
:disabledVoidColor="data.disabledVoidColor"
|
||||
:iconClasses="data.iconClasses"
|
||||
:voidIconClass="data.voidIconClass"
|
||||
:disabledVoidIconClass="data.disabledVoidIconClass"
|
||||
:showText="data.showText"
|
||||
:showScore="data.showScore"
|
||||
:textColor="data.textColor"
|
||||
:texts="data.texts"
|
||||
>
|
||||
</el-rate>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最大分值')">
|
||||
<el-input-number v-model="data.max"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('低分段')">
|
||||
<el-input-number v-model="data.lowThreshold"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('高分段')">
|
||||
<el-input-number v-model="data.highThreshold"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('未选择颜色')">
|
||||
<l-input-color v-model="data.voidColor"
|
||||
:placeholder="$t('请输入')"></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('只读颜色')">
|
||||
<l-input-color v-model="data.disabledVoidColor"
|
||||
:placeholder="$t('请输入')"></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('文字颜色')">
|
||||
<l-input-color v-model="data.textColor"
|
||||
:placeholder="$t('请输入')"></l-input-color>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('未选择图标')">
|
||||
<l-input-icon v-model="data.voidIconClass"
|
||||
:iconList="iconList"
|
||||
:placeholder="$t('请输入')"></l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('只读图标')">
|
||||
<l-input-icon v-model="data.disabledVoidIconClass"
|
||||
:iconList="iconList"
|
||||
:placeholder="$t('请输入')"></l-input-icon>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-form-item :label="$t('允许半选')">
|
||||
<el-switch v-model="data.allowHalf"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('显示文字')">
|
||||
<el-switch v-model="data.showText"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('显示分数')">
|
||||
<el-switch v-model="data.showScore"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-divider>{{$t('颜色组')}}</el-divider>
|
||||
<div>
|
||||
<draggable
|
||||
:list="data.colors"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.colors"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<l-input-color
|
||||
size="mini"
|
||||
style="width:100%;"
|
||||
v-model="data.colors[index]"
|
||||
:placeholder="$t('请选择')"></l-input-color>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<el-divider>{{$t('图标组')}}</el-divider>
|
||||
<div>
|
||||
<draggable
|
||||
:list="data.iconClasses"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.iconClasses"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<l-input-icon size="mini"
|
||||
style="width:100%;" :iconList="iconList" v-model="data.iconClasses[index]">
|
||||
</l-input-icon>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<el-divider>{{$t('辅助文字数组')}}</el-divider>
|
||||
<div>
|
||||
<draggable
|
||||
:list="data.texts"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.texts"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input size="mini"
|
||||
style="width:100%;" v-model="data.texts[index]">
|
||||
</el-input>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "config-icon",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconList(){
|
||||
if(this.lr_icons){
|
||||
return this.lr_icons
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-select
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<draggable
|
||||
:list="data.options"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.options"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input
|
||||
style="width:49%;margin-right:2%;"
|
||||
size="mini"
|
||||
v-model="item.label"
|
||||
:placeholder="$t('选项名')"></el-input>
|
||||
<el-input
|
||||
style="width:49%;"
|
||||
size="mini"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('选项值')"></el-input>
|
||||
<el-button
|
||||
v-if="data.options.length > 1"
|
||||
@click="handleRemoveDatas(index)"
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
class="delete-item"
|
||||
style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;" >
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddDatas" >{{$t('添加选项卡')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-select",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
|
||||
|
||||
this.data.default = '';
|
||||
},
|
||||
handleAddDatas(){
|
||||
this.data.options.push({label:'选项' + (this.data.options.length + 1) ,value:this.data.options.length + 1});
|
||||
},
|
||||
handleRemoveDatas(index){
|
||||
if(this.data.default == this.data.options[index].value){
|
||||
this.data.default = '';
|
||||
}
|
||||
this.data.options.splice(index,1);
|
||||
},
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-select
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:collapseTags="data.collapseTags"
|
||||
:multiple="true"
|
||||
:options="myOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<draggable
|
||||
:list="data.options"
|
||||
:group="{ name: 'dic' }"
|
||||
ghost-class="set-item-ghost"
|
||||
handle=".drag-item">
|
||||
<div v-for="(item, index) in data.options"
|
||||
class="set-item"
|
||||
:key="index">
|
||||
<i class="drag-item el-icon-rank"></i>
|
||||
<el-input
|
||||
style="width:49%;margin-right:2%;"
|
||||
size="mini"
|
||||
v-model="item.label"
|
||||
:placeholder="$t('选项名')"></el-input>
|
||||
<el-input
|
||||
style="width:49%;"
|
||||
size="mini"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('选项值')"></el-input>
|
||||
<el-button
|
||||
v-if="data.options.length > 1"
|
||||
@click="handleRemoveDatas(index)"
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
class="delete-item"
|
||||
style="padding: 4px;"></el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="padding-left:22px;" >
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddDatas" >{{$t('添加选项卡')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('标签')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('合并文字')">
|
||||
<el-switch v-model="data.collapseTags"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-selectMultiple",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
|
||||
this.data.default = '';
|
||||
},
|
||||
handleAddDatas(){
|
||||
this.data.options.push({label:'选项' + (this.data.options.length + 1) ,value:this.data.options.length + 1});
|
||||
},
|
||||
handleRemoveDatas(index){
|
||||
if(this.data.default == this.data.options[index].value){
|
||||
this.data.default = '';
|
||||
}
|
||||
this.data.options.splice(index,1);
|
||||
},
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-slider v-bind="$deepClone(data)" v-model="data.default" >
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('最小值')">
|
||||
<el-input-number v-model="data.min"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="最大值">
|
||||
<el-input-number v-model="data.max"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="步长">
|
||||
<el-input-number v-model="data.step"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item :label="$t('输入框')">
|
||||
<el-switch v-model="data.showInput"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('输入框按钮')">
|
||||
<el-switch v-model="data.showInputControls"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('显示间断点')">
|
||||
<el-switch v-model="data.showStops"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('显示')}tooltip`">
|
||||
<el-switch v-model="data.showTooltip"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "config-slider",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-switch v-bind="$deepClone(data)" v-model="data.default" >
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('宽度(像素)')">
|
||||
<el-input-number v-model="data.width"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('打开图标')">
|
||||
<l-input-icon v-model="data.activeIconClass"
|
||||
:iconList="iconList"
|
||||
:placeholder="$t('请选择')"></l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('关闭图标')">
|
||||
<l-input-icon v-model="data.inactiveIconClass"
|
||||
:iconList="iconList"
|
||||
:placeholder="$t('请选择')"></l-input-icon>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('打开文字')">
|
||||
<el-input v-model="data.activeText"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('关闭文字')">
|
||||
<el-input v-model="data.inactiveText"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('打开值')">
|
||||
<el-input v-model="data.activeValue">
|
||||
<!--<el-select v-model="data.valueType" slot="append" placeholder="请选择" class="s-w-72" >
|
||||
<el-option label="布尔" value="boolean"></el-option>
|
||||
<el-option label="字串" value="string"></el-option>
|
||||
<el-option label="数字" value="number"></el-option>
|
||||
</el-select>-->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('关闭值')">
|
||||
<el-input v-model="data.inactiveValue">
|
||||
<!--<el-select v-model="data.valueType" slot="append" placeholder="请选择" class="s-w-72" >
|
||||
<el-option label="布尔" value="boolean"></el-option>
|
||||
<el-option label="字串" value="string"></el-option>
|
||||
<el-option label="数字" value="number"></el-option>
|
||||
</el-select>-->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('打开颜色')">
|
||||
<l-input-color v-model="data.activeColor"
|
||||
:placeholder="$t('请输入')"></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('关闭颜色')">
|
||||
<l-input-color v-model="data.inactiveColor"
|
||||
:placeholder="$t('请输入')"></l-input-color>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否禁用')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-switch",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconList(){
|
||||
if(this.lr_icons){
|
||||
return this.lr_icons
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-input v-model="data.default"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('行数')">
|
||||
<el-input-number v-model="data.rows"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最大长度')">
|
||||
<el-input-number v-model="data.maxlength"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('显示计数')">
|
||||
<el-switch v-model="data.showWordLimit"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否可见')">
|
||||
<el-switch v-model="data.display"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-textarea",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<el-input v-model="data.default"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-texteditor",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-time
|
||||
v-model="data.default"
|
||||
:format="data.format"
|
||||
:selectableRange="data.selectableRange"
|
||||
:placeholder="$t('请输入')">
|
||||
</l-time>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间格式')">
|
||||
<el-input v-model="data.format" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间范围')">
|
||||
<l-time
|
||||
is-range
|
||||
v-model="data.selectableRange"
|
||||
:start-placeholder="$t('开始时间')"
|
||||
:end-placeholder="$t('结束时间')">
|
||||
</l-time>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否清空')">
|
||||
<el-switch v-model="data.clearable"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-time",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
formatOptions:[
|
||||
{value:'HH:mm:ss',label:'HH:mm:ss'},
|
||||
{value:'HH:mm',label:'HH:mm'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-time
|
||||
isRange
|
||||
clearable
|
||||
v-model="data.default"
|
||||
:format="data.format"
|
||||
:startPlaceholder="data.startPlaceholder"
|
||||
:endPlaceholder="data.endPlaceholder"
|
||||
:placeholder="$t('请选择')">
|
||||
</l-time>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('时间格式')">
|
||||
<el-input v-model="data.format" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否清空')">
|
||||
<el-switch v-model="data.clearable"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-timerange",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('默认值')">
|
||||
<l-tree-select
|
||||
:key="data.key"
|
||||
v-model="data.default"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myOptions"
|
||||
>
|
||||
</l-tree-select>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('选项')}}</el-divider>
|
||||
<div style="text-align: center;margin-bottom:16px;" >
|
||||
<el-radio-group v-model="data.dataType" size="mini" @change="handleDataTypeChange" >
|
||||
<el-radio-button label="1">{{$t('静态数据')}}</el-radio-button>
|
||||
<el-radio-button label="2">{{$t('数据字典')}}</el-radio-button>
|
||||
<el-radio-button label="3">{{$t('数据源')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!--静态数据-->
|
||||
<div v-if="data.dataType == 1" >
|
||||
<el-tree ref="tree"
|
||||
:data="data.options"
|
||||
default-expand-all
|
||||
draggable
|
||||
node-key="value"
|
||||
:expand-on-click-node="false">
|
||||
<span class="custom-tree-node"
|
||||
slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<el-button type="text"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click="handleNodeAdd(data)"></el-button>
|
||||
<!-- <el-button class="warning" type="text" size="mini" icon="el-icon-edit"-->
|
||||
<!-- @click="handleNodeEdit(data)"></el-button>-->
|
||||
<el-button class="danger"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="handleNodeRemove(node, data)"></el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<div style="margin-left: 22px;">
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleParentNodeAdd" >{{$t('添加父级')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据字典-->
|
||||
<div v-else-if="data.dataType == 2" >
|
||||
<l-tree-select
|
||||
v-model="data.dataCode"
|
||||
:options="dataItemClassifysTree"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:parent="false"
|
||||
|
||||
@change="handleDataItemChange"
|
||||
>
|
||||
</l-tree-select>
|
||||
</div>
|
||||
<!--远端数据-->
|
||||
<div v-else >
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('值字段')">
|
||||
<l-select
|
||||
v-model="data.dataValueKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('名字段')">
|
||||
<l-select
|
||||
v-model="data.dataLabelKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`id${$t('字段')}`">
|
||||
<l-select
|
||||
v-model="data.dataIdKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`pid${$t('字段')}`">
|
||||
<l-select
|
||||
v-model="data.dataPIdKey"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="myColNameList"
|
||||
|
||||
@change="handleDataSourceKeyLabelChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('上一级')">
|
||||
<l-select
|
||||
v-model="data.upCtrl"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.disabled"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<l-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
:height="200"
|
||||
|
||||
@close="closeDialog"
|
||||
@ok="handleDialogAdd"
|
||||
>
|
||||
<div class="l-from-body" >
|
||||
<el-form :model="dialogForm" size="mini" :rules="dialogRules" ref="dialogForm" label-width="80px" >
|
||||
<el-form-item :label="$t('选项名')" prop="label">
|
||||
<el-input v-model="dialogForm.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('选项值')" prop="value">
|
||||
<el-input v-model="dialogForm.value"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</l-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-treeselect",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
dialogTitle:this.$t('添加选项'),
|
||||
dialogVisible:false,
|
||||
dialogForm: {},
|
||||
dialogRules: {
|
||||
label: { required: true, message: this.$t('请输入') ,trigger:'null' },
|
||||
value: { required: true, message: this.$t('请输入') ,trigger:'null'},
|
||||
},
|
||||
pData:undefined,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataItemClassifys && this.lr_loadDataItemClassifys()
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataItemClassifysTree(){
|
||||
if(this.lr_dataItemClassifysTree){
|
||||
return this.lr_dataItemClassifysTree
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataTypeChange(){
|
||||
this.data.default = '';
|
||||
this.data.dataIdKey = '';
|
||||
this.data.dataPIdKey = '';
|
||||
|
||||
this.data.dataCode = '';
|
||||
this.data.dataValueKey = '';
|
||||
this.data.dataLabelKey = '';
|
||||
},
|
||||
handleParentNodeAdd(){
|
||||
this.pData = undefined;
|
||||
this.dialogTitle = this.$t('添加父级选项')
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleNodeAdd(data){
|
||||
this.pData = data;
|
||||
this.dialogTitle = `${this.$t('添加')}【${data.label}】${this.$t('子选项')}`
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleNodeRemove(node, data){
|
||||
this.data.default = ''
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data
|
||||
const index = children.findIndex(d => d.id === data.id)
|
||||
children.splice(index, 1)
|
||||
|
||||
},
|
||||
|
||||
handleDialogAdd () {
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const { label, value } = this.dialogForm;
|
||||
const node = this.$refs.tree.getNode(value)
|
||||
if (node) this.$message.error(this.$t("选项值重复"))
|
||||
else {
|
||||
const pData = this.pData
|
||||
const newNode = {
|
||||
label,
|
||||
value: this.dialogInputType == 'number' ? Number(value) : value,
|
||||
}
|
||||
if (pData) {
|
||||
if (!pData.children) this.$set(pData, 'children', [])
|
||||
pData.children.push(newNode)
|
||||
} else {
|
||||
this.$set(this.data.options, this.data.options.length, newNode)
|
||||
}
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeDialog () {
|
||||
this.$refs.dialogForm.clearValidate()
|
||||
this.dialogForm = {}
|
||||
},
|
||||
|
||||
|
||||
|
||||
handleDataItemChange(){
|
||||
this.data.default = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataItem){
|
||||
this.lr_loadDataItem(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceChange(){
|
||||
this.data.default = ''
|
||||
this.data.dataValueKey = ''
|
||||
this.data.dataLabelKey = ''
|
||||
this.data.dataIdKey = ''
|
||||
this.data.dataPIdKey = ''
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleDataSourceKeyLabelChange(){
|
||||
this.data.default = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('文件类型')">
|
||||
<l-select v-model="data.accept" :options="acceptOpions" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('文件大小')">
|
||||
<el-input v-model="data.maxSize" type="number" >
|
||||
<el-select v-model="data.sizeType" slot="append" :placeholder="$t('请选择')" class="s-w-72" >
|
||||
<el-option label="KB" value="KB"></el-option>
|
||||
<el-option label="MB" value="MB"></el-option>
|
||||
<el-option label="GB" value="GB"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最大上传数')">
|
||||
<el-input-number v-model="data.limit"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('显示提示')">
|
||||
<el-switch v-model="data.isTip"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-upload",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
acceptOpions:[
|
||||
{value:'.xls,.xlsx',label:'Excel'},
|
||||
{value:'.doc,.docx',label:'Word'},
|
||||
{value:'.pdf',label:'Pdf'},
|
||||
{value:'.txt',label:'txt'},
|
||||
{value:'image/*',label:this.$t('图片')},
|
||||
{value:'video/*',label:this.$t('视频')},
|
||||
{value:'audio/*',label:this.$t('音频')}
|
||||
],
|
||||
sizeTypeOpions:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('私有属性')}}</el-divider>
|
||||
<el-form-item :label="$t('文件大小')">
|
||||
<el-input v-model="data.maxSize" type="number" >
|
||||
<el-select v-model="data.sizeType" slot="append" :placeholder="$t('请选择')" class="s-w-72" >
|
||||
<el-option label="KB" value="KB"></el-option>
|
||||
<el-option label="MB" value="MB"></el-option>
|
||||
<el-option label="GB" value="GB"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('最大上传数')">
|
||||
<el-input-number v-model="data.limit"
|
||||
controls-position="right"
|
||||
:placeholder="$t('请输入')"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否只读')">
|
||||
<el-switch v-model="data.readonly"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider>{{$t('校验')}}</el-divider>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-uploadimg",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item :label="$t('登录者')">
|
||||
<el-switch v-model="data.isLogin" ></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('是否必填')">
|
||||
<el-switch v-model="data.required" ></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "config-userSelect",
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-divider>{{$t('数据')}}</el-divider>
|
||||
<!--远端数据-->
|
||||
<el-form-item :label="$t('数据源')">
|
||||
<l-select
|
||||
v-model="data.dataCode"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="dataSource"
|
||||
labelKey="f_Name"
|
||||
valueKey="f_Code"
|
||||
|
||||
@change="handleDataSourceChange"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('关联字段')">
|
||||
<l-select
|
||||
v-model="data.paramFiled"
|
||||
:placeholder="$t('请选择')"
|
||||
size="mini"
|
||||
:options="componentParamOptions"
|
||||
>
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>{{$t('数据列')}}</el-divider>
|
||||
<div class="reg-item" :key="index" v-for="(item,index) in data.columns" >
|
||||
<el-form-item :label="$t('列名')" style="margin-bottom:8px;">
|
||||
<el-input v-model="item.label"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('字段')" style="margin-bottom:8px;" >
|
||||
<l-select v-model="item.prop" :options="myColNameList" ></l-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('宽度')" style="margin-bottom:8px;" >
|
||||
<el-input v-model="item.width"
|
||||
:placeholder="$t('请输入')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('对齐')" style="margin-bottom:0;" >
|
||||
<l-select v-model="item.align" :options="alignOptions" ></l-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-button :title="$t('删除')"
|
||||
@click="handleRemoveCol(index)"
|
||||
class="reg-item-delete"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-close"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mt-8" >
|
||||
<el-button class="ml-8" type="primary" size="mini" @click="handleAddCol" >{{$t('添加列')}}</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '../../../mixin'
|
||||
export default {
|
||||
name: "config-viewtable",
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
alignOptions:[{value:'left',label:'靠左'},{value:'center',label:'居中'},{value:'right',label:'靠右'}]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.lr_loadDataSourceList && this.lr_loadDataSourceList()
|
||||
this.loadDataSourceCol()
|
||||
},
|
||||
computed:{
|
||||
dataSource(){
|
||||
if(this.lr_dataSource){
|
||||
return this.lr_dataSource
|
||||
}
|
||||
else{
|
||||
return []
|
||||
}
|
||||
},
|
||||
componentParamOptions() {
|
||||
const res = []
|
||||
if (this.formDesign) {
|
||||
const formInfo = this.formDesign.toSaveData()
|
||||
formInfo.tabList.forEach((tab) => {
|
||||
tab.components.forEach((com) => {
|
||||
if (!['gridtable','divider','viewtable','card','btn'].includes(com.type) && com.prop != this.data.prop) {
|
||||
res.push({ value: com.prop, label: com.label })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataSourceChange(){
|
||||
if(!this.$validatenull(this.data.dataCode) && this.lr_loadDataSourceColNames){
|
||||
this.lr_loadDataSourceColNames(this.data.dataCode)
|
||||
this.lr_loadDataSourceData(this.data.dataCode)
|
||||
}
|
||||
},
|
||||
handleAddCol(){
|
||||
this.data.columns.push({
|
||||
label:`第${this.data.columns.length}列`,
|
||||
prop:'',
|
||||
width:100,
|
||||
align:'left',
|
||||
hidden:false
|
||||
})
|
||||
},
|
||||
handleRemoveCol(index){
|
||||
this.data.columns.splice(index,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="drag-form-container l-tabs-container">
|
||||
<el-form
|
||||
:label-position="formInfo.labelPosition || 'left'"
|
||||
:label-width="formInfo.labelWidth ? `${formInfo.labelWidth}px` : '80px' "
|
||||
:size="formInfo.size || 'mini'"
|
||||
:model="form"
|
||||
>
|
||||
<input type="text" style="display:none">
|
||||
<el-row>
|
||||
<draggable
|
||||
:class="['drag-form-list']"
|
||||
:list="formComponents"
|
||||
:group="{ name: 'form' }"
|
||||
ghost-class="ghost"
|
||||
:animation="300"
|
||||
@add="handleFormAdd"
|
||||
>
|
||||
<template v-for="(column, index) in formComponents">
|
||||
<div class="drag-form-table"
|
||||
v-if="column.type == 'gridtable'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click="handleSelectWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<drag-form-table
|
||||
:tableComponent="column"
|
||||
:index="index"
|
||||
:select.sync="selectWidget"
|
||||
:plist="formComponents"
|
||||
|
||||
:ref="column.prop"
|
||||
@change="$emit('change')"></drag-form-table>
|
||||
</div>
|
||||
<div class="drag-form-table viewtable"
|
||||
v-else-if="column.type == 'viewtable'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click="handleSelectWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<l-table :columns="column.columns" ></l-table>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetClone(index)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-col
|
||||
v-else
|
||||
:key="column.prop"
|
||||
:md="column.span || 12"
|
||||
:xs="24"
|
||||
:offset="column.offset || 0">
|
||||
<div class="drag-form-table"
|
||||
v-if="column.type == 'card'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click="handleSelectWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<drag-form-card
|
||||
:tableComponent="column"
|
||||
:index="index"
|
||||
:plist="formComponents"
|
||||
:select.sync="selectWidget"
|
||||
|
||||
:ref="column.prop"
|
||||
@change="$emit('change')"
|
||||
>
|
||||
</drag-form-card>
|
||||
</div>
|
||||
|
||||
<div class="drag-form-table drag-form-btn"
|
||||
v-else-if="column.type == 'btn'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click="handleSelectWidget(index)"
|
||||
>
|
||||
<el-button
|
||||
:size="column.size"
|
||||
:plain="column.plain"
|
||||
:round="column.round"
|
||||
:circle="column.circle"
|
||||
:icon="column.myIcon"
|
||||
:type="column.myType"
|
||||
|
||||
>{{column.label}}</el-button>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetClone(index)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<el-form-item v-else class="widget-form-item"
|
||||
:label="column.type != 'divider' ? column.label : ''"
|
||||
:labelWidth="column.labelWidth == undefined? undefined : column.labelWidth + 'px'"
|
||||
:prop="column.prop"
|
||||
:required="column.required"
|
||||
:class="{ active: selectWidget.prop == column.prop, 'required': column.required }"
|
||||
:show-message="false"
|
||||
@click.native="handleSelectWidget(index)"
|
||||
>
|
||||
<drag-form-item :data="column"></drag-form-item>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetClone(index)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dragFormTable from './dragFormTable'
|
||||
import dragFormItem from './dragFormItem'
|
||||
import dragFormCard from './dragFormCard.vue'
|
||||
|
||||
export default {
|
||||
name: 'drag-form',
|
||||
components: { dragFormTable,dragFormCard,dragFormItem},
|
||||
inject: ["formDesign"],
|
||||
props: {
|
||||
select:Object,
|
||||
myTabsIndex:Number
|
||||
},
|
||||
computed:{
|
||||
formInfo(){
|
||||
return this.formDesign.formInfo;
|
||||
},
|
||||
formComponents(){
|
||||
return this.formDesign.formInfo.tabList[this.myTabsIndex].components || [];
|
||||
},
|
||||
selectWidget:{
|
||||
get(){
|
||||
return this.select;
|
||||
},
|
||||
set(val){
|
||||
this.$emit('update:select', val)
|
||||
}
|
||||
},
|
||||
dbTables(){
|
||||
return this.formDesign.dbTables
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectWidget (index) {
|
||||
this.selectWidget = this.formComponents[index]
|
||||
},
|
||||
handleGetVueComponent(refs,prop){
|
||||
let vueComponent = refs[prop]
|
||||
if(!vueComponent){
|
||||
for(const id in refs){
|
||||
vueComponent = this.handleGetVueComponent(refs[id][0].$refs,prop)
|
||||
if(vueComponent){
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return vueComponent
|
||||
},
|
||||
handleFormClickAdd(item){
|
||||
// 如果当前选中的是卡片或者子表直接向卡片或子表中添加
|
||||
if(['card','gridtable'].includes(this.selectWidget.type )){
|
||||
this.handleGetVueComponent(this.$refs,this.selectWidget.prop)[0].handleFormClickAdd(item)
|
||||
}
|
||||
else{
|
||||
this.formComponents.push(item)
|
||||
this.handleFormAdd({newIndex:this.formComponents.length - 1})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
handleFormAdd (evt) {
|
||||
const newIndex = evt.newIndex;
|
||||
const data = this.$deepClone(this.formComponents[newIndex]);
|
||||
if(data.type == 'guid'){
|
||||
data.default = ''
|
||||
}
|
||||
if (!data.prop) data.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
if(data.subfield){
|
||||
data.table = ''
|
||||
data.field = ''
|
||||
}
|
||||
if(data.type == 'gridtable'){
|
||||
// 如果是子表
|
||||
const tables = this.dbTables.filter(t=>t.type == 'chlid')
|
||||
if(tables.length == 1){
|
||||
data.table = tables[0].name
|
||||
}
|
||||
}
|
||||
else if(!['divider','viewtable','card','btn'].includes(data.type)){
|
||||
// 如果只有一个表的时候,默认赋值
|
||||
if(this.dbTables.length == 1){
|
||||
data.table = this.dbTables[0].name
|
||||
}
|
||||
}
|
||||
|
||||
if(data.subfield && data.type == 'layerselect'){
|
||||
data.columns.forEach(col=>{
|
||||
col.valueKey = ''
|
||||
})
|
||||
}
|
||||
|
||||
delete data.icon
|
||||
delete data.subfield
|
||||
|
||||
this.$set(this.formComponents, newIndex, data)
|
||||
this.handleSelectWidget(newIndex)
|
||||
this.$emit("change")
|
||||
},
|
||||
handleWidgetDelete (index) {
|
||||
if (this.formComponents.length - 1 === index) {
|
||||
if (index === 0) this.selectWidget = {}
|
||||
else this.handleSelectWidget(index - 1)
|
||||
} else this.handleSelectWidget(index + 1)
|
||||
this.$nextTick(() => {
|
||||
this.formComponents.splice(index, 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
handleWidgetClone (index) {
|
||||
let cloneData = this.$deepClone(this.formComponents[index])
|
||||
if(cloneData.type == 'guid'){
|
||||
cloneData.default = '';
|
||||
}
|
||||
cloneData.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
cloneData.table = ''
|
||||
cloneData.field = ''
|
||||
this.formComponents.splice(index, 0, cloneData)
|
||||
this.$nextTick(() => {
|
||||
this.handleSelectWidget(index + 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<draggable
|
||||
class="drag-form-table__content"
|
||||
:list="tableComponent.children"
|
||||
:group="{ name: 'form' }"
|
||||
ghost-class="ghost"
|
||||
:animation="200"
|
||||
handle=".drag-form-table__item"
|
||||
@add="handleWidgetTableAdd($event, tableComponent)"
|
||||
@end="$emit('change')">
|
||||
<template v-for="(column,index) in tableComponent.children">
|
||||
<div class="drag-form-table__item drag-form-table"
|
||||
v-if="column.type == 'gridtable'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click.stop="handleSelectTableWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<drag-form-table
|
||||
:tableComponent="column"
|
||||
:index="index"
|
||||
:select.sync="selectWidget"
|
||||
:plist="tableComponent.children"
|
||||
:ref="column.prop"
|
||||
@change="$emit('change')"></drag-form-table>
|
||||
</div>
|
||||
<div class="drag-form-table__item drag-form-table viewtable"
|
||||
v-else-if="column.type == 'viewtable'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click.stop="handleSelectTableWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<l-table :columns="column.columns" ></l-table>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetTableClone(column)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetTableDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-col
|
||||
v-else
|
||||
class="drag-form-table__item"
|
||||
:key="column.prop"
|
||||
:md="column.span || 12"
|
||||
:xs="24"
|
||||
:offset="column.offset || 0">
|
||||
|
||||
<div class="drag-form-table"
|
||||
v-if="column.type == 'card'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click.stop="handleSelectTableWidget(index)"
|
||||
>
|
||||
<div class="drag-form-table__title" >{{$t(column.label)}}</div>
|
||||
<drag-form-card
|
||||
:tableComponent="column"
|
||||
:index="index"
|
||||
:select.sync="selectWidget"
|
||||
:plist="tableComponent.children"
|
||||
:ref="column.prop"
|
||||
@change="$emit('change')"
|
||||
>
|
||||
|
||||
</drag-form-card>
|
||||
</div>
|
||||
<div class="drag-form-table drag-form-btn"
|
||||
v-else-if="column.type == 'btn'"
|
||||
:key="column.prop"
|
||||
:class="{ active: selectWidget.prop == column.prop }"
|
||||
@click.stop="handleSelectTableWidget(index)"
|
||||
>
|
||||
<el-button
|
||||
:size="column.size"
|
||||
:plain="column.plain"
|
||||
:round="column.round"
|
||||
:circle="column.circle"
|
||||
:icon="column.myIcon"
|
||||
:type="column.myType"
|
||||
|
||||
>{{column.label}}</el-button>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetTableClone(column)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetTableDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-else @click.stop="handleSelectTableWidget(index)" >
|
||||
|
||||
<el-form-item
|
||||
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:required="column.required"
|
||||
:class="{ active: selectWidget.prop == column.prop, 'required': column.required }"
|
||||
:show-message="false"
|
||||
>
|
||||
<drag-form-item :data="column"></drag-form-item>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetTableClone(column)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetTableDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-row>
|
||||
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetCloneTable(index)"
|
||||
class="drag-table-action-clone"
|
||||
v-if="selectWidget.prop == tableComponent.prop"
|
||||
circle
|
||||
plain
|
||||
size='mini'
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetDeleteTable(index)"
|
||||
class="drag-table-action-delete"
|
||||
v-if="selectWidget.prop == tableComponent.prop"
|
||||
circle
|
||||
plain
|
||||
size='mini'
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import dragFormItem from './dragFormItem'
|
||||
import dragFormTable from './dragFormTable'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'drag-form-card',
|
||||
props: ['tableComponent','select', 'index','plist'],
|
||||
components: { dragFormTable,dragFormItem},
|
||||
inject: ["formDesign"],
|
||||
data () {
|
||||
return {
|
||||
form:{}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selectWidget:{
|
||||
get(){
|
||||
return this.select;
|
||||
},
|
||||
set(val){
|
||||
this.$emit('update:select', val)
|
||||
}
|
||||
},
|
||||
formComponents(){
|
||||
return this.plist || []//this.formDesign.formInfo.tabList[this.myTabsIndex].components || [];
|
||||
},
|
||||
dbTables(){
|
||||
return this.formDesign.dbTables
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSelectWidget (index) {
|
||||
this.selectWidget = this.formComponents[index]
|
||||
},
|
||||
handleWidgetDeleteTable (index) {
|
||||
if (this.formComponents.length - 1 === index) {
|
||||
if (index === 0) this.selectWidget = {}
|
||||
else this.handleSelectWidget(index - 1)
|
||||
} else this.handleSelectWidget(index + 1)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.formComponents.splice(index, 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
handleWidgetCloneTable (index) {
|
||||
let cloneData = this.$deepClone(this.tableComponent)
|
||||
cloneData.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
cloneData.table = ''
|
||||
cloneData.field = ''
|
||||
this.setAllProp(cloneData.children)
|
||||
this.formComponents.splice(index, 0, cloneData)
|
||||
this.$nextTick(() => {
|
||||
this.handleSelectWidget(index + 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
setAllProp(list){
|
||||
list.forEach(t => {
|
||||
t.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
if(t.children && t.children.length >0 ){
|
||||
this.setAllProp(t.children)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectTableWidget (index) {
|
||||
this.selectWidget = this.tableComponent.children[index]
|
||||
},
|
||||
handleFormClickAdd(item){
|
||||
this.tableComponent.children.push(item)
|
||||
this.handleWidgetTableAdd({newIndex:this.tableComponent.children.length - 1},this.tableComponent,true)
|
||||
},
|
||||
handleWidgetTableAdd (evt, tableComponent,isNotSelect) {
|
||||
let newIndex = evt.newIndex
|
||||
if (newIndex == 1 && newIndex > tableComponent.children.length - 1) newIndex = 0
|
||||
const data = this.$deepClone(tableComponent.children[newIndex]);
|
||||
if (!data.prop) data.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
|
||||
if(data.subfield){
|
||||
data.table = ''
|
||||
data.field = ''
|
||||
}
|
||||
if(data.type == 'gridtable'){
|
||||
// 如果是子表
|
||||
const tables = this.formDesign.dbTables.filter(t=>t.type == 'chlid')
|
||||
if(tables.length == 1){
|
||||
data.table = tables[0].name
|
||||
}
|
||||
}
|
||||
else if(!['divider','viewtable','card','btn'].includes(data.type)){
|
||||
// 如果只有一个表的时候,默认赋值
|
||||
if(this.dbTables.length == 1){
|
||||
data.table = this.dbTables[0].name
|
||||
}
|
||||
}
|
||||
|
||||
if(data.subfield && data.type == 'layerselect'){
|
||||
data.columns.forEach(col=>{
|
||||
col.valueKey = ''
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
delete data.icon
|
||||
delete data.subfield
|
||||
this.$set(tableComponent.children, newIndex, { ...data })
|
||||
if(!isNotSelect){
|
||||
this.selectWidget = tableComponent.children[newIndex]
|
||||
}
|
||||
this.$emit("change")
|
||||
|
||||
},
|
||||
handleWidgetTableClone (item) {
|
||||
const data = this.$deepClone(item);
|
||||
data.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
this.$set(this.tableComponent.children, this.tableComponent.children.length, { ...data })
|
||||
this.$nextTick(() => {
|
||||
this.selectWidget = this.tableComponent.children[this.tableComponent.children.length - 1]
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
handleWidgetTableDelete (index) {
|
||||
if (this.tableComponent.children.length - 1 == index) {
|
||||
if (index == 0) this.selectWidget = this.tableComponent
|
||||
else this.selectWidget = this.tableComponent.children[index - 1]
|
||||
} else this.selectWidget = this.tableComponent.children[index + 1]
|
||||
this.$nextTick(() => {
|
||||
this.tableComponent.children.splice(index, 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div>
|
||||
<l-editor v-if="data.type == 'texteditor'" v-model="data.default" :options="{ theme:'snow',placeholder: $t('请输入内容...')}" >
|
||||
|
||||
</l-editor>
|
||||
<component v-else :is="getComponent(data.type)"
|
||||
v-model="data.default"
|
||||
v-bind="$deepClone(data)"
|
||||
:placeholder="data.placeholder"
|
||||
:options="myOptions"
|
||||
>
|
||||
<span v-if="data.html"
|
||||
v-html="data.html"></span>
|
||||
<template v-if="['input'].includes(data.type) && data.prepend" #prepend >
|
||||
{{data.prepend}}
|
||||
</template>
|
||||
<template v-if="['input'].includes(data.type) && data.append" #append >
|
||||
{{data.append}}
|
||||
</template>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../../mixin'
|
||||
export default {
|
||||
name: 'drag-form-item',
|
||||
mixins: [mixin()],
|
||||
inject: ["formDesign"],
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toValueType(type,value){
|
||||
if(!this.$validatenull(value) && !this.$validatenull(type)){
|
||||
switch(type){
|
||||
case 'boolean':
|
||||
return value == 'true'
|
||||
case 'string':
|
||||
return value
|
||||
case 'number':
|
||||
return Number(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div>
|
||||
<draggable
|
||||
class="drag-form-table__content"
|
||||
:list="tableComponent.children"
|
||||
:group="{ name: 'form' }"
|
||||
ghost-class="ghost"
|
||||
:animation="200"
|
||||
handle=".drag-form-table__item"
|
||||
@add="handleWidgetTableAdd($event, tableComponent)"
|
||||
@end="$emit('change')"
|
||||
>
|
||||
<template
|
||||
v-if="tableComponent.children.length > 0">
|
||||
<div
|
||||
class="drag-form-table__item"
|
||||
v-for="(column, index) in tableComponent.children"
|
||||
:key="index"
|
||||
|
||||
@click.stop="handleSelectTableWidget(index)" >
|
||||
<el-form-item
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:required="column.required"
|
||||
:class="{ active: selectWidget.prop == column.prop, 'required': column.required }"
|
||||
:show-message="false"
|
||||
>
|
||||
<drag-form-item :data="column"></drag-form-item>
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetTableClone(column)"
|
||||
class="drag-action-clone"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetTableDelete(index)"
|
||||
class="drag-action-delete"
|
||||
v-if="selectWidget.prop == column.prop"
|
||||
circle
|
||||
plain
|
||||
size="mini"
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
|
||||
<el-button title="复制"
|
||||
@click.stop="handleWidgetCloneTable(index)"
|
||||
class="drag-table-action-clone"
|
||||
v-if="selectWidget.prop == tableComponent.prop"
|
||||
circle
|
||||
plain
|
||||
size='mini'
|
||||
type="primary">
|
||||
<i class="el-icon-copy-document"></i>
|
||||
</el-button>
|
||||
<el-button title="删除"
|
||||
@click.stop="handleWidgetDeleteTable(index)"
|
||||
class="drag-table-action-delete"
|
||||
v-if="selectWidget.prop == tableComponent.prop"
|
||||
circle
|
||||
plain
|
||||
size='mini'
|
||||
type="danger">
|
||||
<i class="el-icon-delete"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import dragFormItem from './dragFormItem'
|
||||
export default {
|
||||
name: 'drag-form-table',
|
||||
props: ['tableComponent','select', 'index','plist'],
|
||||
components: { dragFormItem},
|
||||
inject: ["formDesign"],
|
||||
data () {
|
||||
return {
|
||||
form:{}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selectWidget:{
|
||||
get(){
|
||||
return this.select;
|
||||
},
|
||||
set(val){
|
||||
this.$emit('update:select', val)
|
||||
}
|
||||
},
|
||||
formComponents(){
|
||||
return this.plist || []//this.formDesign.formInfo.tabList[this.myTabsIndex].components || [];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSelectWidget (index) {
|
||||
this.selectWidget = this.formComponents[index]
|
||||
},
|
||||
handleWidgetDeleteTable (index) {
|
||||
if (this.formComponents.length - 1 === index) {
|
||||
if (index === 0) this.selectWidget = {}
|
||||
else this.handleSelectWidget(index - 1)
|
||||
} else this.handleSelectWidget(index + 1)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.formComponents.splice(index, 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
handleWidgetCloneTable (index) {
|
||||
let cloneData = this.$deepClone(this.tableComponent)
|
||||
cloneData.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
cloneData.children.forEach(t => {
|
||||
t.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
})
|
||||
cloneData.table = ''
|
||||
this.formComponents.splice(index, 0, cloneData)
|
||||
this.$nextTick(() => {
|
||||
this.handleSelectWidget(index + 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
|
||||
handleSelectTableWidget (index) {
|
||||
this.selectWidget = this.tableComponent.children[index];
|
||||
},
|
||||
handleFormClickAdd(item){
|
||||
this.tableComponent.children.push(item)
|
||||
this.handleWidgetTableAdd({newIndex:this.tableComponent.children.length - 1},this.tableComponent,true)
|
||||
},
|
||||
|
||||
handleWidgetTableAdd (evt, tableComponent,isNotSelect) {
|
||||
let newIndex = evt.newIndex;
|
||||
//const item = evt.item;
|
||||
|
||||
if (newIndex == 1 && newIndex > tableComponent.children.length - 1) newIndex = 0
|
||||
|
||||
|
||||
const data = this.$deepClone(tableComponent.children[newIndex]);
|
||||
if (['gridtable','divider','texteditor','upload','uploadimg','viewtable','card','btn'].includes(data.type)) {
|
||||
tableComponent.children.splice(newIndex, 1)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (!data.prop) data.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
|
||||
if(!data.subfield && data.type == 'layerselect'){
|
||||
data.columns.forEach(col=>{
|
||||
col.valueKey = ''
|
||||
})
|
||||
}
|
||||
|
||||
data.subfield = true
|
||||
if(tableComponent.table){
|
||||
data.table = tableComponent.table
|
||||
}
|
||||
else {
|
||||
data.table = ''
|
||||
}
|
||||
|
||||
delete data.icon
|
||||
this.$set(tableComponent.children, newIndex, { ...data })
|
||||
if(!isNotSelect){
|
||||
this.selectWidget = tableComponent.children[newIndex]
|
||||
}
|
||||
|
||||
this.$emit("change")
|
||||
},
|
||||
handleWidgetTableClone (item) {
|
||||
const data = this.$deepClone(item);
|
||||
data.prop = Date.now() + '_' + Math.ceil(Math.random() * 99999)
|
||||
data.table = ''
|
||||
data.field = ''
|
||||
this.$set(this.tableComponent.children, this.tableComponent.children.length, { ...data })
|
||||
this.$nextTick(() => {
|
||||
this.selectWidget = this.tableComponent.children[this.tableComponent.children.length - 1]
|
||||
this.$emit("change")
|
||||
})
|
||||
},
|
||||
handleWidgetTableDelete (index) {
|
||||
if (this.tableComponent.children.length - 1 == index) {
|
||||
if (index == 0) this.selectWidget = this.tableComponent
|
||||
else this.selectWidget = this.tableComponent.children[index - 1]
|
||||
} else this.selectWidget = this.tableComponent.children[index + 1]
|
||||
this.$nextTick(() => {
|
||||
this.tableComponent.children.splice(index, 1)
|
||||
this.$emit("change")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,558 @@
|
|||
<template>
|
||||
<l-layout class="l-form-design" :leftMove="false" :rightMove="false" :left="280" :right="344">
|
||||
<template #left >
|
||||
<l-panel :style="{'padding-right':0,'padding-top':isNotTopPadding?0:undefined,'padding-bottom':isNotBottomPadding?0:undefined,}">
|
||||
<div v-for="(myComponent, index) in myComponents" :key="index">
|
||||
<div class="l-form-design--myComponent-title">{{$t(myComponent.title)}}</div>
|
||||
<draggable class="myComponent-item-draggable"
|
||||
:list="myComponent.list"
|
||||
:group="{ name: 'form', pull: 'clone', put: false }"
|
||||
ghost-class="ghost"
|
||||
:sort="false"
|
||||
>
|
||||
<div class="myComponent-item"
|
||||
@click="handleClick(item)"
|
||||
v-for="(item, index) in myComponent.list"
|
||||
:key="index">
|
||||
<div class="myComponent-item-body" >
|
||||
<i class="myComponent-item-icon" :class="item.icon"></i>
|
||||
<span>{{$t(item.title || item.label)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</l-panel>
|
||||
</template>
|
||||
<l-panel :style="{'padding-left':0,'padding-right':0,'padding-top':isNotTopPadding?0:undefined,'padding-bottom':isNotBottomPadding?0:undefined}" >
|
||||
<template #title>
|
||||
<el-button @click="handleClear" plain size="mini" type="danger" icon="el-icon-delete">{{$t('清空')}}</el-button>
|
||||
<el-button @click="handleViewer" plain size="mini" type="primary" icon="el-icon-video-play">{{$t('预览')}}</el-button>
|
||||
</template>
|
||||
|
||||
<div class="l-rblock" style="padding:11px;" >
|
||||
<div :class="['l-auto-window',{ 'only-tabs': formInfo.tabList.length == 1}]" >
|
||||
<el-tabs v-model="formActiveName" type="card" >
|
||||
<el-tab-pane v-for="(item, index) in formInfo.tabList" :key="index" :label="item.text" :name="'tab' + index">
|
||||
<div class="l-rblock" :style="{background: item.components.length == 0 ? `url(${imgUrl}) no-repeat 50%`: ''}" >
|
||||
<drag-form
|
||||
ref="dragForm"
|
||||
:myTabsIndex="index"
|
||||
:select.sync="dragFormSelect"
|
||||
></drag-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</l-panel>
|
||||
<template #right >
|
||||
<l-panel :style="{'padding-left':0,'padding-top':isNotTopPadding?0:undefined,'padding-bottom':isNotBottomPadding?0:undefined}" >
|
||||
<div class="l-auto-window" >
|
||||
<el-tabs v-model="configActiveName" :stretch="true" >
|
||||
<el-tab-pane :label="`${$t('组件属性')}${componentName}`" name="tab01">
|
||||
<component-config :data="dragFormSelect"></component-config>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('表单属性')" name="tab02">
|
||||
<form-config></form-config>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</l-panel>
|
||||
</template>
|
||||
|
||||
<l-dialog v-if="formInfo.openType != '2'"
|
||||
:title="$t('表单预览')"
|
||||
:visible.sync="viewerVisible"
|
||||
:height="formInfo.dialogHeight || 600"
|
||||
:width="formInfo.dialogWidth || 800"
|
||||
|
||||
@opened="handleFormOpened"
|
||||
@ok="handleCloseViewer"
|
||||
>
|
||||
<l-form-viewer
|
||||
ref="formViewer"
|
||||
:formInfo="viewerFormInfo"
|
||||
></l-form-viewer>
|
||||
</l-dialog>
|
||||
<l-drawer v-else
|
||||
:title="$t('表单预览')"
|
||||
:visible.sync="viewerVisible"
|
||||
:width="formInfo.drawerWidth || 600"
|
||||
|
||||
@opened="handleFormOpened"
|
||||
@ok="handleCloseViewer"
|
||||
>
|
||||
<l-form-viewer
|
||||
ref="formViewer"
|
||||
:formInfo="viewerFormInfo"
|
||||
></l-form-viewer>
|
||||
</l-drawer>
|
||||
</l-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myComponents from './components.js'
|
||||
import FormConfig from './config/formConfig'
|
||||
import ComponentConfig from './config/componentConfig'
|
||||
import DragForm from './dragForm'
|
||||
|
||||
export default {
|
||||
name:'l-form-design',
|
||||
components: {
|
||||
FormConfig,
|
||||
ComponentConfig,
|
||||
DragForm
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
formDesign: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dbTables:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
isNoScript:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
isNotTopPadding:Boolean,
|
||||
isNotBottomPadding:Boolean,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgUrl:require("../../img/widget-empty.png"),
|
||||
|
||||
myComponents,
|
||||
configActiveName:'tab01',
|
||||
|
||||
formActiveName:'tab0',
|
||||
formInfo:{
|
||||
size:'mini',
|
||||
labelPosition:'right',
|
||||
labelWidth:80,
|
||||
gutter:0,
|
||||
openType:'1',
|
||||
dialogWidth:800,
|
||||
dialogHeight:600,
|
||||
drawerWidth:600,
|
||||
historyType:"0",
|
||||
|
||||
beforeSetData:'',
|
||||
afterValidateForm:'',
|
||||
changeDataEvent:'',
|
||||
afterSaveEvent:'',
|
||||
|
||||
tabList:[{ components:[],text:'主表信息'}]
|
||||
},
|
||||
|
||||
dragFormSelect: {},
|
||||
|
||||
viewerVisible:false,
|
||||
viewerFormInfo:{}
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
componentName(){
|
||||
let res = ''
|
||||
if(this.dragFormSelect && this.dragFormSelect.type){
|
||||
const len = this.myComponents.length
|
||||
for(let i = 0;i < len;i++){
|
||||
const list = this.myComponents[i].list
|
||||
const item = list.find(t=>t.type == this.dragFormSelect.type)
|
||||
if(item){
|
||||
res = `(${item.label})`
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
nowComponentList(){
|
||||
const data = this.getData()
|
||||
const res = []
|
||||
data.tabList.forEach(tab=>{
|
||||
tab.components.forEach(component=>{
|
||||
if(['gridtable'].includes(component.type)){
|
||||
res.push(component)
|
||||
component.children.forEach(component2=>{
|
||||
component2.label = `${component.label}_${component2.label}`
|
||||
component2.pprop = component.prop
|
||||
res.push(component2)
|
||||
})
|
||||
}
|
||||
else{
|
||||
res.push(component)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClear(){
|
||||
this.dragFormSelect = {}
|
||||
this.formInfo.tabList[parseInt(this.formActiveName.replace('tab',''))].components = []
|
||||
},
|
||||
handleViewer(){
|
||||
this.viewerFormInfo = this.toSaveData()
|
||||
this.viewerVisible = true
|
||||
},
|
||||
handleCloseViewer(){
|
||||
this.viewerVisible = false
|
||||
},
|
||||
async handleFormOpened(showLoading,hideLoading){
|
||||
showLoading('加载中...')
|
||||
await this.$refs.formViewer.init()
|
||||
hideLoading()
|
||||
},
|
||||
|
||||
clear(){
|
||||
this.formInfo = {
|
||||
size:'mini',
|
||||
labelPosition:'right',
|
||||
labelWidth:80,
|
||||
gutter:0,
|
||||
openType:'1',
|
||||
dialogWidth:600,
|
||||
dialogHeight:400,
|
||||
drawerWidth:600,
|
||||
tabList:[{ components:[],text:'主表信息'}]
|
||||
}
|
||||
this.configActiveName = 'tab01'
|
||||
this.formActiveName = 'tab0'
|
||||
this.dragFormSelect = {}
|
||||
this.viewerVisible = false
|
||||
this.viewerFormInfo = {}
|
||||
|
||||
},
|
||||
|
||||
validate(){
|
||||
let tabName = ''
|
||||
let fieldMap = {}
|
||||
let tableMap = {}
|
||||
|
||||
let flag = true;
|
||||
|
||||
const data = this.getData()
|
||||
|
||||
data.tabList.forEach(tab => {
|
||||
if(data.tabList.length > 1){
|
||||
tabName = `【${tab.text}】`
|
||||
}
|
||||
tab.components.forEach(component=>{
|
||||
// 1.每一个组件必须要绑定数据表
|
||||
// 2.每一个组件必须要绑定数据表字段
|
||||
// 3.数据表不能重复，且子表不能是绑定主表
|
||||
if(!['viewtable','card','btn','divider'].includes(component.type)){
|
||||
if(['gridtable'].includes(component.type)){
|
||||
if(tableMap[component.table]){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${tabName}【${component.table}】子表单绑定表重复！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
tableMap[component.table] = 1;
|
||||
}
|
||||
else if(!component.subfield){
|
||||
if(tableMap[component.table] == 1){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${tabName}【${component.table}】子表单绑定表重复！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
tableMap[component.table] = 2;
|
||||
}
|
||||
|
||||
if(!component.subfield){
|
||||
if(this.$validatenull(component.table)){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}【${component.label}】绑定数据表！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
}
|
||||
if(!['gridtable'].includes(component.type)){
|
||||
if(this.$validatenull(component.field)){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}【${component.label}】绑定数据表字段！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
|
||||
if(fieldMap[`${component.table}-${component.field}`]){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${tabName}【${component.label}】绑定数据表字段重复！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
|
||||
fieldMap[`${component.table}-${component.field}`] = true;
|
||||
}
|
||||
|
||||
|
||||
if(['gridtable'].includes(component.type)){
|
||||
let gfield = {}
|
||||
component.children.forEach(item=>{
|
||||
if(this.$validatenull(item.field)){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}子表中【${item.label}】绑定数据表字段！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
if(gfield[item.field]){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `${tabName}子表中【${component.label}】绑定数据表字段重复！`
|
||||
});
|
||||
flag = false
|
||||
return false
|
||||
}
|
||||
gfield[item.field] = true
|
||||
})
|
||||
}
|
||||
|
||||
if(['2','3'].includes(component.dataType)){
|
||||
if(!component.dataCode){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}【${component.label}】选择${component.dataType == '2'?'数据字典':'数据源'}！`
|
||||
});
|
||||
flag = false
|
||||
}
|
||||
}
|
||||
|
||||
if(['encode'].includes(component.type) && this.$validatenull(component.code)){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}【${component.label}】选择单据编码！`
|
||||
})
|
||||
flag = false
|
||||
}
|
||||
|
||||
if(['layerselect'].includes(component.type) && component.columns.length <= 0){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: `请${tabName}【${component.label}】选择设置列！`
|
||||
})
|
||||
flag = false
|
||||
}
|
||||
|
||||
|
||||
if(!flag){
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if(!flag){
|
||||
return false
|
||||
}
|
||||
});
|
||||
|
||||
return flag
|
||||
},
|
||||
|
||||
getData(){
|
||||
const data = this.toSaveData()
|
||||
return data
|
||||
},
|
||||
setData(data){
|
||||
this.formInfo = this.toShowData(data)
|
||||
},
|
||||
handleClick(item){
|
||||
const index = parseInt(this.formActiveName.replace('tab',''))
|
||||
this.$refs.dragForm[index].handleFormClickAdd(item)
|
||||
},
|
||||
|
||||
updateTable(){
|
||||
this.formInfo.tabList.forEach(tab => {
|
||||
tab.components.forEach(component=>{
|
||||
if(!this.$validatenull(component.table)){
|
||||
const table = this.dbTables.find(t=>t.name == component.table)
|
||||
if(this.$validatenull(table)){
|
||||
component.table = ''
|
||||
if(['gridtable'].includes(component.type)){
|
||||
component.children.forEach(col=>{
|
||||
col.field = ''
|
||||
col.csType = ''
|
||||
})
|
||||
}
|
||||
else{
|
||||
component.field = ''
|
||||
component.csType = ''
|
||||
}
|
||||
}
|
||||
else if(['gridtable'].includes(component.type)){
|
||||
component.children.forEach(col=>{
|
||||
const column = table.columns.find(t=>t.name == col.field)
|
||||
if(this.$validatenull(column)){
|
||||
col.field = ''
|
||||
col.csType = ''
|
||||
}
|
||||
else{
|
||||
col.csType = column.csType
|
||||
if(['switch'].includes(col.type)){
|
||||
switch(col.csType){
|
||||
case 'int':
|
||||
col.activeValue = '1'
|
||||
col.inactiveValue = '0'
|
||||
col.valueType = 'number'
|
||||
break
|
||||
case 'bool':
|
||||
col.activeValue = 'true'
|
||||
col.inactiveValue = 'false'
|
||||
col.valueType = 'boolean'
|
||||
break
|
||||
default:
|
||||
col.valueType = 'string'
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
const column = table.columns.find(t=>t.name == component.field)
|
||||
if(this.$validatenull(column)){
|
||||
component.field = ''
|
||||
component.csType = ''
|
||||
}
|
||||
else{
|
||||
component.csType = column.csType
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(['switch'].includes(component.type) && !this.$validatenull(component.csType)){
|
||||
switch(component.csType){
|
||||
case 'int':
|
||||
component.activeValue = '1'
|
||||
component.inactiveValue = '0'
|
||||
component.valueType = 'number'
|
||||
break
|
||||
case 'bool':
|
||||
component.activeValue = 'true'
|
||||
component.inactiveValue = 'false'
|
||||
component.valueType = 'boolean'
|
||||
break
|
||||
default:
|
||||
component.valueType = 'string'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 调整数据结构
|
||||
toSaveData(){ // 转化成保存数据；为了兼容早期的版本只能保持和之前的数据格式一致
|
||||
const data = this.$deepClone(this.formInfo)
|
||||
data.tabList && data.tabList.forEach(tab=>{
|
||||
const componentList = []
|
||||
tab.components.forEach(component=>{
|
||||
if(['card'].includes(component.type)){
|
||||
this.addChildren(component.children,componentList,component.prop,'card')
|
||||
delete component.children
|
||||
componentList.push(component)
|
||||
}
|
||||
else{
|
||||
if(['guid','createuser','modifyuser','createtime','modifytime','encode','company','department','userSelect','departmentSelect','companySelect'].includes(component.type)){
|
||||
component.default = ''
|
||||
}
|
||||
else if(component.type == 'gridtable'){
|
||||
component.children.forEach(component2=>{
|
||||
if(['guid','createuser','modifyuser','createtime','modifytime','encode','company','department','userSelect','departmentSelect','companySelect'].includes(component.type)){
|
||||
component2.default = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
componentList.push(component)
|
||||
}
|
||||
})
|
||||
tab.components = componentList
|
||||
})
|
||||
|
||||
return data
|
||||
},
|
||||
addChildren(list,componentList,pid,ptype){
|
||||
list.forEach(component=>{
|
||||
component.pid = pid
|
||||
component.ptype = ptype
|
||||
if(['card'].includes(component.type)){
|
||||
this.addChildren(component.children,componentList,component.prop,'card')
|
||||
delete component.children
|
||||
componentList.push(component)
|
||||
}
|
||||
else{
|
||||
if(['guid','createuser','modifyuser','createtime','modifytime','encode','company','department','userSelect','departmentSelect','companySelect'].includes(component.type)){
|
||||
component.default = ''
|
||||
}
|
||||
else if(component.type == 'gridtable'){
|
||||
component.children.forEach(component2=>{
|
||||
if(['guid','createuser','modifyuser','createtime','modifytime','encode','company','department','userSelect','departmentSelect','companySelect'].includes(component.type)){
|
||||
component2.default = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
componentList.push(component)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toShowData(data){ // 转化成显示数据
|
||||
const myData = this.$deepClone(data)
|
||||
if(myData.historyType == undefined){
|
||||
myData.historyType = "0"
|
||||
}
|
||||
|
||||
const pMap = {}
|
||||
myData.tabList && myData.tabList.forEach(tab=>{
|
||||
const componentList = []
|
||||
tab.components.forEach(component=>{
|
||||
if(['card'].includes(component.type)){
|
||||
if(!pMap[component.prop]){
|
||||
pMap[component.prop] = []
|
||||
}
|
||||
component.children = pMap[component.prop]
|
||||
}
|
||||
|
||||
if(component.ptype == 'card'){
|
||||
if(!pMap[component.pid]){
|
||||
pMap[component.pid] = []
|
||||
}
|
||||
pMap[component.pid].push(component)
|
||||
delete component.pid
|
||||
delete component.ptype
|
||||
}
|
||||
else{
|
||||
componentList.push(component)
|
||||
}
|
||||
})
|
||||
tab.components = componentList
|
||||
})
|
||||
return myData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import formDesign from './_src/formDesign.vue'
|
||||
formDesign.install = function(Vue) {
|
||||
Vue.component(formDesign.name, formDesign)
|
||||
}
|
||||
|
||||
export default formDesign
|
||||
|
|
@ -3,14 +3,13 @@ import type { GlobConfig } from '#/config';
|
|||
import { getAppEnvConfig } from '@/utils/env';
|
||||
|
||||
export const useGlobSetting = (): Readonly<GlobConfig> => {
|
||||
const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL,VITE_LR_API_URL } =
|
||||
const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL } =
|
||||
getAppEnvConfig();
|
||||
|
||||
// Take global configuration
|
||||
const glob: Readonly<GlobConfig> = {
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
apiUrl: VITE_GLOB_API_URL,
|
||||
lrApi: VITE_LR_API_URL,
|
||||
shortName: VITE_GLOB_APP_TITLE.replace(/\s/g, '_').replace(/-/g, '_'),
|
||||
urlPrefix: VITE_GLOB_API_URL_PREFIX,
|
||||
uploadUrl: VITE_GLOB_UPLOAD_URL,
|
||||
|
|
|
|||
|
|
@ -32,14 +32,12 @@ export function getAppEnvConfig() {
|
|||
: (window[ENV_NAME] as unknown as GlobEnvConfig);
|
||||
const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL } = ENV;
|
||||
let { VITE_GLOB_API_URL } = ENV;
|
||||
let { VITE_LR_API_URL } = ENV;
|
||||
if (localStorage.getItem(API_ADDRESS)) {
|
||||
const address = JSON.parse(localStorage.getItem(API_ADDRESS) || '{}');
|
||||
if (address?.key) VITE_GLOB_API_URL = address?.val;
|
||||
}
|
||||
return {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_LR_API_URL,
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_API_URL_PREFIX,
|
||||
VITE_GLOB_UPLOAD_URL,
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import axios from 'axios';
|
|||
const globSetting = useGlobSetting();
|
||||
const urlPrefix = globSetting.urlPrefix;
|
||||
const { createMessage, createErrorModal, createSuccessModal } = useMessage();
|
||||
console.log('globSetting',globSetting)
|
||||
|
||||
/**
|
||||
* @description: 数据处理，方便区分多种处理方式
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import { AxiosRetry } from '@/utils/http/axios/axiosRetry';
|
|||
import axios from 'axios';
|
||||
|
||||
const globSetting = useGlobSetting();
|
||||
globSetting.lrApi = "http://192.168.10.124:5009"
|
||||
|
||||
const urlPrefix = globSetting.urlPrefix;
|
||||
const { createMessage, createErrorModal, createSuccessModal } = useMessage();
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue