<template>
<div class="bill-achievements">
<vxe-table
border
ref="xTable"
:data="tableData"
:show-header="false"
:cell-style="cellStyle"
>
<vxe-table-column
field="name"
title="name"
width="160"
align="center"
></vxe-table-column>
<vxe-table-column field="value" title="type">
<template slot-scope="scope">
<component
:is="scope.row.type"
:disabled="state == 'readOnly'"
:attr="{ field: 'value', row: scope.row, attr: scope.row.attr }"
:detailData="
scope.row.attr && scope.row.attr.tableData
? scope.row.attr.tableData
: []
"
@dataChange="updataTableData($event, scope.$rowIndex)"
></component>
</template>
</vxe-table-column>
</vxe-table>
</div>
</template>
<script>
import vxeAchievements from "./vxe-achievements.js";
import dateControl from "./components/dateControl.vue";
import vxeTableControl from "./components/vxe-table.vue";
import radioGroupControl from "./components/radioGroupControl.vue";
import inputControl from "./components/inputControl.vue";
import textAreaControl from "./components/textAreaControl.vue";
import input from "../util/bc_input.js";
export default {
mixins: [vxeAchievements, input],
components: {
vxeTableControl,
dateControl,
radioGroupControl,
inputControl,
textAreaControl,
},
data() {
return {
tableData: [
{
name: "项目名称",
type: "inputControl",
value: "",
},
{
name: "项目属性",
type: "radioGroupControl",
value: "新增项目",
},
{
name: "项目起止时间",
type: "dateControl",
value: [],
},
{
name: "项目资金申请（万元）",
type: "vxeTableControl",
attr: {
showHeader: false,
addObj: {
name: "",
value: "",
},
tableData: [
{
name: "资金总额：",
value: "",
},
{
name: " (一)上级工会预算拨款：",
value: "",
},
{
name: "1.工会经费：",
value: "",
},
{
name: "2.财政拨款：",
value: "",
},
{
name: "(二)自有资金：",
value: "",
},
{
name: "1.工会经费：",
value: "",
},
{
name: "2.财政补助收入：",
value: "",
},
{
name: "3.行政补助收入：",
value: "",
},
{
name: "4.事业收入：",
value: "",
},
{
name: "5.经营性收入：",
value: "",
},
],
columns: [
{
field: "name",
title: "收入名称",
width: 230,
type: "inputControl",
},
{
field: "value",
title: "数值",
type: "inputControl",
},
],
},
},
{
name: "单位(部门)职能概述",
type: "textAreaControl",
value: "",
},
{
name: "项目概况",
type: "textAreaControl",
value: "",
},
{
name: "项目立项情况",
type: "vxeTableControl",
attr: {
showHeader: false,
addObj: {
name: "",
value: "",
},
tableData: [
{
name: "项目立项的依据",
value: "",
},
{
name: "项目申报的可行性",
value: "",
},
{
name: "项目申报的必要性",
value: "",
},
],
columns: [
{
field: "name",
title: "立项情况",
width: 230,
type: "inputControl",
},
{
field: "value",
title: "描述",
type: "inputControl",
},
],
},
},
{
name: "项目实施进度计划",
type: "vxeTableControl",
attr: {
showHeader: false,
headerOne: [0],
addObj: {
content: "",
startTime: "",
endTime: "",
},
tableData: [
{
content: "项目实施内容",
startTime: "开始时间",
endTime: "完成时间",
},
{
content: "",
startTime: "",
endTime: "",
},
{
content: "",
startTime: "",
endTime: "",
},
],
columns: [
{
field: "content",
title: "项目实施内容",
type: "inputControl",
align: "center",
},
{
field: "startTime",
title: "开始时间",
type: "dateControl",
daterange: "date",
placement: "bottom",
align: "center",
},
{
field: "endTime",
title: "完成时间",
type: "dateControl",
daterange: "date",
placement: "bottom",
align: "center",
},
],
},
},
{
name: "项目绩效目标",
type: "vxeTableControl",
attr: {
showHeader: false,
headerOne: [0],
addObj: {
longGoal: "",
yearGoal: "",
},
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,
headerOne: [0, 5],
addObj: {
firstIndex: "",
secondIndex: "",
content: "",
indexValue: "",
remark: "",
},
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: false,
headerOne: [0, 3],
addObj: {
firstIndex: "",
secondIndex: "",
content: "",
indexValue: "",
remark: "",
},
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: "",
},
{
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: "textAreaControl",
value: "",
},
{
name: "填报人：",
type: "vxeTableControl",
attr: {
border: "none",
showHeader: false,
addObj: {
name: "",
value: "",
},
tableData: [
{
person: "单位（部门）负责人：",
time: "填报时间:",
},
],
columns: [
{
field: "person",
title: "部门负责人",
type: "inputControl",
},
{
field: "time",
title: "填报时间",
type: "inputControl",
},
],
},
},
],
};
},
props: {
// define: {
// type: Object,
// default: () => {},
// },
// context: {
// type: Object,
// default: () => {},
// },
},
watch: {
tableData: {
handler(nv, ov) {
console.log(nv, ov);
if (this.define.config.field) {
this.context.dataObject.setValue(
this.define.config.field.split(".")[1],
JSON.stringify(nv)
);
}
},
deep: true,
},
value: {
handler(nv, ov) {
console.log("value", nv, ov);
this.tableData = JSON.parse(nv);
},
deep: true,
},
},
computed: {},
methods: {
updataTableData(nv, rowIndex) {
this.tableData[rowIndex].attr.tableData = nv;
},
cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
return {
backgroundColor:this.state == 'readOnly'? "#F3F3F3":''
}
},
},
mounted() {},
created() {},
beforeDestroy() {},
};
</script>
<style lang="less">
.rbcInputControl input {
margin-left: -10px;
width: calc(100% + 18px);
height: 40px;
margin-top: -3px;
border: none;
}
.rbcInputControl textarea {
margin-left: -10px;
width: calc(100% + 18px);
border: none;
}
.rbcInputControl textarea.ivu-input {
max-width: inherit;
font-size: 14px;
vertical-align: revert;
}
.bill-achievements {
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis) {
padding: 0;
line-height: 44px;
}
}
</style>