You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
9.8 KiB
223 lines
9.8 KiB
<template>
|
|
<section>
|
|
<el-row>
|
|
<el-row v-if="field.extType=='row'" :gutter="gutter">
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
|
|
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange" ></mdp-form-data-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-card v-else-if="field.extType=='card'" :gutter="gutter">
|
|
<div slot="header" class="clearfix">
|
|
<span>{{ field.title }}</span>
|
|
</div>
|
|
<el-row :gutter="gutter" v-if="field.children && field.children.length>0">
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
|
|
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange" ></mdp-form-data-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<el-tabs v-else-if="field.extType=='tabs'" v-model="myVal">
|
|
<el-tab-pane :label="tab" v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab">
|
|
<el-row :gutter="gutter">
|
|
<el-col v-for="child,idx in field.children.filter(c=>c.gname==tab||!c.gname)" :key="idx" :span="calcSpan(child,field)">
|
|
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange" ></mdp-form-data-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-form-item v-else :label="field.title" :prop="field.idCamel">
|
|
<div v-if="field.nr"></div>
|
|
<!--用户-->
|
|
<mdp-select-user v-else-if=" field.extType=='user'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
|
|
</mdp-select-user>
|
|
<!--部门-->
|
|
<mdp-selecct-dept v-else-if=" field.extType=='deppt'" :show-style="field.showStyle" :disabled="field.ne" :branch-id="userInfo.branchId" :show-checkbox="field.mul=='1'" :multiple="field.mul=='1'" split="," @change="onFieldChange"></mdp-selecct-dept>
|
|
|
|
<!--标签-->
|
|
<mdp-select-tag v-else-if=" field.extType=='tag'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
|
|
</mdp-select-tag>
|
|
<!--下拉框-->
|
|
<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==field.typ)" :show-style="field.showStyle" :disabled="field.ne" :show-type="field.typ" :item-code="field.dict" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
|
|
</mdp-select>
|
|
<!--html-->
|
|
<el-popover v-else-if=" field.extType=='html'"
|
|
placement="top-start"
|
|
width="400"
|
|
trigger="hover">
|
|
<el-input type="textarea" rows="4" v-model="myVal" :disabled="field.ne" @change="onFieldChange"></el-input>
|
|
<div slot="reference" v-html="myVal||field.defaultValue||'无'"></div>
|
|
</el-popover>
|
|
<!--link 链接-->
|
|
<el-popover v-else-if=" field.extType=='link'"
|
|
placement="top-start"
|
|
width="400"
|
|
trigger="hover">
|
|
<el-input v-model="myVal" :disabled="field.ne" @change="onFieldChange"></el-input>
|
|
<el-link slot="reference" :href="myVal" target="_blank">{{ myVal||field.title }}</el-link>
|
|
</el-popover>
|
|
<!--image-->
|
|
<el-popover v-else-if=" field.extType=='image'"
|
|
placement="top-start"
|
|
trigger="hover">
|
|
<el-button @click="$refs['imageDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传图片</el-button>
|
|
<el-image slot="reference" :style="field.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
|
|
:src="myVal"
|
|
fit="contain" >
|
|
</el-image>
|
|
</el-popover>
|
|
<!--att 附件-->
|
|
<el-popover v-else-if=" field.extType=='att'"
|
|
placement="top-start"
|
|
trigger="hover">
|
|
<el-button @click="$refs['attDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传附件</el-button>
|
|
<el-link slot="reference" :href="myVal" target="_blank">{{ myVal||field.title }}</el-link>
|
|
</el-popover>
|
|
<!--其它类型-->
|
|
<mdp-input :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='text'" style="width: 90%;" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off" :placeholder="field.hol" clearable @change="onFieldChange"> </mdp-input>
|
|
<mdp-number :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='number'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off" placeholder="请输入内容" clearable @change="onFieldChange"></mdp-number>
|
|
<mdp-number :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='amount'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off" placeholder="请输入内容" clearable @change="onFieldChange"></mdp-number>
|
|
<mdp-input :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='textarea'" type="textarea" :rows="2" v-model="myVal" :label-width="labelWidthCpd" :label="field.title" placeholder="请输入内容" @change="onFieldChange"></mdp-input>
|
|
<el-time-picker :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='time'" v-model="myVal" placeholder="任意时间点" value-format="HH:mm:ss" format="HH:mm:ss" @change="onFieldChange"> </el-time-picker>
|
|
<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='date'" v-model="myVal" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="onFieldChange"> </mdp-date>
|
|
<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='datetime'" v-model="myVal" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" @change="onFieldChange"> </mdp-date>
|
|
<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='month'" v-model="myVal" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份" @change="onFieldChange"></mdp-date>
|
|
<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='year'" v-model="myVal" type="month" value-format="yyyy" format="yyyy" placeholder="选择年" @change="onFieldChange"></mdp-date>
|
|
<mdp-date-range :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='daterange'" :value="myVal?myVal.split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="(vs)=>{myVal=vs.join(',');onFieldChange(vs)}"> </mdp-date-range>
|
|
</el-form-item>
|
|
|
|
</el-row>
|
|
|
|
|
|
<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false">
|
|
<template v-slot="{visible,data,dialog}">
|
|
<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{
|
|
if(data.field.mul=='1'){
|
|
data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
|
|
}else{
|
|
data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs[0].url:null
|
|
}
|
|
dialog.close();
|
|
}"></mdp-select-image>
|
|
</template>
|
|
</mdp-dialog>
|
|
<mdp-dialog ref="attDialog" title="选择文件" width="80%" :modal="false">
|
|
<template v-slot="{visible,data,dialog}">
|
|
<mdp-select-att v-if="visible" :visible="visible" :multiple="data.field.mul=='1'" @select="(imgs)=>{
|
|
if(data.field.mul=='1'){
|
|
data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
|
|
}else{
|
|
data.formData[data.field.idCamel]= (imgs?imgs.url:null)
|
|
}
|
|
|
|
dialog.close();
|
|
}" split=","></mdp-select-att>
|
|
</template>
|
|
</mdp-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
/**
|
|
* 表单数据填单
|
|
*/
|
|
export default {
|
|
computed: {
|
|
...mapGetters([
|
|
'userInfo'
|
|
]),
|
|
labelWidthCpd:function(){
|
|
if(this.labelWidth){
|
|
return this.labelWidth
|
|
}
|
|
return this.labelWidthCalc();
|
|
},
|
|
tabListCpd(){
|
|
if(!this.field.gname){
|
|
return []
|
|
}
|
|
return this.field.gname.split(",")
|
|
}
|
|
},
|
|
props:{
|
|
value:{type:[Object,String,Array,Number],default:null},
|
|
field:{type:Object,default:null},
|
|
labelWidth:{type:String,default:null},
|
|
labelPosition:{type:String,default:null},
|
|
span:{
|
|
type:Number,
|
|
default:24
|
|
},
|
|
parentField:{
|
|
type:Object,
|
|
default:function(){
|
|
return {}
|
|
}
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
value:function(){
|
|
this.initData()
|
|
},
|
|
field:function(field) {
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
pickerOptions: this.$mdp.getPickerOptions(),
|
|
myVal:null,
|
|
}
|
|
},
|
|
methods: {
|
|
labelWidthCalc:function(){
|
|
if (screen.width <=375){
|
|
return "80px"
|
|
}else if (screen.width <= 500){
|
|
return "80px"
|
|
}else if (screen.width<=1024){
|
|
return "100px"
|
|
}else {
|
|
return "120px"
|
|
}
|
|
} ,
|
|
initData(){
|
|
|
|
if(this.value){
|
|
this.editForm=Object.assign({},this.value)
|
|
}else{
|
|
this.editForm={}
|
|
}
|
|
},
|
|
|
|
onChildChange(val,field){
|
|
this.$emit('input',val)
|
|
this.$emit('change',val,field)
|
|
},
|
|
calcSpan(child,parent){
|
|
if(child.span>0){
|
|
return child.span
|
|
}else{
|
|
return this.span
|
|
}
|
|
},
|
|
|
|
onFieldChange(val){
|
|
this.$emit('input',this.myVal)
|
|
this.$emit('change',this.myVal,this.field)
|
|
|
|
},
|
|
},//end method
|
|
components: {
|
|
"mdp-form-data-item": ()=>import('@/components/mdp-ui-ext/mdp-expand/FormDataItem.vue'),
|
|
},
|
|
mounted() {
|
|
this.initData();
|
|
}//end mounted
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|