Skip to content

D
dsk-operate-sys-cscec
Commit 215d4087 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent bdfe36c4
Show whitespace changes
Inline Side-by-side
Showing with 512 additions and 35 deletions
dsk-operate-ui/src/views/component/Tables.vue 0 → 100644
View file @ 215d4087
<template>
<div class="Tables" :class="{'is-empty-table' : !tableDataTotal}">
<div class="table-item">
<el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
element-loading-text="Loading" ref="tableRef" v-horizontal-scroll="'hover'" border fit highlight-current-row :height="height"
:maxHeight="comMaxHeight" :default-sort="defaultSort?defaultSort:{}" @sort-change="sortChange">
<el-table-column v-if="isIndex" label="序号" :width="flexWidth(tableData)" align="left" :fixed="indexFixed" :resizable="false">
<template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
</el-table-column>
<template>
<el-table-column v-for="(item,index) in forData" :key="index" :label="item.label" :prop="item.prop" :width="item.width"
:min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
:sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :show-overflow-tooltip="item.showOverflowTooltip"
:resizable="false">
<template v-if="item.children&&item.children.length">
<el-table-column v-for="(cld, i) in item.children" :key="i" :prop="cld.prop" :label="cld.label" :width="cld.width" :resizable="false">
<template slot-scope="cldscope">
<template v-if="cld.slot">
<slot :name="cld.prop" :row="cldscope.row" :data="cld"></slot>
</template>
<template v-else>
<span>{{cldscope.row[cld.prop] || '-'}}</span>
</template>
</template>
</el-table-column>
</template>
<template v-else-if="item.slotHeader" slot="header">
<slot :name="item.slotName"></slot>
</template>
<template slot-scope="scope">
<slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
<span v-else>
{{ scope.row[item.prop] || '-' }}
</span>
</template>
</el-table-column>
</template>
<template slot="empty">
</template>
</el-table>
<div class="table-empty-container" v-else>
<no-data />
</div>
</div>
<div class="pagination-box" v-if="show_page && tableDataTotal>queryParams.pageSize">
<el-pagination background :current-page="current_page" :page-size="queryParams.pageSize" :total="tableDataTotal"
layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
</div>
</template>
<script>
import NoData from '../component/noData';
export default {
name: "Tables",
props: {
height: {
type: [String, Number]
},
maxHeight: {
type: Boolean
},
isIndex: {
type: Boolean,
default: true
},
headerFixed: {
type: Boolean,
default: false
},
indexFixed: {
type: Boolean,
default: false
},
tableLoading: {
type: Boolean,
default: false
},
defaultSort: {
type: Object,
default: null
},
tableData: {
type: Array,
default: []
},
forData: {
type: Array,
default: []
},
tableDataTotal: {
type: Number,
default: 0
},
queryParams: {
type: Object,
default: {}
},
paging: {
type: Boolean,
default: true
},
MaxPage: { //最大页码
type: Number,
default: 1000000
},
},
components: {
NoData
},
data() {
return {
current_page: this.queryParams.pageNum,
show_page: this.paging,
comMaxHeight: null
};
},
watch: {
'queryParams.pageNum'(newVal, oldVal) {
this.current_page = newVal;
}
},
created() {
this.maxHeight ? this.maxHeightInit() : null;
},
methods: {
// 自适应当前容器
async maxHeightInit() {
try {
await this.$nextTick();
/**
* @type {HTMLDivElement}
*/
const container = this.$el.querySelector(".table-item");
if (container) {
this.comMaxHeight = `${container.offsetHeight}px`;
}
} catch (error) {
}
},
handleCurrentChange(e) {
if (this.MaxPage < e) {
this.show_page = false;
this.$nextTick(() => {
this.current_page = this.queryParams.pageNum;
this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`);
this.show_page = true;
});
} else {
this.$emit('handle-current-change', e);
}
},
handleSizeChange(e) {
this.$emit('handle-current-change', e);
},
sortChange(e) {
this.$emit('sort-change', e);
},
flexWidth(tableData) {
let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + tableData.length, wdth = 59;
// return currentMax.toString().length*25 + 'px'
if (currentMax.toString().length > 3) {
wdth = wdth + (currentMax.toString().length - 3) * 10;
}
return wdth + 'px';
}
}
}
</script>
<style lang="scss" scoped>
.Tables {
::v-deep .el-table__body tr.current-row > td.el-table__cell {
background-color: #ffffff;
}
::v-deep .el-table__row {
&:nth-child(even) {
background-color: #f9fcff;
.more {
background: #f8fbff;
span {
color: #0081ff;
}
}
}
&:nth-child(odd) {
.more {
span {
color: #0081ff;
}
}
}
}
&.is-empty-table {
.table-item {
max-height: unset;
height: 100%;
}
}
::v-deep .table-item {
position: relative;
max-height: calc(100% - 56px);
.table-empty-container {
min-height: 360px;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
.no-data {
min-height: unset;
}
}
.el-table td.el-table__cell {
border-bottom: 0;
}
.el-table {
.cell {
font-size: 14px;
}
.el-table__header-wrapper {
min-height: 40px;
}
}
.el-table--border th.gutter:last-of-type {
display: block !important;
padding-right: 16px;
}
}
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell {
border-bottom: 1px solid #e6eaf1;
}
::v-deep .el-table--border .el-table__cell {
border-right: 1px solid #e6eaf1;
}
::v-deep .el-table__body tr.hover-row.current-row > td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped > td,
::v-deep .el-table__body tr.hover-row > td {
background-color: #dcebff !important;
.more {
background: #dcebff;
}
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #dcebff;
}
::v-deep .fixed-table {
overflow: visible;
}
::v-deep .el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper {
position: sticky;
z-index: 9;
top: 0;
}
.headerFixed {
::v-deep .el-table__header-wrapper {
position: sticky;
top: 80px;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper {
position: sticky;
z-index: 9;
top: 80px;
}
}
::v-deep .el-table__fixed {
overflow-x: clip;
overflow-y: clip;
}
}
</style>
dsk-operate-ui/src/views/projectCostLedger/detail/components/DirectCost/index.vue
View file @ 215d4087
<template> <template>
<div class="detail-container"> <div class="directCost-container">
直接费成本1 <div class="directCost-cont">
<div class="left-menu"></div> <div class="left">
<div class="right"></div> <div class="left-menu">
</div>
</div>
<div class="right-table">
<div class="table-item">
<el-table
element-loading-text="Loading"
:data="tableData"
:span-method="objectSpanMethod"
:row-class-name="tableRowClassName"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left" fixed type="index" prop="index" :index="customIndex"></el-table-column>
<el-table-column label="编码" width="130" prop="bm"></el-table-column>
<el-table-column label="名称" width="230" prop="mc"></el-table-column>
<el-table-column label="清单" width="130" prop="qd"></el-table-column>
<el-table-column label="项目特征" width="340" prop="xmtz"></el-table-column>
<el-table-column label="单位" width="130" prop="qd"></el-table-column>
<el-table-column label="计划成本" align="center">
<el-table-column prop="name" label="工程表达式" width="94"></el-table-column>
<el-table-column prop="name" label="工程量" width="66"></el-table-column>
<el-table-column prop="name" label="成本科目" width="80"></el-table-column>
<el-table-column prop="name" label="招标控制单价" width="108"></el-table-column>
<el-table-column prop="name" label="招标控制合价" width="108"></el-table-column>
<el-table-column prop="name" label="不含税成本单价" width="122"></el-table-column>
<el-table-column prop="name" label="不含税成本合计" width="122"></el-table-column>
<el-table-column prop="name" label="成本税金合计" width="108"></el-table-column>
<el-table-column prop="name" label="含税成本单价" width="108"></el-table-column>
<el-table-column prop="name" label="含税成本合价" width="108"></el-table-column>
<el-table-column prop="name" label="合价偏差" width="80"></el-table-column>
</el-table-column>
<el-table-column label="盈亏率" width="66" prop="qd"></el-table-column>
<el-table-column label="标准费用项" width="94" prop="qd"></el-table-column>
<el-table-column label="备注" width="114" prop="qd"></el-table-column>
</el-table>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import InfoTable from '../../../../component/infoTable';
export default { export default {
name: "directCost", name: "directCost",
components: {InfoTable}, components: {},
data() { data() {
return { return {
tableData:[
{
bm:'010101002001',
mc:'挖一般土石方（开挖方式支撑下）1',
qd:'清',
id:1,
xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求'
},
{
bm:'010101002001',
mc:'挖一般土石方（开挖方式支撑下2）',
qd:'专',
id:1,
xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求'
},
{
bm:'010101002023',
mc:'挖一般土石方（开挖方式支撑下）3',
qd:'清',
id:2,
xmtz:'(1)不区分土石类别(含淤泥等)，投标人综合考虑(2)开挖方式：综合考虑(3)挖土深度：综合考虑(4)开挖土石比例，投标人应结合地勘报告和岩面等高线综合考虑，施工中出现的实际土石比例变化，结算时不得调整(5)含装车等费用(6)具体详见招标文件、图纸及相关规范要求'
},
],
queryParams:{
pageNum:1,
pageSize:10,
},
cellList: [], // 单元格数组
count: null, // 计数
// 用于记录索引项对应的实际序号
indexObj: {},
mergeObj: {},
mergeArr:["index",'bm','mc','qd','xmtz']
}; };
}, },
//可访问data属性 //可访问data属性
created() { created() {
},
mounted() {
}, },
//计算集 //计算集
computed: { computed: {
...@@ -25,16 +102,72 @@ export default { ...@@ -25,16 +102,72 @@ export default {
}, },
//方法集 //方法集
methods: { methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 === 0) {
return 'color1';
} else{
return 'color2';
}
return '';
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
customIndex(){
},
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-container { .directCost-container {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px;
background: #ffffff; background: #ffffff;
height: 100%;
align-items: center;
.directCost-cont{
display: flex;
width: 100%;
height: 100%;
}
.left{
width: 220px;
height: 100%;
.left-menu{
width: 100%;
height: 100%;
border-right: 1px solid #eeeeee;
overflow: auto;
}
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
}
.right-table{
width: calc(100% - 220px);
padding: 16px;
::v-deep .el-table{
.color1{
background: #FFF8E8;
}
.color2{
background: #FFFFFF;
}
}
}
} }
</style> </style>
dsk-operate-ui/src/views/projectCostLedger/detail/components/OtherProjects/index.vue
View file @ 215d4087
...@@ -3,39 +3,41 @@ ...@@ -3,39 +3,41 @@
<div class="otherProjects-cont"> <div class="otherProjects-cont">
<div class="left"> <div class="left">
<div class="left-menu"> <div class="left-menu">
<el-menu @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>宝安中学（集团）初中部改扩建工程施工总承包-加固修缮工程</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</div> </div>
</div> </div>
<div class="right-table"> <div class="right-table">
<div class="table-item">
<tables
v-if="!isSkeleton"
:tableLoading="tableLoading"
:tableData="tableData"
:forData="forData1"
:MaxPage=500
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
@handle-current-change="handleCurrentChange"
@sort-change="sortChange"
>
<template slot="number" slot-scope="scope">
<div>{{scope.row.number || '--'}}</div>
</template>
<template slot="proportion" slot-scope="scope">
<div>{{scope.row.proportion || '--'}}{{scope.row.proportion ? '%':''}}</div>
</template>
</tables>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import InfoTable from '../../../../component/infoTable'; import Tables from "../../../../component/Tables"
export default { export default {
name: "directCost", name: "directCost",
components: {InfoTable}, components: {
Tables,
},
data() { data() {
return { return {
data:[ data:[
...@@ -52,7 +54,44 @@ export default { ...@@ -52,7 +54,44 @@ export default {
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'label'
} },
isSkeleton:false,
tableLoading:false,
tableData:[
{
name:'技术质量管理类',
number:'236',
proportion:'64'
},
{
name:'工程保险类',
number:'336',
proportion:'64'
},
],
forData: [
{label: '其他项目费用', prop: 'name'},
{label: '数量', prop: 'number',slot: true},
{label: '占比', prop: 'proportion', slot: true},
],
forData1: [
{label: '清单内容', prop: 'name',minWidth:'215'},
{label: '工作内容、做法/规格型号/施工现场配置说明', prop: 'number',minWidth:'302'},
{label: '单位', prop: 'proportion',minWidth:'215'},
{label: '不含税单价', prop: 'proportion',minWidth:'215'},
{label: '不含税合价', prop: 'proportion',minWidth:'215'},
{label: '税率（%）', prop: 'proportion',minWidth:'215'},
{label: '含税合价', prop: 'proportion',minWidth:'215'},
{label: '税金（元）', prop: 'proportion',minWidth:'215'},
{label: '成本科目', prop: 'proportion',minWidth:'215'},
{label: '税金类型', prop: 'proportion',minWidth:'215'},
{label: '备注', prop: 'proportion',minWidth:'215'},
],
queryParams:{
pageNum:1,
pageSize:10,
},
tableDataTotal:2,
}; };
}, },
//可访问data属性 //可访问data属性
...@@ -73,6 +112,16 @@ export default { ...@@ -73,6 +112,16 @@ export default {
}, },
handleClose(key, keyPath) { handleClose(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
},
//分页
handleCurrentChange(e){
let params = this.formParams()
params.pageNum = e
this.queryParams.pageNum = e
// this.handleQuery(params)
},
sortChange(){
} }
}, },
} }
...@@ -81,11 +130,14 @@ export default { ...@@ -81,11 +130,14 @@ export default {
.otherProjects-container { .otherProjects-container {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px;
background: #ffffff; background: #ffffff;
height: 100%; height: 100%;
display: flex;
align-items: center; align-items: center;
.otherProjects-cont{
display: flex;
width: 100%;
height: 100%;
}
.left{ .left{
width: 220px; width: 220px;
height: 100%; height: 100%;
...@@ -99,5 +151,9 @@ export default { ...@@ -99,5 +151,9 @@ export default {
overflow: hidden; /* 超出部分隐藏 */ overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */ text-overflow: ellipsis; /* 显示省略号 */
} }
.right-table{
width: calc(100% - 220px);
padding: 16px;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment