|
|
@@ -1,118 +1,123 @@
|
|
|
<template>
|
|
|
<a-table :columns="columns" :data-source="dataList" :scroll="{ x:'100%', y: 500 }"
|
|
|
:pagination="pagination"
|
|
|
- :loading="loading"
|
|
|
@change="pageChange"
|
|
|
bordered>
|
|
|
</a-table>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import {defineComponent, computed} from 'vue';
|
|
|
- import {getPaginationTotalTitle} from "@/utils/common";
|
|
|
- import type {TableColumnsType} from 'ant-design-vue';
|
|
|
+import {defineComponent, computed} from 'vue';
|
|
|
+import {getPaginationTotalTitle} from "@/utils/common";
|
|
|
+import type {TableColumnsType} from 'ant-design-vue';
|
|
|
|
|
|
- export default defineComponent ({
|
|
|
- props:{
|
|
|
- bases : [] as any,
|
|
|
- measures : [] as any,
|
|
|
- wheres : [] as any
|
|
|
- },
|
|
|
- emits: ['displayChange'],
|
|
|
- name : 'DisplayTable',
|
|
|
- data() {
|
|
|
- return{
|
|
|
- pagination : {
|
|
|
- total: 0,
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- orderBy : null,
|
|
|
- orderByString : null,
|
|
|
- showSizeChanger: true,
|
|
|
- showTotal: total => getPaginationTotalTitle(total)
|
|
|
- },
|
|
|
- dataList : [] as any,
|
|
|
- columns : [] as any,
|
|
|
- loading : false
|
|
|
- }
|
|
|
- },
|
|
|
- setup(props, context){
|
|
|
- console.log("DisplayTable setup" , props, context);
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ bases: [] as any,
|
|
|
+ measures: [] as any,
|
|
|
+ wheres: [] as any
|
|
|
+ },
|
|
|
+ emits: ['displayChange'],
|
|
|
+ name: 'DisplayTable',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pagination: {
|
|
|
+ total: 0,
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ orderBy: null,
|
|
|
+ orderByString: null,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: total => getPaginationTotalTitle(total)
|
|
|
+ },
|
|
|
+ dataList: [] as any,
|
|
|
+ columns: [] as any,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ console.log("DisplayTable setup", props, context);
|
|
|
|
|
|
- const bases = computed(() => {
|
|
|
- console.log("props.bases", props.bases)
|
|
|
- return props.bases ? props.bases : []
|
|
|
- });
|
|
|
- const measures = computed(() => {
|
|
|
- return props.measures ? props.measures : []
|
|
|
- });
|
|
|
- const wheres = computed(() => {
|
|
|
- return props.wheres ? props.wheres : []
|
|
|
- });
|
|
|
+ const bases = computed(() => {
|
|
|
+ console.log("props.bases", props.bases)
|
|
|
+ return props.bases ? props.bases : []
|
|
|
+ });
|
|
|
+ const measures = computed(() => {
|
|
|
+ return props.measures ? props.measures : []
|
|
|
+ });
|
|
|
+ const wheres = computed(() => {
|
|
|
+ return props.wheres ? props.wheres : []
|
|
|
+ });
|
|
|
|
|
|
- const displayChange = (obj) => {
|
|
|
- context.emit('displayChange', obj)
|
|
|
- }
|
|
|
+ const displayChange = (obj) => {
|
|
|
+ context.emit('displayChange', obj)
|
|
|
+ }
|
|
|
|
|
|
- return{
|
|
|
- bases, measures, wheres, displayChange
|
|
|
+ return {
|
|
|
+ bases, measures, wheres, displayChange
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("mounted", "");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTableColumns: function () {
|
|
|
+ let rtns: TableColumnsType = [];
|
|
|
+ let cols = this.bases.concat(this.measures);
|
|
|
+ cols = cols.sort((a,b)=>{
|
|
|
+ return b.isFixed - a.isFixed;
|
|
|
+ })
|
|
|
+ for (let i = 0; i < cols.length; i++) {
|
|
|
+ let it = cols[i];
|
|
|
+ rtns.push({
|
|
|
+ title: it.displayName ? it.displayName : it.fieldName,
|
|
|
+ dataIndex: "RENAME" + i,
|
|
|
+ key: it.tempFeildId,
|
|
|
+ sorter: true,
|
|
|
+ width: 120,
|
|
|
+ fixed: it.isFixed == 1 ? 'left' : undefined,
|
|
|
+ align: "center"
|
|
|
+ });
|
|
|
}
|
|
|
+ console.log("getTableColumns", rtns);
|
|
|
+ return rtns;
|
|
|
},
|
|
|
- mounted(){
|
|
|
- console.log("mounted" , "");
|
|
|
- },
|
|
|
- methods:{
|
|
|
- getTableColumns:function (){
|
|
|
- let rtns: TableColumnsType = [];
|
|
|
- let cols = this.bases.concat(this.measures);
|
|
|
- for(let i=0;i<cols.length; i++){
|
|
|
- let it = cols[i];
|
|
|
- rtns.push({
|
|
|
- title: it.displayName?it.displayName:it.fieldName,
|
|
|
- dataIndex: "RENAME" + i,
|
|
|
- key: it.tempFeildId,
|
|
|
- sorter: true,
|
|
|
- align:"center"});
|
|
|
- }
|
|
|
- console.log("getTableColumns", rtns);
|
|
|
- return rtns;
|
|
|
- },
|
|
|
- pageChange: function(pag: { pageSize: number; current: number } , filters: any, sorter: any){
|
|
|
- this.pagination.current = pag.current;
|
|
|
- this.pagination.pageSize = pag.pageSize;
|
|
|
- console.log("sorter",sorter, filters);
|
|
|
+ pageChange: function (pag: { pageSize: number; current: number }, filters: any, sorter: any) {
|
|
|
+ this.pagination.current = pag.current;
|
|
|
+ this.pagination.pageSize = pag.pageSize;
|
|
|
+ console.log("sorter", sorter, filters);
|
|
|
|
|
|
- this.pagination.orderBy = sorter.column ? sorter.columnKey : null;
|
|
|
- this.pagination.orderByString = sorter.column ? sorter.order.replace("end","") : null;
|
|
|
+ this.pagination.orderBy = sorter.column ? sorter.columnKey : null;
|
|
|
+ this.pagination.orderByString = sorter.column ? sorter.order.replace("end", "") : null;
|
|
|
|
|
|
- this.loading = true;
|
|
|
- this.displayChange(this.getPagination());
|
|
|
- },
|
|
|
- setData : function (result){
|
|
|
- console.log(result);
|
|
|
- if(result["code"]!=0) this.dataList = [];
|
|
|
- else{
|
|
|
- this.dataList = result["rows"];
|
|
|
- this.pagination.total = result["total"];
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- },
|
|
|
- reader: function () {
|
|
|
- this.columns = this.getTableColumns();
|
|
|
- this.dataList = [];
|
|
|
- this.pagination.current = 1;
|
|
|
- this.pagination.total = 0;
|
|
|
- },
|
|
|
- getPagination:function (){
|
|
|
- return {
|
|
|
- page : this.pagination.current,
|
|
|
- rows : this.pagination.pageSize,
|
|
|
- orderBy : this.pagination.orderBy,
|
|
|
- orderByString : this.pagination.orderByString
|
|
|
- };
|
|
|
+ this.loading = true;
|
|
|
+ this.displayChange(this.getPagination());
|
|
|
+ },
|
|
|
+ setData: function (result) {
|
|
|
+ console.log(result);
|
|
|
+ if (result["code"] != 0) this.dataList = [];
|
|
|
+ else {
|
|
|
+ this.dataList = result["rows"];
|
|
|
+ this.pagination.total = result["total"];
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
+ },
|
|
|
+ reader: function () {
|
|
|
+ this.columns = this.getTableColumns();
|
|
|
+ this.dataList = [];
|
|
|
+ this.pagination.current = 1;
|
|
|
+ this.pagination.total = 0;
|
|
|
+ },
|
|
|
+ getPagination: function () {
|
|
|
+ return {
|
|
|
+ page: this.pagination.current,
|
|
|
+ rows: this.pagination.pageSize,
|
|
|
+ orderBy: this.pagination.orderBy,
|
|
|
+ orderByString: this.pagination.orderByString
|
|
|
+ };
|
|
|
}
|
|
|
- })
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped></style>
|
xiaoqiao