Browse Source

优化

master
陈裕财 2 years ago
parent
commit
11a4e8b8ba
  1. 137
      src/components/mdp-ui-ext/mdp-ext-infos/Index.vue
  2. 68
      src/views/mdp/form/formField/FieldCfg.vue

137
src/components/mdp-ui-ext/mdp-ext-infos/Index.vue

@ -8,9 +8,9 @@
<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-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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -18,9 +18,9 @@
<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-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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -28,9 +28,9 @@
<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-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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -38,9 +38,9 @@
<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-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><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-option v-for="(it,indexx) in itemTypes" :key="indexx" :label="it.name" :value="it.id">{{it.name}} </el-option>
</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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -59,11 +59,11 @@
<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-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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -71,10 +71,10 @@
<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-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><el-button @click="addExtInfosItem(item,index)" icon="el-icon-plus"></el-button>
</el-form-item>
@ -85,40 +85,39 @@
<el-button @click="addExtInfosFirstItem" icon="el-icon-plus"><slot>新增一行</slot></el-button>
</el-form-item>
</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-是否'}] -->
<el-row v-for="(item, index) in extInfosList" :key="index">
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-input v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type=='1'" :label="item.name">
<el-input v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type=='2'" :label="item.name">
<el-input type="number" v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type=='3'" :label="item.name">
<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 v-else-if="item.type=='8'" :label="item.name">
<el-input type="textarea" rows=6 v-model="item.value" placeholder="请输入数据"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type=='9'" :label="item.name">
<el-input v-model="item.value" placeholder="请输入图片地址"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type=='15'" :label="item.name">
<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-col>
</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-form-item>
</el-form>
@ -132,7 +131,25 @@
export default {
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: {
...mapGetters([
'userInfo'
@ -148,8 +165,13 @@
handler(val,oldVal){
if(this.value instanceof Array){
this.$emit("input",val)
this.$emit("change",val)
this.$emit("change2",val)
}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)
},
initData(){
debugger;
if(this.value){
if(this.value instanceof Array){
this.extInfosList=this.value

68
src/views/mdp/form/formField/FieldCfg.vue

@ -1,5 +1,5 @@
<template>
<section>
<section v-adaptive>
<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">
@ -97,16 +97,9 @@
<el-button slot="reference">校验规则</el-button>
</el-popover>
</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-row class="footer">
<el-button type="text" @click="handleCancel">关闭</el-button>
@ -126,7 +119,7 @@
<template v-slot="{visible,data,dialog}">
<field-qx-set :visible="visible" v-model="data.qx" :title="data.title" @close="dialog.close()" @submit="onQxSetChange"/>
</template>
</mdp-dialog>
</mdp-dialog>
</section>
</template>
@ -177,6 +170,7 @@
immediate:true,
handler:function(){
this.field=this.value
this.setExtInfos();
}
}
},
@ -184,13 +178,40 @@
return {
oldId:'',
field:{},
primaryKeys:[],
primaryKeys:[],
fieldRules: {
id: [
//{ 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 return
},//end data
@ -201,6 +222,7 @@
this.$emit('close');
},
handleConfirm(){
this.field.extInfos=JSON.stringify(this.extInfos.filter(k=>!k.value))
this.$emit('input',this.field)
this.$emit('change',this.field)
this.$emit('change2',this.field)
@ -239,7 +261,25 @@
this.field.id=id;
this.field.idCamel=this.$mdp.toCamel(this.field.id)
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 method

Loading…
Cancel
Save