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

优化

master
陈裕财 2 years ago
parent
80355b026a
commit
2afe569ec8
4 changed files with 103 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 1
      src/main.js
  3. 2
      src/views/mdp/form/formDef/Form.vue
  4. 159
      src/views/mdp/form/source/Index.vue

2
package.json
View File

@ -14,6 +14,7 @@
"test": "npm run lint" "test": "npm run lint"
}, },
"dependencies": { "dependencies": {
"@highlightjs/vue-plugin": "^1.0.2",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"axios": "0.17.1", "axios": "0.17.1",
"clipboard": "1.7.1", "clipboard": "1.7.1",
@ -28,6 +29,7 @@
"font-awesome": "4.7.0", "font-awesome": "4.7.0",
"gantt-elastic": "^1.0.11", "gantt-elastic": "^1.0.11",
"gantt-elastic-header": "^0.1.11", "gantt-elastic-header": "^0.1.11",
"highlight.js": "^11.9.0",
"html2canvas": "^1.0.0-alpha.9", "html2canvas": "^1.0.0-alpha.9",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",

1
src/main.js
View File

@ -1,6 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import Element from 'element-ui' import Element from 'element-ui'

2
src/views/mdp/form/formDef/Form.vue
View File

@ -60,7 +60,7 @@
</mdp-dialog> </mdp-dialog>
<mdp-dialog ref="sourceDialog"> <mdp-dialog ref="sourceDialog">
<template v-slot="{visible,data,dialog}"> <template v-slot="{visible,data,dialog}">
<mdp-source :form-def="editForm" :form-fields="formFields"></mdp-source>
<mdp-source :visible="visible" :form-def="editForm" :form-fields="formFields"></mdp-source>
</template> </template>
</mdp-dialog> </mdp-dialog>
</el-row> </el-row>

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

@ -1,13 +1,30 @@
<template> <template>
<section>
<pre><code>{{createSource()}}</code></pre>
<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> </section>
</template> </template>
<script> <script>
import treeTool from '@/components/mdp-ui/js/treeTool.js'
import treeTool from '@/components/mdp-ui/js/treeTool.js'
export default { export default {
computed: { computed: {
}, },
@ -26,8 +43,8 @@ export default {
}, },
}, },
watch: { watch: {
'visible':function(visible) {
formFields(){
this.createSource();
} }
}, },
data() { data() {
@ -152,6 +169,7 @@ export default {
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}, 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:[], extInfosList:[],
extInfosMap:{}, extInfosMap:{},
code:'',
/**end 在上面加自定义属性**/ /**end 在上面加自定义属性**/
}//end return }//end return
},//end data },//end data
@ -162,44 +180,44 @@ export default {
}, },
createSource(){ createSource(){
this.fields=treeTool.translateDataToTree(this.formFields,'pid','id') this.fields=treeTool.translateDataToTree(this.formFields,'pid','id')
var sourceStr=`<el-form :model="editForm" ref="editForm">${this.createSubSource(1,this.fields)}\n</el-form>`
return sourceStr
},
var sourceStr=`<el-form :model="editForm" ref="editForm">\n\t${this.createSubSource(1,this.fields)}\n</el-form>`
this.code=sourceStr;
},
createSubSource(lvl,children){ createSubSource(lvl,children){
var sourceStr=""
if(!children || children.length==0){ if(!children || children.length==0){
return sourceStr;
return "";
} }
var lvlt=this.getTabByLvl(lvl) var lvlt=this.getTabByLvl(lvl)
var lvlt1=this.getTabByLvl(lvl+1) var lvlt1=this.getTabByLvl(lvl+1)
var srcList=[]
children.forEach((field,idx)=>{ children.forEach((field,idx)=>{
var sourceStr=""
var extInfosMap=this.getExtInfosMap(field); var extInfosMap=this.getExtInfosMap(field);
var hasChild=field.children&&field.children.length>0; var hasChild=field.children&&field.children.length>0;
var styleObj=(field.styleObj!=null && field.styleObj.length>0)?":style=\""+field.styleObj+"\"":"";
if(field.extType=='row'){ if(field.extType=='row'){
var subSrc=hasChild?lvlt1+this.rowChildSrc(lvl+1,field):"";
sourceStr=`${sourceStr}\n${lvlt}<el-row>${subSrc}\n${lvlt}</el-row>`
var subSrc=hasChild?this.rowChildSrc(lvl+1,field):"";
sourceStr=`<el-row>\n${lvlt1}${subSrc}\n${lvlt}</el-row>`
}else if(field.extType=='card'){ }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>`
var header=`<div slot="header" class="clearfix"><span>${field.title}</span></div>`
var subSrc=hasChild?this.rowChildSrc(lvl+1,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'){ }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>`
var subSrc=hasChild?this.tabsChildSrc(lvl+1,field):"";
sourceStr=`<el-tabs>\n${lvlt1}${subSrc}\n${lvlt}</el-tabs>`
}else{ }else{
var fieldSrc="" var fieldSrc=""
var showStyle=`${field.showStyle?"show-style=\""+field.showStyle+"\"":""}`
if(field.extType=='user'){ 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>`
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'){ }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>`
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'){ }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>`
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)){ }else if( ['select','radio','checkbox'].some(k=>k==field.typ)){
@ -207,19 +225,13 @@ export default {
if(extInfosMap['plusOptions']){ if(extInfosMap['plusOptions']){
plusOptions=`:plus-options="${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>`
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'){ }else if(field.extType=='html'){
if(field.ronly=='1'){ if(field.ronly=='1'){
fieldSrc=`<div v-html="${field.dval||'无'}"></div>` fieldSrc=`<div v-html="${field.dval||'无'}"></div>`
}else{ }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>`
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'){ }else if(field.extType=='link'){
if(field.ronly=='1'){ if(field.ronly=='1'){
@ -235,7 +247,7 @@ export default {
} }
}else if(field.extType=='image'){ }else if(field.extType=='image'){
if(field.ronly=='1'){ if(field.ronly=='1'){
fieldSrc=`<el-image :style="${field.styleObj}"
fieldSrc=`<el-image ${styleObj}
:src="editForm.${field.idCamel}||${field.dval}" :src="editForm.${field.idCamel}||${field.dval}"
fit="contain" > fit="contain" >
</el-image>` </el-image>`
@ -245,7 +257,7 @@ export default {
width="400" width="400"
trigger="hover"> trigger="hover">
<el-button @click="$refs['imageDialog'].open({formData:editForm,prop:'${field.idCamel}'})">上传图片</el-button> <el-button @click="$refs['imageDialog'].open({formData:editForm,prop:'${field.idCamel}'})">上传图片</el-button>
<el-image slot="reference" :style="${field.styleObj}"
<el-image slot="reference" ${styleObj}
:src="editForm.${field.idCamel}||${field.dval}" :src="editForm.${field.idCamel}||${field.dval}"
fit="contain" > fit="contain" >
</el-image> </el-image>
@ -263,34 +275,32 @@ export default {
<el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link> <el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link>
</el-popover>` </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.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.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.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.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.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.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.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.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.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.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.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.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> `
}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):[] var vrules=field.vrules?JSON.parse(field.vrules):[]
if(field.req=='1'){ if(field.req=='1'){
@ -298,32 +308,47 @@ export default {
vrules.push({required:true,message:"此项必填",trigger:"change"}) 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>`
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 sourceStr;
return srcList.join(`\n${lvlt}`);
}, },
rowChildSrc(lvl,field){ rowChildSrc(lvl,field){
var src=""
var srcList=[]
var lvlt=this.getTabByLvl(lvl)
var lvlt1=this.getTabByLvl(lvl+1)
if(field.children && field.children.length>0){ if(field.children && field.children.length>0){
field.children.forEach(k=>{ field.children.forEach(k=>{
var span=k.span?k.span:24 var span=k.span?k.span:24
src=`${src}<el-col :span="${span}">${this.createSubSource(lvl,[k])}</el-col>`
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 "";
} }
return src
}, },
tabsChildSrc(lvl,field){ tabsChildSrc(lvl,field){
var src=""
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(",") var tabList=field.gname.split(",")
tabList.forEach(tab=>{ tabList.forEach(tab=>{
var childs=field.children.filter(f=>f.gname==tab||!f.gname) 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>`
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 src
return srcList.join("\n"+lvlt)
}, },
getTabByLvl(lvl){ getTabByLvl(lvl){
var str="" var str=""
@ -344,7 +369,7 @@ export default {
components: { components: {
}, },
mounted() { mounted() {
this.createSource();
}//end mounted }//end mounted
} }

Write Preview
Loading…
Cancel
Save