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

优化

master
陈裕财 2 years ago
parent
7533d2a64f
commit
11a4e8b8ba
2 changed files with 134 additions and 71 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. 103
      src/components/mdp-ui-ext/mdp-ext-infos/Index.vue
  2. 62
      src/views/mdp/form/formField/FieldCfg.vue

103
src/components/mdp-ui-ext/mdp-ext-infos/Index.vue
View File

@ -8,9 +8,9 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-input v-model="item.value" placeholder="请输入数据"></el-input>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -18,9 +18,9 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-input v-model="item.value" placeholder="请输入数据"></el-input>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -28,9 +28,9 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input type="number" style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-input type="number" v-model="item.value" placeholder="请输入数据"></el-input>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -38,9 +38,9 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-date-picker style="width:30%;" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
@ -49,9 +49,9 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input type="textarea" rows=6 style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-input type="textarea" rows=6 v-model="item.value" placeholder="请输入数据"></el-input>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -59,11 +59,11 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="图片名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:20%;" v-model="item.value" placeholder="图片访问地址"></el-input>&nbsp;&nbsp;
<el-input style="width:20%;" v-model="item.link" placeholder="跳转地址"></el-input>&nbsp;&nbsp;
<el-input style="width:20%;" v-model="item.remark" placeholder="图片备注"></el-input>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="图片名称"></el-input>:
<el-input style="width:20%;" v-model="item.value" placeholder="图片访问地址"></el-input>
<el-input style="width:20%;" v-model="item.link" placeholder="跳转地址"></el-input>
<el-input style="width:20%;" v-model="item.remark" placeholder="图片备注"></el-input>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -71,10 +71,10 @@
<el-select v-model="item.type" style="width:120px;"> <el-select v-model="item.type" style="width:120px;">
<el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option> <el-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</el-select> </el-select>
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>&nbsp;&nbsp;:&nbsp;&nbsp;
<el-radio v-model="item.value" :label="'1'" placeholder="">是</el-radio>&nbsp;&nbsp;
<el-radio v-model="item.value" :label="'0'" placeholder="">否</el-radio>&nbsp;&nbsp;
<el-input style="width:10%;" v-model="item.id" placeholder="字段代码(可空)"></el-input>:
<el-input style="width:10%;" v-model="item.name" placeholder="字段名称"></el-input>:
<el-radio v-model="item.value" :label="'1'" placeholder="">是</el-radio>
<el-radio v-model="item.value" :label="'0'" placeholder="">否</el-radio>
<el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete"> <el-button @click.prevent="removeExtInfosItem(item,index)" icon="el-icon-delete">
</el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button> </el-button><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item> </el-form-item>
@ -85,40 +85,39 @@
<el-button @click="addExtInfosFirstItem" icon="el-icon-plus"><slot>新增一行</slot></el-button> <el-button @click="addExtInfosFirstItem" icon="el-icon-plus"><slot>新增一行</slot></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form v-else ref="extInfosRef" class="demo-dynamic">
<el-form v-else ref="extInfosRef" :label-width="labelWidth">
<!-- 扩展字段[{name:'中文名称',id:'编号',value:'值',remark:'备注',type:'支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'}] --> <!-- 扩展字段[{name:'中文名称',id:'编号',value:'值',remark:'备注',type:'支持简单的1-普通文本2-数字，3-日期，8-富文本，9单图文，15-是否'}] -->
<el-row v-for="(item, index) in extInfosList" :key="index">
<el-row>
<el-col :span="span" v-for="(item, index) in extInfosList" :key="index">
<el-form-item v-if="!item.type" :label="item.name"> <el-form-item v-if="!item.type" :label="item.name">
<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input style="width:20%;" v-model="item.url" placeholder="请输入跳转链接"></el-input>&nbsp;&nbsp;
<el-input style="width:20%;" v-model="item.extInfo" placeholder="其它信息"></el-input>&nbsp;&nbsp;
<el-input v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='1'" :label="item.name"> <el-form-item v-else-if="item.type=='1'" :label="item.name">
<el-input style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='2'" :label="item.name"> <el-form-item v-else-if="item.type=='2'" :label="item.name">
<el-input type="number" style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input type="number" v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='3'" :label="item.name"> <el-form-item v-else-if="item.type=='3'" :label="item.name">
<el-date-picker style="width:30%;" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>&nbsp;&nbsp;
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="item.value" placeholder="请输入数据"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='8'" :label="item.name"> <el-form-item v-else-if="item.type=='8'" :label="item.name">
<el-input type="textarea" rows=6 style="width:30%;" v-model="item.value" placeholder="请输入数据"></el-input>&nbsp;&nbsp;
<el-input type="textarea" rows=6 v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='9'" :label="item.name"> <el-form-item v-else-if="item.type=='9'" :label="item.name">
<el-input style="width:30%;" v-model="item.value" placeholder="请输入图片地址"></el-input>&nbsp;&nbsp;
<el-input v-model="item.value" placeholder="请输入图片地址"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-else-if="item.type=='15'" :label="item.name"> <el-form-item v-else-if="item.type=='15'" :label="item.name">
<el-radio v-model="item.value" :label="'1'" placeholder="">是</el-radio>&nbsp;&nbsp;
<el-radio v-model="item.value" :label="'0'" placeholder="">否</el-radio>&nbsp;&nbsp;
<el-radio v-model="item.value" :label="'1'" placeholder="">是</el-radio>
<el-radio v-model="item.value" :label="'0'" placeholder="">否</el-radio>
</el-form-item> </el-form-item>
</el-col>
</el-row> </el-row>
<el-form-item v-if="!unConfig">
<el-form-item v-if="!cfgDisabled">
<el-button @click="configVisible=true" icon="el-icon-setting"><slot>配置扩展字段</slot></el-button> <el-button @click="configVisible=true" icon="el-icon-setting"><slot>配置扩展字段</slot></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -132,7 +131,25 @@
export default { export default {
name: 'MdpExtInfos', name: 'MdpExtInfos',
props:['value','unConfig'],
props:{
value:{
type:Array,
default:[],
},
cfgDisabled:{
type:Boolean,
default:true,
},
span:{
type:Number,
default:24
},
labelWidth:{
type:String,
default:'120px'
}
},
computed: { computed: {
...mapGetters([ ...mapGetters([
'userInfo' 'userInfo'
@ -148,8 +165,13 @@
handler(val,oldVal){ handler(val,oldVal){
if(this.value instanceof Array){ if(this.value instanceof Array){
this.$emit("input",val) this.$emit("input",val)
this.$emit("change",val)
this.$emit("change2",val)
}else{ }else{
this.$emit("input",JSON.stringify(val))
var v=JSON.stringify(val);
this.$emit("input",JSON.stringify(v))
this.$emit("change",v)
this.$emit("change2",v)
} }
} }
}, },
@ -183,6 +205,7 @@
this.extInfosList.splice(index,1) this.extInfosList.splice(index,1)
}, },
initData(){ initData(){
debugger;
if(this.value){ if(this.value){
if(this.value instanceof Array){ if(this.value instanceof Array){
this.extInfosList=this.value this.extInfosList=this.value

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

@ -1,5 +1,5 @@
<template> <template>
<section>
<section v-adaptive>
<el-form v-model="field" :rules="fieldRules" ref="field" label-width="80px" style="width:350px;"> <el-form v-model="field" :rules="fieldRules" ref="field" label-width="80px" style="width:350px;">
<el-form-item v-if="(field.typ=='select' || (field.typ=='checkbox') || (field.typ=='radio')) && !field.extType" label="数据" prop="isDict"> <el-form-item v-if="(field.typ=='select' || (field.typ=='checkbox') || (field.typ=='radio')) && !field.extType" label="数据" prop="isDict">
@ -97,15 +97,8 @@
<el-button slot="reference">校验规则</el-button> <el-button slot="reference">校验规则</el-button>
</el-popover> </el-popover>
</el-form-item> </el-form-item>
<el-form-item label="扩展信息" prop="extInfos">
<el-popover
placement="top-start"
width="400"
trigger="hover">
<mdp-form-expand v-model="field.extInfos" expand-id="form_field"></mdp-form-expand>
<el-button slot="reference">显示扩展信息</el-button>
</el-popover>
</el-form-item>
<mdp-ext-infos label-width="80px" v-if="componentsExtInfosCfg[field.typ] && componentsExtInfosCfg[field.typ].length>0" v-model="extInfos" :cfg-disabled="true"></mdp-ext-infos>
</el-form> </el-form>
<el-row class="footer"> <el-row class="footer">
@ -177,6 +170,7 @@
immediate:true, immediate:true,
handler:function(){ handler:function(){
this.field=this.value this.field=this.value
this.setExtInfos();
} }
} }
}, },
@ -185,12 +179,39 @@
oldId:'', oldId:'',
field:{}, field:{},
primaryKeys:[], primaryKeys:[],
fieldRules: { fieldRules: {
id: [ id: [
//{ required: false, message: '主键', trigger: 'blur' } //{ required: false, message: '主键', trigger: 'blur' }
] ]
}, },
componentsExtInfosCfg:{
select:[
//{id:'',value:'',name:''}
],
date:[
{id:'format',value:'yyyy-MM-dd',name:'显示格式'},
{id:'valueFormat',value:'yyyy-MM-dd HH:mm:ss',name:'值格式'},
],
daterange:[
{id:'format',value:'yyyy-MM-dd',name:'显示格式'},
{id:'valueFormat',value:'yyyy-MM-dd HH:mm:ss',name:'值格式'},
{id:'startKey',value:'startTime',name:'开始key'},
{id:'endKey',value:'endTime',name:'结束key'},
],
textarea:[
{id:'rows',value:'4',name:'行数'},
],
number:[
{id:'min',value:'',name:'最小值'},
{id:'max',value:'',name:'最大值'},
{id:'step',value:'',name:'最大值'},
{id:'precision',value:'',name:'数值精度'},
{id:'controls',value:'1',name:'使用控制'},
{id:'controlsPosition',value:'right',name:'按钮位置 '},
],
},
extInfos:[],
/**end 在上面加自定义属性**/ /**end 在上面加自定义属性**/
}//end return }//end return
},//end data },//end data
@ -201,6 +222,7 @@
this.$emit('close'); this.$emit('close');
}, },
handleConfirm(){ handleConfirm(){
this.field.extInfos=JSON.stringify(this.extInfos.filter(k=>!k.value))
this.$emit('input',this.field) this.$emit('input',this.field)
this.$emit('change',this.field) this.$emit('change',this.field)
this.$emit('change2',this.field) this.$emit('change2',this.field)
@ -239,7 +261,25 @@
this.field.id=id; this.field.id=id;
this.field.idCamel=this.$mdp.toCamel(this.field.id) this.field.idCamel=this.$mdp.toCamel(this.field.id)
this.$emit('id-change',this.field) this.$emit('id-change',this.field)
},
setExtInfos(){
var cfgs=[]
var x= this.componentsExtInfosCfg[this.field.typ]
var extInfos=this.field.extInfos?JSON.parse(this.field.extInfos):[]
if(x && x.length>0){
x.forEach(k=>{
var cfg=extInfos.find(c=>c.id==k.id)
if(cfg){
cfgs.push(cfg)
}else{
cfgs.push({...k})
}
})
}else{
cfgs=extInfos
} }
this.extInfos=cfgs
},
/**end 在上面加自定义方法**/ /**end 在上面加自定义方法**/
},//end method },//end method

Write Preview
Loading…
Cancel
Save