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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 3
      src/main.js
  3. 2
      src/views/mdp/form/formDef/Form.vue
  4. 173
      src/views/mdp/form/source/Index.vue

2
package.json
View File

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

3
src/main.js
View File

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

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

@ -60,7 +60,7 @@
</mdp-dialog>
<mdp-dialog ref="sourceDialog">
<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>
</mdp-dialog>
</el-row>

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

@ -1,13 +1,30 @@
<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>
</template>
<script>
import treeTool from '@/components/mdp-ui/js/treeTool.js'
<script>
import treeTool from '@/components/mdp-ui/js/treeTool.js'
export default {
computed: {
},
@ -26,8 +43,8 @@ export default {
},
},
watch: {
'visible':function(visible) {
formFields(){
this.createSource();
}
},
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},
extInfosList:[],
extInfosMap:{},
code:'',
/**end 在上面加自定义属性**/
}//end return
},//end data
@ -160,66 +178,60 @@ export default {
handleCancel:function(){
this.$emit('cancel');
},
createSource(){
createSource(){
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){
var sourceStr=""
if(!children || children.length==0){
return sourceStr;
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 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?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'){
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'){
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{
var fieldSrc=""
var showStyle=`${field.showStyle?"show-style=\""+field.showStyle+"\"":""}`
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'){
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'){
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)){
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>`
}
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>`
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'){
@ -235,7 +247,7 @@ export default {
}
}else if(field.extType=='image'){
if(field.ronly=='1'){
fieldSrc=`<el-image :style="${field.styleObj}"
fieldSrc=`<el-image ${styleObj}
:src="editForm.${field.idCamel}||${field.dval}"
fit="contain" >
</el-image>`
@ -245,7 +257,7 @@ export default {
width="400"
trigger="hover">
<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}"
fit="contain" >
</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-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):[]
if(field.req=='1'){
@ -298,32 +308,47 @@ export default {
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){
var src=""
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
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){
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(",")
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>`
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){
var str=""
@ -341,10 +366,10 @@ export default {
return extInfosMap;
},
},//end method
components: {
components: {
},
mounted() {
mounted() {
this.createSource();
}//end mounted
}

Write Preview
Loading…
Cancel
Save