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 #workPlan="{ row }">
                <el-link type="primary" @click="rowNameClick(row)">{{ row.workPlan }}</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%">{{ rowDrawerInfo.workFocusStageName }}</hc-info-table-td>
                                <hc-info-table-td is-title width="10%" center>目标任务</hc-info-table-td>
                                <hc-info-table-td center width="40%">{{ rowDrawerInfo.targetPlan }}</hc-info-table-td>
                            </tr>
                        </hc-info-table>
                        <hc-info-table v-if="isDrawerType === 'view'" class="mt-[-1px]">
                            <tr>
                                <hc-info-table-td is-title width="10%" center>开始年份</hc-info-table-td>
                                <hc-info-table-td center width="15%">{{ rowDrawerInfo.startYear }}</hc-info-table-td>
                                <hc-info-table-td is-title width="10%" center>结束年份</hc-info-table-td>
                                <hc-info-table-td center width="15%">{{ rowDrawerInfo.endYear }}</hc-info-table-td>
                                <hc-info-table-td is-title width="10%" center>责任单位</hc-info-table-td>
                                <hc-info-table-td center width="40%">{{ rowDrawerInfo.dutyUnit }}</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%">{{ rowDrawerInfo.workPlan }}</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.table" text="年" :props="{ key: 'year', label: 'year' }" @change="yearChange" />
                                        </div>
                                    </template>
                                    <el-table v-if="yearData.table && yearData.table.length > 0" :data="yearData.table[yearIndex].data" 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>
                                            <template #default="{ row }">{{ row.month }}月</template>
                                        </el-table-column>
                                        <el-table-column prop="progress" label="累计进展情况" align="center">
                                            <template #default="{ row }">
                                                <hc-body v-if="isDrawerType === 'edit'">
                                                    <hc-table-input v-model="row.progress" type="textarea" resize="none" :disabled="currentYear < yearKey" />
                                                </hc-body>
                                                <span v-else>{{ row.progress }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="problemInfo" label="存在问题" align="center">
                                            <template #default="{ row }">
                                                <hc-body v-if="isDrawerType === 'edit'">
                                                    <hc-table-input v-model="row.problemInfo" type="textarea" resize="none" :disabled="currentYear < yearKey" />
                                                </hc-body>
                                                <span v-else>{{ row.problemInfo }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="workSug" label="工作建议" align="center">
                                            <template #default="{ row }">
                                                <hc-body v-if="isDrawerType === 'edit'">
                                                    <hc-table-input v-model="row.workSug" type="textarea" resize="none" :disabled="currentYear < yearKey" />
                                                </hc-body>
                                                <span v-else>{{ row.workSug }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <hc-info-table v-if="yearData.table && yearData.table.length > 0" 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'">{{ yearData.table[yearIndex].unitInfo }}</span>
                                                <el-input v-else v-model="yearData.table[yearIndex].unitInfo" :disabled="currentYear < yearKey" />
                                            </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'">{{ yearData.table[yearIndex].linkInfo }}</span>
                                                <el-input v-else v-model="yearData.table[yearIndex].linkInfo" :disabled="currentYear < yearKey" />
                                            </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="drawerCancel">取消</el-button>
                    <el-button type="warning" :loading="saveCompletionLoading" @click="saveCompletionClick">保存</el-button>
                </template>
            </hc-card>
        </hc-drawer>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import mainApi from '~api/project/gist'
import { deepClone, getArrValue, getObjValue, newDownBlob } from 'js-fast-way'
import dayjs from 'dayjs'

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

//事件
const emit = defineEmits(['tap', 'check', 'change'])
const currentYear = new dayjs().format('YYYY')

//监听权限
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: 'workFocusStageName', 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: 'comRate', 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 rowDrawerInfo = ref({})

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

//保存工作完成情况
const saveCompletionLoading = ref(false)
const saveCompletionClick = async () => {
    saveCompletionLoading.value = true
    const form = deepClone(yearData.value)
    const { error, code, msg } = await mainApi.workFocusSubmit(form)
    saveCompletionLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        emit('change')
    } else {
        window.$message.error(msg ?? '保存失败')
    }
}

//查看
const isDrawer = ref(false)
const isDrawerType = ref('view')
const examine = (row) => {
    rowDrawerInfo.value = row
    isDrawerType.value = 'view'
    isDrawer.value = true
    getDetailData(row.id)
}

//数据详情
const yearKey = ref('2023')
const yearIndex = ref(-1)
const yearChange = (_, index) => {
    yearIndex.value = index
}

//获取数据详情
const yearData = ref({})
const getDetailData = async (id) => {
    const { error, code, data, msg } = await mainApi.queryWorkFocusProgressInfoById(id)
    if (error || code !== 200) {
        window.$message.error(msg ?? '获取数据失败')
        drawerCancel()
        return
    }
    //处理数据
    const res = getObjValue(data)
    const table = getArrValue(res.table)
    res.table = table
    yearData.value = res
    //设置默认数据
    if (table.length > 0) {
        let isIndex = false
        for (let i = 0; i < table.length; i++) {
            const planYear = table[i].year
            if (planYear === currentYear) {
                yearIndex.value = i
                yearKey.value = table[i].year
                isIndex = true
            }
        }
        //默认值
        if (!isIndex) {
            yearIndex.value = 0
            yearKey.value = table[0].year
        }
    } else {
        yearIndex.value = -1
        yearKey.value = null
    }
}

//关闭抽屉
const drawerCancel = () => {
    isDrawer.value = false
    isDrawerType.value = ''
    yearData.value = {}
    yearIndex.value = -1
    yearKey.value = null
}

//删除
const delTableItem = async ({ item }, resolve) => {
    const { error, code, msg } = await mainApi.del(item.id)
    if (!error && code === 200) {
        window.$message.success('删除成功')
        resolve()
        emit('change')
    } else {
        window.$message.error(msg ?? '删除失败')
    }
}

//导出数据
const deriveTableItem = async ({ item }, resolve) => {
    const { error, val } = await mainApi.exportWorkfocus(item.id)
    if (error) {
        window.$message?.error('数据异常')
        resolve()
        return
    }
    await newDownBlob(val)
    resolve()
}
</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>