analysis/src/views/project/ledger.vue

<template>
    <hc-tab-card w-to="1450" :tabs="tabsData" :tab-key="tabsKey" class="hc-project-ledger-page" @change="tabsChange">
        <template #extraToSearch>
            <div v-if="tabsKey === '1'" class="hc-flex">
                <hc-date-year v-model="searchForm1.startYear" v-model:end="searchForm1.endYear" />
                <div class="relative ml-3 w-[300px]">
                    <hc-search-input v-model="searchForm1.queryValue" text="搜索" color="#151921" @search="searchClick1">
                        <template #prepend>
                            <el-select v-model="searchForm1.year" placeholder="年份" clearable style="width: 80px">
                                <el-option label="2023" value="2023" />
                                <el-option label="2024" value="2024" />
                            </el-select>
                        </template>
                    </hc-search-input>
                </div>
            </div>
        </template>
        <template #extra>
            <div v-if="tabsKey === '1'" class="hc-flex">
                <div class="ml-6 w-[120px]">
                    <el-select v-model="searchForm1.key1" filterable clearable block placeholder="项目阶段" @change="searchClick1">
                        <el-option v-for="item in projectStage" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="ml-2 w-[100px]">
                    <el-select v-model="searchForm1.key2" filterable clearable block placeholder="项目类型" @change="searchClick1">
                        <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <el-button v-yes-com:[deriveTableItem1] :disabled="tableCheckKeys1.length <= 0" type="primary" class="ml-2">批量导出</el-button>
            </div>
            <div v-if="tabsKey === '2'" class="hc-flex">
                <hc-date-year v-model="searchForm2.startYear" v-model:end="searchForm2.endYear" />
                <div class="relative ml-3 w-[260px]">
                    <hc-search-input v-model="searchForm2.targetPlan" color="#151921" text="搜索" @search="searchClick2" />
                </div>
                <div class="ml-6 w-[120px]">
                    <el-select v-model="searchForm2.workFocusStage" filterable clearable block placeholder="项目阶段" @change="searchClick2">
                        <el-option v-for="item in projectStage" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <el-button v-yes-com:[deriveTableItem2] :disabled="tableCheckKeys2.length <= 0" type="primary" class="ml-2">批量导出</el-button>
            </div>
        </template>
        <HcTableList1 v-if="tabsKey === '1'" ref="table1Ref" />
        <HcTableList2 v-if="tabsKey === '2'" :datas="tableData2" :loading="tableLoading2" @tap="rowNameClick2" @check="tableCheck2" @change="searchClick2" />
        <template #action>
            <hc-pages v-if="tabsKey === '1'" :pages="searchForm1" @change="pageChange1" />
            <hc-pages v-if="tabsKey === '2'" :pages="searchForm2" @change="pageChange2" />
        </template>
    </hc-tab-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getDictionaryData } from '~src/utils/tools'
import { arrToId, getArrValue, newDownBlob } from 'js-fast-way'
import mainApi from '~api/project/gist'

//子组件
import HcTableList1 from './modules/project-list.vue'
import HcTableList2 from './modules/gist-list.vue'

//选项卡切换
const tabsKey = ref('1')
const tabsData = ref([
    { key: '1', name: '项目资料' },
    { key: '2', name: '工作要点' },
])
const tabsChange = ({ key }) => {
    tabsKey.value = key
    if (key === '1') {
        searchClick1()
    } else if (key === '2') {
        searchClick2()
    }
}

//渲染完成
onMounted(() => {
    getDataApi()
})

//获取接口数据
const projectStage = ref([])//项目阶段
const getDataApi = async () => {
    projectStage.value = await getDictionaryData('projectStage', true)
}

//项目类型
const typeData = ref([{ value: '1', label: '铁路' }, { value: '2', label: '高速公路' }])

//搜索条件
const searchForm1 = ref({
    startYear: '', endYear: '', queryValue: '', year: '',
    current: 1, size: 20, total: 0,
})
const searchForm2 = ref({
    targetPlan: '', workFocusStage: null,
    current: 1, size: 20, total: 0,
})

//搜索
const searchClick1 = () => {

}
const searchClick2 = () => {
    searchForm2.value.current = 1
    getTableData2()
}

//分页
const pageChange1 = ({ current, size }) => {
    searchForm1.value.current = current
    searchForm1.value.size = size
}

//分页
const pageChange2 = ({ current, size }) => {
    searchForm2.value.current = current
    searchForm2.value.size = size
    getTableData2()
}

const table1Ref = ref(null)

//表格数据
const tableData2 = ref([])
const tableLoading2 = ref(false)

//表格被选择
const tableCheckKeys1 = ref([])
const tableCheckKeys2 = ref([])
const tableCheck2 = (row) => {
    tableCheckKeys2.value = row
}

//获取表格数据
const getTableData2 = async () => {
    tableData2.value = []
    tableLoading2.value = true
    const { error, code, data } = await mainApi.page(searchForm2.value)
    //处理数据
    tableLoading2.value = false
    if (!error && code === 200) {
        tableData2.value = getArrValue(data['records'])
        searchForm2.value.total = data.total || 0
    } else {
        tableData2.value = []
        searchForm2.value.total = 0
    }
}

//名称被点击
const rowNameClick2 = (row) => {
    console.log(row)
}

//批量导出
const deriveTableItem1 = async (_, resolve) => {
    resolve()
}

//批量导出
const deriveTableItem2 = async (_, resolve) => {
    const ids = arrToId(tableCheckKeys2.value)
    const { error, val } = await mainApi.exportWorkfocus(ids)
    if (error) {
        window.$message?.error('数据异常')
        resolve()
        return
    }
    await newDownBlob(val)
    resolve()
}
</script>

<style lang="scss">
@import '~src/styles/project/ledger';
</style>