<!-- -->
|
<template>
|
<div class="compare_page_box">
|
<!-- 头部导航栏 -->
|
<van-nav-bar style="background-color: #528abe">
|
<template #left>
|
<van-icon @click="pageBack" name="arrow-left" size="18" />
|
</template>
|
<template #title>
|
<label>{{$t('indexPage.compareList.TR')}}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
|
<!-- 显示内容 -->
|
<div class="page_main">
|
<div style=" height: 100%;overflow:auto;">
|
<div v-for="(item, i) in PartPropList" :key="i">
|
<div
|
v-if="item.colspan != ''"
|
:class="[item.colspan != '' ? 'title' : 'content']"
|
:style="{ width: item.colspan*150+ 'px' }"
|
>{{ item.PropGrpName }}</div>
|
<div
|
v-if="item.colspan == ''"
|
:class="[item.colspan != '' ? 'title' : 'content', 'div_tr']"
|
:style="{ width: item.List.length*150+ 'px' }"
|
>
|
<div
|
:style="{ width: '150px',overflow:'hidden' }"
|
v-for="(node, j) in item.List"
|
:key="j"
|
style
|
>
|
<span v-if="node.indexOf('\\') == -1">
|
<span
|
v-if="i == 1 && j != 0"
|
class="el-icon-close"
|
style="
|
color: red;
|
cursor: pointer;
|
display: inline-block;
|
width: 30px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
"
|
@click="CompareDelete(j - 1)"
|
></span>
|
<span>{{ node }}</span>
|
</span>
|
<span v-if="node.indexOf('\\') != -1">
|
<select class="select">
|
<option
|
v-for="(node2, k) in node.split('\\\\')"
|
:key="k"
|
value="node2"
|
>{{ node2 }}</option>
|
</select>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import languageMixin from "@/mixin/language.js";
|
export default {
|
mixins: [languageMixin],
|
name: "",
|
components: {},
|
data() {
|
return {
|
PartPropList: [],
|
compareList: [], //比较列表
|
m_Title: ""
|
};
|
},
|
created() {},
|
mounted() {
|
|
this.m_Title = this.getSoftName();
|
document.title = this.m_Title
|
let compareList = localStorage.getItem("compareList");
|
compareList = compareList != null ? JSON.parse(compareList) : [];
|
this.compareList = compareList;
|
this.initTable();
|
},
|
computed: {},
|
watch: {},
|
methods: {
|
initTable() {
|
let _this = this;
|
let url =
|
this.$globalConfig.WebApiUrl.MainUrl + "v1/Web/PumpInfo/GetCompareList";
|
let lang = this.getCurrentLanguageType();
|
let list = [];
|
this.compareList.forEach(item => {
|
list.push({
|
ProductType: 0,
|
SID: item.SID,
|
PID: item.PID
|
});
|
});
|
let requestData = {
|
List: list,
|
Lang: lang
|
};
|
|
_this.m_isShowLoadingFrm = true;
|
this.$axios({
|
url: url,
|
method: "post",
|
data: requestData
|
}).then(function(res) {
|
_this.m_isShowLoadingFrm = false;
|
|
let resdata = res.data;
|
console.log(resdata, 50);
|
//
|
if (resdata.Code != 0) {
|
_this.$toast(resdata.Message);
|
return;
|
}
|
let data = resdata.Data;
|
|
let tempArr = [];
|
for (var i = 0; i < data.PropGrpName.length; i++) {
|
let item = data.PropGrpName[i];
|
for (var j = 0; j < data.PropGrpSpan[i]; j++) {
|
if (j == 0) {
|
tempArr[tempArr.length] = {
|
colspan: data.PartPropList[0].length,
|
PropGrpName: item
|
};
|
}
|
let n = 0;
|
if (i != 0) {
|
for (var k = 0; k < i; k++) {
|
n += data.PropGrpSpan[k];
|
}
|
}
|
// console.log(data.PartPropList[n + j],n + j,n,j,145)
|
tempArr[tempArr.length] = {
|
colspan: "",
|
List: data.PartPropList[n + j]
|
};
|
}
|
}
|
// console.log(tempArr, 121);
|
_this.PartPropList = tempArr;
|
});
|
},
|
CompareDelete(i) {
|
// console.log(i, 291);
|
let _this = this;
|
this.$dialog
|
.confirm({
|
message: "确认删除此型号的比较？"
|
})
|
.then(_ => {
|
this.compareList.splice(i, 1);
|
let json = JSON.stringify(this.compareList);
|
localStorage.setItem("compareList", json);
|
if (this.compareList.length < 2) {
|
this.pageBack();
|
return;
|
}
|
this.$router.go(0);
|
this.$toast({
|
message: "删除成功",
|
type: "success"
|
});
|
})
|
.catch(_ => {});
|
},
|
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.compare_page_box {
|
height: 100%;
|
|
.page_main {
|
height: calc(100% - 44px);
|
padding: 0px 2px;
|
}
|
|
.div_tr {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: nowrap;
|
}
|
.title {
|
background-color: #f3e4c1;
|
height: 30px;
|
line-height: 30px;
|
border-left: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
}
|
.title:hover {
|
background-color: #fff;
|
}
|
.content {
|
height: 30px;
|
line-height: 30px;
|
border-left: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
background-color: #fcf8e3;
|
color: #8a6d3b;
|
font-size: 12px;
|
}
|
.content:hover {
|
background-color: #faf2cc;
|
}
|
.content > div {
|
border-right: 1px solid #ccc;
|
text-align: right;
|
padding-right: 5px;
|
}
|
.content > div:last-of-type {
|
border-right: 0px solid #ccc;
|
}
|
.select {
|
height: 25px;
|
line-height: 25px;
|
width: 100px;
|
font-size: 12px;
|
}
|
}
|
</style>
|
