hac/src/views/home/budget.vue

<template>
    <HcCard>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.annual" block clearable placeholder="选择年度" size="large">
                    <el-option v-for="item in annuals" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button size="large" color="#7728F5" hc-btn @click="toBudgetChartClick">
                <HcIcon name="folder-chart"/>
                <span>报表查看</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="addRowClick">
                <HcIcon name="add"/>
                <span>新增经营预算</span>
            </el-button>
        </template>

        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #action="{row,index}">
                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
                <el-button plain size="small" type="danger">删除</el-button>
            </template>
        </HcTable>

        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>
    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//年度数据
const annuals = ref([
    {name: '2023年', key: '2023'},
    {name: '2022年', key: '2022'},
    {name: '2021年', key: '2021'}
])

//搜索表单
const searchForm = ref({annual: null, current: 1, size: 20, total: 0})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'name', name: '名称'},
    {key: 'key1', name: '总经营预算', width: '140', align: 'center'},
    {key: 'key2', name: '年度合同额指标', width: '140', align: 'center'},
    {key: 'key3', name: '年度利润指标', width: '140', align: 'center'},
    {key: 'key4', name: '工资支出', width: '140', align: 'center'},
    {key: 'key5', name: '其它管理支出', width: '140', align: 'center'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableData = ref([
    {id: 1, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
    {id: 2, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
    {id: 3, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
    {id: 4, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
    {id: 5, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
    {id: 6, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
])

const getTableData = () => {

}


//编辑预算
const editRowClick = (row) => {
    router.push({
        name: 'home-budget-form', query: {
            id: row.id
        }
    })
}

//新增预算
const addRowClick = () => {
    router.push({
        name: 'home-budget-form'
    })
}

const toBudgetChartClick = () => {
    router.push({
        name: 'home-budget-chart'
    })
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>