优化界面

src/styles/static/project.scss

@@ -28,59 +28,10 @@
     box-shadow: none;
     .hc-expense-total-title {
         color: #101010;
+        .project-name {
+            font-weight: initial;
+            margin-left: 24px;
+            color: var(--el-color-primary);
+        }
     }
 }
-
-.hc-sb-table .el-tabs .el-tabs__content {
-    padding: 0;
-    background: #f1f5f8;
-    border-radius: 0 10px 10px;
-    height: calc(100vh - 320px);
-    overflow-y: auto;
-}
-.card-box {
-    height: calc(100vh - 520px) !important;
-    overflow-y: auto;
-}
-.card-box1 {
-    height: calc(100vh - 470px) !important;
-    overflow-y: auto;
-}
-.hac-row-total-item {
-    position: relative;
-    font-size: 14px;
-    padding: 16px 0;
-    border-radius: 3px;
-    text-align: center;
-    background: #ffffff;
-    border: 1px solid #f0f4fa;
-    .num {
-        font-size: 20px;
-        font-weight: bold;
-        color: var(--el-color-primary);
-    }
-    .text {
-        margin-top: 8px;
-    }
-}
-.project_table{
-    height: 100%;
-}
-.project_table_title {
-    // margin-top: 15px;
-    font-size: 18px;
-    font-weight:bold ;
-    color: rgb(64, 149, 229);
-    margin-bottom: 15px;
-
-}
-
-.goback_icon {
-    font-size: 24px;
-    cursor: pointer;
-    font-weight: bolder;
-    color: var(--el-color-primary);
-}
-
-/* 设置表头的高度 */
-

src/views/static/project.vue

@@ -46,133 +46,108 @@
                 </HcGradientCard>
             </el-col>
         </el-row>
-
+        <!--列表统计-->
         <HcCardItem class="static-project-card mt-8">
             <template #header>
-                <div class="hc-expense-total-title">列表统计</div>
+                <div class="hc-static-breadcrumb-box" v-if="breadcrumbs.name">
+                    <el-breadcrumb :separator-icon="ArrowRight">
+                        <el-breadcrumb-item
+                            :class="breadcrumbs.name?'hover':''"
+                            @click="breadcrumbTitle"
+                        >
+                            {{breadcrumbs.title}}
+                        </el-breadcrumb-item>
+                        <el-breadcrumb-item
+                            :class="breadcrumbs.section?'hover':''"
+                            @click="breadcrumbName"
+                        >
+                            {{breadcrumbs.name}}
+                        </el-breadcrumb-item>
+                        <el-breadcrumb-item
+                            :class="breadcrumbs.post?'hover':''"
+                            @click="breadcrumbSection"
+                            v-if="breadcrumbs.section"
+                        >
+                            {{breadcrumbs.section}}
+                        </el-breadcrumb-item>
+                        <el-breadcrumb-item v-if="breadcrumbs.post">{{breadcrumbs.post}}</el-breadcrumb-item>
+                    </el-breadcrumb>
+                </div>
+                <div class="hc-expense-total-title" v-else>列表统计</div>
             </template>
-            <HcTable :column="tableColumn" :datas="tableData" v-if="!isProject">
+            <HcTable ui="no-border" border :isIndex="false" :column="tableColumn" :datas="tableData" v-if="isShowtable === 0">
                 <template #name="{row}">
-                    <span class="text-blue text-hover">{{ row.name }}</span>
+                    <span class="text-blue text-hover" @click='rowNameClick(row)'>{{ row.name }}</span>
                 </template>
             </HcTable>
-
-
-            <div class="bg-white p-2  " style="height: 100%;">
-                <el-table :data="tableData" border style="width: 100%;  "
-                          v-if="!isProject"
-                          :span-method="spanMethod"
-                          :cell-style="columnStyle"
-                          :header-cell-style="tableHeaderColor"
-                          class="card-box1"
-                >
-                    <el-table-column prop="name" label="项目名称">
-                        <template #default="scope">
-                            <div @click='rowNameClick(scope.row)'>
-                                    <span class="text-blue text-hover"
-                                          @click="rowNameClick(scope.row)"> {{ scope.row.name }}</span>
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="contract" label="合同额" align="center"/>
-                    <el-table-column prop="cost" label="测算成本" align="center"/>
-                    <el-table-column prop="disbursed" label="实际已支出成本" align="center"/>
-                    <el-table-column prop="receive" label="实际已回款" align="center"/>
-                    <el-table-column prop="uncollected" label="未回款" align="center"/>
-                </el-table>
-
-                <div class="project_table" v-else>
-                    <div class="project_table_title">
-                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel"
-                                v-if="isShowDetailtable===1"/>
-                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail"
-                                v-if="isShowDetailtable===2"/>
-                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice"
-                                v-if="isShowDetailtable===3"/>
-                        <span v-if="isShowDetailtable===1">XXX项目</span>
-                        <span v-if="isShowDetailtable===3">XXX项目>研发部</span>
-                        <span v-if="isShowDetailtable===2">XXX项目>研发部>产品-研发</span>
-                    </div>
-                    <el-table :data="protableData" border style="width: 100%; " v-if="isShowDetailtable===3"
-                              class=" card-box"
-
-                              :header-cell-style="tableHeaderColor"
-                    >
-                        <el-table-column prop="link" label="项目环节" align="center"/>
-                        <el-table-column prop="type" label="参与" align="center">
-                            <template #default="scope">
-                                <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
-                                <HcIcon name="error-warning" class="text-red " v-else/>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="cost" label="成本支出（元）" align="center"/>
-                        <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
-                        <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
-                        <el-table-column prop="detail" label="明细">
-                            <template #default="scope">
-                                <div @click='rowDetail(scope.row)'>
-                                    <span class="text-blue text-hover">查看明细</span>
-                                </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <el-table :data="priceData" border style="width: 100%;"
-                              class=" card-box"
-                              v-if="isShowDetailtable===1"
-                              :span-method="pricespanMethod"
-                              :cell-style="pricecolumnStyle"
-                              :header-cell-style="pricetableHeaderColor"
-
-                    >
-                        <el-table-column prop="pricetype" label="费用分类"/>
-                        <el-table-column prop="price" label="测算费用（元）" align="center"/>
-                        <el-table-column prop="cost" label="实际费用（元）" align="center"/>
-                        <el-table-column prop="detail" label="费用明细" align="center">
-                            <template #default="scope">
-                                <div @click='rowpriceDetail(scope.row)'>
-                                    <span class="text-blue text-hover">查看明细</span>
-                                </div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="total" label="总计" align="center"/>
-                    </el-table>
-                    <el-table :data="costData" border style="width: 100%"
-                              v-if="isShowDetailtable===2"
-                              :span-method="costspanMethod"
-                              :cell-style="costcolumnStyle"
-                              :header-cell-style="costtableHeaderColor"
-                              class=" card-box"
-                    >
-                        <el-table-column prop="costobject" label="费用分类"/>
-                        <el-table-column prop="price" label="费用（元）" align="center"/>
-                        <el-table-column prop="total" label="总计" align="center"/>
-                    </el-table>
-                </div>
-            </div>
+            <!--费用分类-->
+            <HcTable ui="no-border" border :isIndex="false" :column="tableColumn1" :datas="tableData1" :span-method="tableSpanMethod1" v-if="isShowtable === 1">
+                <template #detail="{row}">
+                    <span class="text-blue text-hover" @click='rowNameClick1(row)'>查看明细</span>
+                </template>
+                <template #total="{row, index}">{{index === 0 ? row.total : ''}}</template>
+            </HcTable>
+            <!--细分环节费用-->
+            <HcTable ui="no-border" border :isIndex="false" :column="tableColumn2" :datas="tableData2" v-if="isShowtable === 2">
+                <template #type="{row}">
+                    <HcIcon name="checkbox-circle" class="text-green" v-if="row.type === 1"/>
+                    <HcIcon name="error-warning" class="text-red" v-else/>
+                </template>
+                <template #detail="{row}">
+                    <span class="text-blue text-hover" @click='rowNameClick2(row)'>查看明细</span>
+                </template>
+            </HcTable>
+            <!--费用明细-->
+            <HcTable ui="no-border" border :isIndex="false" :column="tableColumn3" :datas="tableData3" :span-method="tableSpanMethod2" v-if="isShowtable === 3">
+                <template #total="{row, index}">{{index === 0 ? row.total : ''}}</template>
+            </HcTable>
         </HcCardItem>
     </div>
 </template>
+
 <script setup>
 import {onActivated, ref} from "vue";
 import mainApi from "~api/static/project";
-import {getSpanMethod} from "~src/utils/el-table-span-method";
-
+import { ArrowRight } from '@element-plus/icons-vue'
 
 onActivated(() => {
 
 })
 
-//类型处理
-const tabsKey = ref('image')
-const tabsData = ref([
-    {icon: 'bar-chart-box', label: '列表统计', key: 'image'},
-    // {icon: 'image', label: '图形统计', key: 'excel'},
-])
+//面包屑导航
+const breadcrumbs = ref({title: '列表统计', name: '', section: '', post: ''})
+
+//项目名被点击
+const breadcrumbTitle = () => {
+    const {name} = breadcrumbs.value
+    if (name) {
+        isShowtable.value = 0
+        breadcrumbs.value.name = ''
+        breadcrumbs.value.post = ''
+    }
+}
 
-const tabsClick = (key) => {
-    tabsKey.value = key
+//项目名被点击
+const breadcrumbName = () => {
+    const {section} = breadcrumbs.value
+    if (section) {
+        isShowtable.value = 1
+        breadcrumbs.value.section = ''
+        breadcrumbs.value.post = ''
+    }
 }
 
+//部门
+const breadcrumbSection = () => {
+    const {post} = breadcrumbs.value
+    if (post) {
+        isShowtable.value = 2
+        breadcrumbs.value.post = ''
+    }
+}
+
+//基础表格
+const isShowtable = ref(0)
 const tableColumn = [
     {key: 'name', name: '名称', minWidth: 200},
     {key: 'contract', name: '合同额', align: 'center'},
@@ -210,175 +185,104 @@ const tableData = ref([
         total: 10000
     },
 ])
-//合并
-const spanMethod = ref(
-    getSpanMethod(tableData.value, ['id'], ['total'])
-)
-const columnStyle = ({row, column, rowIndex, columnIndex}) => {
-    // 状态列字体颜色
-    // columnIndex 列下标
-    // rowIndex 行下标
-    // row 行
-    // column 列
-    if (columnIndex === 6) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
-
-    }
-}
-// 更改表头样式
-const tableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 6) {
-        return {background: "rgba(64, 149, 229, 0.44)"};
-    }
-    if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
-        return {fontSize: "18px", color: "black"};
-    }
-}
-
-const protableData = ref([
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-    {link: '商机-演示沟通3333333333', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
-
-
-])
-const isProject = ref(false)
 const rowNameClick = (row) => {
-    isProject.value = true
-    isShowDetailtable.value = 1
-}
-const showAllexcel = () => {
-    isProject.value = false
-    isShowDetailtable.value = 1
-
-}
-const showDetail = () => {
-    isShowDetailtable.value = 3
-}
-const isShowDetailtable = ref()
-const rowDetail = () => {
-    isShowDetailtable.value = 2
+    breadcrumbs.value.name = row.name
+    isShowtable.value = 1
 }
 
-//费用明细
-
-const priceData = ref([
-    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
-
+//费用分类
+const tableColumn1 = [
+    {key: 'name', name: '费用分类', align: 'center'},
+    {key: 'contract', name: '测算费用(元)', align: 'center'},
+    {key: 'cost', name: '测算费用(元)', align: 'center'},
+    {key: 'detail', name: '费用明细', align: 'center'},
+    {key: 'total', name: '总计', align: 'center'},
+]
+const tableData1 = ref([
+    {name: '市场部', contract: 2222, cost: 4444, total: 5555},
+    {name: '研发部', contract: 2222, cost: 4444, total: 5555},
+    {name: '实施部', contract: 2222, cost: 4444, total: 5555},
+    {name: '维护部', contract: 2222, cost: 4444, total: 5555},
+    {name: '管理支出', contract: 2222, cost: 4444, total: 5555},
+    {name: '外包劳务', contract: 2222, cost: 4444, total: 5555},
 ])
 
-//合并
-const pricespanMethod = ref(
-    getSpanMethod(priceData.value, ['id'], ['total'])
-)
-const pricecolumnStyle = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 4) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px",};
-
+//合并单元格
+const tableSpanMethod1 = ({columnIndex}) => {
+    if (columnIndex === tableColumn1.length -1 && tableData1.value.length > 0) {
+        return {rowspan: tableData1.value.length, colspan: 1}
     }
 }
-// 更改表头样式
-const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 4) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "18px", color: "black"};
-    }
-    if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2 || columnIndex === 3) {
-        return {fontSize: "18px", color: "black"};
-    }
 
+const rowNameClick1 = (row) => {
+    breadcrumbs.value.section = row.name
+    isShowtable.value = 2
 }
-const rowpriceDetail = () => {
-    isShowDetailtable.value = 3
-}
-const showPrice = () => {
-    isShowDetailtable.value = 1
-}
-//成本明细cost
-
-const costData = ref([
-    {costobject: '陆秀贤', price: '2222', total: '45689'},
-    {costobject: '陆秀贤', price: '2222', total: '45689'},
-    {costobject: '陆秀贤', price: '2222', total: '45689'},
-    {costobject: '陆秀贤', price: '2222', total: '45689'},
 
+//细分环节费用
+const tableColumn2 = [
+    {key: 'name', name: '项目环节'},
+    {key: 'type', name: '参与', align: 'center'},
+    {key: 'cost', name: '成本支出(元)', align: 'center'},
+    {key: 'timecost', name: '时间成本(工作日)', align: 'center'},
+    {key: 'peoplecost', name: '人员投入(人)', align: 'center'},
+    {key: 'detail', name: '明细', align: 'center'},
+]
+const tableData2 = ref([
+    {name: '商机-演示沟通', type: 1, cost: 4444, timecost: 12, peoplecost: 3},
+    {name: '商机-演示沟通', type: 1, cost: 4444, timecost: 12, peoplecost: 3},
+    {name: '商机-演示沟通', type: 1, cost: 4444, timecost: 12, peoplecost: 3},
+    {name: '商机-演示沟通', type: 2, cost: 4444, timecost: 12, peoplecost: 3},
+    {name: '商机-演示沟通', type: 2, cost: 4444, timecost: 12, peoplecost: 3},
+    {name: '商机-演示沟通', type: 2, cost: 4444, timecost: 12, peoplecost: 3},
 ])
-//合并
-const costspanMethod = ref(
-    getSpanMethod(costData.value, ['id'], ['total'])
-)
-const costcolumnStyle = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 2) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
-
-    }
+const rowNameClick2 = (row) => {
+    breadcrumbs.value.post = row.name
+    isShowtable.value = 3
 }
-// 更改表头样式
-const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 2) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "18px", color: "black", lineHeight: "30px"};
-    }
-    if (columnIndex === 1 || columnIndex === 0) {
-        return {fontSize: "18px", color: "black"};
+
+//细分环节费用
+const tableColumn3 = [
+    {key: 'name', name: '费用分类'},
+    {key: 'price', name: '费用(元)', align: 'center'},
+    {key: 'total', name: '总计', align: 'center'},
+]
+const tableData3 = ref([
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+    {name: '人工成本', price: 4444, total: 124444},
+])
+//合并单元格
+const tableSpanMethod2 = ({columnIndex}) => {
+    if (columnIndex === tableColumn3.length -1 && tableData1.value.length > 0) {
+        return {rowspan: tableData3.value.length, colspan: 1}
     }
 }
-
-
 </script>
+
 <style lang="scss" scoped>
 @import "~src/styles/static/project.scss";
+</style>
 
+<style lang="scss">
+.hc-static-breadcrumb-box .el-breadcrumb {
+    font-size: 16px;
+    .el-breadcrumb__item {
+        .el-breadcrumb__inner, .el-breadcrumb__separator {
+            color: var(--el-color-primary)
+        }
+        &.hover .el-breadcrumb__inner {
+            cursor: pointer;
+            transition: color .2s;
+            &:hover {
+                color: var(--el-color-primary-light-5)
+            }
+        }
+    }
+}
 </style>