hac/src/views/home/components/TaskTable.vue

<template>
    <HcCard>
        <template #header>
            <div class="w-36 mr-4" v-if="isTableKey !== '1'">
                <el-select v-model="searchForm.selectStatus" block clearable placeholder="选择审批状态" size="large">
                    <el-option v-for="item in reportTypes" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-36 mr-4">
                <el-select v-model="searchForm.taskType" block clearable placeholder="选择上报类型" size="large">
                    <el-option v-for="item in reportings" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
            </div>
            <div class="mx-2">~</div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
            </div>
            <div class="ml-4">
                <el-button size="large" type="primary" @click="searchClick">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>
        <HcTable indexName="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #taskName="{row}">
                <span class="text-blue text-hover" @click="rowNameClick(row)">{{row.taskName}}</span>
            </template>
            <template #status="{row}">
                <span class="text-orange" v-if="row.status === 0">未上报</span>
                <span class="text-orange" v-if="row.status === 1">待审批</span>
                <span class="text-green" v-if="row.status === 2">已审批</span>
                <template v-if="row.status === 3">
                    <el-popover placement="top-start" title="驳回原因" :width="200" :hide-after="0" content="这里是驳回原因说明内容">
                        <template #reference>
                            <span class="text-red">已驳回</span>
                        </template>
                    </el-popover>
                </template>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, nextTick, watch,onMounted} from "vue";
import {useRouter} from 'vue-router'
import {getArrValue} from "js-fast-way"
import taskApi from '~api/home/task.js';

const router = useRouter()

//参数
const props = defineProps({
    tableKey: {
        type: String,
        default: ''
    }
})

//变量
const isTableKey = ref(props.tableKey);
const reportTypes = ref([
    {name: '待审批', key: 2},
    {name: '已驳回', key: 3},
])

//选择上报类型
const reportings = ref([
    {name: '任务审批', key: 1},
    {name: '采购审批', key: 2},
    {name: '用车审批', key: 3},
    {name: '报销审批', key: 4},
    {name: '借款审批', key: 5},
])
onMounted(()=>{
    getTableData()
})
//监听
watch(() => [
    props.tableKey,
], ([Key]) => {
    isTableKey.value = Key
    getTableData()
})

//搜索表单
const searchForm = ref({
    selectStatus: null, startTime: null, endTime: null, reporting: null,selectType:parseInt(isTableKey.value),
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    console.log(searchForm.value)
    getTableData()
}

//重置
const resetClick = () => {
    searchForm.value = {
        selectStatus: null, startTime: null, endTime: null,selectType:parseInt(isTableKey.value),
        current: 1, size: 20, total: 0
    }
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = ref([
    {key: 'taskName', name: '任务名称'},
    {key: 'reportDate', name: '上报日期', width: '160', align: 'center'},
    {key: 'auditDate', name: '审核日期', width: '160', align: 'center'},
    {key: 'reportTypeName', name: '上报类型', width: '120', align: 'center'},
    {key: 'status', name: '审核状态', width: '100', align: 'center'},
    {key: 'reportUserName', name: '上报人', width: '120', align: 'center'},
    {key: 'auditUserNames', name: '审核人', width: '120', align: 'center'},
])
const tableData = ref([])
const getTableData = async() => {
    //const key = isTableKey.value
    tableLoading.value = true
    const {error, code, data} = await taskApi.getPage(searchForm.value)
    //判断状态
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total'] || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//任务名称被点击
const rowNameClick = (row) => {
    router.push({
        name: 'home-task-details', query: {
            id: row.id,
            type: row?.reportTypeName,
            tabsKey:isTableKey.value,
          
        }
    })
}
</script>

<style lang="scss" scoped>

</style>