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

<template>
    <div v-loading="isLoading" class="hc-full" element-loading-text="加载中...">
        <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 #key2="{ row }">
                <el-link type="primary" @click="rowNameClick(row)">{{ row.key2 }}</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" is-action-btn>
                <template #header>
                    <div class="flex-1 text-center text-[24px] font-bold">工作要点详情</div>
                </template>
                <div class="hc-project-list-flex">
                    <div class="hc-project-list-info-table">
                        <hc-info-table>
                            <tr>
                                <hc-info-table-td is-title width="10%" center>项目阶段</hc-info-table-td>
                                <hc-info-table-td center width="40%">紧盯重大项目，推动交通投资稳进增效</hc-info-table-td>
                                <hc-info-table-td is-title width="10%" center>目标任务</hc-info-table-td>
                                <hc-info-table-td center width="40%">充分发挥投资的关键作用</hc-info-table-td>
                            </tr>
                        </hc-info-table>
                        <hc-info-table class="mt-[-1px]">
                            <tr>
                                <hc-info-table-td is-title width="10%" center>工作内容</hc-info-table-td>
                                <hc-info-table-td center width="90%">2024年，市交通运输委完成投资1155亿元，其中铁路计划完成投资480亿元、公路计划完成投资565亿元（高速公路建设计划投资428亿元、高速公路养护计划投资8.5亿元、普通公路建设及养护工程力争完成投资110亿元、公交及枢纽场站计划投资8.5亿元）、水运计划投资39亿元、民航计划投资70亿元、邮政计划投资1.3亿元、公交车辆购置更新等其他计划投资10亿元。</hc-info-table-td>
                            </tr>
                            <tr v-if="isDrawerType === 'view'">
                                <hc-info-table-td is-title width="10%" center>责任单位</hc-info-table-td>
                                <hc-info-table-td center width="90%">市交通运输委</hc-info-table-td>
                            </tr>
                        </hc-info-table>
                    </div>
                    <div class="hc-project-list-drawer-year">
                        <hc-body scrollbar padding="0">
                            <div class="relative p-2 pt-6">
                                <hc-card-item class="year-detail" :class="isDrawerType === 'edit' ? 'edit' : ''">
                                    <template #header>
                                        <div class="flex-1 text-center text-[14px]">
                                            <HcDropdown v-model="yearKey" :datas="yearData" />
                                        </div>
                                    </template>
                                    <el-table :data="tableYearData" border class="w-full">
                                        <el-table-column prop="month" class-name="line" width="120" align="center">
                                            <template #header>
                                                <div class="hc-table-th-line">
                                                    <span class="left">月份</span>
                                                    <span class="right">完成情况</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="key1" label="进展情况" align="center">
                                            <template #default="{ row }">
                                                <hc-body v-if="isDrawerType === 'edit'">
                                                    <hc-table-input v-model="row.key1" type="textarea" resize="none" />
                                                </hc-body>
                                                <span v-else>{{ row.key1 }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="key2" label="累计进展情况" align="center">
                                            <template #default="{ row }">
                                                <hc-body v-if="isDrawerType === 'edit'">
                                                    <hc-table-input v-model="row.key2" type="textarea" resize="none" />
                                                </hc-body>
                                                <span v-else>{{ row.key2 }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <hc-info-table class="mt-[-1px]">
                                        <tr>
                                            <hc-info-table-td is-title width="10%" center>存在问题</hc-info-table-td>
                                            <hc-info-table-td center width="40%">
                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
                                                <el-input v-else v-model="testValue" type="textarea" resize="none" />
                                            </hc-info-table-td>
                                            <hc-info-table-td is-title width="10%" center>工作建议</hc-info-table-td>
                                            <hc-info-table-td center width="40%">
                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
                                                <el-input v-else v-model="testValue" type="textarea" resize="none" />
                                            </hc-info-table-td>
                                        </tr>
                                        <tr>
                                            <hc-info-table-td is-title width="10%" center>填报单位</hc-info-table-td>
                                            <hc-info-table-td center width="40%">
                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
                                                <el-input v-else v-model="testValue" />
                                            </hc-info-table-td>
                                            <hc-info-table-td is-title width="10%" center>联系人及联系方式</hc-info-table-td>
                                            <hc-info-table-td center width="40%">
                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
                                                <el-input v-else v-model="testValue" />
                                            </hc-info-table-td>
                                        </tr>
                                    </hc-info-table>
                                </hc-card-item>
                            </div>
                        </hc-body>
                    </div>
                </div>
                <template v-if="isDrawerType === 'edit'" #action>
                    <el-button type="info" @click="isDrawer = false">取消</el-button>
                    <el-button type="warning" @click="saveCompletionClick">保存</el-button>
                </template>
            </hc-card>
        </hc-drawer>
    </div>
</template>

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

const props = defineProps({
    isAdmin: {
        type: Boolean,
        default: false,
    },
    loading: {
        type: Boolean,
        default: false,
    },
    datas: {
        type: Array,
        default: () => ([]),
    },
})

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

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

//监听数据
const tableData = ref(props.datas)
watch(() => props.datas, (data) => {
    tableData.value = data
})

//监听加载
const isLoading = ref(props.loading)
watch(() => props.loading, (res) => {
    isLoading.value = res
})

//表头
const tableColumn = [
    { key: 'workFocusStage', name: '项目阶段', width: 100 },
    { key: 'targetPlan', name: '目标任务', width: 140 },
    { key: 'workPlan', name: '工作内容' },
    { key: 'startYear', name: '开始年份', width: 100 },
    { key: 'endYear', name: '结束年份', width: 100 },
    { key: 'dutyUnit', name: '责任单位', width: 100 },
    { key: 'key7', name: '完成情况填写比例(%)', width: 100 },
    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
]

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

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

//工作完成情况
const tableYearData = ref([
    { month: '1月', key1: '', key2: '' },
    { month: '2月', key1: '', key2: '' },
    { month: '3月', key1: '', key2: '' },
    { month: '4月', key1: '', key2: '' },
    { month: '5月', key1: '', key2: '' },
    { month: '6月', key1: '', key2: '' },
    { month: '7月', key1: '', key2: '' },
    { month: '8月', key1: '', key2: '' },
    { month: '9月', key1: '', key2: '' },
    { month: '10月', key1: '', key2: '' },
    { month: '11月', key1: '', key2: '' },
    { month: '12月', key1: '', key2: '' },
])
const testValue = ref('')

//工作完成情况
const completion = (row) => {
    isDrawerType.value = 'edit'
    isDrawer.value = true
    emit('completion', row)
}

//保存工作完成情况
const saveCompletionClick = () => {
    isDrawer.value = false
    isDrawerType.value = ''
}

//查看
const isDrawer = ref(false)
const isDrawerType = ref('view')
const examine = (row) => {
    isDrawerType.value = 'view'
    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)
}

//年数据
const yearKey = ref('2023')
const yearData = ref([
    { key: '2023', label: '2023年' },
    { key: '2024', label: '2024年' },
])

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

<style lang="scss">
.hc-project-list-flex {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    .hc-project-list-info-table {
        flex-shrink: 0;
    }
    .hc-project-list-drawer-year {
        position: relative;
        border: 1px solid #dddddd;
        border-top: 0;
        flex: 1;
        flex-basis: auto;
        .el-table {
            --el-table-border-color: #dcdcdc;
            --el-table-header-text-color: #101010;
            --el-table-row-hover-bg-color: transparent;
        }
        .el-table th.el-table__cell.line {
            padding: 0;
            height: 100%;
            .cell {
                padding: 0;
                height: 100%;
                display: contents;
            }
            .hc-table-th-line {
                position: relative;
                height: 100%;
                font-size: 14px;
                display: contents;
                .left {
                    position: absolute;
                    bottom: 2px;
                    left: 10px;
                }
                .right {
                    position: absolute;
                    top: 2px;
                    right: 2px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    top: 23px;
                    left: -20px;
                    width: 180px;
                    height: 1px;
                    background: #dcdcdc;
                    transform: rotate(17.5deg);
                }
            }
        }
        &.edit .el-table--enable-row-transition .el-table__body td.el-table__cell {
            height: 60px;
        }
        .el-table .el-table__cell .cell {
            .hc-new-main-body_content {
                padding: 4px !important;
                .el-input, .el-textarea {
                    height: 100%;
                    .el-input__inner {
                        text-align: center;
                    }
                    .el-textarea__inner {
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>