archives/src/views/transfer/report-detail.vue

<!--  -->
<template>
    <hc-new-card>
        <template #header>
            <div class="header_box">
                <HcCardItem title="前言">
                    <div style="height: 100%;">
                        <el-input
                            v-model="consolusionData.foreword"
                            placeholder="请输入"
                            show-word-limit
                            type="textarea"
                            class="inputbox"
                            :disabled="state === 2"
                        />
                    </div>
                </HcCardItem>
            </div>
        </template>
        <el-container class="hc-table-layout">
            <el-container id="hc_table_container" class="hc-table-container">
                <HcCardItem id="hc_table_data" title="项目概况">
                    <div style="height: 100%;">
                        <el-input
                            v-model="consolusionData.generalSituation"
                            placeholder="请输入"
                            show-word-limit
                            type="textarea"
                            class="inputbox"
                            :disabled="state === 2"
                        />
                    </div>
                </HcCardItem>
                <HcCardItem id="hc_table_score" title="项目档案管理情况">
                    <div style="height: 100%;">
                        <el-input
                            v-model="consolusionData.adminCondition"
                            placeholder="请输入"
                            show-word-limit
                            type="textarea"
                            class="inputbox"
                            :disabled="state === 2"
                        />
                    </div>
                </HcCardItem>
            </el-container>
            <el-aside id="hc_table_aside" class="hc-table-aside">
                <HcCardItem title="存在问题及建议">
                    <div style="height: 100%;">
                        <el-input
                            v-model="consolusionData.questionSuggest"
                            placeholder="请输入"
                            show-word-limit
                            type="textarea"
                            class="inputbox"
                            :disabled="state === 2"
                        />
                    </div>
                </HcCardItem>
            </el-aside>
        </el-container>
    </hc-new-card>
</template>

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

const props = defineProps({
    consolusionData: {
        type: Object,
        default: () => ({
            foreword:'',
            generalSituation:'',
            questionSuggest:'',
            adminCondition	:'',
        }),
    },
    state:{
        type:[String, Number],
        default:1,
    },
  
})
//事件
const emit = defineEmits(['change'])
const consolusionData = ref(props.consolusionData)
const state = ref(props.state)
//监听
watch(() => [
    props.consolusionData,
    props.state,
], ([datas, state1]) => {
    consolusionData.value = datas
    state.value = state1
})
watch(() => [
consolusionData.value,
], ([datas]) => {
    emit('change', datas)
}, {
    deep: true,
})
//渲染完成
onMounted(() => {
    setSplitRef()
    // getConclusion()
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    setTimeout(() => {
        window.$split(['#hc_table_container', '#hc_table_aside'], {
            sizes: [50, 50],
            snapOffset: 0,
            minSize: [400, 600],
        })
        window.$split(['#hc_table_data', '#hc_table_score'], {
            direction: 'vertical',
            snapOffset: 0,
            minSize: 200,
        })
    }, 800)
}
</script>

<style lang='scss' scoped>
.header_box{
    width: 100%;
    height: 200px;
}
.hc-table-layout {
    position: relative;
    height: 100%;
    .hc-table-aside {
        position: relative;
        height: 100%;
    }
    .hc-table-container {
        position: relative;
        display: block;
        height: 100%;
        .hc-card-item-box {
            height: 50%;
        }
    }
}
</style>

<style lang="scss">
.inputbox.el-textarea{
    height: 100%;
}
.inputbox .el-textarea__inner{
    height: 100%;
}
</style>