| | |
| | | currentPage: 1, |
| | | total: 50, |
| | | }, |
| | | simplePage:{ |
| | | simplePage: { |
| | | currentPage: 1, |
| | | total: 100, |
| | | pagerCount:4, |
| | | layout:"prev, pager, next" |
| | | pagerCount: 4, |
| | | layout: "prev, pager, next" |
| | | }, |
| | | //表格树 |
| | | form: {}, |
| | |
| | | editBtn: false, |
| | | delBtn: false, |
| | | selection: true, |
| | | tip:false, |
| | | tip: false, |
| | | calcHeight: 15, |
| | | indexFixed: false, |
| | | menuFixed: false, |
| | |
| | | TreeSelectList: [] |
| | | } |
| | | }, |
| | | watch:{ |
| | | parentHeight:{ |
| | | watch: { |
| | | parentHeight: { |
| | | handler(newval) { |
| | | if(newval >50){ |
| | | this.option.height=newval; |
| | | if (newval > 50) { |
| | | this.option.height = newval; |
| | | //doLayout不生效,手动设置表格高度 |
| | | this.$children[0].$children[1].$children[1].$children[0].$el.style.height=newval+'px'; |
| | | 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:{ |
| | | isShow: { |
| | | handler(newval) { |
| | | if(newval && this.$el.clientHeight>50) { |
| | | 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; |
| | | } |
| | | } |
| | |
| | | } else if (this.type === 'table') { |
| | | const top = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'top' || func.isEmpty(item.paramVOS.webUiButtonLocation)); // 过滤出来表格上面区域展示的按钮 |
| | | const menu = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'menu'); // 过滤出来操作栏展示的按钮 |
| | | |
| | | return { |
| | | top: top, |
| | | menu: menu |
| | | menu: menu, |
| | | }; |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid"> |
| | | <avue-crud v-model="form" |
| | | ref="dataTable" |
| | | :data="tableList" |
| | | :option="option" |
| | | :page.sync="pageType" |
| | | :table-loading="loading" |
| | | @selection-change="selectChange"> |
| | | <!--top区域按钮--> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <dynamic-button LocationType="top" type="table":butttonList="componentVO.buttons" :selectList="selectList"></dynamic-button> |
| | | </template> |
| | | <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic"> |
| | | <avue-crud ref="dataTable" |
| | | v-model="form" |
| | | :data="tableList" |
| | | :option="option" |
| | | :page.sync="pageType" |
| | | :table-loading="loading" |
| | | @selection-change="selectChange"> |
| | | <!--top区域按钮--> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <dynamic-button :butttonList="componentVO.buttons" :selectList="selectList" LocationType="top" |
| | | type="table"></dynamic-button> |
| | | </template> |
| | | |
| | | <!--menu区域按钮--> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <dynamic-button :scope="scope" LocationType="menu" type="table":butttonList="componentVO.buttons" :selectList="selectList"></dynamic-button> |
| | | </template> |
| | | </avue-crud> |
| | | </div> |
| | | <!--menu区域按钮--> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <dynamic-button :butttonList="componentVO.buttons" :scope="scope" :selectList="selectList" LocationType="menu" |
| | | type="table"></dynamic-button> |
| | | </template> |
| | | </avue-crud> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | dataStore:{ |
| | | dataStore: { |
| | | //弹窗时按钮所属区域选中数据 |
| | | type:Array, |
| | | type: Array, |
| | | default: [] |
| | | }, |
| | | tableType:{ |
| | | type:String |
| | | tableType: { |
| | | type: String |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | parentHeight:'100%',//当前组件根节点元素高度 |
| | | parentHeight: '100%',//当前组件根节点元素高度 |
| | | form: {}, |
| | | loading: false, |
| | | page: { |
| | |
| | | currentPage: 1, |
| | | total: 50, |
| | | }, |
| | | simplePage:{ |
| | | simplePage: { |
| | | currentPage: 1, |
| | | total: 100, |
| | | pagerCount:4, |
| | | layout:"prev, pager, next" |
| | | pagerCount: 4, |
| | | layout: "prev, pager, next" |
| | | }, |
| | | //表格数据 |
| | | tableList: [ |
| | |
| | | editBtn: false, |
| | | delBtn: false, |
| | | selection: true, |
| | | tip:false, |
| | | tip: false, |
| | | height: '100%', |
| | | calcHeight: 15, |
| | | indexFixed: false, |
| | | menuFixed: false, |
| | | column: [], |
| | | }, |
| | | selectList:[], |
| | | selectList: [], |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | return this.areasName === 'westArea' ? this.simplePage : this.page; |
| | | } |
| | | }, |
| | | watch:{ |
| | | parentHeight:{ |
| | | watch: { |
| | | parentHeight: { |
| | | handler(newval) { |
| | | if(newval >50){ |
| | | this.option.height=newval; |
| | | if (newval > 50) { |
| | | this.option.height = newval; |
| | | //doLayout不生效,手动设置表格高度 |
| | | this.$children[0].$children[1].$children[1].$children[0].$el.style.height=newval+'px'; |
| | | 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:{ |
| | | isShow: { |
| | | handler(newval) { |
| | | if(newval && this.$el.clientHeight>50) { |
| | | 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; |
| | | this.option.column = this.updatedColumns; |
| | | }, |
| | | mounted() { |
| | | if(this.$el.clientHeight>50) { |
| | | 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: { |
| | | selectChange(row){ |
| | | selectChange(row) { |
| | | this.selectList = row; |
| | | }, |
| | | TreeSelectChange(row){ |
| | | TreeSelectChange(row) { |
| | | this.TreeSelectList = row; |
| | | } |
| | | } |
| | |
| | | ] |
| | | }, |
| | | { |
| | | path: '/dynamic-form', |
| | | path: '/dynamic-form', |
| | | name: '动态表格页面', |
| | | component: Layout, |
| | | children: [ |