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