<template>
|
<div class="">
|
<table class="table">
|
<tbody>
|
<tr>
|
<th class="title" colspan="9">文件基本信息</th>
|
</tr>
|
<tr>
|
<th class="col-1">文件名称</th>
|
<td colspan="8">{{ info.fileName }}</td>
|
</tr>
|
<tr
|
v-for="(item, idx) in typeList"
|
:key="'li1_' + idx"
|
:rowspan="0 == idx ? sumRows : 1"
|
>
|
<template v-if="0 == idx">
|
<th class="col-1" :rowspan="sumRows">文件类型</th>
|
</template>
|
<td
|
v-for="(sub, i) in item"
|
:colspan="item.length == 2 ? 4 : 1"
|
:key="'li2_' + i"
|
>
|
<template v-if="item.length != 2 && sub.name">
|
<a-icon v-if="sub.checked" type="check-square" />
|
<a-icon v-else type="border" />
|
</template>
|
{{ sub.name }}
|
</td>
|
</tr>
|
<tr>
|
<th class="col-1">文件版本</th>
|
<td colspan="4">{{ info.fileVersion }}</td>
|
<th class="col-1">关联版本</th>
|
<td colspan="3">{{ info.fileRelatedVersion }}</td>
|
</tr>
|
<tr>
|
<th class="col-1">编制</th>
|
<td colspan="4">{{ info.editor }}</td>
|
<th class="col-1">审核</th>
|
<td colspan="3">{{ info.auditor }}</td>
|
</tr>
|
<tr>
|
<th class="col-1">发布时间</th>
|
<td colspan="8">{{ info.releaseDate }}</td>
|
</tr>
|
<tr>
|
<th class="title" colspan="9">文件适用产品</th>
|
</tr>
|
<tr v-for="(item, idx) in sopProductList" :key="idx">
|
<th class="col-1">物料编码</th>
|
<td colspan="4">{{ item.code }}</td>
|
<th class="col-1">型/板号</th>
|
<td colspan="3">{{ item.model }}</td>
|
</tr>
|
<tr>
|
<th class="col-1">发布说明</th>
|
<td colspan="8">{{ info.releaseNotes }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "",
|
props: {
|
info: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
},
|
data() {
|
return {
|
sumRows: 2,
|
typeList: [],
|
};
|
},
|
computed: {
|
sopProductList() {
|
return this.info.sopProductList || [];
|
},
|
},
|
watch: {
|
info() {
|
this.format();
|
}
|
},
|
methods: {
|
format() {
|
// let list = [
|
// {
|
// name: "组装",
|
// labels: ["a", "b", "c"],
|
// },
|
// {
|
// name: "测试",
|
// labels: ["a", "b", "c", "d", "e"],
|
// },
|
// {
|
// name: "xx",
|
// labels: ["a", "b", "c", "d", "e"],
|
// },
|
// ];
|
// fileType=组装-线束;组装-复用;组装-test;测试-单板;测试-联调;生产-线束;
|
let {
|
fileType,
|
fileTypeList,
|
} = this.info;
|
fileType = fileType || '';
|
fileTypeList = fileTypeList || [];
|
let selected = fileType.split(";").filter((v) => v != "");
|
let _types = {};
|
selected.forEach((v) => {
|
let arr = v.split("-");
|
_types[arr[0]] = _types[arr[0]] || [];
|
_types[arr[0]].push(arr[1]);
|
});
|
let list = fileTypeList.map((v) => {
|
let name = Object.keys(v)[0];
|
return {
|
name,
|
labels: v[name].map((item) => {
|
let checked = _types[name]
|
? _types[name].some((a) => a == item)
|
: false;
|
return {
|
name: item,
|
checked,
|
};
|
}),
|
};
|
});
|
let resList = [];
|
for (let i = 0, j = list.length; i < j; i += 2) {
|
// 同一行两个类别占用的最大行数
|
let rows = 0;
|
let row0 = 0;
|
let row1 = 0;
|
let item0 = list[i];
|
let item1 = list[i + 1];
|
// 是否有第二个元素
|
let hasItem1 = i + 1 < j;
|
// 当前行的第一个类占用的行数
|
row0 = Math.ceil(item0.labels.length / 4);
|
if (hasItem1) {
|
row1 = Math.ceil(item1.labels.length / 4);
|
}
|
rows = Math.max(row0, row1);
|
let trs = [
|
[{ name: item0.name }, { name: hasItem1 ? item1.name : "" }],
|
];
|
for (let m = 0; m < rows; m++) {
|
let idx0 = m * 4;
|
let idx1 = m * 4 + 1;
|
let idx2 = m * 4 + 2;
|
let idx3 = m * 4 + 3;
|
let li0 = [];
|
let li1 = [];
|
li0[0] = item0.labels[idx0] || {};
|
li0[1] = item0.labels[idx1] || {};
|
li0[2] = item0.labels[idx2] || {};
|
li0[3] = item0.labels[idx3] || {};
|
if (hasItem1) {
|
li1[0] = item1.labels[idx0] || {};
|
li1[1] = item1.labels[idx1] || {};
|
li1[2] = item1.labels[idx2] || {};
|
li1[3] = item1.labels[idx3] || {};
|
} else {
|
li1 = [{}, {}, {}, {}];
|
}
|
trs.push([...li0, ...li1]);
|
}
|
resList.push(...trs);
|
}
|
this.sumRows = resList.length;
|
this.typeList = resList;
|
},
|
},
|
|
mounted() {
|
this.format();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.table {
|
width: 100%;
|
// table-layout: fixed;
|
border-collapse: collapse;
|
th,
|
td {
|
border: 1px #333 solid;
|
padding: 4px;
|
}
|
td {
|
// color: #13c2c2;
|
color: #333;
|
}
|
.title {
|
font-weight: 900;
|
padding-left: 2em;
|
font-style: italic;
|
}
|
}
|
.col-1 {
|
// word-break:break-all;
|
width: 6.4em;
|
}
|
</style>
|
