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

<template>
    <div v-loading="!isAfterRender" element-loading-text="加载中..." class="hc-full">
        <hc-table
            v-if="isAfterRender" :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-2 pt-6">
                            <hc-card-item class="year-detail">
                                <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" :span-method="tableYearMethod">
                                    <el-table-column prop="quarter" label="季度" width="100" align="center" />
                                    <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="计划完成投资额(亿元)" width="100" align="center" />
                                    <el-table-column prop="key2" label="投资完成额(亿元)" width="100" align="center" />
                                    <el-table-column prop="key3" label="投资未完成额(亿元)" width="100" align="center" />
                                    <el-table-column prop="key4" label="全年目标" width="100" align="center" />
                                    <el-table-column prop="key5" label="工作计划" width="100" align="center" />
                                    <el-table-column prop="key6" label="累计进展计划" align="center" />
                                    <el-table-column prop="key7" label="形象进度百分比(%)" width="100" align="center" />
                                    <el-table-column prop="key8" label="工作计划进展计划" align="center" />
                                </el-table>
                                <hc-info-table class="mt-[-1px]">
                                    <tr>
                                        <hc-info-table-td is-title width="130px" center>该年累计完成投资(亿元)</hc-info-table-td>
                                        <hc-info-table-td center>14.1</hc-info-table-td>
                                        <hc-info-table-td is-title width="130px" center>该年力争完成投资(亿元)</hc-info-table-td>
                                        <hc-info-table-td center>13.2</hc-info-table-td>
                                        <hc-info-table-td is-title width="130px" center>该年累计未完成投资(亿元)</hc-info-table-td>
                                        <hc-info-table-td center>12.3</hc-info-table-td>
                                    </tr>
                                </hc-info-table>
                                <hc-info-table class="mt-[-1px]">
                                    <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>
                                </hc-info-table>
                            </hc-card-item>
                        </div>
                    </el-scrollbar>
                </div>
            </hc-card>
        </hc-drawer>

        <!-- 项目完成情况 -->
        <hc-drawer v-model="isCompletionDrawer" 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>
                <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>
                </hc-info-table>
                <div class="hc-project-list-drawer-year detail">
                    <el-scrollbar>
                        <div class="relative p-2 pt-6">
                            <hc-card-item class="year-detail">
                                <template #header>
                                    <div class="flex-1 text-center text-[14px]">
                                        <HcDropdown v-model="yearKey" :datas="yearData" />
                                    </div>
                                </template>
                                <el-table :data="tableYearData1" border class="w-full" :span-method="tableYearMethod1">
                                    <el-table-column prop="quarter" label="季度" width="100" align="center" />
                                    <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="计划完成投资额(亿元)" width="100" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key1" disabled />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key2" label="投资完成额(亿元)" width="100" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key2" />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key3" label="累计投资完成额(亿元)" width="100" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key3" disabled />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key5" label="工作计划" width="100" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key5" type="textarea" disabled />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key6" label="工作计划进展情况" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key6" type="textarea" />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key7" label="累计进展情况" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key7" type="textarea" />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key8" label="形象进度百分比(%)" width="100" align="center">
                                        <template #default="{ row }">
                                            <hc-body>
                                                <hc-table-input v-model="row.key8" />
                                            </hc-body>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <hc-info-table class="mt-[-1px]">
                                    <tr>
                                        <hc-info-table-td is-title width="30px" center>存在问题</hc-info-table-td>
                                        <hc-info-table-td center>
                                            <el-input v-model="testValue" type="textarea" />
                                        </hc-info-table-td>
                                        <hc-info-table-td is-title width="30px" center>工作建议</hc-info-table-td>
                                        <hc-info-table-td center>
                                            <el-input v-model="testValue" type="textarea" />
                                        </hc-info-table-td>
                                    </tr>
                                    <tr>
                                        <hc-info-table-td is-title width="30px" center>填报单位</hc-info-table-td>
                                        <hc-info-table-td center>
                                            <el-input v-model="testValue" />
                                        </hc-info-table-td>
                                        <hc-info-table-td is-title width="30px" center>联系人</hc-info-table-td>
                                        <hc-info-table-td center>
                                            <el-input v-model="testValue" />
                                        </hc-info-table-td>
                                    </tr>
                                </hc-info-table>
                            </hc-card-item>
                        </div>
                    </el-scrollbar>
                </div>
                <template #action>
                    <el-button type="info" @click="isCompletionDrawer = false">取消</el-button>
                    <el-button type="warning" @click="isCompletionDrawer = false">保存</el-button>
                </template>
            </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
})

//渲染完成
const isAfterRender = ref(false)
onMounted(() => {
    //表格太复杂，渲染较慢，等页面先加载完成，再渲染表格，不然会卡住一下不动。
    //因为表头涉及到年份，如果年份很多，那么会更卡。
    setTimeout(() => {
        isAfterRender.value = true
    }, 200)
})

//表头
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([
   { id: 1, key1: '名称1', key2: '-', key3: '-' },
   { id: 2, key1: '名称2', key2: '-', key3: '-' },
   { id: 3, key1: '名称3', key2: '-', key3: '-' },
   { id: 4, key1: '名称4', key2: '-', key3: '-' },
   { id: 5, key1: '名称5', key2: '-', key3: '-' },
])

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

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

//项目完成情况
const isCompletionDrawer = ref(false)
const completion = (row) => {
    isCompletionDrawer.value = true
    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)
}

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

//年份表格数据
const tableYearData = ref([
    { quarter: '一季度', month: '1月', key1: '13', key2: '1.1', key3: '11.9' },
    { quarter: '一季度', month: '2月', key1: '13', key2: '1.2', key3: '10.7' },
    { quarter: '一季度', month: '3月', key1: '13', key2: '1.3', key3: '9.4' },

    { quarter: '二季度', month: '4月', key1: '14', key2: '1.4', key3: '1.1' },
    { quarter: '二季度', month: '5月', key1: '14', key2: '1.5', key3: '1.2' },
    { quarter: '二季度', month: '6月', key1: '14', key2: '1.6', key3: '1.3' },

    { quarter: '三季度', month: '7月', key1: '15', key2: '1.7', key3: '1.1' },
    { quarter: '三季度', month: '8月', key1: '15', key2: '1.8', key3: '1.2' },
    { quarter: '三季度', month: '9月', key1: '15', key2: '1.9', key3: '1.3' },

    { quarter: '四季度', month: '10月', key1: '16', key2: '2.0', key3: '1.1' },
    { quarter: '四季度', month: '11月', key1: '16', key2: '2.1', key3: '1.2' },
    { quarter: '四季度', month: '12月', key1: '16', key2: '2.1', key3: '1.3' },
])

//合并列或行
const tableYearMethod = ({ rowIndex, columnIndex }) => {
    return setSpanMethod(columnIndex, rowIndex)
}


//年份表格数据
const tableYearData1 = ref([
    { quarter: '一季度', month: '1月', key1: '13', key2: '1.1', key3: '11.9' },
    { quarter: '一季度', month: '2月', key1: '13', key2: '1.2', key3: '10.7' },
    { quarter: '一季度', month: '3月', key1: '13', key2: '1.3', key3: '9.4' },

    { quarter: '二季度', month: '4月', key1: '14', key2: '1.4', key3: '1.1' },
    { quarter: '二季度', month: '5月', key1: '14', key2: '1.5', key3: '1.2' },
    { quarter: '二季度', month: '6月', key1: '14', key2: '1.6', key3: '1.3' },

    { quarter: '三季度', month: '7月', key1: '15', key2: '1.7', key3: '1.1' },
    { quarter: '三季度', month: '8月', key1: '15', key2: '1.8', key3: '1.2' },
    { quarter: '三季度', month: '9月', key1: '15', key2: '1.9', key3: '1.3' },

    { quarter: '四季度', month: '10月', key1: '16', key2: '2.0', key3: '1.1' },
    { quarter: '四季度', month: '11月', key1: '16', key2: '2.1', key3: '1.2' },
    { quarter: '四季度', month: '12月', key1: '16', key2: '2.1', key3: '1.3' },
])

//合并列或行
const tableYearMethod1 = ({ rowIndex, columnIndex }) => {
    return setSpanMethod(columnIndex, rowIndex, false)
}

const testValue = ref('')

const setSpanMethod = (column, row, isAllYear = true) => {
    if (column === 0) { //第一列
        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
        if (rows.indexOf(row) !== -1) {
            //主要季度隐藏
            return { rowspan: 3, colspan: 1 }
        } else if (irows.indexOf(row) !== -1) {
            //非主要的季度隐藏
            return { rowspan: 0, colspan: 0 }
        } else {
            return { rowspan: 1, colspan: 1 }
        }
    } else if (column === 2) { //第三列
        const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
        if (rows.indexOf(row) !== -1) {
            //主要隐藏
            return { rowspan: 3, colspan: 1 }
        } else if (irows.indexOf(row) !== -1) {
            //非主要的隐藏
            return { rowspan: 0, colspan: 0 }
        } else {
            return { rowspan: 1, colspan: 1 }
        }
    } else if (column === 5) { //第六列
        if (isAllYear) {
            if (row === 0) {
                return { rowspan: 12, colspan: 1 }
            } else if (row > 0 && row < 12) {
                return { rowspan: 0, colspan: 0 }
            } else {
                return { rowspan: 1, colspan: 1 }
            }
        } else {
            const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
            if (rows.indexOf(row) !== -1) {
                //主要隐藏
                return { rowspan: 3, colspan: 1 }
            } else if (irows.indexOf(row) !== -1) {
                //非主要的隐藏
                return { rowspan: 0, colspan: 0 }
            } else {
                return { rowspan: 1, colspan: 1 }
            }
        }
    } else if (column === 6) { //第七列
        if (isAllYear) {
            const rows = [0, 3, 6, 9], irows = [1, 2, 4, 5, 7, 8, 10, 11]
            if (rows.indexOf(row) !== -1) {
                //主要隐藏
                return { rowspan: 3, colspan: 1 }
            } else if (irows.indexOf(row) !== -1) {
                //非主要的隐藏
                return { rowspan: 0, colspan: 0 }
            } else {
                return { rowspan: 1, colspan: 1 }
            }
        }
    }
}

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);
    &.detail {
        height: calc(100% - 34px);
    }
    .year-detail {
        padding: 14px;
        background: #f7f7f7;
        border-radius: 5px;
        .hc-card-item-header {
            border-bottom: 1px solid #ecebeb;
            padding-bottom: 10px;
            .item-header {
                justify-content: center;
            }
        }
        .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: 6px;
                    left: 10px;
                }
                .right {
                    position: absolute;
                    top: 6px;
                    right: 6px;
                    font-size: 13px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    top: 36px;
                    left: -20px;
                    width: 180px;
                    height: 1px;
                    background: #dcdcdc;
                    transform: rotate(27deg);
                }
            }
        }
        .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>