Skip to content

R
rbc-demo
Commit 0f464493 by qiaoyanqi
Options

表格样式调整

parent d3c77909
Showing with 493 additions and 57 deletions
develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/achievements.vue
<template> <template>
<div class="bill-achievements"> <div class="bill-achievements">
<Button type="primary" @click="Primary">Primary</Button>
<vxe-table border ref="xTable" :data="tableData" :show-header="false"> <vxe-table border ref="xTable" :data="tableData" :show-header="false">
<vxe-table-column <vxe-table-column
field="name" field="name"
...@@ -43,7 +44,7 @@ export default { ...@@ -43,7 +44,7 @@ export default {
{ {
name: "项目属性", name: "项目属性",
type: "radioGroupControl", type: "radioGroupControl",
value: "", value: "新增项目",
}, },
{ {
name: "项目起止时间", name: "项目起止时间",
...@@ -125,10 +126,12 @@ export default { ...@@ -125,10 +126,12 @@ export default {
{ {
name: "单位(部门)职能概述", name: "单位(部门)职能概述",
type: "inputControl", type: "inputControl",
value: "xx",
}, },
{ {
name: "项目概况", name: "项目概况",
type: "inputControl", type: "inputControl",
value: "33",
}, },
{ {
name: "项目立项情况", name: "项目立项情况",
...@@ -170,9 +173,15 @@ export default { ...@@ -170,9 +173,15 @@ export default {
name: "项目实施进度计划", name: "项目实施进度计划",
type: "vxeTableControl", type: "vxeTableControl",
attr: { attr: {
showHeader: true, showHeader: false,
headerOne: [0],
tableData: [ tableData: [
{ {
content: "项目实施内容",
startTime: "开始时间",
endTime: "完成时间",
},
{
content: "", content: "",
startTime: "", startTime: "",
endTime: "", endTime: "",
...@@ -188,6 +197,7 @@ export default { ...@@ -188,6 +197,7 @@ export default {
field: "content", field: "content",
title: "项目实施内容", title: "项目实施内容",
type: "inputControl", type: "inputControl",
align: "center",
}, },
{ {
field: "startTime", field: "startTime",
...@@ -195,6 +205,7 @@ export default { ...@@ -195,6 +205,7 @@ export default {
type: "dataControl", type: "dataControl",
daterange: "date", daterange: "date",
placement: "bottom", placement: "bottom",
align: "center",
}, },
{ {
field: "endTime", field: "endTime",
...@@ -202,6 +213,7 @@ export default { ...@@ -202,6 +213,7 @@ export default {
type: "dataControl", type: "dataControl",
daterange: "date", daterange: "date",
placement: "bottom", placement: "bottom",
align: "center",
}, },
], ],
}, },
...@@ -209,50 +221,414 @@ export default { ...@@ -209,50 +221,414 @@ export default {
{ {
name: "项目绩效目标", name: "项目绩效目标",
type: "vxeTableControl", type: "vxeTableControl",
attr: { showHeader: false }, attr: {
showHeader: false,
headerOne: [0],
tableData: [
{
longGoal: "长期目标",
yearGoal: "年度目标",
},
{
longGoal: "",
yearGoal: "",
},
],
columns: [
{
field: "longGoal",
title: "长期目标",
type: "inputControl",
align: "center",
},
{
field: "yearGoal",
title: "年度目标",
type: "inputControl",
align: "center",
},
],
},
}, },
{ {
name: "长期绩效指标", name: "长期绩效指标",
type: "vxeTableControl", type: "vxeTableControl",
attr: { showHeader: false }, attr: {
showHeader: false,
headerOne: [0, 5],
tableData: [
{
firstIndex: "一级指标",
secondIndex: "二级指标",
content: "指标内容",
indexValue: "指标值",
remark: "备注",
},
{
firstIndex: "产出指标",
secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "质量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "质量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "一级指标",
secondIndex: "二级指标",
content: "指标内容",
indexValue: "指标值",
remark: "备注",
},
{
firstIndex: "产出指标",
secondIndex: "时标指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "时标指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "成本指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "成本指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "经济效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "社会效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "社会效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "环境效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "环境效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "可持续影响指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "服务对象满意度指标",
secondIndex: "具体指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "服务对象满意度指标",
secondIndex: "具体指标",
content: "",
indexValue: "",
remark: "",
},
],
columns: [
{
field: "firstIndex",
title: "一级指标",
type: "inputControl",
align: "center",
},
{
field: "secondIndex",
title: "二级指标",
type: "inputControl",
align: "center",
},
{
field: "content",
title: "指标内容",
type: "inputControl",
align: "center",
width: 200,
},
{
field: "indexValue",
title: "指标值",
type: "inputControl",
align: "center",
width: 200,
},
{
field: "remark",
title: "备注",
type: "inputControl",
align: "center",
width: 200,
},
],
},
}, },
{ {
name: "年度绩效指标", name: "年度绩效指标",
type: "vxeTableControl", type: "vxeTableControl",
attr: { attr: {
showHeader: true, showHeader: false,
headerOne: [0, 3],
tableData: [ tableData: [
{ {
longGoal: "", firstIndex: "一级指标",
yearGoal: "", secondIndex: "二级指标",
content: "指标内容",
indexValue: "指标值",
remark: "备注",
}, },
{ {
longGoal: "", firstIndex: "产出指标",
yearGoal: "", secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "一级指标",
secondIndex: "二级指标",
content: "指标内容",
indexValue: "指标值",
remark: "备注",
},
{
firstIndex: "产出指标",
secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "数量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "质量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "质量指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "时效指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "时效指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "成本指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "产出指标",
secondIndex: "成本指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "经济效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "经济效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "社会效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "社会效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "环境效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "环境效益指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "可持续影响指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "效益指标",
secondIndex: "可持续影响指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "服务对象满意度指标",
secondIndex: "具体指标",
content: "",
indexValue: "",
remark: "",
},
{
firstIndex: "服务对象满意度指标",
secondIndex: "具体指标",
content: "",
indexValue: "",
remark: "",
}, },
], ],
columns: [ columns: [
{ {
field: "longGoal", field: "firstIndex",
title: "长期目标", title: "一级指标",
type: "inputControl", type: "inputControl",
align: "center",
}, },
{ {
field: "yearGoal", field: "secondIndex",
title: "年度目标", title: "二级指标",
type: "dataControl", type: "inputControl",
align: "center",
},
{
field: "content",
title: "指标内容",
type: "inputControl",
align: "center",
width: 200,
},
{
field: "indexValue",
title: "指标值",
type: "inputControl",
align: "center",
width: 200,
},
{
field: "remark",
title: "备注",
type: "inputControl", type: "inputControl",
} align: "center",
width: 200,
},
], ],
}, },
}, },
{ {
name: "其他说明的问题", name: "其他说明的问题",
type: "inputControl", type: "inputControl",
value: "",
}, },
{ {
name: "填报人：", name: "填报人：",
type: "inputControl", type: "inputControl",
value: "",
}, },
], ],
}; };
...@@ -260,13 +636,30 @@ export default { ...@@ -260,13 +636,30 @@ export default {
props: {}, props: {},
watch: {}, watch: {},
computed: {}, computed: {},
methods: {}, methods: {
Primary(){
console.log(this.tableData)
}
},
mounted() {}, mounted() {},
created() {}, created() {},
beforeDestroy() {}, beforeDestroy() {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
.rbcInputControl input{
margin-left: -10px;
width: calc(100% + 18px);
height: 40px;
margin-top:-3px;
border:none
}
.bill-achievements { .bill-achievements {
width: 1300px;
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis) {
padding: 0;
line-height: 44px;
}
} }
</style> </style>
develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/dataControl.vue
<template> <template>
<div class=""> <div class="rbcInputControl">
<DatePicker :type="attr.column && attr.column.daterange?attr.column.daterange:'daterange'" :placement="attr.column && attr.column.placement" :value="attr.row[attr.field]"></DatePicker> <DatePicker
:type="
attr.column && attr.column.daterange
? attr.column.daterange
: 'daterange'
"
:placement="attr.column && attr.column.placement"
:value="attr.row[attr.field]"
></DatePicker>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {};
};
}, },
props: { props: {
attr:{ attr: {
type:Object, type: Object,
default:()=>{} default: () => {},
} },
}, },
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {},
},
mounted() {}, mounted() {},
created() {}, created() {},
beforeDestroy() {}, beforeDestroy() {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
</style>
develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/inputControl.vue
<template> <template>
<div class=""> <div class="rbcInputControl">
<Input v-model="attr.row[attr.field]"/> <Input v-model="attr.row[attr.field]"/>
</div> </div>
</template> </template>
......
develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/vxe-table.vue
<template> <template>
<div class="detail-table"> <div class="detail-table">
<vxe-table border ref="xTable" :data="attr.attr.tableData" :show-header="attr.attr.showHeader||false" <vxe-table
:header-cell-class-name="headerCellClassName"> border
<template v-for="(column, index) in attr.attr.columns"> ref="xTable"
<vxe-table-column :field="column.field" :title="column.title" :width="column.width" :key="index"> :data="attr.attr.tableData"
<template slot-scope="scope"> :show-header="attr.attr.showHeader || false"
<component :header-cell-class-name="headerCellClassName"
v-if="column.type" :span-method="spanMethods"
:is="column.type" >
:attr="{field:column.field,row:scope.row,column:column}" <template v-for="(column, index) in attr.attr.columns">
></component> <vxe-table-column
<span v-else>{{scope.row[column.field]}}</span> :field="column.field"
</template> :title="column.title"
</vxe-table-column> :width="column.width"
</template> :height="column.height"
:align="column.align"
:key="index"
>
<template slot-scope="scope">
<component
v-if="
attr.attr.headerOne
? !attr.attr.headerOne.includes(scope.$rowIndex) &&
column.type
: column.type
"
:is="column.type"
:attr="{ field: column.field, row: scope.row, column: column }"
></component>
<span v-else style="display: inline-block; height: 38px">{{
scope.row[column.field]
}}</span>
</template>
</vxe-table-column>
</template>
</vxe-table> </vxe-table>
</div> </div>
</template> </template>
...@@ -29,24 +49,42 @@ export default { ...@@ -29,24 +49,42 @@ export default {
vxeTableControl, vxeTableControl,
dataControl, dataControl,
radioGroupControl, radioGroupControl,
inputControl inputControl,
}, },
data() { data() {
return { return {};
};
}, },
props: { props: {
attr:{ attr: {
type:Object, type: Object,
default:()=>{} default: () => {},
} },
}, },
watch: {}, watch: {},
computed: {}, computed: {},
methods: { methods: {
headerCellClassName ({ column, columnIndex }) { headerCellClassName({ column, columnIndex }) {
if (column.property === 'content') { if (column.property === "content") {
return 'col-white' return "col-white";
}
},
spanMethods({ row, $rowIndex, column, data }) {
let fields = ["firstIndex", "secondIndex"];
let cellValue = row[column.property];
if (cellValue && fields.includes(column.property)) {
let prevRow = data[$rowIndex - 1];
let nextRow = data[$rowIndex + 1];
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else {
let countRowspan = 1;
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = data[++countRowspan + $rowIndex];
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 };
}
}
} }
}, },
}, },
...@@ -57,6 +95,9 @@ export default { ...@@ -57,6 +95,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.detail-table { .detail-table {
margin-left:-11px;
margin-top:-1px;
width: calc(100% + 23px);
.vxe-header--column .col-white { .vxe-header--column .col-white {
background-color: #fff !important; background-color: #fff !important;
} }
......
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