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