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

优化

master
陈裕财 2 years ago
parent
6d9769f7ea
commit
d212089ae3
4 changed files with 47 additions and 61 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. 4
      src/components/mdp-ui-ext/mdp-expand/ColumnExpand.vue
  2. 2
      src/components/mdp-ui-ext/mdp-expand/FormData.vue
  3. 54
      src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue
  4. 46
      src/views/mdp/form/formData/Index.vue

4
src/components/mdp-ui-ext/mdp-expand/ColumnExpand.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<section> <section>
<el-table-column v-for="(field,idx) in formFields" :key="idx" :prop="expandFieldName+'.'+field.fieldIdCamel" :label="field.fieldTitle">
<el-table-column v-for="(field,idx) in formFields" :key="idx" :prop="expandFieldName+'.'+field.idCaml" :label="field.title">
<template v-slot="scope"> <template v-slot="scope">
<div>{{ scope.row[expandFieldName][field.fieldIdCamel] }}</div>
<div>{{ scope.row[expandFieldName][field.idCaml] }}</div>
</template> </template>
</el-table-column> </el-table-column>
</section> </section>

2
src/components/mdp-ui-ext/mdp-expand/FormData.vue
View File

@ -4,7 +4,7 @@
<!--新增界面 FormData 表单数据表--> <!--新增界面 FormData 表单数据表-->
<el-form :model="editForm" :label-width="labelWidthCpd" :label-position="labelPosition" :show-message="true" :rules="editFormRules" ref="editForm"> <el-form :model="editForm" :label-width="labelWidthCpd" :label-position="labelPosition" :show-message="true" :rules="editFormRules" ref="editForm">
<el-col :span="spanCalc(item)" v-for="(item,index) in fields" :key="index"> <el-col :span="spanCalc(item)" v-for="(item,index) in fields" :key="index">
<mdp-form-data-item v-model="editForm[item.idCamel]" :field="item"></mdp-form-data-item>
<mdp-form-data-item v-model="editForm" :field="item"></mdp-form-data-item>
</el-col> </el-col>
</el-form> </el-form>
</el-row> </el-row>

54
src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue
View File

@ -3,7 +3,7 @@
<el-row> <el-row>
<el-row v-if="field.extType=='row'" :gutter="gutter"> <el-row v-if="field.extType=='row'" :gutter="gutter">
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)"> <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>
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="editForm" @change="onChildChange" ></mdp-form-data-item>
</el-col> </el-col>
</el-row> </el-row>
<el-card v-else-if="field.extType=='card'" :gutter="gutter"> <el-card v-else-if="field.extType=='card'" :gutter="gutter">
@ -12,15 +12,15 @@
</div> </div>
<el-row :gutter="gutter" v-if="field.children && field.children.length>0"> <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)"> <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>
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="editForm" @change="onChildChange" ></mdp-form-data-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-tabs v-else-if="field.extType=='tabs'" v-model="myVal">
<el-tabs v-else-if="field.extType=='tabs'" v-model="editForm[field.idCamel]">
<el-tab-pane :label="tab" v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab"> <el-tab-pane :label="tab" v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab">
<el-row :gutter="gutter"> <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)"> <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>
<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="editForm" @change="onChildChange" ></mdp-form-data-item>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
@ -28,32 +28,32 @@
<el-form-item v-else :label="field.title" :prop="field.idCamel"> <el-form-item v-else :label="field.title" :prop="field.idCamel">
<div v-if="field.nr"></div> <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 v-else-if=" field.extType=='user'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="editForm[field.idCamel]" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
</mdp-select-user> </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-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 v-else-if=" field.extType=='tag'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="editForm[field.idCamel]" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
</mdp-select-tag> </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 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="editForm[field.idCamel]" :label-width="labelWidthCpd" :label="field.title" :placeholder="field.hol" split="," @change="onFieldChange">
</mdp-select> </mdp-select>
<!--html--> <!--html-->
<el-popover v-else-if=" field.extType=='html'" <el-popover v-else-if=" field.extType=='html'"
placement="top-start" placement="top-start"
width="400" width="400"
trigger="hover"> 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-input type="textarea" rows="4" v-model="editForm[field.idCamel]" :disabled="field.ne" @change="onFieldChange"></el-input>
<div slot="reference" v-html="editForm[field.idCamel]||field.defaultValue||'无'"></div>
</el-popover> </el-popover>
<!--link 链接--> <!--link 链接-->
<el-popover v-else-if=" field.extType=='link'" <el-popover v-else-if=" field.extType=='link'"
placement="top-start" placement="top-start"
width="400" width="400"
trigger="hover"> 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-input v-model="editForm[field.idCamel]" :disabled="field.ne" @change="onFieldChange"></el-input>
<el-link slot="reference" :href="editForm[field.idCamel]" target="_blank">{{ editForm[field.idCamel]||field.title }}</el-link>
</el-popover> </el-popover>
<!--image--> <!--image-->
<el-popover v-else-if=" field.extType=='image'" <el-popover v-else-if=" field.extType=='image'"
@ -61,7 +61,7 @@
trigger="hover"> trigger="hover">
<el-button @click="$refs['imageDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传图片</el-button> <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'}" <el-image slot="reference" :style="field.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
:src="myVal"
:src="editForm[field.idCamel]"
fit="contain" > fit="contain" >
</el-image> </el-image>
</el-popover> </el-popover>
@ -70,19 +70,19 @@
placement="top-start" placement="top-start"
trigger="hover"> trigger="hover">
<el-button @click="$refs['attDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传附件</el-button> <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-link slot="reference" :href="editForm[field.idCamel]" target="_blank">{{ editForm[field.idCamel]||field.title }}</el-link>
</el-popover> </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>
<mdp-input :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='text'" style="width: 90%;" v-model="editForm[field.idCamel]" :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="editForm[field.idCamel]" :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="editForm[field.idCamel]" :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="editForm[field.idCamel]" :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="editForm[field.idCamel]" 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="editForm[field.idCamel]" 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="editForm[field.idCamel]" 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="editForm[field.idCamel]" 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="editForm[field.idCamel]" 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="editForm[field.idCamel]?editForm[field.idCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="(vs)=>{editForm[field.idCamel]=vs.join(',');onFieldChange(vs)}"> </mdp-date-range>
</el-form-item> </el-form-item>
</el-row> </el-row>
@ -140,7 +140,7 @@
} }
}, },
props:{ props:{
value:{type:[Object,String,Array,Number],default:null},
value:{type:Object,default:null},
field:{type:Object,default:null}, field:{type:Object,default:null},
labelWidth:{type:String,default:null}, labelWidth:{type:String,default:null},
labelPosition:{type:String,default:null}, labelPosition:{type:String,default:null},
@ -166,7 +166,7 @@
data() { data() {
return { return {
pickerOptions: this.$mdp.getPickerOptions(), pickerOptions: this.$mdp.getPickerOptions(),
myVal:null,
editForm:{},
} }
}, },
methods: { methods: {
@ -203,8 +203,8 @@
}, },
onFieldChange(val){ onFieldChange(val){
this.$emit('input',this.myVal)
this.$emit('change',this.myVal,this.field)
this.$emit('input',this.editForm)
this.$emit('change',this.editForm,this.field)
}, },
},//end method },//end method

46
src/views/mdp/form/formData/Index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section class="border padding"> <section class="border padding">
<el-row> <el-row>
<mdp-select v-model="filters.flowState" width="8em" item-code="bizFlowState" placeholder="审批状态"/>
<mdp-select v-model="filters.fstate" width="8em" item-code="bizFlowState" placeholder="审批状态"/>
<mdp-select-tag v-model="filters['tagIds']" width="8em" clearable filterable placeholder="标签" /> <mdp-select-tag v-model="filters['tagIds']" width="8em" clearable filterable placeholder="标签" />
<el-input v-model="filters.bizKey" style="width: 15em;" placeholder="业务编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/> <el-input v-model="filters.bizKey" style="width: 15em;" placeholder="业务编号查询 输入 *字符* >10 <9 等" clearable title="支持>、<、 >=、<=、!=、*字符*、$IS NULL、$IN 1,2,3、$between 1,5等操作符"/>
@ -39,14 +39,14 @@
<mdp-input show-style="tag" v-model="scope.row.cusername" :maxlength="255" @change="editSomeFields(scope.row,'cusername',$event)" :disabled="!editable || disabledJudge('cusername')"/> <mdp-input show-style="tag" v-model="scope.row.cusername" :maxlength="255" @change="editSomeFields(scope.row,'cusername',$event)" :disabled="!editable || disabledJudge('cusername')"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="120" show-overflow-tooltip col-type="Date" v-if="showCol('createTime')">
<el-table-column prop="ctime" label="创建时间" min-width="120" show-overflow-tooltip col-type="Date" v-if="showCol('ctime')">
<template slot-scope="scope"> <template slot-scope="scope">
<mdp-date type="date" placeholder="选择日期" show-style="tag" v-model="scope.row.createTime" @change="editSomeFields(scope.row,'createTime',$event)" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" :disabled="!editable || disabledJudge('createTime')"/>
<mdp-date type="date" placeholder="选择日期" show-style="tag" v-model="scope.row.ctime" @change="editSomeFields(scope.row,'ctime',$event)" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" :disabled="!editable || disabledJudge('ctime')"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="flowState" label="审批状态" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('flowState')">
<el-table-column prop="fstate" label="审批状态" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('fstate')">
<template slot-scope="scope"> <template slot-scope="scope">
<mdp-select show-style="tag" v-model="scope.row.flowState" item-code="bizFlowState" :maxlength="1" @change="editSomeFields(scope.row,'flowState',$event)" :disabled="!editable || disabledJudge('flowState')"/>
<mdp-select show-style="tag" v-model="scope.row.fstate" item-code="bizFlowState" :maxlength="1" @change="editSomeFields(scope.row,'fstate',$event)" :disabled="!editable || disabledJudge('fstate')"/>
</template> </template>
</el-table-column> </el-table-column>
@ -55,8 +55,11 @@
<mdp-select-tag show-style="tag" v-model="scope.row.tagIds" multiple split="," :maxlength="255" @change="editSomeFields(scope.row,'tagIds',$event)" :disabled="disabledJudge('tagIds')"/> <mdp-select-tag show-style="tag" v-model="scope.row.tagIds" multiple split="," :maxlength="255" @change="editSomeFields(scope.row,'tagIds',$event)" :disabled="disabledJudge('tagIds')"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-for="c,idx in fields" :key="idx" :prop="c.fieldId" :label="c.fieldTitle" min-width="120" show-overflow-tooltip col-type="String" v-show="showCol(c.fieldId)">
<el-table-column v-for="c,idx in fields.filter(k=>k.extType!='row' && k.extType!='card' && k.extType!='tabs')" :key="idx" :prop="c.idCamel" :label="c.title" min-width="120" show-overflow-tooltip col-type="String" v-show="showCol(c.idCamel)">
<template slot-scope="scope">
<mdp-select v-if="c.dict" :item-code="c.dict" show-style="tag" v-model="scope.row[c.idCamel]" multiple split="," :maxlength="255" :disabled="true||disabledJudge(c.idCamel)"/>
<div v-else>{{scope.row[c.idCamel]}}</div>
</template>
</el-table-column> </el-table-column>
@ -315,31 +318,14 @@ export default {
listFormField(params).then((res) => { listFormField(params).then((res) => {
var tips=res.data.tips; var tips=res.data.tips;
if(tips.isOk){ if(tips.isOk){
var fields=res.data.data.formFields;
var primaryKeys=[];
fields.forEach(item=>{
if(item.isBizKey && item.isBizKey.length==3){
if(item.isBizKey.charAt(2)=="1"){
primaryKeys.push(item.fieldIdCamel);
}
}
});
if(fields!=null && fields.length>0){
var isBizKey=fields[0].isBizKey;
if(isBizKey && isBizKey.length==3){
if(isBizKey.charAt(0)=="1"){
primaryKeys.push("cuserid");
}
if(isBizKey.charAt(1)=='1'){
primaryKeys.push("deptid");
}
}
}
this.primaryKeys=primaryKeys
this.fields = res.data.data.formFields; this.fields = res.data.data.formFields;
this.myFormDef=res.data.data.formDef this.myFormDef=res.data.data.formDef
if(this.myFormDef.pks && this.myFormDef.pks.length>0){
this.primaryKeys=this.myFormDef.pks.split(":")[0].split(",")
}else{
this.primaryKeys=[]
}
}else{ }else{
this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: 'error' }); this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: 'error' });
} }

Write Preview
Loading…
Cancel
Save