analysis/src/views/project/modules/project-list.vue

<template>
    <div class="hc-full">
        <hc-table
            :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" is-check :check-style="{ fixed: true, width: 29 }"
            class="hc-project-list-table" @selection-change="tableCheckChange"
        >
            <template #key1="{ row }">
                <el-link type="primary" @click="rowNameClick(row)">{{ row.key1 }}</el-link>
            </template>
            <template #action="{ row }">
                <el-link v-if="isAdminAuth" type="warning" @click="completion(row)">项目完成情况</el-link>
                <el-link type="primary" @click="examine(row)">查看</el-link>
                <el-link v-if="isAdminAuth" v-del-com:[delTableItem]="row" type="danger">删除</el-link>
                <el-link v-yes-com:[deriveTableItem]="row" type="success">导出</el-link>
            </template>
        </hc-table>
        <!-- 查看详情 -->
        <hc-drawer v-model="isDrawer" to-id="hc-main-box" is-close>
            <hc-card class="hc-project-list-drawer">
                <template #header>
                    <div class="flex-1 text-center text-[24px] font-bold">项目详情</div>
                </template>
                <hc-info-table>
                    <tr>
                        <hc-info-table-td is-title width="30px" center>项目阶段</hc-info-table-td>
                        <hc-info-table-td center>开工项目</hc-info-table-td>
                        <hc-info-table-td is-title width="30px" center>项目类型</hc-info-table-td>
                        <hc-info-table-td center>高速公路</hc-info-table-td>
                    </tr>
                    <tr>
                        <hc-info-table-td is-title width="30px" center>项目名称</hc-info-table-td>
                        <hc-info-table-td center>成渝高速</hc-info-table-td>
                        <hc-info-table-td is-title width="30px" center>建设规模</hc-info-table-td>
                        <hc-info-table-td center>你猜</hc-info-table-td>
                    </tr>
                    <tr>
                        <hc-info-table-td is-title width="30px" center>开 工 年</hc-info-table-td>
                        <hc-info-table-td center>2023</hc-info-table-td>
                        <hc-info-table-td is-title width="30px" center>完 工 年</hc-info-table-td>
                        <hc-info-table-td center>2024</hc-info-table-td>
                    </tr>
                    <tr>
                        <hc-info-table-td is-title width="30px" center>牵头单位</hc-info-table-td>
                        <hc-info-table-td center>重庆建设集团</hc-info-table-td>
                        <hc-info-table-td is-title width="30px" center rowspan="2">配合单位</hc-info-table-td>
                        <hc-info-table-td center rowspan="2">你猜</hc-info-table-td>
                    </tr>
                    <tr>
                        <hc-info-table-td is-title width="30px" center>责任单位</hc-info-table-td>
                        <hc-info-table-td center>你猜啊</hc-info-table-td>
                    </tr>
                </hc-info-table>
                <div class="hc-project-list-drawer-year">
                    <el-scrollbar>
                        <div class="relative p-3">
                            <hc-card contents>
                                <template #header>
                                    <div class="flex-1 text-center text-[14px]">
                                        <HcDropdown />
                                    </div>
                                </template>
                                1111
                            </hc-card>
                        </div>
                    </el-scrollbar>
                </div>
            </hc-card>
        </hc-drawer>
    </div>
</template>

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

const props = defineProps({
    isAdmin: {
        type: Boolean,
        default: false,
    },
})

//事件
const emit = defineEmits(['tap', 'completion', 'examine', 'del', 'export', 'check'])

//监听权限
const isAdminAuth = ref(props.isAdmin)
watch(() => props.isAdmin, (admin) => {
    isAdminAuth.value = admin
})

//渲染完成
onMounted(() => {

})

//表头
const tableColumn = ref([
   { key: 'key1', name: '项目名称' },
   { key: 'key2', name: '项目类型' },
   { key: 'key3', name: '建设规模' },
   { key: 'key4', name: '开工年' },
   { key: 'key5', name: '完工年' },
   { key: 'key6', name: '牵头单位' },
   { key: 'key7', name: '配合单位' },
   { key: 'key8', name: '责任单位' },
   {
       name: '2024年',
       children: [
           { key: 'key9', name: '全年投资(亿元)' },
           { key: 'key10', name: '预计一季度完成投资比例(亿元)' },
           { key: 'key11', name: '预计二季度完成投资比例(亿元)' },
           { key: 'key12', name: '预计三季度完成投资比例(亿元)' },
           { key: 'key13', name: '预计四季度完成投资比例(亿元)' },
           {
               name: '投资完成金额(亿元)',
               children: [
                   {
                       name: '一季度',
                       children: [
                           { key: 'january', name: '1月' },
                           { key: 'february', name: '2月' },
                           { key: 'march', name: '3月' },
                       ],
                   },
                   {
                       name: '二季度',
                       children: [
                           { key: 'april', name: '4月' },
                           { key: 'may', name: '5月' },
                           { key: 'june', name: '6月' },
                       ],
                   },
                   {
                       name: '三季度',
                       children: [
                           { key: 'july', name: '7月' },
                           { key: 'august', name: '8月' },
                           { key: 'september', name: '9月' },
                       ],
                   },
                   {
                       name: '四季度',
                       children: [
                           { key: 'october', name: '10月' },
                           { key: 'november', name: '11月' },
                           { key: 'december', name: '12月' },
                       ],
                   },
               ],
           },
           { key: 'key15', name: '当年累计完成投资(亿元)' },
           { key: 'key16', name: '开工累计完成投资(亿元)' },
           { key: 'key17', name: '全年目标' },
           { key: 'key18', name: '一季度工作计划' },
           { key: 'key19', name: '二季度工作计划' },
           { key: 'key20', name: '三季度工作计划' },
           { key: 'key21', name: '四季度工作计划' },
           {
               name: '工作计划完成情况',
               children: [
                   {
                       name: '1月',
                       children: [
                           { key: 'january1', name: '累计进展情况' },
                           { key: 'january2', name: '当月进展情况' },
                           { key: 'january3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '2月',
                       children: [
                           { key: 'february1', name: '累计进展情况' },
                           { key: 'february2', name: '当月进展情况' },
                           { key: 'february3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '3月',
                       children: [
                           { key: 'march1', name: '累计进展情况' },
                           { key: 'march2', name: '当月进展情况' },
                           { key: 'march3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '4月',
                       children: [
                           { key: 'april1', name: '累计进展情况' },
                           { key: 'april2', name: '当月进展情况' },
                           { key: 'april3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '5月',
                       children: [
                           { key: 'may1', name: '累计进展情况' },
                           { key: 'may2', name: '当月进展情况' },
                           { key: 'may3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '6月',
                       children: [
                           { key: 'june1', name: '累计进展情况' },
                           { key: 'june2', name: '当月进展情况' },
                           { key: 'june3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '7月',
                       children: [
                           { key: 'july1', name: '累计进展情况' },
                           { key: 'july2', name: '当月进展情况' },
                           { key: 'july3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '8月',
                       children: [
                           { key: 'august1', name: '累计进展情况' },
                           { key: 'august2', name: '当月进展情况' },
                           { key: 'august3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '9月',
                       children: [
                           { key: 'september1', name: '累计进展情况' },
                           { key: 'september2', name: '当月进展情况' },
                           { key: 'september3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '10月',
                       children: [
                           { key: 'october1', name: '累计进展情况' },
                           { key: 'october2', name: '当月进展情况' },
                           { key: 'october3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '11月',
                       children: [
                           { key: 'november1', name: '累计进展情况' },
                           { key: 'november2', name: '当月进展情况' },
                           { key: 'november3', name: '形象进度百分比' },
                       ],
                   },
                   {
                       name: '12月',
                       children: [
                           { key: 'december1', name: '累计进展情况' },
                           { key: 'december2', name: '当月进展情况' },
                           { key: 'december3', name: '形象进度百分比' },
                       ],
                   },
               ],
           },
           { key: 'key23', name: '存在问题' },
           { key: 'key24', name: '工作建议' },
           { key: 'key25', name: '填报单位' },
           { key: 'key26', name: '联系人' },
       ],
   },
    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
])

//表格数据
const tableData = ref([
   { key1: '名称1', key2: '-', key3: '-' },
   { key1: '名称2', key2: '-', key3: '-' },
   { key1: '名称3', key2: '-', key3: '-' },
   { key1: '名称4', key2: '-', key3: '-' },
   { key1: '名称5', key2: '-', key3: '-' },
])

//表格被选择
const tableCheckKeys = ref([])
const tableCheckChange = (rows) => {
    tableCheckKeys.value = rows
    emit('check', rows)
}

//项目名称被点击
const rowNameClick = (row) => {
    emit('tap', row)
}

//项目完成情况
const completion = (row) => {
    console.log('项目完成情况')
    emit('completion', row)
}

//查看
const isDrawer = ref(false)
const examine = (row) => {
    isDrawer.value = true
    emit('examine', row)
}

//删除
const delTableItem = ({ item }, resolve) => {
    console.log('我被执行了', item)
    //这里可以写一些操作，下面是模拟3秒关闭
    setTimeout(() => {
        resolve()
        emit('del', item)
    }, 3000)
}

//导出数据
const deriveTableItem = ({ item }, resolve) => {
    console.log('我被执行了', item)
    //这里可以写一些操作，下面是模拟3秒关闭
    setTimeout(() => {
        resolve()
        emit('export', item)
    }, 3000)
}

//批量删除
const batchRemove = () => {
    if (!isAdminAuth.value) return
    const rows = tableCheckKeys.value
    console.log('批量删除', rows)
}

//批量导出
const batchExport = () => {
    const rows = tableCheckKeys.value
    console.log('批量导出', rows)
}

defineExpose({
    batchRemove,
    batchExport,
})
</script>

<style lang="scss">
.hc-project-list-table .el-table[hc].new {
    --el-table-header-bg-color: #101010;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #101010;
    thead.is-group th.el-table__cell {
        background: var(--el-table-header-bg-color);
    }
    thead .el-table-fixed-column--left.el-table__cell,
    thead .el-table-fixed-column--right.el-table__cell {
        background: var(--el-table-header-bg-color) !important;
    }
    tbody .el-table-fixed-column--left.el-table__cell,
    tbody .el-table-fixed-column--right.el-table__cell {
        background: var(--el-table-tr-bg-color) !important;
    }
    .el-table__body tr.current-row>td.el-table__cell {
        background-color: var(--el-table-current-row-bg-color) !important;
    }
}
.hc-project-list-drawer-year {
    position: relative;
    border: 1px solid #dddddd;
    border-top: 0;
    height: calc(100% - 170px);
}
</style>