//object.js
module.exports={
'partList_jksq':{
"attributeId": "partList_jksq",
"cols":[{
'id':"brand",
'name': '品牌',
'addData': ['123'],
'selectDetail':['1','2'],
'rightData':['子流程状态','子流程链接'],
'required':true,
'extend':true,//继承给下一个表格数据
'xtype':'input',
},{
'id':'materiaModel',
'name': '物料型号',
'addData': ['1'],
'selectDetail':['1','2'],
'xtype':'select',
},{
'id':'date',
'name': '评审完成时间',
'addData': ['2019-08-02'],
'xtype':'date',
},{
'id':'operation',
'addData': [''],
'name': '操作',
}],
"disabled": false,
"id": "partList_jksq",
"name": "资源选择范围",
},
'partList_jksq2':{
"attributeId": "partList_jksq2",
"cols": [{
'id':"brand",
},{
'id':'materiaModel',
},{
'id':'Conclusion',
'name': '器件结论',
'addData': [''],
'rightData':[],
'xtype':'',
},{
'id':'Conclusion',
'name': '软件结论',
'addData': [''],
'rightData':[],
'xtype':'',
}{
'id':'record',
'name': '达成一致记录',
'addData': [''],
'rightData':[],
'xtype':'input',
},{
'id':'process',
'name': '启动认证流程',
'addData': [''],
'rightData':[],
'xtype':'radio',
}],
"disabled": false,
"id": "partList_jksq2",
"name": "选型结论",
},
"show": true,
"span": 24,
"typeId": "BuildLibraryFormDoc",
"xtype": "tableModelSelection"
}
//父级
<template>
<div class="matrix-table part-change-table">
<el-collapse v-model="activeTabs" class="taskcollapse">
<el-collapse-item :title="object.name" name="1">
<div class="table-panel-containner">
<el-table
class="headHide"
:data="objectValue[object.id]"
border
style="width: 100%"
:span-method="arraySpanMethod"
:cell-class-name="cellClassNameFn"
>
<template v-for="(col ,index) in cols">
<!-- 第一列 标题 -->
<el-table-column
fixed
class-name="flow-node-table-label"
width="150px"
:prop="col['addData']"
:label="col.label"
v-if="!index"
>
<template slot-scope="scope">
<span v-if="scope.row.required" class="table-header-required">*</span>
{{scope.row.name}}
</template>
</el-table-column>
<!-- 中间主体 col['addData'+index]-->
<el-table-column :prop="col['addData'+index]"
:width="object.id=='partList_jksq'?'150px':''"
min-width="150px"
:label="col.label" v-else>
<template slot-scope="scope">
<!-- 非操作 -->
<span v-if="scope.row['id']!='operation'">
<el-input
v-if="scope.row.xtype=='input'"
placeholder="请输入"
v-model="scope.row['addData'][index-1]"
></el-input>
<el-select
v-else-if="scope.row.xtype=='select'"
v-model="scope.row['addData'][index-1]"
>
<el-option
v-for="item in scope.row.selectDetail"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
<template v-else-if="scope.row.xtype=='radio'">
<el-radio v-model="scope.row['addData'][index-1]" label="1">是</el-radio>
<el-radio v-model="scope.row['addData'][index-1]" label="2">否</el-radio>
</template>
<span v-else>
<template v-if="scope.row['addData']">{{scope.row['addData'][index-1]}}</template>
</span>
</span>
<!-- 操作 -->
<span v-else>
<el-button @click="delCol(('addData'+index),index)">删除</el-button>
</span>
<span></span>
</template>
</el-table-column>
</template>
<!-- 右侧菜单 -->
<template v-for="(sub,index) in rightMenu" v-if="object.id!='partList_jksq'">
<el-table-column fixed="right" label :width="sub.width" prop>
<template slot-scope="scope">
<!-- {{index}}--{{scope.row['rightData']}} -->
<template
v-if="scope.row['id']=='brand'||scope.row['id']=='materiaModel'"
>{{sub.data}}</template>
<template v-else-if="scope.row['rightData']">
<el-input
v-if="sub.xtype=='input'"
placeholder="请输入"
v-model="scope.row['rightData'][index]"
></el-input>
<vivo-select-user
v-else-if="sub.xtype=='addUser'"
ref="selectUser"
:single="sub.single"
:placeholder="sub.placeholder"
v-model="scope.row['rightData'][index]"
>
</vivo-select-user>
<template v-else>--</template>
</template>
</template>
</el-table-column>
</template>
<!-- 添加列 -->
<el-table-column label="添加列" style="min-width:80px;" v-if="object.id=='partList_jksq'">
<template slot-scope="scope" v-if="scope.$index==0&&object.id=='partList_jksq'">
<el-button raw-type="button" @click="addCol">+</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
</el-collapse>
<!-- {{objectValue[object.id]}} -->
</div>
</template>
<script>
export default {
data() {
return {
radio: 0,
loading: false,
activeTabs: ["1"],
tableData: [],
rightMenu: [
{
id: "childProcessState",
data: "子流程状态",
width:"150px",
xtype: ""
},
{
id: "childProcessLink",
data: "子流程链接",
width:"150px",
xtype: ""
},
{
id: "taskRecipient",
data: "任务接收人",
placeholder:"请选择(可多选)",
width:"250px",
xtype: "addUser"
},
{
id: "multitaskingPeople",
data: "任务接收人",
placeholder:"请选择",
width:"170px",
single:false,
xtype: "addUser"
}
]
};
},
created() {
if (!this.$route.query.pboid) {
this.objectValue[this.object.id] = this.object["cols"];
}
},
props: {
object: Object,
requiredData: Object,
objectValue: Object,
cols: Array
},
watch: {
"objectValue.partList_jksq": {
handler(val) {
var getBrand = {},
getMateriaModel = {};
val.forEach(item => {
if (item["id"] == "brand") getBrand = item;
if (item["id"] == "materiaModel") getMateriaModel = item;
});
// if(this.objectValue['partList_jksq2'].every(item=>item['id']!='brand')){
// this.objectValue['partList_jksq2'].unshift({id:'brand','addData': [],})
// }
this.objectValue["partList_jksq2"].forEach((item, index) => {
if (item["id"] == "brand") {
let list = JSON.parse(JSON.stringify(getBrand));
list["xtype"] = "";
this.$set(this.objectValue["partList_jksq2"], [index], list);
}
if (item["id"] == "materiaModel") {
let list = JSON.parse(JSON.stringify(getMateriaModel));
list["xtype"] = "";
this.$set(this.objectValue["partList_jksq2"], [index], list);
}
});
},
deep: true
}
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//遍历本行合并表
if (this.object.id != "partList_jksq") {
if(this.objectValue[this.object.id][0].addData)
var colLength=this.objectValue[this.object.id][0].addData.length;
console.log(colLength)
if(row.addData){
var len = row.addData.length;
if(rowIndex==0||rowIndex==1){//(row.id == "brand" || row.id == "materiaModel")
if (this.isColumnIndex(columnIndex,len)) {
return [2,1]
}
}
if(row.id == "record" || row.id == "process"){
if(columnIndex) return [1,colLength+4]
}
}
}
},
cellClassNameFn({row, column, rowIndex, columnIndex}){
if (this.object.id != "partList_jksq") {
if(row.addData){
var len = row.addData.length;
if(rowIndex==0||rowIndex==1){//(row.id == "brand" || row.id == "materiaModel")
if (this.isColumnIndex(columnIndex,len)) {
return 'tHeaderBg'
}
}
}
}
},
isColumnIndex(columnIndex,len){
return columnIndex == (JSON.parse(len)+1) ||
columnIndex == (JSON.parse(len)+2) ||
columnIndex == (JSON.parse(len)+3) ||
columnIndex == (JSON.parse(len)+4);
},
addCol() {
//添加行
this.cols.push({ prop: "addData", label: "add" });
this.objectValue[this.object.id].forEach(item => {
if (item.name != "操作") item["addData"].push("");
});
},
delCol(name, index) {
//删除行
if(this.cols.length>2) this.cols.splice(index, 1);
this.objectValue[this.object.id].forEach(item => {
if (item["addData"]) {
if(item["addData"].length>1){
item["addData"].splice(index - 1, 1);
}
}
});
},
//获取动态表格列名
//表头列宽度
//flexColumnWidth: function(colId) {
// let flexWidth = 0;
// switch (colId) {
// case "desEn":
// flexWidth = 170;
// break;
// default:
// flexWidth = 150;
// }
// return flexWidth + "px";
//}
//表格行号切换
// showRow(row, event, column) {
// this.radio = this.objectValue[this.object.id].indexOf(row);
// }
}
};
</script>
<style lang="less">
.matrix-table {
.pd10 {
padding: 10px;
}
tbody .flow-node-table-label {
padding: 3px 12px 3px 0;
width: 150px;
background: #f3faff !important;
color: #798999;
position: relative;
background-clip: padding-box;
line-height: 1.2;
}
.hover-row {
td {
&:not(.flow-node-table-label) {
background:transparent !important;
}
}
td.tHeaderBg{
background: #f3faff !important;
}
}
.headHide {
.el-table__header-wrapper {
display: none;
}
}
.tHeaderBg{
background: #f3faff !important;
color: #798999;
}
.el-table__body-wrapper{
>table{
overflow: hidden;
}
}
.el-table__fixed-right{
tr td.is-hidden+ td {
border-left: 1px solid #D8DDE5 !important;
}
}
.el-input input,.ms-ctn .ms-input-container input{
padding-left:0;
}
}
</style>
//逻辑页面
<template>
<div class="">
<tablePartCells :object="object['partList_jksq']" :objectValue="objectValue" :cols="cols"></tablePartCells>
<tablePartCells :object="object['partList_jksq2']" :objectValue="objectValue" :cols="cols"></tablePartCells>
</div>
</template>
<script>
import tablePartCells from "./table-part-cell"
export default {
data() {
return {
cols: [{ prop: "", label: "标题" }, { prop: "addData1", label: "add1" }],
object:{},
};
},
components:{
tablePartCells
},
created(){
this.object = require("./object.js"); //配置的数据
},
props: {
objectValue: Object //回填的数据存放
},
};
</script>