Merge remote-tracking branch 'origin/master'
# Conflicts:
# Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
| | |
| | | } |
| | | .UI-collapse > .el-collapse-item > .el-collapse-item__wrap{ |
| | | height:calc(100% - 49px); |
| | | overflow: auto; |
| | | } |
| | | .UI-collapse > .el-collapse-item > .el-collapse-item__wrap > .el-collapse-item__content{ |
| | | height: 100%; |
| | | padding-bottom: 5px; |
| | | } |
| | | .UI-dynamic{ |
| | |
| | | <template> |
| | | <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic"> |
| | | <div> |
| | | <avue-crud v-model="form" |
| | | :data="tableList" |
| | | :option="option" |
| | | :page.sync="page" |
| | | :table-loading="loading"> |
| | | <!--top区域按钮--> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <dynamic-button :butttonList="componentVO.buttons" LocationType="top" type="table"></dynamic-button> |
| | | </template> |
| | | <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid"> |
| | | <avue-crud v-model="form" |
| | | ref="dataTable" |
| | | :data="tableList" |
| | | :option="option" |
| | | :page.sync="page" |
| | | :table-loading="loading"> |
| | | <!--top区域按钮--> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <dynamic-button LocationType="top" type="table":butttonList="componentVO.buttons" @buttonClick="buttonClick" ></dynamic-button> |
| | | </template> |
| | | |
| | | <!--menu区域按钮--> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <dynamic-button :butttonList="componentVO.buttons" :scope="scope" LocationType="menu" type="table"></dynamic-button> |
| | | </template> |
| | | </avue-crud> |
| | | </div> |
| | | <!--menu区域按钮--> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <dynamic-button :scope="scope" LocationType="menu" type="table":butttonList="componentVO.buttons" @buttonClick="buttonClick" ></dynamic-button> |
| | | </template> |
| | | </avue-crud> |
| | | <!-- 表格内按钮操作对话框表单 --> |
| | | <dynamic-table-form ref="dynamicForm" :formList="formList" :title="formName" :visible.sync="visible" |
| | | style="display: none"></dynamic-table-form> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | paramVOS: { |
| | | type: Object, |
| | | default: {} |
| | | } |
| | | }, |
| | | isShow: { |
| | | //所在区域是否已显示,针对tab和collapse |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | clientHeight: 0, |
| | | parentHeight: '100%',//当前组件根节点元素高度 |
| | | parentHeight:'100%',//当前组件根节点元素高度 |
| | | form: {}, |
| | | formName: '', |
| | | loading: false, |
| | | visible: false, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | |
| | | ts: "2022-02-18 14:35:53.177" |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | computed: { |
| | | option() { |
| | | return { |
| | | // 表单数据 |
| | | formList: [ |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "name", |
| | | hidden: false, |
| | | keyAttr: true, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: true, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: '$', |
| | | text: "名称", |
| | | tooltips: '名称', |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "code", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | disabled:true, |
| | | text: "编码", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: "EnumReviewType", |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "department", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "reviewtype", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "类型", |
| | | tooltips: null, |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | dicData: [{ |
| | | label: '测试1', |
| | | value: 'department' |
| | | }, { |
| | | label: '测试2', |
| | | value: 'departments' |
| | | }] |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "creator", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: true, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建人", |
| | | tooltips: null, |
| | | type: "text", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "yyyy-MM-dd HH:mm:ss", |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "createtime", |
| | | hidden: true, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "创建时间", |
| | | tooltips: null, |
| | | type: "datetime", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: null, |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "content", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: null, |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: null, |
| | | showField: null, |
| | | suffix: null, |
| | | text: "备注", |
| | | tooltips: null, |
| | | type: "textarea", |
| | | unique: false, |
| | | verify: "" |
| | | }, |
| | | ], |
| | | option: { |
| | | index: true, |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | selection:true, |
| | | height: this.parentHeight, |
| | | height: '100%', |
| | | calcHeight: 15, |
| | | indexFixed: false, |
| | | menuFixed: false, |
| | | column: this.updatedColumns, |
| | | }; |
| | | }, |
| | | column: [], |
| | | }, |
| | | } |
| | | }, |
| | | computed: { |
| | | updatedColumns() { |
| | | return this.componentVO.tableDefineVO.cols[0].map(item => { |
| | | const typeValue = item.fieldType === 'text' || item.fieldType === 'combox' ? 'input' : item.fieldType; // 表单Type类型 |
| | |
| | | }); |
| | | }, |
| | | }, |
| | | watch: { |
| | | clientHeight: { |
| | | watch:{ |
| | | parentHeight:{ |
| | | handler(newval) { |
| | | if (newval > 50) { |
| | | //父元素高度-按钮高度-分页高度 |
| | | this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5; |
| | | console.log(this.parentHeight) |
| | | if(newval >50){ |
| | | this.option.height=newval; |
| | | //doLayout不生效,手动设置表格高度 |
| | | this.$children[0].$children[1].$children[1].$children[0].$el.style.height=newval+'px'; |
| | | /*this.$nextTick(() => { |
| | | if (this.$refs.dataTable && this.$refs.dataTable.doLayout) { |
| | | this.$refs.dataTable.doLayout(); |
| | | } |
| | | })*/ |
| | | } |
| | | } |
| | | }, |
| | | isShow:{ |
| | | handler(newval) { |
| | | if(newval && this.$el.clientHeight>50) { |
| | | this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | this.option.column=this.updatedColumns; |
| | | }, |
| | | mounted() { |
| | | this.clientHeight = this.$el.clientHeight; |
| | | if(this.$el.clientHeight>50) { |
| | | //父元素高度-按钮高度-分页高度 |
| | | this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5; |
| | | } |
| | | }, |
| | | methods: {} |
| | | methods: { |
| | | buttonClick(scope, item) { |
| | | this.formName = item.name; |
| | | |
| | | function handleAdd() { |
| | | this.visible = true; |
| | | } |
| | | |
| | | function handleEdit() { |
| | | this.visible = true; |
| | | this.$refs.dynamicForm.form = scope.row; |
| | | } |
| | | |
| | | function handleDelete() { |
| | | this.$message.success('删除成功!'); |
| | | } |
| | | |
| | | const methodHandlers = { |
| | | add: handleAdd.bind(this), |
| | | edit: handleEdit.bind(this), |
| | | delete: handleDelete.bind(this), |
| | | }; |
| | | |
| | | const method = item.paramVOS.buttonMethods; |
| | | const handler = methodHandlers[method]; |
| | | if (handler) { |
| | | handler(); |
| | | } else { |
| | | this.$message.error('请重新配置按钮!') |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"> |
| | | :paramVOS="paramVOS" |
| | | :isShow="isShow"> |
| | | |
| | | </dynamic-table> |
| | | <dynamic-form v-else-if="componentVO.uiComponentType=='form'" |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"> |
| | | :paramVOS="paramVOS" |
| | | :isShow="isShow"> |
| | | |
| | | </dynamic-form> |
| | | <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"> |
| | | :paramVOS="paramVOS" |
| | | :isShow="isShow"> |
| | | |
| | | </dynamic-tree> |
| | | <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :inDialog="inDialog" |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"> |
| | | :paramVOS="paramVOS" |
| | | :isShow="isShow"> |
| | | |
| | | </dynamic-custom> |
| | | </template> |
| | |
| | | paramVOS:{ |
| | | type:Object, |
| | | default: {} |
| | | } |
| | | }, |
| | | isShow: { |
| | | //所在区域是否已显示,针对tab和collapse |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | }, |
| | | } |
| | | </script> |
| | |
| | | <basic-container :cradStyle="cradStyle" cardBodyStyle="height:100%;box-sizing: border-box;padding-bottom:5px;"> |
| | | <el-tabs style="height: 100%;" class="UITabs" v-if="areasData.length>1" v-model="activeName" type="card" @tab-click="tabHandleClick"> |
| | | <el-tab-pane style="height:100%;overflow: auto" v-for="(areaItem,index) in areasData" :key="areaItem.oid" :label="areaItem.name" :name="areasName+'-Tab-'+index"> |
| | | <el-collapse class="UI-collapse" v-model="collapseActiveNames" v-if="areaItem.componentVOs.length>1"> |
| | | <el-collapse class="UI-collapse" v-model="collapseActiveNames" v-if="areaItem.componentVOs.length>1" @change="handleChange"> |
| | | <el-collapse-item v-for="(componentVO,componentIndex) in areaItem.componentVOs" :name="areasName+'-collapse-'+componentIndex"> |
| | | <template slot="title"> |
| | | {{componentVO.name}} |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"></compoent-index> |
| | | :paramVOS="paramVOS" |
| | | :isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index> |
| | | </div> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | |
| | | :componentVO="areaItem.componentVOs[0]" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"></compoent-index> |
| | | :paramVOS="paramVOS" |
| | | :isShow="activeName==(areasName+'-Tab-'+index)?true:false"></compoent-index> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <div v-else style="height:100%;overflow: auto"> |
| | | <el-collapse class="UI-collapse" v-model="collapseActiveNames" v-if="areasData[0].componentVOs.length>1"> |
| | | <el-collapse class="UI-collapse" v-model="collapseActiveNames" v-if="areasData[0].componentVOs.length>1" @change="handleChange"> |
| | | <el-collapse-item v-for="(componentVO,componentIndex) in areasData[0].componentVOs" :name="areasName+'-collapse-'+componentIndex"> |
| | | <template slot="title"> |
| | | {{componentVO.name}} |
| | |
| | | :componentVO="componentVO" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"></compoent-index> |
| | | :paramVOS="paramVOS" |
| | | :isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index> |
| | | </div> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | |
| | | :componentVO="areasData[0].componentVOs[0]" |
| | | :sourceData="sourceData" |
| | | :areasName="areasName" |
| | | :paramVOS="paramVOS"></compoent-index> |
| | | :paramVOS="paramVOS" |
| | | :isShow="true"></compoent-index> |
| | | </div> |
| | | </div> |
| | | </basic-container> |
| | |
| | | tabHandleClick(tab, event) { |
| | | // console.log(tab, event); |
| | | }, |
| | | handleChange(val) { |
| | | //console.log(val); |
| | | } |
| | | } |
| | | } |
| | | </script> |