leromro-web/src/views/components/ListPage/index.vue

<template>
    <div class="list-page">
        <el-tabs v-model="tabsValue" type="card" class="demo-tabs"  @tab-change="changeTab" v-if="tabList && tabList.length > 0">
            <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.title" :name="item.name"></el-tab-pane>
        </el-tabs>
        <div class="search-div">
            <Search :column="searchColumn" @submit="searchSubmit" @reset="resetForm" :searchBtns="searchBtns" :tabsValue="tabsValue"/>
        </div>
        <div class="table-div">
            <Table :isScope="isScope" :tableKey="tableKey" ref="tableRef" :column="tableColumn" :data="tableData.list" :loading="loading" :scopeBtns="scopeBtns" :isSelect="isSelect" />
        </div>
        <div class="pagination-div">
            <slot name="footerLeft"></slot>
            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive, watch } from 'vue';
import Search from './Search.vue';
import Table from './Table.vue';
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
const props = defineProps({
    column: {
        type: Object,
        default: [],
        required: true
    },
    scopeBtns: {
        type: Array,
        default: [],
    },
    tableApi: {
        type: Function,
        default: () => { },
        required: true
    },
    searchBtns: {
        type: Array,
        default: [],
    },
    tableKey:{
        type: String,
        default: 'id',
    },
    tabList:{
        type: Array,
        default:[]
    },
    tabsearchKey:{
        type: String,
        default: ''
    },
    isSelect:{
        type: Boolean,
        default: true
    },
    defaultTab:{
        type: String,
        default: '2'
    },
    isScope:{
        type: Boolean,
        default: true
    },
})
const tabsValue = ref('2')



const queryParams = reactive({
    pageNum: 1,
    pageSize: 10
})

const tableData = ref({
    total: 0,
    list: []
})

const loading = ref(false)
const tableRef = ref(null)

const searchColumn = computed(() => {
    return props.column.filter(item => item.isSearch);
})

const tableColumn = computed(() => {
    return props.column
})

//表单提交
const searchSubmit = (parmas) => {
    getList(parmas)
}
//表单重置
const resetForm = () => {
    Object.assign(queryParams, {
        pageNum: 1,
        pageSize: 10
    })

    //清除选中的row
    tableRef.value.resetIds();
    getList({})
}

const changeTab = (tab) => {
    console.log('tab', tab);

    resetForm();
}

watch(() =>tabsValue.value,()=>{
    sessionStorage.setItem('tabsValue',tabsValue.value)
} )

const getList = async (parmas) => {
    try {
        loading.value = true;
        const searchData = {...queryParams, ...parmas}
        if(props.tabsearchKey){
            searchData[props.tabsearchKey] = tabsValue.value;
        }
        console.log('查询条件',queryParams,parmas);
        const response = await props.tableApi(searchData);
        tableData.value = {
            total: response.total,
            list: response.rows
        }
    } catch (error) {
        console.error('error', error);
    } finally {
        loading.value = false;
    }
}



const ids = computed(() =>{
    const _d = tableRef.value.ids;
    if(_d && _d.length <= 0){
        ElMessage({
            message: '请选择需要操作的数据!',
            type: 'warning',
        })
        return []
    }
    return tableRef.value.ids
})

const handleExist = (value) => {
const f = props.tabList.filter(item => item.name === value);
return f && f.length > 0
}

onMounted(() => {
  const tabs = sessionStorage.getItem('tabsValue');  
  if(tabs && handleExist(tabs)){
    tabsValue.value = tabs;
  }else{
    tabsValue.value = props.defaultTab;
  }
  getList();
})


defineExpose({
    ids,
    resetForm,
    tabsValue
})
</script>

<style lang='scss' scoped>
.list-page {
    padding: 20px;
}
</style>