From 95110fc987846d9ccfd330bed0b0aefefd395f0f Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 22 三月 2024 11:50:35 +0800
Subject: [PATCH] 动态简易版分页
---
Source/ProjectWeb/src/components/dynamic-components/index.vue | 9
Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue | 206 ++++++++++++++++++++++++++++++++++
Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue | 122 ++------------------
3 files changed, 222 insertions(+), 115 deletions(-)
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue
new file mode 100644
index 0000000..f45a2e0
--- /dev/null
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue
@@ -0,0 +1,206 @@
+<template>
+ <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
+ <avue-crud ref="treeTable"
+ v-model="form"
+ :data="TreeData"
+ :option="option"
+ :page.sync="pageType"
+ @selection-change="TreeSelectChange">
+ <template #icon="scope">
+ <i :class="scope.row.icon"
+ style="font-size:24px"></i>
+ </template>
+ <!--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 :butttonList="componentVO.buttons" :scope="scope" :selectList="selectList" LocationType="menu"
+ type="table"></dynamic-button>
+ </template>
+ </avue-crud>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "dynamic-TreeTable",
+ props: {
+ componentVO: {
+ type: Object,
+ default: {}
+ },
+ inDialog: {
+ type: Boolean,
+ default: false
+ },
+ areasName: {
+ type: String,
+ default: ''//westArea瀵艰埅鍖�
+ },
+ sourceData: {
+ //鑿滃崟婧愭暟鎹垨鑰呭脊绐楁椂鎸夐挳鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁
+ type: Object,
+ default: {}
+ },
+ paramVOS: {
+ type: Object,
+ default: {}
+ },
+ isShow: {
+ //鎵�鍦ㄥ尯鍩熸槸鍚﹀凡鏄剧ず锛岄拡瀵箃ab鍜宑ollapse
+ type: Boolean,
+ default: true
+ },
+ dataStore: {
+ //寮圭獥鏃舵寜閽墍灞炲尯鍩熼�変腑鏁版嵁
+ type: Array,
+ default: []
+ },
+ tableType: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ parentHeight: '100%',//褰撳墠缁勪欢鏍硅妭鐐瑰厓绱犻珮搴�
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 50,
+ },
+ simplePage:{
+ currentPage: 1,
+ total: 100,
+ pagerCount:4,
+ layout:"prev, pager, next"
+ },
+ //琛ㄦ牸鏍�
+ form: {},
+ option: {
+ height: '100%',
+ addBtn: false,
+ editBtn: false,
+ delBtn: false,
+ selection: true,
+ tip:false,
+ calcHeight: 15,
+ indexFixed: false,
+ menuFixed: false,
+ column: [
+ {
+ label: '浜嬩欢',
+ prop: 'event',
+ align: 'left',
+ width: 200
+ },
+ {
+ label: '鏃堕棿绾�',
+ prop: 'timeLine'
+ },
+ {
+ label: '澶囨敞',
+ prop: 'comment'
+ }
+ ],
+ rowKey: 'id',
+ rowParentKey: 'parentId',
+
+ },
+ TreeData: [
+ {
+ id: 10,
+ event: '浜嬩欢1',
+ timeLine: 50,
+ comment: '鏃�'
+ },
+ {
+ id: 1,
+ event: '浜嬩欢1',
+ timeLine: 100,
+ comment: '鏃�',
+ children: [
+ {
+ parentId: 1,
+ id: 2,
+ event: '浜嬩欢2',
+ timeLine: 10,
+ comment: '鏃�'
+ },
+ {
+ parentId: 1,
+ id: 3,
+ event: '浜嬩欢3',
+ timeLine: 90,
+ comment: '鏃�',
+ children: [
+ {
+ parentId: 3,
+ id: 4,
+ event: '浜嬩欢4',
+ timeLine: 5,
+ comment: '鏃�'
+ },
+ {
+ parentId: 3,
+ id: 5,
+ event: '浜嬩欢5',
+ timeLine: 10,
+ comment: '鏃�'
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ TreeSelectList: []
+ }
+ },
+ watch:{
+ parentHeight:{
+ handler(newval) {
+ 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;
+ }
+ }
+ }
+ },
+ mounted() {
+ 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;
+ }
+ },
+ computed: {
+ pageType() {
+ return this.areasName === 'westArea' ? this.simplePage : this.page;
+ }
+ },
+ methods: {
+ TreeSelectChange(row) {
+ this.TreeSelectList = row;
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
index aefe368..53e31a5 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
@@ -1,11 +1,10 @@
<template>
- <div>
- <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid" v-if="tableType === 'table'">
+ <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
<avue-crud v-model="form"
ref="dataTable"
:data="tableList"
:option="option"
- :page.sync="page"
+ :page.sync="pageType"
:table-loading="loading"
@selection-change="selectChange">
<!--top鍖哄煙鎸夐挳-->
@@ -19,30 +18,6 @@
</template>
</avue-crud>
</div>
-
- <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid" v-if="tableType === 'TreeTable'">
- <avue-crud v-model="TreeForm"
- :option="TreeOption"
- :data="TreeData"
- :page.sync="TreePage"
- ref="treeTable"
- @selection-change="TreeSelectChange">
- <template #icon="scope">
- <i :class="scope.row.icon"
- style="font-size:24px"></i>
- </template>
- <!--top鍖哄煙鎸夐挳-->
- <template slot="menuLeft" slot-scope="scope">
- <dynamic-button LocationType="top" type="table":butttonList="componentVO.buttons" :selectList="selectList"></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>
- </div>
</template>
<script>
@@ -92,12 +67,13 @@
page: {
pageSize: 10,
currentPage: 1,
- total: 5,
+ total: 50,
},
- TreePage:{
- pageSize: 10,
+ simplePage:{
currentPage: 1,
- total: 5,
+ total: 100,
+ pagerCount:4,
+ layout:"prev, pager, next"
},
//琛ㄦ牸鏁版嵁
tableList: [
@@ -499,7 +475,8 @@
addBtn: false,
editBtn: false,
delBtn: false,
- selection:true,
+ selection: true,
+ tip:false,
height: '100%',
calcHeight: 15,
indexFixed: false,
@@ -507,84 +484,6 @@
column: [],
},
selectList:[],
- //琛ㄦ牸鏍�
- TreeForm:{},
- TreeOption:{
- height: '100%',
- addBtn:false,
- editBtn:false,
- delBtn:false,
- selection: true,
- calcHeight: 15,
- indexFixed: false,
- menuFixed: false,
- column: [
- {
- label: '浜嬩欢',
- prop: 'event',
- align: 'left',
- width: 200
- },
- {
- label: '鏃堕棿绾�',
- prop: 'timeLine'
- },
- {
- label: '澶囨敞',
- prop: 'comment'
- }
- ],
- rowKey: 'id',
- rowParentKey: 'parentId',
-
- },
- TreeData:[
- {
- id: 10,
- event: '浜嬩欢1',
- timeLine: 50,
- comment: '鏃�'
- },
- {
- id: 1,
- event: '浜嬩欢1',
- timeLine: 100,
- comment: '鏃�',
- children: [
- {
- parentId: 1,
- id: 2,
- event: '浜嬩欢2',
- timeLine: 10,
- comment: '鏃�'
- },
- {
- parentId: 1,
- id: 3,
- event: '浜嬩欢3',
- timeLine: 90,
- comment: '鏃�',
- children: [
- {
- parentId: 3,
- id: 4,
- event: '浜嬩欢4',
- timeLine: 5,
- comment: '鏃�'
- },
- {
- parentId: 3,
- id: 5,
- event: '浜嬩欢5',
- timeLine: 10,
- comment: '鏃�'
- }
- ]
- }
- ]
- }
- ],
- TreeSelectList:[]
}
},
computed: {
@@ -603,6 +502,9 @@
};
});
},
+ pageType() {
+ return this.areasName === 'westArea' ? this.simplePage : this.page;
+ }
},
watch:{
parentHeight:{
diff --git a/Source/ProjectWeb/src/components/dynamic-components/index.vue b/Source/ProjectWeb/src/components/dynamic-components/index.vue
index 8dc4f95..10ed89e 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/index.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/index.vue
@@ -1,6 +1,5 @@
<template>
<dynamic-table v-if="componentVO.uiComponentType=='table'"
- tableType="table"
:key="areasName+'table-'+componentVO.oid"
:inDialog="inDialog"
:componentVO="componentVO"
@@ -10,8 +9,7 @@
:isShow="isShow">
</dynamic-table>
- <dynamic-table v-else-if="componentVO.uiComponentType=='TreeTable'"
- tableType="TreeTable"
+ <dynamicTreeTable v-else-if="componentVO.uiComponentType=='TreeTable'"
:key="areasName+'table-'+componentVO.oid"
:inDialog="inDialog"
:componentVO="componentVO"
@@ -20,7 +18,7 @@
:paramVOS="paramVOS"
:isShow="isShow">
- </dynamic-table>
+ </dynamicTreeTable>
<dynamic-form v-else-if="componentVO.uiComponentType=='form'"
:key="areasName+'form-'+componentVO.oid"
:inDialog="inDialog"
@@ -56,9 +54,10 @@
import dynamicForm from "@/components/dynamic-components/dynamic-form"
import dynamicTree from "@/components/dynamic-components/dynamic-tree"
import dynamicCustom from "@/components/dynamic-components/dynamic-custom"
+import dynamicTreeTable from "@/components/dynamic-components/dynamic-TreeTable"
export default {
name: "dynamicIndex",
- components:{dynamicCustom, dynamicTree, dynamicForm, dynamicTable},
+ components:{dynamicCustom, dynamicTree, dynamicForm, dynamicTable,dynamicTreeTable },
props:{
componentVO:{
type:Object,
--
Gitblit v1.9.3