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 class="relative h-full">
            <div class="hc-task-name relative">【{{ taskInfo.taskName }}】2019-10-17 中间计量申请 【第1期】 审批信息</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 class="hc-time-line">
                            <template v-for="(item, index) in flowList" :key="index">
                                <el-timeline-item :class="item.currentBol ? 'success' : item.current ? 'primary' : ''" size="large">
                                    <div class="timeline-item-icon">
                                        <hc-icon v-if="item.currentBol" class="check-icon" name="check" />
                                    </div>
                                    <div class="reply-name">{{ item.name }}</div>
                                    <div class="reply-time">{{ item.time }}</div>
                                    <div class="reply-content" v-html="item.content" />
                                </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">
                        <hc-table
                            ref="tableRef" :column="tableColumn" :datas="tableData"
                            :loading="tableLoading" :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.isRemark ? '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.state === 1" class="i-iconoir-xmark-circle-solid is-danger" />
                                    <i v-else-if="row.state === 2" class="i-iconoir-check-circle-solid is-success" />
                                    <span v-else-if="row.state === 3">审批结束</span>
                                    <i v-else class="i-iconoir-help-circle-solid" />
                                </div>
                            </template>
                        </hc-table>
                    </hc-body>
                </div>
                <div :id="`hc_task_form_${uuid}`" class="hc-task-form">
                    <hc-body class="hc-task-body-card" padding="10px" scrollbar>
                        <HcTaskForm v-model="tableInfo" :is-edit="tabsKey === 1" :type="rowInfo.type" />
                    </hc-body>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="hc-task-dialog-footer">
                <el-button :loading="rejectionLoading" @click="rejectionClick">驳回审批</el-button>
                <el-button type="primary" :loading="confirmLoading" @click="confirmClick">同意审批</el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { getArrValue, getRandom } from 'js-fast-way'
import HcTaskForm from './task-form.vue'

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

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

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

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

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

//监听显示
watch(isShow, (val) => {
    if (val) {
        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 = async () => {
    const { taskName, type } = rowInfo.value
    taskInfo.value.taskName = taskName
    taskInfo.value.type = type
    if (type === 1) {
        tableColumn.value = middlepayTableColumn.value
    } else if (type === 2) {
        tableColumn.value = startWorkTableColumn.value
    } else if (type === 3) {
        tableColumn.value = alterTableColumn.value
    } else if (type === 4) {
        tableColumn.value = materialTableColumn.value
    } else {
        tableColumn.value = []
    }
    getTableData().then()
}

//流程信息
const flowList = ref([
    { currentBol: true, current: false, name: '张三', time: '2023-10-17 10:00:21', content: '上报' },
    { currentBol: false, current: true, name: '李四', time: '2023-11-01 09:00:21', content: '结束流程</br>同意' },
])

//中间计量单的表格数据
const middlepayTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'key1', name: '计量单编号' },
    { key: 'key2', name: '计量金额', width: 100 },
    { key: 'key3', name: '工程划分' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])
//开工预付款计量单的表格数据
const startWorkTableColumn = ref([
    { key: 'action', name: '批注', width: 45, align: 'center' },
    { key: 'key1', name: '计量期', minWidth: 100, align: 'center' },
    { key: 'key2', name: '业务日期', width: 160, align: 'center' },
    { key: 'key3', 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: 'key1', name: '变更编号', minWidth: 120, align: 'center' },
    { key: 'key2', name: '变更名称', minWidth: 120, align: 'center' },
    { key: 'key3', name: '变更金额', width: 100, align: 'center' },
    { key: 'key4', 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: 'key1', name: '计量期', minWidth: 100, align: 'center' },
    { key: 'key2', name: '合同材料', minWidth: 120, align: 'center' },
    { key: 'key3', name: '材料到场编号', width: 120, align: 'center' },
    { key: 'key4', name: '计量金额', width: 100, align: 'center' },
    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
])

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([])
const tableData = ref([
    { isRemark: false, key1: '你猜1', key2: '猜猜1', state: 1 },
    { isRemark: false, key1: '你猜2', key2: '猜猜2', state: 1 },
    { isRemark: true, key1: '你猜3', key2: '猜猜3', state: 2 },
    { isRemark: true, key1: '你猜4', key2: '猜猜4', state: 2 },
])
const getTableData = async () => {
    //tableData.value = []
    tableLoading.value = true
    /*const { data } = await mainApi.getPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    tableData.value = getArrValue(data)*/
    tableLoading.value = false
    //默认选中第一行
    let info = {}
    if (tableData.value.length > 0) {
        info = tableData.value[0]
    }
    await nextTick(() => {
        tableInfo.value = info
        tableRef.value?.tableRef?.setCurrentRow(info)
    })
    //getTableDetail(info).then()
}

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

//批注
const rowRemarkClick = (row) => {

}


//确认审批
const confirmLoading = ref(false)
const confirmClick = () => {
    //emit('finish')
}

//驳回审批
const rejectionLoading = ref(false)
const rejectionClick = () => {

}

//取消审批
const cancelClick = () => {
    isShow.value = false
    taskInfo.value = {}
    rowInfo.value = {}
    tabsKey.value = ''
    tableLoading.value = false
    tableColumn.value = []
    //tableData.value = []
    emit('close')
}
</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;
    }
}
</style>