measure/src/views/tasks/hc-data.vue

<template>
    <hc-tab-card :tabs="tabsData" :tab-key="tabsKey" @change="tabsClick">
        <!-- template v-if="tabsKey === '1'" #extra>
            <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="primary" @click="batchApprovalTaskClick">批量审批</el-button>
        </template -->
        <template #search>
            <div class="w-32">
                <el-select v-model="searchForm.typeValue" clearable block placeholder="任务类型11111111">
                    <el-option v-for="item in tasksType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
            </div>
            <div class="ml-2 w-32">
                <el-select v-model="searchForm.statusValue" clearable block placeholder="任务状态">
                    <el-option v-for="item in tasksStatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
            </div>
            <div class="ml-2 w-32">
                <el-select v-model="searchForm.batchValue" clearable block placeholder="上报批次">
                    <!-- el-option v-for="item in reportBatch" :label="item.batch" :value="item.batch" / -->
                </el-select>
            </div>
            <div class="ml-2 w-64">
                <hc-date-picker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
            </div>
            <hc-search-input v-model="searchForm.queryValue" class="ml-2" placeholder="请输入名称关键词检索" @search="searchClick" />
        </template>
        <hc-table
            ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading"
            is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
            @selection-change="tableSelectionChange"
        >
            <template #taskName="{ row }">
                <span class="text-link" @click="rowTaskName(row)">{{ row?.taskName }}</span>
            </template>
            <template #taskStatusName="{ row }">
                <el-tooltip effect="dark" :content="row.rejectDesc" placement="top" :disabled="row.taskStatusName !== '已废除'">
                    <HcTaskTag :name="row.taskStatusName" :type="`${row.taskStatusName === '已审批' ? 'success' : row.taskStatusName === '已废除' ? 'warning' : 'info'}`" />
                </el-tooltip>
            </template>
            <template #taskApproveUserNamesList="{ row }">
                <template v-for="(item, index) in row.taskApproveUserNamesList" :key="index">
                    <HcTaskTag :name="item.taskUserName" :type="`${item.evisaStatus === 2 ? 'success' : item.evisaStatus === 3 ? 'warning' : item.evisaStatus === 999 ? 'danger' : 'info'}`" />
                </template>
            </template>
        </hc-table>
        <template #action>
            <div class="lr-dialog-footer">
                <div class="left">
                    <span class="text-success">审批人员中：</span>
                    <el-tag class="mx-1" effect="dark" type="info">未签字</el-tag>
                    <el-tag class="mx-1" effect="dark" type="success">已签字</el-tag>
                    <el-tag class="mx-1" effect="dark" type="warning">已废除</el-tag>
                    <el-tag class="mx-1" effect="dark" type="danger">签字异常</el-tag>
                </div>
                <div class="right">
                    <hc-pages :pages="searchForm" :sizes="[50, 100, 150, 200, 300]" @change="pageChange" />
                </div>
            </div>
        </template>
        <!-- 任务审核 -->
        <taskReview v-model="isTaskReviewModalshow" :tabs="tabsKey" :row="taskReviewRow" @finish="taskReviewFinish" />
    </hc-tab-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/tasks/hc-data'
import { useAppStore } from '~src/store'
import taskReview from './components/hc-data/task-review.vue'
import HcTaskTag from './components/hc-data/task-tag.vue'

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')

//渲染完成
onActivated(() => {
    queryTaskType()
    queryTaskStatus()
    getTableData()
})

//类型处理
const tabsKey = ref('1')
const tabsData = [
    { key: '1', name: '待办任务' },
    { key: '2', name: '已办任务' },
    { key: '3', name: '我发起的' },
   
]
const tabsClick = ({ key }) => {
    tabsKey.value = key
    searchForm.value.selectedType = key
    searchForm.value.current = 1
    getTableData()
}

//搜索条件
const searchForm = ref({
    selectedType: 1, typeValue: '', statusValue: '', batchValue: '', queryValue: '', startTimeValue: '', endTimeValue: '',
    current: 1, size: 100, total: 0,
})

//获取任务类型
const tasksType = ref([])
const queryTaskType = async () => {
    const { data } = await mainApi.queryTaskType()
    tasksType.value = getArrValue(data)
 
}

//获取任务状态
const tasksStatus = ref([])
const queryTaskStatus = async () => {
    const { data } = await mainApi.queryTaskStatus({ typeOrStatus: 'task_status' })
    // tasksStatus.value = getArrValue(data)
    tasksStatus.value = [{ dictKey: '1', dictValue: '待审批' }, { dictKey: '2', dictValue: '已审批' }, { dictKey: '3', dictValue: '已废除' }, { dictKey: '4', dictValue: '可审批' }] 
}

//日期范围选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ val, arr }) => {
    betweenTime.value = arr
    searchForm.value.startTimeValue = val['start']
    searchForm.value.endTimeValue = val['end']
}

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

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

//获取数据
const tableListRef = ref(null)
const tableListColumn = ref([
    { key: 'taskName', name: '任务名称', autoWidth: true },
    { key: 'taskTypeName', name: '任务类型', width: '120' },
    { key: 'taskStatusName', name: '任务状态', width: '120' },
    { key: 'startTime', name: '开始时间', width: '160' },
    { key: 'endTime', name: '限定时间', width: '160' },
    { key: 'taskDesc', name: '任务描述', autoWidth: true },
    { key: 'taskReportUserName', name: '上报人', width: '120' },
    { key: 'fixedFlowName', name: '任务流程', width: '120' },
    { key: 'taskApproveUserNamesList', name: '签字人员', autoWidth: true },
    { key: 'evisaStatus', name: '电签状态', width: '120' },
])
const tableListData = ref([])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    //清空数据
    tableListData.value = []
    tableListRef.value?.clearSelection()
    tableCheckedKeys.value = []
    //发起请求
    const { error, code, data } = await mainApi.getPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableListData.value = getArrValue(data?.records)
        searchForm.value.total = data.total || 0
    } else {
        tableListData.value = []
        searchForm.value.total = 0
    }
}

//多选
const tableCheckedKeys = ref([])
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}

//任务名称被点击
const taskReviewRow = ref({})
const isTaskReviewModalshow = ref(false)
const rowTaskName = (row) => {
    taskReviewRow.value = row
    nextTick(() => {
        isTaskReviewModalshow.value = true
    })
}

//审批完成
const taskReviewFinish = () => {
    getTableData()
}
</script>