measure/src/views/tasks/components/hc-data/task-review.vue

<template>
    <hc-new-dialog v-model="isShow" is-table widths="96%" title="任务审核" @close="cancelClick">
        <template #header="{ titleId, titleClass }">
            <div class="hc-card-header flex items-center">
                <div :id="titleId" :class="titleClass">任务审核 【已开启电签】</div>
            </div>
        </template>
        <div v-loading="isLoading" class="relative h-full">
            <div class="hc-task-name relative">{{ rowInfo.taskName }} 审批信息</div>
            <div class="hc-task-body relative flex">
                <div class="hc-task-time">
                    <hc-body class="hc-task-body-card" padding="10px" scrollbar>
                        <el-timeline v-if="rowInfo.fixedFlowId == null" class="hc-time-line">
                            <template v-for="(item, index) in flowList" :key="index">
                                <el-timeline-item :class="item.status === '2' ? 'success' : 'primary'" size="large">
                                    <div class="timeline-item-icon">
                                        <hc-icon v-if="item.status === '2'" class="check-icon" name="check" />
                                    </div>
                                    <div class="reply-name">{{ item.name }}</div>
                                    <div class="reply-time">{{ item.date }}</div>
                                    <div class="reply-content" v-html="item.flowValue" />
                                </el-timeline-item>
                            </template>
                        </el-timeline>
                        <el-timeline v-else class="hc-time-line">
                            <template v-for="(item, index) in flowListTask" :key="index">
                                <el-timeline-item :class="item.status == '2' ? 'success' : 'primary'" size="large">
                                    <div class="timeline-item-icon">
                                        <hc-icon v-if="item.status == '2'" class="check-icon" name="check" />
                                    </div>
                                    <div v-if="!item.isTask" class="reply-name">{{ item.name }}</div>
                                    <div v-if="item.isTask">
                                        <div class="reply-name">
                                            {{ item.name }}
                                            <hc-icon v-if="item.type == 2" name="links" class="ml-2" />
                                            <hc-icon v-if="item.type == 1" name="exchange-2" class="ml-2" />
                                            <br>
                                            <el-tooltip placement="right" effect="light" :visible="item.taskDetailvisible">
                                                <template #content>
                                                    <el-timeline class="hc-time-line">
                                                        <template v-for="(item1, index1) in item.userList" :key="index1">
                                                            <el-timeline-item :class="item1.status === '2' ? 'success' : 'primary'" size="large">
                                                                <div class="timeline-item-icon">
                                                                    <hc-icon v-if="item1.status === '2'" class="check-icon" name="check" />
                                                                </div>
                                                                <div class="reply-name">{{ item1.name }}</div>
                                                                <div class="reply-time">{{ item1.date }}</div>
                                                                <div class="reply-content" v-html="item1.flowValue" />
                                                            </el-timeline-item>
                                                        </template>
                                                    </el-timeline>
                                                </template>
                                                <el-link @click="getTaskDetail" @mouseenter="item.taskDetailvisible = true" @mouseleave="item.taskDetailvisible = false">点击查看详情</el-link>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                    <div class="reply-time">{{ item.date }}</div>
                                    <div class="reply-content" v-html="item.flowValue" />
                                </el-timeline-item>
                            </template>
                        </el-timeline>
                    </hc-body>
                </div>
                <div :id="`hc_task_table_${uuid}`" class="hc-task-table">
                    <hc-body class="hc-task-body-card" padding="10px">
                        <div class="hc-task-body-table">
                            <hc-tab-card :tabs="tabsData" :tab-key="tabKey" @change="tabsChange">
                                <hc-table
                                    v-if="tabKey === '1'" ref="tableRef" :column="tableColumn" :datas="tableData"
                                    :is-stripe="false" is-new :index-style="{ width: 60 }" is-current-row
                                    @row-click="tableRowClick"
                                >
                                    <template #action="{ row }">
                                        <div class="hc-task-table-action" :class="row.isComment === 1 ? 'is-cur' : ''" @click="rowRemarkClick(row)">
                                            <i class="i-iconoir-star-solid" />
                                        </div>
                                    </template>
                                    <template #state="{ row }">
                                        <div class="hc-task-table-state">
                                            <i v-if="row.status === 1" class="i-iconoir-check-circle-solid is-success" />
                                            <i v-else-if="row.status === 2" class="i-iconoir-xmark-circle-solid is-danger" />
                                            <span v-else-if="row.status === 3">审批结束</span>
                                            <i v-else class="i-iconoir-help-circle-solid" />
                                        </div>
                                    </template>
                                </hc-table>
                                <div v-if="tabKey === '2'" class="hc-task-body-table-form">
                                    <template v-if="rowInfo.meterType === 1 || rowInfo.meterType === 3">
                                        <div class="title-box">
                                            <div v-if="meterApproveOpinion1.projectName" class="title">{{ meterApproveOpinion1.projectName }}</div>
                                            <div class="text">审批意见</div>
                                        </div>
                                        <!--
                                        <div class="name">计量工程师意见：</div>
                                        <div v-if="meterApproveOpinion1.meterEngineer" class="text-box hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.meterEngineer }}</div>
                                            <div v-if="meterApproveOpinion1.meterEngineerUserName" class="sign-name">
                                                <div class="user-name">工程部：{{ meterApproveOpinion1.meterEngineerUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.meterEngineerTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.meterEngineer" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>

                                        <div class="name hc-bt-0">项目经理意见：</div>
                                        <div v-if="meterApproveOpinion1.projectManager" class="text-box hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.projectManager }}</div>
                                            <div v-if="meterApproveOpinion1.projectManagerUserName" class="sign-name">
                                                <div class="user-name">工程部：{{ meterApproveOpinion1.projectManagerUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.projectManagerTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.projectManager" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>

                                        <div class="name hc-bt-0">合同监理工程师意见：</div>
                                        <div v-if="meterApproveOpinion1.contractSupervisorEngineer" class="text-box hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.contractSupervisorEngineer }}</div>
                                            <div v-if="meterApproveOpinion1.contractSupervisorEngineerUserName" class="sign-name">
                                                <div class="user-name">工程部：{{ meterApproveOpinion1.contractSupervisorEngineerUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.contractSupervisorEngineerTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.contractSupervisorEngineer" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>

                                        <div class="name hc-bt-0">业主代表意见：</div>
                                        <div v-if="meterApproveOpinion1.ownerDelegate" class="text-box hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.ownerDelegate }}</div>
                                            <div v-if="meterApproveOpinion1.ownerDelegateUserName" class="sign-name">
                                                <div class="user-name">工程部：{{ meterApproveOpinion1.ownerDelegateUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.ownerDelegateTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.ownerDelegate" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>
                                        -->

                                        <div class="name">总监理工程师意见：</div>
                                        <div v-if="meterApproveOpinion1.chiefSupervisor" class="text-box hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.chiefSupervisor }}</div>
                                            <div v-if="meterApproveOpinion1.chiefSupervisorUserName" class="sign-name">
                                                <div class="user-name">{{ meterApproveOpinion1.chiefSupervisorUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.chiefSupervisorTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.chiefSupervisor" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>

                                        <template v-if="rowInfo.meterType === 3">
                                            <div class="name hc-bt-0">监理审核意见：</div>
                                            <div v-if="meterApproveOpinion1.supervisorAudit" class="text-box hc-bt-0">
                                                <div class="content">{{ meterApproveOpinion1.supervisorAudit }}</div>
                                                <div v-if="meterApproveOpinion1.supervisorAuditUserName" class="sign-name">
                                                    <div class="user-name">{{ meterApproveOpinion1.supervisorAuditUserName }}</div>
                                                    <div class="user-time">{{ meterApproveOpinion1.supervisorAuditTime }}</div>
                                                </div>
                                            </div>
                                            <div v-else class="input hc-bt-0">
                                                <el-input v-model="meterApproveOpinion2.supervisorAudit" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                            </div>
                                        </template>

                                        <div class="input-box">
                                            <div class="box">
                                                <div class="name hc-bt-0">工程建设部意见：</div>
                                                <div v-if="meterApproveOpinion1.projectBuild" class="text-box hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.projectBuild }}</div>
                                                    <div v-if="meterApproveOpinion1.projectBuildUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.projectBuildUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.projectBuildTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.projectBuild" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name no-b hc-bt-0">分管领导意见：</div>
                                                <div v-if="meterApproveOpinion1.projectBuildLeader" class="text-box no-b hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.projectBuildLeader }}</div>
                                                    <div v-if="meterApproveOpinion1.projectBuildLeaderUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.projectBuildLeaderUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.projectBuildLeaderTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input no-b hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.projectBuildLeader" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="rowInfo.meterType === 1" class="input-box">
                                            <div class="box">
                                                <div class="name hc-bt-0">安全管理部意见：</div>
                                                <div v-if="meterApproveOpinion1.safetyManager" class="text-box hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.safetyManager }}</div>
                                                    <div v-if="meterApproveOpinion1.safetyManagerUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.safetyManagerUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.safetyManagerTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.safetyManager" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name no-b hc-bt-0">分管领导意见：</div>
                                                <div v-if="meterApproveOpinion1.safetyManagerLeader" class="text-box no-b hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.safetyManagerLeader }}</div>
                                                    <div v-if="meterApproveOpinion1.safetyManagerLeaderUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.safetyManagerLeaderUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.safetyManagerLeaderTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input no-b hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.safetyManagerLeader" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-box">
                                            <div class="box">
                                                <div class="name hc-bt-0">合同部意见：</div>
                                                <div v-if="meterApproveOpinion1.contractDept" class="text-box hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.contractDept }}</div>
                                                    <div v-if="meterApproveOpinion1.contractDeptUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.contractDeptUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.contractDeptTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.contractDept" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name no-b hc-bt-0">分管领导意见：</div>
                                                <div v-if="meterApproveOpinion1.contractDeptLeader" class="text-box no-b hc-bt-0">
                                                    <div class="content">{{ meterApproveOpinion1.contractDeptLeader }}</div>
                                                    <div v-if="meterApproveOpinion1.contractDeptLeaderUserName" class="sign-name">
                                                        <div class="user-name">{{ meterApproveOpinion1.contractDeptLeaderUserName }}</div>
                                                        <div class="user-time">{{ meterApproveOpinion1.contractDeptLeaderTime }}</div>
                                                    </div>
                                                </div>
                                                <div v-else class="input no-b hc-bt-0">
                                                    <el-input v-model="meterApproveOpinion2.contractDeptLeader" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="name hc-bt-0">总经理意见：</div>
                                        <div v-if="meterApproveOpinion1.generalManager" class="text-box no-b hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.generalManager }}</div>
                                            <div v-if="meterApproveOpinion1.generalManagerUserName" class="sign-name">
                                                <div class="user-name">{{ meterApproveOpinion1.generalManagerUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.generalManagerTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.generalManager" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>

                                        <div class="name no-b hc-bt-0">董事长意见：</div>
                                        <div v-if="meterApproveOpinion1.chiefExecutive" class="text-box no-b hc-bt-0">
                                            <div class="content">{{ meterApproveOpinion1.chiefExecutive }}</div>
                                            <div v-if="meterApproveOpinion1.chiefExecutiveUserName" class="sign-name">
                                                <div class="user-name">{{ meterApproveOpinion1.chiefExecutiveUserName }}</div>
                                                <div class="user-time">{{ meterApproveOpinion1.chiefExecutiveTime }}</div>
                                            </div>
                                        </div>
                                        <div v-else class="input no-b hc-bt-0">
                                            <el-input v-model="meterApproveOpinion2.chiefExecutive" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                                        </div>
                                    </template>
                                    <template v-else>
                                        <hc-empty />
                                    </template>
                                </div>
                            </hc-tab-card>
                        </div>
                        <div v-if="!isNullES(detailInfo.opinionType)" class="hc-task-body-tip hc-flex h-30px">
                            <span class="mr-14px">上报总金额：{{ reportAllMoney }}元</span>
                            <span v-if="detailInfo.opinionType != 4">本期审核进度款：{{ progressMoney }}元</span>
                        </div>
                    </hc-body>
                </div>
                <div :id="`hc_task_form_${uuid}`" class="hc-task-form" :class="`is-tab-${taskTabsKey}`">
                    <hc-body class="hc-task-body-card" padding="10px" scrollbar>
                        <HcTaskForm ref="htmlFormRef" :table="tableInfo" :info="rowInfo" :detail="detailInfo" :is-edit="tabsKey === 1" @finish="taskFormFinish" @tab-tap="taskTabsClick" />
                    </hc-body>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="hc-task-dialog-footer">
                <el-button :disabled="tabsKey !== 1" @click="rejectionClick">驳回审批</el-button>
                <el-button v-if="rowInfo.meterType > 0 && rowInfo.meterType <= 3" type="warning" :loading="rowViewLoading" @click="rowViewPdf">查看报表</el-button>
                <el-button type="primary" :loading="confirmLoading" :disabled="tabsKey !== 1" @click="confirmClick">同意审批</el-button>
            </div>
        </template>
    </hc-new-dialog>
    <!-- 批注 -->
    <HcTaskNotes v-model="isNotesShow" :table="tableNoteInfo" :info="rowInfo" :is-edit="tabsKey === 1" @finish="taskNotesFinish" />
    <!-- 驳回 -->
    <HcRepealForm v-model="isRepealShow" :info="rowInfo" @finish="taskRepealFinish" />
    <!-- 短信认证 -->
    <HcSmsAuth :loading="SMSAuthLoading" :show="SMSAuthShow" @cancel="SMSAuthCancel" @confirm="SMSAuthConfirm" />
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { toPdfPage } from '~uti/btn-auth'
import HcTaskForm from './task-form.vue'
import HcTaskNotes from './task-notes.vue'
import HcRepealForm from './repeal-form.vue'
import { arrUnion, deepClone, getArrValue, getObjValue, getRandom, isNullES } from 'js-fast-way'
import mainApi from '~api/tasks/hc-data'
import dayjs from 'dayjs'

const props = defineProps({
    tabs: {
        type: [String, Number],
        default: '',
    },
    row: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['finish', 'close'])
const uuid = getRandom(4)

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

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
const tableRef = ref(null)
const tabsKey = ref(Number(props.tabs))
const rowInfo = ref(props.row)

watch(() => [props.tabs, props.row], ([key, row]) => {
    tabsKey.value = Number(key)
    rowInfo.value = row
}, {
    immediate: true,
    deep: true,
})

//监听显示
watch(isShow, (val) => {
    if (val) {
        checkSmsCode()
        setTaskInfo()
        setSplitRef()
    }
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_task_table_' + uuid, '#hc_task_form_' + uuid], {
            sizes: [50, 50],
            snapOffset: 0,
            minSize: [50, 500],
        })
    })
}

//设置任务信息
const setTaskInfo = () => {
    //meterType：1中间，2材料，3开工，4变更令
    const { meterType } = rowInfo.value
    if (meterType === 1) {
        tableColumn.value = middlepayTableColumn.value
    } else if (meterType === 2) {
        tableColumn.value = materialTableColumn.value
    } else if (meterType === 3) {
        tableColumn.value = startWorkTableColumn.value
    } else if (meterType === 4) {
        tableColumn.value = alterTableColumn.value
    } else {
        tableColumn.value = []
    }
    getTableDetail()
}

//获取数据详情
const detailInfo = ref({})
const reportAllMoney = ref('0')
const progressMoney = ref('0')
const meterApproveOpinion1 = ref({})
const meterApproveOpinion2 = ref({})
const isLoading = ref(false)
const getTableDetail = async () => {
    isLoading.value = true
    confirmLoading.value = true
    //获取数据
    const { data } = await mainApi.getDetail(rowInfo.value.id)
    const infoData = getObjValue(data)
    const { taskProcessInfo, taskCenterDataInfo } = infoData
    tableData.value = getArrValue(taskCenterDataInfo)
    flowList.value = getArrValue(taskProcessInfo)
    reportAllMoney.value = infoData.reportAllMoney
    progressMoney.value = infoData.progressMoney
    detailInfo.value = infoData
    if (rowInfo.value?.fixedFlowId) {
        const list = [...flowList.value]
        let firstarr = list.slice(0, 1)
        let taskList = list.slice(1, list.length)
        taskList.forEach((ele)=>{
            ele.name = ele.taskBranchName
            ele.status = ele.taskBranchStatus
            ele.type = ele.taskBranchType
            ele.isTask = true
        })
        flowListTask.value = arrUnion(firstarr, taskList)
    }
    //意见信息
    const meterRes = getObjValue(data.meterApproveOpinion)
    meterApproveOpinion2.value = deepClone(meterRes)
    meterApproveOpinion1.value = meterRes

    //默认选中第一行
    let info = {}
    if (tableData.value.length > 0) {
        info = tableData.value[0]
    }
    await nextTick(() => {
        tableInfo.value = info
        tableRef.value?.tableRef?.setCurrentRow(info)
    })
    //关闭加载状态
    isLoading.value = false
    confirmLoading.value = false
}

//流程信息，1待审批，2已审批
const flowList = ref([])
//type为1流程审批，type为2是平行审批
const flowListTask = ref([
    { name: 'PCT', date: '2024-03-01 09:27:17', status: '2', flowValue: '上报', isTask:false },
    { name: '"222"', date: '', status: '2', flowValue: '', type:1, isTask:true },
    { name: '"111"', date: '', status: '1', flowValue: '', type:2, isTask:true },

])
const taskDetailList = ref([])

//中间计量单的表格数据
const middlepayTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'meterNumber', name: '计量单编号' },
    { key: 'meterMoney', name: '计量金额', width: 100 },
    { key: 'engineerDivide', name: '工程划分' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])
//开工预付款计量单的表格数据
const startWorkTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'periodName', name: '计量期', minWidth: 100, align: 'center' },
    { key: 'businessDate', name: '业务日期', width: 160, align: 'center' },
    { key: 'meterMoney', name: '计量金额', width: 100, align: 'center' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])
//变更令的表格数据
const alterTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'changeNumber', name: '变更编号', minWidth: 120, align: 'center' },
    { key: 'changeName', name: '变更名称', minWidth: 120, align: 'center' },
    { key: 'changeMoney', name: '变更金额', width: 100, align: 'center' },
    { key: 'changeApprovalDate', name: '变更批复日期', width: 160, align: 'center' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])
//材料计量单的表格数据
const materialTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'periodName', name: '计量期', minWidth: 100, align: 'center' },
    { key: 'contractMaterialName', name: '合同材料', minWidth: 120, align: 'center' },
    { key: 'materialArriveNumber', name: '材料到场编号', width: 120, align: 'center' },
    { key: 'meterMoney', name: '计量金额', width: 100, align: 'center' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])

//表格数据
const tableColumn = ref([])
const tableData = ref([])

//表格行被点击
const tableInfo = ref({})
const tableRowClick = ({ row }) => {
    tableInfo.value = row
}

//批注, isComment 是否已批注，1=是，0=否
const isNotesShow = ref(false)
const tableNoteInfo = ref({})
const rowRemarkClick = (row) => {
    tableNoteInfo.value = row
    nextTick(() => {
        isNotesShow.value = true
    })
}

//批注完成
const taskNotesFinish = () => {
    getTableDetail()
}

//单条审批
const taskFormFinish = () => {
    getTableDetail()
}

//确认审批
const confirmLoading = ref(false)
const confirmClick = () => {
    const ShowAuth = isCheckSmsCodeTime()
    SMSAuthShow.value = ShowAuth
    //免短信验证
    if (!ShowAuth) SMSAuthConfirm()
}

//驳回审批
const isRepealShow = ref(false)
const rejectionClick = async () => {
    isRepealShow.value = true
}

//驳回完成
const taskRepealFinish = () => {
    emit('finish')
    cancelClick()
}

//取消审批
const cancelClick = () => {
    isShow.value = false
    isLoading.value = false
    confirmLoading.value = false
    tableColumn.value = []
    tableData.value = []
    tableInfo.value = {}
    emit('close')
}
const taskDetailvisible = ref(false)
const getTaskDetail = ()=>{
    taskDetailvisible.value = true
}

//短信验证有效期
const smsCodeTime = ref('')
const checkSmsCode = async () => {
    const { data } = await mainApi.checkSmsCode()
    smsCodeTime.value = data ? data : ''
}

//验证短信有效期
const isCheckSmsCodeTime = () => {
    const smsTime = smsCodeTime.value
    if (isNullES(smsTime)) {
        return true
    } else {
        const toDayTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
        return dayjs(smsTime).isBefore(toDayTime)
    }
}

//短信验证
const SMSAuthLoading = ref(false)
const SMSAuthShow = ref(false)
const htmlFormRef = ref(null)
const SMSAuthConfirm = async () => {
    confirmLoading.value = true
    const tableData = htmlFormRef.value?.getTableForm()
    const { error, code, msg } = await mainApi.taskApprove({
        tableData: tableData,
        taskId: rowInfo.value.id,
        projectId: projectId.value,
        contractId: contractId.value,
        meterApproveOpinion: meterApproveOpinion2.value,
    })
    if (!error && code === 200) {
        window.$message.success('审批成功')
        await checkSmsCode()
        confirmLoading.value = false
        emit('finish')
        SMSAuthCancel()
        cancelClick()
    } else {
        confirmLoading.value = false
        window.$message.error(msg ?? '审批失败')
    }
}
const SMSAuthCancel = () => {
    SMSAuthShow.value = false
}

//选项卡被切换
const taskTabsKey = ref('key1')
const taskTabsClick = (key) => {
    taskTabsKey.value = key
}

//查看报表
const rowViewLoading = ref(false)
const rowViewPdf = async () => {
    const { type, reportId } = detailInfo.value
    if (isNullES(reportId)) {
        window.$message.warning('参数异常')
        return
    }
    rowViewLoading.value = true
    const { code, msg, data } = await mainApi.taskMeterPdfInfo({
        reportId: reportId,
        type: type,
        taskType: 10,
        taskId: rowInfo.value.id,
    })
    rowViewLoading.value = false
    if (code === 200 && !isNullES(data)) {
        window.$message.success('操作成功')
        toPdfPage(data)
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}

//选项卡
const tabKey = ref('1')
const tabsData = [
    { key: '2', name: '意见信息' },
    { key: '1', name: '计量单信息' },
]
const tabsChange = ({ key }) => {
    tabKey.value = key
}
</script>

<style lang="scss" scoped>
.hc-task-name {
    font-weight: bold;
    color: #1A1a1a;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.hc-task-body {
    height: calc(100% - 27px);
    .hc-task-time {
        position: relative;
        height: 100%;
        flex-shrink: 0;
        width: 170px;
    }
    .hc-task-table, .hc-task-form {
        position: relative;
        height: 100%;
        flex: 1;
        flex-basis: auto;
    }
    .hc-task-table {
        border-left: 1px solid #e5e5e5;
    }
}


//表格图标
.hc-task-table-action, .hc-task-table-state {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #929293;
    i {
        display: inline-flex;
    }
}

//表格批注
.hc-task-table-action.is-cur {
    color: #F2B90B;
}

//表格状态
.hc-task-table-state {
    .is-success {
        color: #25a62d;
    }
    .is-danger {
        color: #F5221D;
    }
    span {
        color: #1A1a1a;
    }
}

//弹窗底部
.hc-task-dialog-footer {
    position: relative;
    text-align: center;
}
</style>

<style lang="scss">
.hc-task-body-card {
    background: #f7f7f7;
    .el-scrollbar__bar.is-vertical {
        right: -8px;
    }
    .hc-task-body-table {
        position: relative;
        height: calc(100% - 30px);
        .hc-task-body-table-form {
            position: relative;
            height: 100%;
            overflow: auto;
            .title-box {
                position: relative;
                text-align: center;
                margin-bottom: 10px;
                .title {
                    font-size: 18px;
                    margin-bottom: 20px;
                }
                .text {
                    font-size: 15px;
                }
            }
            .text-box {
                position: relative;
                border: 1px solid #4b4b4b;
                padding: 8px 3px;
                display: flex;
                align-items: center;
                font-size: 12px;
                .content {
                    position: relative;
                    flex: 1;
                    padding-right: 20px;
                }
                .sign-name {
                    position: relative;
                    .user-time {
                        margin-top: 10px;
                    }
                }
            }
            .name {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 13px;
                border: 1px solid #4b4b4b;
                background: #eef3f7;
                padding: 8px 3px;
            }
            .input {
                position: relative;
                border: 1px solid #4b4b4b;
                padding: 2px;
            }
            .input-box {
                position: relative;
                display: flex;
                .box {
                    position: relative;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .name {
                        flex-shrink: 0;
                    }
                    .text-box {
                        flex: 1;
                        flex-basis: auto;
                    }
                }
                .no-b {
                    border-left: 0;
                }
            }
            .hc-bt-0 {
                border-top: 0;
            }
            .hc-bb-0 {
                border-bottom: 0;
            }
        }
    }
    .hc-task-body-tip {
        color: red;
    }
}
//html表单模式
.hc-task-body .hc-task-form.is-tab-key3 .hc-task-body-card  {
    .el-scrollbar__view {
        height: 100%;
    }
    .hc-task-form-body {
        height: 100%;
        .el-tabs {
            height: 100%;
            .el-tabs__content {
                height: calc(100% - 39px);
                #pane-key3 {
                    height: 100%;
                }
            }
        }
    }
    .hc-task-html-form-body {
        height: 100%;
        .hc-table-form-data-item .el-scrollbar__view {
            height: auto;
        }
    }
}
</style>