archives/src/views/user/project.vue

<template>
     <div class="hc-page-box">
           <HcCard class="hc-card-table-box" :class="isTableInfo?'info':''">
               <HcCardItem class="hc-card-table-data">
                   <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCurrentRow isCheck @selection-change="tableSelection" @row-click="tableRowClick">
                       <template #action="{row}">
                           <el-button type="primary" size="small" @click.stop="viewClick(row)">查看数据</el-button>
                       </template>
                   </HcTable>
                   <template #action>
                       <HcPages :pages="searchForm" @change="pageChange"/>
                   </template>
               </HcCardItem>

               <HcCardItem class="hc-card-table-info" scrollbar>
                   <template #header>
                       <div class="hc-project-box">
                           <div class="hc-project-icon">
                               <HcIcon name="stack"/>
                           </div>
                           <div class="ml-2 project-name">{{tableRow.projectName}}</div>
                       </div>
                   </template>
                   <template #extra>
                       <div class="hc-close-icon" @click="closeClick">
                           <HcIcon name="close" class="text-hover"/>
                       </div>
                   </template>
                   <div class="hc-table-data-info">
                       <div class="item">
                           <div class="title">项目概况：</div>
                           <div class="content">{{tableRow.projectGist}}</div>
                       </div>
                       <div class="item">
                           <div class="title">建设工期：</div>
                           <div class="content">{{tableRow.projectGist}}</div>
                       </div>
                       <div class="item">
                           <div class="title">总里程：</div>
                           <div class="content">120（KM）</div>
                       </div>
                       <div class="item">
                           <div class="title">投资预算：</div>
                           <div class="content">{{tableRow.estimatedAmount}}（万）</div>
                       </div>
                       <div class="item">
                           <div class="title">开工时间：</div>
                           <div class="content">{{tableRow.actualStartTime}}</div>
                       </div>
                       <div class="item">
                           <div class="title">完工时间：</div>
                           <div class="content">{{tableRow.actualEndTime}}</div>
                       </div>
                   </div>
               </HcCardItem>
           </HcCard>
     </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {useRouter} from 'vue-router'

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);

//渲染完成
onMounted(() => {
    const info = useAppState.getProjectContract || []
    projectContractData(info);
})

//监听
watch(() => [
    useAppState.getProjectContract,
], ([projectContractArr]) => {
    projectContractData(projectContractArr || []);
})

const projectContractData = (arr) => {
    //console.log(arr)
    tableData.value = arr
}

//搜索内容
const searchForm = ref({
    current: 1, size: 20, total: 0
})

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key:'projectName', name: '项目名称', width: 600},
    {key:'key2', name: '入库时间'},
    {key:'key3', name: '案卷总量'},
    {key:'key4', name: '责任单位'},
    {key:'action', name: '操作', width: 120},
])

const tableData = ref([])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

const isTableInfo = ref(false)
const tableRow = ref({})
const tableRowClick = ({row}) => {
    tableRow.value = row
    isTableInfo.value = true
}
const closeClick = () => {
    isTableInfo.value = false
}

//查看
const viewClick = (row) => {
    projectId.value = row?.id
    //设置缓存
    useAppState.setProjectInfo(row)
    useAppState.setProjectId(row?.id)
    //跳转
    // router.push({path: '/home/index'});
    router.push({path: '/using/stats'});//跳转到档案统计页面
}

</script>

<style lang="scss" scoped>
.hc-card-table-box {
    .hc-card-table-info {
        display: none;
    }
    &.info {
        .hc-card-table-data {
            height: calc(100% - 340px);
        }
        .hc-card-table-info {
            display: block;
            height: 320px;
            margin-top: 20px;
            .hc-project-box {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 16px;
                .hc-project-icon {
                    position: relative;
                    display: flex;
                    align-items: center;
                }
            }
            .hc-close-icon {
                color: initial;
                font-size: 18px;
            }
            .hc-table-data-info {
                position: relative;
                .item {
                    position: relative;
                    display: flex;
                    .title {
                        width: 90px;
                    }
                    .content {
                        position: relative;
                        flex: 1;
                    }
                }
                .item + .item {
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>