<template>
|
<div class="materialBox">
|
<div class="panel-collapse">
|
<div
|
class="panel-body"
|
style="
|
display: flex;
|
flex-direction: column;
|
background-color: #fff !important;
|
margin-bottom: 10px;
|
"
|
>
|
<div style="width: 100%; height: 30px; background: #eee; line-height: 30px">
|
<van-field style="width:unset" readonly clickable name="picker" :label="$t('detailPage.materialGroup.TR') + '：'" @click="isShowPicker = true">
|
<template slot="input">
|
<div style="text-decoration: underline;color: blue;">{{selGrpName}}</div>
|
</template>
|
</van-field>
|
<van-popup v-model="isShowPicker" position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="materilGrpList"
|
@confirm="changeMaterialGrp"
|
@cancel="isShowPicker = false"
|
/>
|
</van-popup>
|
</div>
|
<div style="display: flex; margin-top: 15px">
|
<van-col :span="12">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">{{$t('detailPage.productName.TR')}}</div>
|
</div>
|
</van-col>
|
<van-col :span="12">
|
<div class="table_box">
|
<div
|
class="content2 table_head"
|
style="
|
border-top: 1px solid #e9e9e9;
|
border-right: 1px solid #e9e9e9;
|
"
|
>{{$t('detailPage.material.TR')}}</div>
|
</div>
|
</van-col>
|
</div>
|
<div style="display: flex; flex-direction: column">
|
<div style="width: 100%">
|
<van-col
|
:span="24"
|
style="display: flex; width: 100%"
|
v-for="(detail_info, detail_index) in currentMaterialDetails"
|
:key="detail_index"
|
>
|
<van-col :span="12">
|
<div class="table_box">
|
<div class="content2">{{ detail_info.PartTypeName }}</div>
|
</div>
|
</van-col>
|
<van-col :span="12" style="display: flex">
|
<div class="table_box">
|
<div class="content2" style="border-right: 1px solid #e9e9e9">
|
<van-field
|
v-if="detail_info.MaterialList.length >0"
|
readonly
|
clickable
|
name="picker"
|
:value="detail_info.SelMaterialName"
|
label
|
@click="detail_info.isShowPicker = true"
|
>
|
<template slot="input">
|
<div
|
style="text-decoration: underline;color: blue;line-height: 28px;"
|
>{{detail_info.SelMaterialName}}</div>
|
</template>
|
</van-field>
|
<van-field
|
v-else
|
readonly
|
clickable
|
name="picker"
|
:value="detail_info.SelMaterialName"
|
label
|
@click="detail_info.isShowPicker = true"
|
>
|
<template slot="input">
|
<div
|
style="text-decoration: underline;color: blue;line-height: 28px;"
|
>{{detail_info.SelMaterialName}}</div>
|
</template>
|
</van-field>
|
<van-popup v-model="detail_info.isShowPicker" position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="detail_info.MaterialList"
|
@confirm="detail_info.isShowPicker = false"
|
@cancel="detail_info.isShowPicker = false"
|
/>
|
</van-popup>
|
</div>
|
</div>
|
</van-col>
|
</van-col>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
selGrpName: "",
|
isShowPicker: false, //显示下拉选择
|
selGrpID: 0,
|
materilGrpList: [], //给下拉框
|
currentMaterialDetails: [], //当前的材料明细(用于显示)
|
materialParas: {} //后台返回的数据
|
};
|
},
|
watch: {},
|
methods: {
|
//监听材质组名
|
changeMaterialGrp(obj) {
|
let sel_grp_id = obj.ID;
|
//console.log(sel_grp_id, obj, 864);
|
this.isShowPicker = false;
|
this.selGrpName = obj.text;
|
var that = this;
|
this.materilGrpList.forEach(grp_item => {
|
if (grp_item.ID == sel_grp_id) {
|
// that.selGrpName = grp_item.Name;
|
that.selGrpID = grp_item.ID;
|
var currentMaterialDetails = [];
|
that.materialParas.forEach(material_grp => {
|
if (material_grp.GroupID == sel_grp_id) {
|
material_grp.Details.forEach(node => {
|
let Materials = [];
|
node.Materials.forEach(item => {
|
Materials.push({ ID: item.ID, text: item.StringValue });
|
});
|
let detail_disp = {
|
isShowPicker: false,
|
PartTypeID: node.PartTypeID,
|
PartTypeName: node.PartTypeName,
|
SelMaterialName: node.SelMaterialName,//node.Materials[0].StringValue,
|
MaterialList: Materials
|
};
|
currentMaterialDetails.push(detail_disp);
|
});
|
that.currentMaterialDetails = currentMaterialDetails;
|
}
|
|
return false;
|
});
|
|
return false;
|
}
|
});
|
},
|
//获取参数(传输到后台)
|
getParas4Store() {
|
var currentMaterialDetails = this.currentMaterialDetails;
|
if (currentMaterialDetails == null || currentMaterialDetails.length == 0)
|
return null;
|
|
var para4Store = {};
|
para4Store.GrpID = this.selGrpID;
|
para4Store.Details = [];
|
currentMaterialDetails.forEach(element => {
|
para4Store.Details.push({
|
PartTypeID: element.PartTypeID,
|
PartTypeName: element.PartTypeName,
|
MaterialName: element.SelMaterialName
|
});
|
});
|
|
return para4Store;
|
},
|
//初始化数据
|
initialData(list) {
|
if (list == null || list.length == 0) return;
|
|
//console.log(list, 162);
|
let that = this;
|
this.materialParas = list;
|
|
//材料组 (下拉框)
|
var materilGrpList = [];
|
list.forEach(item => {
|
let grp_info_comb_item = {
|
text: item.Name,
|
ID: item.GroupID
|
};
|
materilGrpList.push(grp_info_comb_item);
|
});
|
that.materilGrpList = materilGrpList;
|
|
var default_grp = list[0]; //默认选择第一个
|
|
this.selGrpName = default_grp.Name;
|
this.selGrpID = default_grp.GroupID;
|
|
var currentMaterialDetails = [];
|
default_grp.Details.forEach(node => {
|
let Materials = [];
|
node.Materials.forEach(item => {
|
Materials.push({ ID: item.ID, text: item.StringValue });
|
});
|
let detail_disp = {
|
isShowPicker: false,
|
PartTypeID: node.PartTypeID,
|
PartTypeName: node.PartTypeName,
|
SelMaterialName: node.SelMaterialName,//node.Materials[0].StringValue,
|
MaterialList: Materials
|
};
|
currentMaterialDetails.push(detail_disp);
|
});
|
|
that.currentMaterialDetails = currentMaterialDetails;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.materialBox {
|
.table_box {
|
width: 99%;
|
height: 30px;
|
display: flex;
|
border-left: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
.content2 {
|
width: 100%;
|
height: 100%;
|
line-height: 30px;
|
text-align: center;
|
background-color: #fff;
|
border-top: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
color: #000000;
|
font-size: 12px;
|
.van-cell {
|
padding: 0 0 0 10px;
|
line-height: 24px;
|
}
|
}
|
|
.table_head {
|
border-top: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
}
|
}
|
.van-field__label{
|
width: unset;
|
}
|
}
|
</style>
|
