end7less
/
program_lcode_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 2 years ago
parent
f42322b94c
commit
485be8d1d4
3 changed files with 166 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/mdp/form/formField/Field.vue
  2. 2
      src/views/mdp/form/formField/FieldCfg.vue
  3. 167
      src/views/mdp/form/source/Index.vue

2
src/views/mdp/form/formField/Field.vue
View File

@ -76,7 +76,7 @@
width="400"
trigger="hover">
<el-input type="textarea" rows="4" v-model="showData[field.idCamel]" v-if="field.ronly!='1'"></el-input>
<div slot="reference" v-html="showData[field.idCamel]||field.defaultValue||'无'"></div>
<div slot="reference" v-html="showData[field.idCamel]||field.dval||'无'"></div>
</el-popover>
<!--link 链接-->
<el-popover v-else-if=" field.extType=='link'"

2
src/views/mdp/form/formField/FieldCfg.vue
View File

@ -192,7 +192,7 @@
},
componentsExtInfosCfg:{
select:[
//{id:'',value:'',name:''}
{id:'plusOptions',value:'',name:'选项'},
],
date:[
{id:'format',value:'yyyy-MM-dd',name:'显示格式'},

167
src/views/mdp/form/source/Index.vue
View File

@ -1,6 +1,7 @@
<template>
<section>
<pre><code>{{createSource()}}</code></pre>
</section>
</template>
@ -149,7 +150,8 @@ export default {
},
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:{},
/**end 在上面加自定义属性**/
}//end return
},//end data
@ -165,26 +167,179 @@ export default {
},
createSubSource(lvl,children){
var sourceStr=""
if(!children || children.length==0){
return sourceStr;
}
var lvlt=this.getTabByLvl(lvl)
var lvlt1=this.getTabByLvl(lvl+1)
children.forEach((f,idx)=>{
var hasChild=f.children&&f.children.length>0;
var subSrc=hasChild?lvlt1+this.createSubSource(lvl+1,f.children):"";
sourceStr=`${sourceStr}\n${lvlt}<start field-name="${f.title}">${subSrc}\n${lvlt}</end>`
children.forEach((field,idx)=>{
var extInfosMap=this.getExtInfosMap(field);
var hasChild=field.children&&field.children.length>0;
if(field.extType=='row'){
var subSrc=hasChild?lvlt1+this.rowChildSrc(lvl+1,field):"";
sourceStr=`${sourceStr}\n${lvlt}<el-row>${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?lvlt1+this.rowChildSrc(lvl+1,field):"";
sourceStr=`${sourceStr}\n${lvlt}<card>${header}\n${lvlt}\t<el-row>${subSrc}\n${lvlt}\t</el-row>\n${lvlt}</card>`
}else if(field.extType=='tabs'){
var subSrc=hasChild?lvlt1+this.tabsChildSrc(lvl+1,field):"";
sourceStr=`${sourceStr}\n${lvlt}<el-tabs>${subSrc}\n${lvlt}</el-tabs>`
}else{
var fieldSrc=""
if(field.extType=='user'){
fieldSrc=`<mdp-select-user :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol}" split=","></mdp-select-user>`
}else if(field.extType=='dept'){
fieldSrc=`<mdp-select-dept :show-style="${field.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}" split=","></mdp-select-dept>`
}else if(field.extType=='tag'){
fieldSrc=`<mdp-select-tag :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol}" 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 :plus-options="${field.ext}" ${plusOptions} show-type="${field.typ}" :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" label="${field.title}" placeholder="${field.hol}" 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 :style="${field.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" :style="${field.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.extType=='text'){
fieldSrc=`<mdp-input :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" label="${field.title}" auto-complete="off" placeholder="${field.hol}" :clearable="${field.clear!='0'}" > </mdp-input>`
}else if(field.extType=='number'){
fieldSrc=`<mdp-number :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" label="${field.title}" auto-complete="off" placeholder="${field.hol}" :clearable="${field.clear!='0'}" > </mdp-number>`
}else if(field.extType=='amount'){
fieldSrc=`<mdp-number :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" label="${field.title}" auto-complete="off" placeholder="${field.hol}" :clearable="${field.clear!='0'}" > </mdp-number>`
}else if(field.extType=='textarea'){
fieldSrc=`<mdp-input :show-style="${field.showStyle}" type="textarea" :rows="${extInfosMap.rows}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" label="${field.title}" auto-complete="off" placeholder="${field.hol}" :clearable="${field.clear!='0'}" > </mdp-input>`
}else if(field.extType=='time'){
fieldSrc=`<el-time-picker :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" label="${field.title}" auto-complete="off" placeholder="${field.hol}" :clearable="${field.clear!='0'}" > </el-time-picker>`
}else if(field.extType=='date'){
fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.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.extType=='datetime'){
fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.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.extType=='month'){
fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.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.extType=='year'){
fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.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.extType=='daterange'){
fieldSrc=`<mdp-date-range :show-style="field.showStyle" :disabled="${field.ronly=='1'}" :style="${field.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=`${sourceStr}<el-form-item label="${field.title}" prop="${field.idCamel}" :rules="${JSON.stringify(vrules)}">${fieldSrc}</el-form-item>`
}
})
return sourceStr;
},
rowChildSrc(lvl,field){
var src=""
if(field.children && field.children.length>0){
field.children.forEach(k=>{
var span=k.span?k.span:24
src=`${src}<el-col :span="${span}">${this.createSubSource(lvl,[k])}</el-col>`
})
}
return src
},
tabsChildSrc(lvl,field){
var src=""
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,{children:childs}):""
src=`${src}<el-tab-pane name="${tab}"><el-row>${subSrc}</el-row></el-tab-pane>`
})
return src
},
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: {
},

Write Preview
Loading…
Cancel
Save