安全隐患列表展示自适应

This commit is contained in:
2022-03-10 10:21:19 +08:00
parent f21e45e00e
commit c28247f2dd
2 changed files with 43 additions and 119 deletions

View File

@ -33,10 +33,8 @@
"
>
<!-- <el-col style="text-align: center" :span="2">序号</el-col>
<el-col style="text-align: center" :span="3">车间名</el-col>
<el-col style="text-align: center" :span="10"
>安全隐患内容</el-col
>
<el-col style="text-align: center" :span="4">车间名</el-col>
<el-col style="text-align: center" :span="8">隐患内容</el-col>
<el-col style="text-align: center" :span="4">措施</el-col>
<el-col style="text-align: center" :span="3">责任人</el-col>
<el-col style="text-align: center" :span="2">类别</el-col> -->
@ -44,11 +42,7 @@
style="text-align: center"
v-for="item in troubleTitleList"
:key="item.id"
:span="
item.name === '隐患内容'
? getToubleContentSpan(troubleTitleList)
: item.span
"
:span="item.span"
>{{ item.name }}</el-col
>
</el-row>
@ -65,94 +59,24 @@
<!-- todo: 数据项已修改 -->
<!-- 将list给表单 -->
<ul class="item">
<!-- <li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 12px">
<el-col style="text-align: center" :span="2">{{
1
}}</el-col>
<el-col
style="text-align: center"
:span="3"
:title="item.dangerContent"
>bbbbbbbbb</el-col
>
<el-col
style="text-align: center"
:span="10"
:title="item.dangerContent"
>bbbbbbbbb</el-col
>
<el-col
style="text-align: center"
:span="4"
title="aaaaaaaaaaaaaaaaaaaa"
>
aaaaaaaaaaaaaaaaaaaa
</el-col>
<el-col style="text-align: center" :span="3"
>dddddddddddddddddddddd</el-col
>
<el-col style="text-align: center" :span="2"
>eeeeeeeeeeeeeeeeeeee</el-col
>
</el-row>
</li> -->
<li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 12px">
<el-col style="text-align: center" :span="2">{{
item.id
}}</el-col>
<!-- start -->
<!-- <el-col
style="text-align: center"
:span="item.span"
:title="item.value"
>{{ item.span }}</el-col
> -->
<el-col
style="text-align: center"
:span="
item.name === '隐患内容'
? getToubleContentSpan(scrollList)
: item.span
"
:title="item.value"
>{{ item.value }}</el-col
v-for="titem in troubleTitleList"
:span="titem.span"
:title="item[titem.name]"
>{{ item[titem.name] }}</el-col
>
<!-- end -->
<!-- <el-col
style="text-align: center"
:span="12"
:title="item.dangerContent"
>{{ item.dangerContent }}</el-col
>
<el-col style="text-align: center" :span="4">
<section class="box">
<span
v-if="item.measures == '未整改'"
style="
color: #f64f58;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span
v-else
style="
color: #6fd1b4;
font-size: 25px;
margin-right: 3px;
"
>·</span
>
<span v-if="item.measures == '未整改'">未整改</span>
<span v-else>已整改</span>
</section>
</el-col>
<el-col style="text-align: center" :span="3">{{
item.personLiable
}}</el-col>
<el-col style="text-align: center" :span="2">{{
item.personLiable
}}</el-col> -->
</el-row>
</li>
<!-- <li v-for="item in scrollList" :key="item.id">
@ -480,7 +404,6 @@ export default {
show: false,
},
data: mapList.map((e) => {
console.log(e);
return {
value: e.count,
name: e.category,
@ -516,23 +439,17 @@ export default {
let troubleTitleList = [];
let troubleDataList = [];
// troubleTitleList.push({ name: "id", span: 2 });
// troubleTitleList.push({ name: "车间名称", span: 4 });
// troubleTitleList.push({ name: "隐患内容", span: 8 });
// troubleTitleList.push({ name: "措施", span: 5 });
// troubleTitleList.push({ name: "责任人", span: 3 });
// troubleTitleList.push({ name: "类别", span: 2 });
troubleTitleList.push({ name: "序号", span: 2 });
if (troubleList.responsibleUnit) {
troubleTitleList.push({ name: "车间名称", span: 3 });
troubleTitleList.push({ name: "车间名称", span: 4 });
}
if (troubleList.address && troubleList.existProblem) {
troubleTitleList.push({ name: "隐患内容", span: 10 });
troubleTitleList.push({ name: "隐患内容", span: 8 });
}
if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
troubleTitleList.push({ name: "措施", span: 4 });
troubleTitleList.push({ name: "措施", span: 5 });
}
if (troubleList.responsiblePerson) {
@ -542,40 +459,43 @@ export default {
if (troubleList.category) {
troubleTitleList.push({ name: "类别", span: 2 });
}
// 求隐患内容以外所有列span和然后修改隐患内容的span
let a = this.getToubleContentSpan(troubleTitleList);
troubleTitleList.map((e) => {
if (e.name.indexOf("隐患内容") > -1) e.span = a;
});
this.troubleTitleList = troubleTitleList;
// 处理list得到troubleDataList
let tmpObj = {};
list.map((e) => {
list.map((e, i) => {
// let obj = {};
tmpObj["序号"] = i;
if (troubleList.responsibleUnit) {
tmpObj.name = "车间名称";
tmpObj.value = e.responsibleUnit;
tmpObj.span = 3;
tmpObj["车间名称"] = e.responsibleUnit;
}
if (troubleList.address && troubleList.existProblem) {
tmpObj.name = "隐患内容";
tmpObj.value = e.address + "" + e.existProblem;
tmpObj.span = 10;
tmpObj["隐患内容"] = e.address + " " + e.existProblem;
}
if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
tmpObj.name = "措施";
tmpObj.value = e.updateSuggest + "" + e.tempUpdateMethod;
tmpObj.span = 4;
tmpObj["措施"] = e.updateSuggest + " " + e.tempUpdateMethod;
}
if (troubleList.responsiblePerson) {
tmpObj.name = "责任人";
tmpObj.value = e.responsibleUnit;
tmpObj.span = 3;
tmpObj["责任人"] = e.responsibleUnit;
}
if (troubleList.category) {
tmpObj.name = "类别";
tmpObj.value = e.category;
tmpObj.span = 2;
tmpObj["类别"] = e.category;
}
console.log(tmpObj);
troubleDataList.push(tmpObj);
});
console.log("scrollList");
console.log(troubleDataList);
// 得到
this.scrollList = troubleDataList;
this.listData2 = Array(this.scrollList.length).fill(0);

View File

@ -123,9 +123,13 @@
width="500px"
>
<el-checkbox-group v-model="checkList" @change="handleTroubleItemChanged">
<el-checkbox v-for="item in listTitles" :label="item" :key="item">{{
item
}}</el-checkbox>
<el-checkbox
v-for="item in listTitles"
:label="item"
:key="item"
:disabled="item === '隐患内容'"
>{{ item }}</el-checkbox
>
</el-checkbox-group>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitTroubleItem"> </el-button>