|
|
@@ -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>
|
