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

<template>
    <hc-new-dialog v-model="isShow" :footer="false" 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 padding="10px" scrollbar style="background: #f7f7f7;">
                        111
                    </hc-body>
                </div>
                <div class="hc-task-table">
                    <hc-body padding="10px" scrollbar style="background: #f7f7f7;">
                        222
                    </hc-body>
                </div>
                <div class="hc-task-form">
                    <hc-body padding="10px" scrollbar style="background: #f7f7f7;">
                        222
                    </hc-body>
                </div>
            </div>
        </div>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

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

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

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

//监听
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()
})

//设置任务信息
const setTaskInfo = async () => {

}

//表格数据
const tableColumn = ref([
    { key: 'key1', name: '名称' },
])
const tableData = ref([])

const tableRowClick = () => {

}

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

//取消审批
const cancelClick = () => {
    isShow.value = false
    taskInfo.value = {}
    rowInfo.value = {}
    tabsKey.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: 200px;
    }
    .hc-task-table, .hc-task-form {
        position: relative;
        height: 100%;
        flex: 1;
        flex-basis: auto;
    }
    .hc-task-table {
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
    }
}
</style>