陈裕财
2 years ago
3 changed files with 405 additions and 0 deletions
@ -0,0 +1,381 @@ |
|||||
|
<template> |
||||
|
<section > |
||||
|
<pre> |
||||
|
<code>{{code}}</code> |
||||
|
</pre> |
||||
|
|
||||
|
<pre> |
||||
|
<code> |
||||
|
import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js'; |
||||
|
export default { |
||||
|
mixin:[MdpFormMixin], |
||||
|
data(){ |
||||
|
editForm:{} |
||||
|
}, |
||||
|
method:{ |
||||
|
initCurrData(){ |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</code> |
||||
|
</pre> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import treeTool from '@/components/mdp-ui/js/treeTool.js' |
||||
|
export default { |
||||
|
computed: { |
||||
|
}, |
||||
|
props:{ |
||||
|
visible:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
}, |
||||
|
formDef:{ |
||||
|
type:Object, |
||||
|
default:null, |
||||
|
}, |
||||
|
formFields:{ |
||||
|
type:Array, |
||||
|
default:[] |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
formFields(){ |
||||
|
this.createSource(); |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
|
||||
|
var options={ |
||||
|
list: [{name:'选项0'},{name:'选项1'},{name:'选项2'}], |
||||
|
yesOrNo: [{name:'否'},{name:'是'}], |
||||
|
} |
||||
|
return { |
||||
|
source:'', |
||||
|
dbForm:{ |
||||
|
owner:'',//数据库用户 |
||||
|
tableName:'', |
||||
|
}, |
||||
|
aiForm:{ |
||||
|
columnListStr:'',//表格配置信息黏贴 |
||||
|
}, |
||||
|
apiForm:{ |
||||
|
url:'', |
||||
|
method:'GET', |
||||
|
params:'', |
||||
|
headers:'',//{Authorization:"Bearer jwtTokenXXadkfdfdadfd"} |
||||
|
useMyLoginToken:true, |
||||
|
parseDataFunc:'', |
||||
|
}, |
||||
|
pickerOptions:this.$mdp.getPickerOptions(), |
||||
|
options:options, |
||||
|
|
||||
|
load:{list: false,}, |
||||
|
addFormRules: { |
||||
|
id: [ |
||||
|
{ required: false, message: '主键', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
addForm: {formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'文本',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',dict:'',gname:'',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
myFormDef:{tableName:'',tableOwner:'',isCreateTable:'',formName:'',userid:'',deptid:'',formType:'',isTemplate:'',bizType:'',ctime:'',branchId:''}, |
||||
|
fields:[], |
||||
|
sampleFields:[ |
||||
|
{formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'输入框',dict:'',gname:'',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'多行输入框',dict:'',gname:'',typ:'textarea',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four1',idCamel:'four1',title:'html',dict:'',gname:'',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'html',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four2',idCamel:'four2',title:'图片',dict:'',gname:'',typ:'image',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'image',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four3',idCamel:'four3',title:'文件',dict:'',gname:'',typ:'att',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'att',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four4',idCamel:'four4',title:'链接',dict:'',gname:'',typ:'link',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'link',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
|
||||
|
{formId:'formId',showStyle:'origin',id:'two',idCamel:'two',title:'数字',dict:'',gname:'',typ:'number',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'three',idCamel:'three',title:'金额',dict:'',gname:'',typ:'amount',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
|
||||
|
{formId:'formId',showStyle:'origin',id:'five',idCamel:'five',title:'单选下拉',dict:'',gname:'',plusOptions:options.list,typ:'select',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'six',idCamel:'six',title:'多选下拉',dict:'',gname:'',plusOptions:options.list,typ:'select',len:24,span:24,dval:'',mul:'1',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
|
||||
|
{formId:'formId',showStyle:'origin',id:'seven',idCamel:'seven',title:'单选',dict:'',gname:'',plusOptions:options.yesOrNo,typ:'radio',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'eight',idCamel:'eight',title:'单选框',dict:'',gname:'',plusOptions:options.list,typ:'checkbox',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'nine',idCamel:'nine',title:'多选框',dict:'',gname:'',plusOptions:options.list,typ:'checkbox',len:24,span:24,dval:'',mul:'1',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
|
||||
|
{formId:'formId',showStyle:'origin',id:'ten',idCamel:'ten',title:'时间',dict:'',gname:'',typ:'time',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'eleven',idCamel:'eleven',title:'日期',dict:'',gname:'',typ:'date',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'twelve',idCamel:'twelve',title:'日期时间',dict:'',gname:'',typ:'datetime',len:24,span:24,dval:'',mul:'0',hol:'请输入日期时间',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'thirteen',idCamel:'thirteen',title:'年',dict:'',gname:'',typ:'year',len:24,span:24,dval:'',mul:'0',hol:'请选中年份',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'fourteen',idCamel:'fourteen',title:'月',dict:'',gname:'',typ:'month',len:24,span:24,dval:'',mul:'0',hol:'请选中月份',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',id:'141',showStyle:'origin',id:'fourteen1',idCamel:'fourteen1',title:'日期区间',dict:'',gname:'',typ:'daterange',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
|
||||
|
{formId:'formId',showStyle:'origin',id:'fifteen',idCamel:'fifteen',title:'部门',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'dept',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'seventeen',idCamel:'seventeen',title:'员工',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'1',hol:'支持多选',req:'0',remark:'属性',extType:'user',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'nineteen',idCamel:'nineteen',title:'标签',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'1',hol:'多选标签',req:'0',remark:'属性',extType:'tag',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'twenty_one',idCamel:'twentyOne',title:'布局-行',dict:'',gname:'',typ:'row',len:24,span:24,dval:'',mul:'1',hol:'行',req:'0',remark:'属性',extType:'row',toFlow:'0',bkey:'0',qx:'',isNewAdd:true, |
||||
|
children:[ |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
] |
||||
|
}, |
||||
|
{formId:'formId',showStyle:'origin',id:'twenty_two',idCamel:'twentyTwo',title:'卡片',dict:'',gname:'',typ:'card',len:24,span:24,dval:'',mul:'1',hol:'行',req:'0',remark:'属性',extType:'card',toFlow:'0',bkey:'0',qx:'',isNewAdd:true, |
||||
|
children:[ |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'卡片-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'卡片-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
] |
||||
|
}, |
||||
|
{formId:'formId',showStyle:'origin',id:'twenty_three',idCamel:'twentyThree',title:'tabs',dict:'',gname:'tab1,tab2',typ:'tabs',len:24,span:24,dval:'',mul:'1',hol:'行',req:'0',remark:'属性',extType:'tabs',toFlow:'0',bkey:'0',qx:'',isNewAdd:true, |
||||
|
children:[ |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab1-列1',dict:'',gname:'tab1',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab1-列2',dict:'',gname:'tab1',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab2-列1',dict:'',gname:'tab2',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab2-列2',dict:'',gname:'tab2',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
], |
||||
|
delFields:[],//存放删除的属性 |
||||
|
drag:true, |
||||
|
showPopover:false, |
||||
|
activeName:'first', |
||||
|
metaItemSelected:{},//选择的基础数据二级分类代码 |
||||
|
itemOptionMngVisible:false,//基础数据弹出框 |
||||
|
fieldIds: [ |
||||
|
{id:'zero',idCamel:'zero'}, |
||||
|
{id:'one',idCamel:'one'}, |
||||
|
{id:'two',idCamel:'two'}, |
||||
|
{id:'three',idCamel:'three'}, |
||||
|
{id:'four',idCamel:'four'}, |
||||
|
{id:'five',idCamel:'five'}, |
||||
|
{id:'six',idCamel:'six'}, |
||||
|
{id:'seven',idCamel:'seven'}, |
||||
|
{id:'eight',idCamel:'eight'}, |
||||
|
{id:'nine',idCamel:'nine'}, |
||||
|
{id:'ten',idCamel:'ten'}, |
||||
|
{id:'eleven',idCamel:'eleven'}, |
||||
|
{id:'twelve',idCamel:'twelve'}, |
||||
|
{id:'thirteen',idCamel:'thirteen'}, |
||||
|
{id:'fourteen',idCamel:'fourteen'}, |
||||
|
{id:'fifteen',idCamel:'fifteen'} |
||||
|
], |
||||
|
//新增界面数据 表单数据表 |
||||
|
showData: { |
||||
|
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:'' |
||||
|
}, |
||||
|
sampleData:{ |
||||
|
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:'' |
||||
|
}, |
||||
|
primaryKeys:[], |
||||
|
defaultField:{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true}, |
||||
|
extInfosList:[], |
||||
|
extInfosMap:{}, |
||||
|
code:'', |
||||
|
/**end 在上面加自定义属性**/ |
||||
|
}//end return |
||||
|
},//end data |
||||
|
methods: { |
||||
|
// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听 |
||||
|
handleCancel:function(){ |
||||
|
this.$emit('cancel'); |
||||
|
}, |
||||
|
createSource(){ |
||||
|
this.fields=this.formFields |
||||
|
var sourceStr=`<el-form :model="editForm" ref="editForm">\n\t${this.createSubSource(1,this.fields)}\n</el-form>` |
||||
|
this.code=sourceStr; |
||||
|
}, |
||||
|
|
||||
|
createSubSource(lvl,children){ |
||||
|
|
||||
|
|
||||
|
if(!children || children.length==0){ |
||||
|
return ""; |
||||
|
} |
||||
|
var lvlt=this.getTabByLvl(lvl) |
||||
|
var lvlt1=this.getTabByLvl(lvl+1) |
||||
|
var srcList=[] |
||||
|
children.forEach((field,idx)=>{ |
||||
|
var sourceStr="" |
||||
|
var extInfosMap=this.getExtInfosMap(field); |
||||
|
var hasChild=field.children&&field.children.length>0; |
||||
|
var styleObj=(field.styleObj!=null && field.styleObj.length>0)?":style=\""+field.styleObj+"\"":""; |
||||
|
if(field.extType=='row'){ |
||||
|
var subSrc=hasChild?this.rowChildSrc(lvl+1,field):""; |
||||
|
sourceStr=`<el-row>\n${lvlt1}${subSrc}\n${lvlt}</el-row>` |
||||
|
}else if(field.extType=='card'){ |
||||
|
var header=`<div slot="header" class="clearfix"><span>${field.title}</span></div>` |
||||
|
var subSrc=hasChild?this.rowChildSrc(lvl+2,field):""; |
||||
|
sourceStr=`<card>\n${lvlt1}${header}\n${lvlt1}<el-row>\n${lvlt1}\t${subSrc}\n${lvlt1}</el-row>\n${lvlt}</card>` |
||||
|
}else if(field.extType=='tabs'){ |
||||
|
var subSrc=hasChild?this.tabsChildSrc(lvl+1,field):""; |
||||
|
sourceStr=`<el-tabs>\n${lvlt1}${subSrc}\n${lvlt}</el-tabs>` |
||||
|
}else{ |
||||
|
var fieldSrc="" |
||||
|
var showStyle=`${field.showStyle?"show-style=\""+field.showStyle+"\"":""}` |
||||
|
if(field.extType=='user'){ |
||||
|
fieldSrc=`<mdp-select-user ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" split=","></mdp-select-user>` |
||||
|
}else if(field.extType=='dept'){ |
||||
|
fieldSrc=`<mdp-select-dept ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" :show-checkbox="${field.mul=='1'}" label="${field.title}" placeholder="${field.hol||field.title}" split=","></mdp-select-dept>` |
||||
|
|
||||
|
}else if(field.extType=='tag'){ |
||||
|
fieldSrc=`<mdp-select-tag ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" split=","></mdp-select-tag>` |
||||
|
|
||||
|
}else if( ['select','radio','checkbox'].some(k=>k==field.typ)){ |
||||
|
|
||||
|
var plusOptions="" |
||||
|
if(extInfosMap['plusOptions']){ |
||||
|
plusOptions=`:plus-options="${extInfosMap['plusOptions']}"` |
||||
|
} |
||||
|
fieldSrc=`<mdp-select ${plusOptions} show-type="${field.typ}" ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" split=","></mdp-select>` |
||||
|
|
||||
|
}else if(field.extType=='html'){ |
||||
|
if(field.ronly=='1'){ |
||||
|
fieldSrc=`<div v-html="${field.dval||'无'}"></div>` |
||||
|
}else{ |
||||
|
fieldSrc=`<el-popover placement="top-start" width="400" trigger="hover"><el-input type="textarea" rows="4" v-model="editForm.${field.idCamel}"></el-input><div slot="reference" v-html="editForm.${field.idCamel}||${field.dval}||'无'"></div></el-popover>` |
||||
|
} |
||||
|
}else if(field.extType=='link'){ |
||||
|
if(field.ronly=='1'){ |
||||
|
fieldSrc=`<el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link>` |
||||
|
}else{ |
||||
|
fieldSrc=`<el-popover |
||||
|
placement="top-start" |
||||
|
width="400" |
||||
|
trigger="hover"> |
||||
|
<el-input type="textarea" rows="4" v-model="editForm.${field.idCamel}"></el-input> |
||||
|
<el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link> |
||||
|
</el-popover>` |
||||
|
} |
||||
|
}else if(field.extType=='image'){ |
||||
|
if(field.ronly=='1'){ |
||||
|
fieldSrc=`<el-image ${styleObj} |
||||
|
:src="editForm.${field.idCamel}||${field.dval}" |
||||
|
fit="contain" > |
||||
|
</el-image>` |
||||
|
}else{ |
||||
|
fieldSrc=`<el-popover |
||||
|
placement="top-start" |
||||
|
width="400" |
||||
|
trigger="hover"> |
||||
|
<el-button @click="$refs['imageDialog'].open({formData:editForm,prop:'${field.idCamel}'})">上传图片</el-button> |
||||
|
<el-image slot="reference" ${styleObj} |
||||
|
:src="editForm.${field.idCamel}||${field.dval}" |
||||
|
fit="contain" > |
||||
|
</el-image> |
||||
|
</el-popover>` |
||||
|
} |
||||
|
}else if(field.extType=='att'){ |
||||
|
if(field.ronly=='1'){ |
||||
|
fieldSrc=`<el-link :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link>` |
||||
|
}else{ |
||||
|
fieldSrc=`<el-popover |
||||
|
placement="top-start" |
||||
|
width="400" |
||||
|
trigger="hover"> |
||||
|
<el-button @click="$refs['attDialog'].open({formData:showData,field:field})">上传附件</el-button> |
||||
|
<el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link> |
||||
|
</el-popover>` |
||||
|
} |
||||
|
}else if(field.typ=='text'){ |
||||
|
fieldSrc=`<mdp-input ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" :clearable="${field.clear!='0'}" > </mdp-input>` |
||||
|
|
||||
|
}else if(field.typ=='number'){ |
||||
|
fieldSrc=`<mdp-number ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" :clearable="${field.clear!='0'}" > </mdp-number>` |
||||
|
|
||||
|
}else if(field.typ=='amount'){ |
||||
|
fieldSrc=`<mdp-number ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" :clearable="${field.clear!='0'}" > </mdp-number>` |
||||
|
}else if(field.typ=='textarea'){ |
||||
|
fieldSrc=`<mdp-input ${showStyle} type="textarea" :rows="${extInfosMap.rows}" :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" :clearable="${field.clear!='0'}" > </mdp-input>` |
||||
|
|
||||
|
}else if(field.typ=='time'){ |
||||
|
fieldSrc=`<el-time-picker :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol||field.title}" :clearable="${field.clear!='0'}" > </el-time-picker>` |
||||
|
}else if(field.typ=='date'){ |
||||
|
fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="date" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择日期'}"> </mdp-date>` |
||||
|
|
||||
|
}else if(field.typ=='datetime'){ |
||||
|
fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="datetime" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd HH:mm:ss'}" placeholder="${field.hol||'选择日期时间'}"> </mdp-date>` |
||||
|
|
||||
|
}else if(field.typ=='month'){ |
||||
|
fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="month" value-format="${extInfosMap.valueFormat||'yyyy-MM'}" format="${extInfosMap.format||'yyyy-MM'}" placeholder="${field.hol||'选择月份'}"> </mdp-date>` |
||||
|
}else if(field.typ=='year'){ |
||||
|
fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="year" value-format="${extInfosMap.valueFormat||'yyyy'}" format="${extInfosMap.format||'yyyy'}" placeholder="${field.hol||'选择年份'}"> </mdp-date>` |
||||
|
|
||||
|
}else if(field.typ=='daterange'){ |
||||
|
fieldSrc=`<mdp-date-range :show-style="field.showStyle" :disabled="${field.ronly=='1'}" ${styleObj} :value="editForm[${field.idCamel}]?editForm[${field.idCamel}].split(','):[]" align="right" type="daterange" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择起止时间'}" @change="(vs)=>editForm[${field.idCamel}]=vs.join(',')"> </mdp-date-range> ` |
||||
|
} |
||||
|
var vrules=field.vrules?JSON.parse(field.vrules):[] |
||||
|
if(field.req=='1'){ |
||||
|
if(!vrules.some(k=>'required' in k)){ |
||||
|
vrules.push({required:true,message:"此项必填",trigger:"change"}) |
||||
|
} |
||||
|
} |
||||
|
sourceStr=`<el-form-item label="${field.title}" prop="${field.idCamel}" :rules="${JSON.stringify(vrules)}">\n${lvlt1}${fieldSrc}\n${lvlt}</el-form-item>` |
||||
|
} |
||||
|
if(sourceStr){ |
||||
|
srcList.push(sourceStr) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
return srcList.join(`\n${lvlt}`); |
||||
|
}, |
||||
|
rowChildSrc(lvl,field){ |
||||
|
var srcList=[] |
||||
|
var lvlt=this.getTabByLvl(lvl) |
||||
|
var lvlt1=this.getTabByLvl(lvl+1) |
||||
|
if(field.children && field.children.length>0){ |
||||
|
field.children.forEach(k=>{ |
||||
|
var span=k.span?k.span:24 |
||||
|
var src=`<el-col :span="${span}">\n${lvlt1}${this.createSubSource(lvl+1,[k])}\n${lvlt}</el-col>` |
||||
|
srcList.push(src) |
||||
|
}) |
||||
|
return srcList.join("\n"+lvlt) |
||||
|
}else{ |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
tabsChildSrc(lvl,field){ |
||||
|
var srcList=[] |
||||
|
if(!field.gname || field.gname.length==0){ |
||||
|
return "" |
||||
|
} |
||||
|
var lvlt=this.getTabByLvl(lvl) |
||||
|
var lvlt1=this.getTabByLvl(lvl+1) |
||||
|
var tabList=field.gname.split(",") |
||||
|
tabList.forEach(tab=>{ |
||||
|
var childs=field.children.filter(f=>f.gname==tab||!f.gname) |
||||
|
var subSrc=childs&&childs.length>0?this.rowChildSrc(lvl+1,{children:childs}):"" |
||||
|
var src=`<el-tab-pane name="${tab}">\n${lvlt1}<el-row>\n${lvlt1}\t${subSrc}\n${lvlt1}</el-row>\n${lvlt}</el-tab-pane>` |
||||
|
srcList.push(src) |
||||
|
}) |
||||
|
return srcList.join("\n"+lvlt) |
||||
|
}, |
||||
|
getTabByLvl(lvl){ |
||||
|
var str="" |
||||
|
for(var i=0;i<lvl;i++){ |
||||
|
str=str+"\t" |
||||
|
} |
||||
|
return str |
||||
|
}, |
||||
|
getExtInfosMap(field){ |
||||
|
var extInfosList=field.extInfos?JSON.parse(field.extInfos):[] |
||||
|
var extInfosMap={} |
||||
|
extInfosList.forEach(k=>{ |
||||
|
extInfosMap[k.id]=k.value |
||||
|
}) |
||||
|
return extInfosMap; |
||||
|
}, |
||||
|
},//end method |
||||
|
components: { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.createSource(); |
||||
|
|
||||
|
}//end mounted |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue