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
                                                    @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="is-success i-iconoir-check-circle-solid"
                                            />
                                            <i
                                                v-else-if="row.status === 2"
                                                class="is-danger i-iconoir-xmark-circle-solid"
                                            />
                                            <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="hc-bt-0 text-box"
                                        >
                                            <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="hc-bt-0 input">
                                            <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
                                                        && !meterApproveOpinion1.supervisorAuditDefault
                                                "
                                                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 textarea-container">
                                                <el-input
                                                    v-model="
                                                        meterApproveOpinion2.supervisorAudit
                                                    "
                                                    :autosize="{
                                                        minRows: 2,
                                                        maxRows: 4,
                                                    }"
                                                    type="textarea"
                                                />
                                                <div v-if="!meterApproveOpinion1.supervisorAuditDefault" class="suffix-icon">
                                                    <span>(不填写默认为拟同意)</span>
                                                </div>
                                            </div>
                                        </template>

                                        <div class="input-box">
                                            <div class="box">
                                                <div class="name hc-bt-0">
                                                    工程建设部意见：
                                                </div>
                                                <div
                                                    v-if="
                                                        meterApproveOpinion1.projectBuild
                                                            && !meterApproveOpinion1.projectBuildDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.projectBuild
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.projectBuildDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name hc-bt-0 no-b">
                                                    分管领导意见：
                                                </div>
                                                <div
                                                    v-if="
                                                        meterApproveOpinion1.projectBuildLeader
                                                            && !meterApproveOpinion1.projectBuildLeaderDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.projectBuildLeader
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.projectBuildLeaderDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </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
                                                            && !meterApproveOpinion1.safetyManagerDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.safetyManager
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.safetyManagerDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name no-b hc-bt-0">
                                                    分管领导意见：
                                                </div>
                                                <div
                                                    v-if="
                                                        meterApproveOpinion1.safetyManagerLeader
                                                            && !meterApproveOpinion1.safetyManagerLeaderDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.safetyManagerLeader
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.safetyManagerLeaderDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-box">
                                            <div class="box">
                                                <div class="name hc-bt-0">
                                                    合同部意见：
                                                </div>
                                                <div
                                                    v-if="
                                                        meterApproveOpinion1.contractDept
                                                            && !meterApproveOpinion1.contractDeptDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.contractDept
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.contractDeptDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <div class="name no-b hc-bt-0">
                                                    分管领导意见：
                                                </div>
                                                <div
                                                    v-if="
                                                        meterApproveOpinion1.contractDeptLeader
                                                            && !meterApproveOpinion1.contractDeptLeaderDefault
                                                    "
                                                    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 textarea-container"
                                                >
                                                    <el-input
                                                        v-model="
                                                            meterApproveOpinion2.contractDeptLeader
                                                        "
                                                        :autosize="{
                                                            minRows: 2,
                                                            maxRows: 4,
                                                        }"
                                                        type="textarea"
                                                    />
                                                    <div v-if="!meterApproveOpinion1.contractDeptLeaderDefault" class="suffix-icon">
                                                        <span>(不填写默认为拟同意)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="name hc-bt-0">
                                            总经理意见：
                                        </div>
                                        <div
                                            v-if="
                                                meterApproveOpinion1.generalManager
                                                    && !meterApproveOpinion1.generalManagerDefault
                                            "
                                            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 textarea-container">
                                            <el-input
                                                v-model="
                                                    meterApproveOpinion2.generalManager
                                                "
                                                :autosize="{
                                                    minRows: 2,
                                                    maxRows: 4,
                                                }"
                                                type="textarea"
                                            />
                                            <div v-if="!meterApproveOpinion1.generalManagerDefault" class="suffix-icon">
                                                <span>(不填写默认为拟同意)</span>
                                            </div>
                                        </div>

                                        <div class="name no-b hc-bt-0">
                                            董事长意见：   
                                        </div>
                                        <div
                                            v-if="
                                                meterApproveOpinion1.chiefExecutive
                                                    && !meterApproveOpinion1.chiefExecutiveDefault
                                            "
                                            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 textarea-container">
                                            <el-input
                                                v-model="
                                                    meterApproveOpinion2.chiefExecutive
                                                "
                                                :autosize="{
                                                    minRows: 2,
                                                    maxRows: 4,
                                                }"
                                                type="textarea"
                                            />
                                            <div v-if="!meterApproveOpinion1.chiefExecutiveDefault" class="suffix-icon">
                                                <span>(不填写默认为同意)</span>
                                            </div>
                                        </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">施工单位送审金额: {{ submitApprovalMoney }}元</span>
                            <!-- 183系统显示施工单位送审金额： -->
                            <span v-if="website.localModel" class="mr-14px">报表实际支付金额：{{ reportAllMoney }}元</span>
                            <span v-else 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'
import website from '~src/config'

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)

const isOverTask = ref(false)//是否结束任务

watch(
    () => [props.tabs, props.row],
    ([key, row]) => {
        tabsKey.value = Number(key)
        rowInfo.value = row
        const { taskStatusName } = rowInfo.value
        isOverTask.value = taskStatusName === '已审批'
    
   
        

   
        
    },
    {
        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 submitApprovalMoney = ref('')

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
    submitApprovalMoney.value = infoData?.submitApprovalMoney
    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

   // if (isOverTask.value) {
          //设置默认值
       // setDefaultOpinion()
    //}
  

    //默认选中第一行
    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
}
const setDefaultValue = (field, defaultOpinion) => {
    if (isNullES(meterApproveOpinion1.value[field])) {
        meterApproveOpinion2.value[field] = defaultOpinion
        meterApproveOpinion1.value[`${field}Default`] = true
    } else if (meterApproveOpinion1.value[field] === defaultOpinion) {
        meterApproveOpinion1.value[`${field}Default`] = true
    } else {
        meterApproveOpinion1.value[`${field}Default`] = false
    }
}

const setDefaultOpinion = () => {
    const defaultOpinion = '拟同意'
    //setDefaultValue('chiefSupervisor', defaultOpinion)
    setDefaultValue('supervisorAudit', defaultOpinion)
    setDefaultValue('projectBuild', defaultOpinion)
    setDefaultValue('projectBuildLeader', defaultOpinion)
    setDefaultValue('safetyManager', defaultOpinion)
    setDefaultValue('safetyManagerLeader', defaultOpinion)
    setDefaultValue('contractDept', defaultOpinion)
    setDefaultValue('contractDeptLeader', defaultOpinion)
    setDefaultValue('generalManager', defaultOpinion)

    // 注意：这里修改为了与其他默认意见一致
    setDefaultValue('chiefExecutive', '同意')
}

//流程信息，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 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>
.textarea-container {
  position: relative;
}

.suffix-icon {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 14px;
  color: #888;
}
.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>