<template>
|
<div class="materialBox">
|
<div class="panel-collapse">
|
<div class="material-panel-body">
|
<div class="mater-gup-style">
|
<label style="display: unset;">{{ t('detailPage.materialGroup.TR') }}:</label>
|
<el-select v-model="state.selGrpID" @change="changeMaterialGrp" class="cz_select">
|
<el-option v-for="(grp_item, grp_index) in state.materilGrpList" :key="'qualitySelect' + grp_index"
|
:label="grp_item.Name" :value="grp_item.ID"></el-option>
|
</el-select>
|
</div>
|
<el-row style="display: flex; margin-top: 10px">
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t('detailPage.productName.TR') }}
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t('detailPage.material.TR') }}
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="display: flex; flex-direction: column">
|
<div style="width: 100%">
|
<el-row style="display: flex; width: 100%"
|
v-for="(detail_info, detail_index) in state.currentMaterialDetails" :key="detail_index">
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content2">{{ detail_info.PartTypeName }}</div>
|
</div>
|
</el-col>
|
<el-col :span="12" style="display: flex">
|
<div class="table_box">
|
<div class="content2 inputandselect_div">
|
<input v-model="detail_info.SelMaterialName" class="input_materia"
|
@change="handleMateriaInput(detail_info.SelMaterialName, detail_index)" style="width: 80%">
|
<select v-model="detail_info.SelMaterialName" class="select_materia" style="width:90%">
|
<option v-for="(select_item, select_index) in detail_info.MaterialList"
|
:key="detail_info.PartTypeID + select_index" :label="select_item.StringValue"
|
:value="select_item.StringValue"></option>
|
</select>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="material">
|
import { ref, reactive, onMounted } from 'vue';
|
import { ElRow, ElCol, ElSelect, ElOption } from 'element-plus'
|
import { useI18n } from 'vue-i18n'
|
const { t } = useI18n()
|
let state = reactive({
|
selGrpName: "",
|
selGrpID: 0,
|
materilGrpList: [], //给下拉框
|
allMaterialDetails: [],//所有的材料明细
|
currentMaterialDetails: [], //当前的材料明细(用于显示)
|
materialParas: {}, //后台返回的数据
|
rangeNumber: 8,
|
})
|
//监听材质组名
|
const changeMaterialGrp = (sel_grp_id) => {
|
//console.log(val, 864);
|
let currentMaterialDetails = [];
|
state.materialParas.forEach((material_grp) => {
|
if (material_grp.GroupID == sel_grp_id) {
|
material_grp.Details.forEach((node) => {
|
let detail_disp = {
|
PartTypeID: node.PartTypeID,
|
PartTypeName: node.PartTypeName,
|
SelMaterialName: node.SelMaterialName,//node.Materials[0].StringValue,
|
MaterialList: node.Materials ? node.Materials : [],
|
};
|
currentMaterialDetails.push(detail_disp);
|
});
|
}
|
});
|
state.currentMaterialDetails = currentMaterialDetails;
|
state.allMaterialDetails = JSON.parse(JSON.stringify(currentMaterialDetails))
|
}
|
|
//获取参数(传输到后台)
|
const getParas4Store = () => {
|
var currentMaterialDetails = state.currentMaterialDetails;
|
if (currentMaterialDetails == null || currentMaterialDetails.length == 0)
|
return null;
|
|
var para4Store = {};
|
para4Store.GrpID = state.selGrpID;
|
para4Store.Details = [];
|
currentMaterialDetails.forEach((element) => {
|
para4Store.Details.push({
|
PartTypeID: element.PartTypeID,
|
PartTypeName: element.PartTypeName,
|
MaterialName: element.SelMaterialName,
|
});
|
});
|
|
return para4Store;
|
}
|
//初始化数据
|
const initialData = (list) => {
|
if (list == null || list.length == 0) return;
|
|
state.materialParas = list;
|
|
//材料组 (下拉框)
|
let materilGrpList = [];
|
list.forEach((item) => {
|
let grp_info_comb_item = {
|
Name: item.Name,
|
ID: item.GroupID
|
};
|
//console.log(that.materialPara.GrpList,170)
|
materilGrpList.push(grp_info_comb_item);
|
});
|
state.materilGrpList = materilGrpList;
|
|
let default_grp = list[0]; //默认选择第一个
|
// this.selGrpName = default_grp.Name;
|
state.selGrpID = default_grp.GroupID;
|
let currentMaterialDetails = [];
|
default_grp.Details.forEach((node) => {
|
let detail_disp = {
|
PartTypeID: node.PartTypeID,
|
PartTypeName: node.PartTypeName,
|
SelMaterialName: node.SelMaterialName,//Materials[0].StringValue,
|
MaterialList: node.Materials ? node.Materials : [{ "ID": "", "StringValue": null }],
|
};
|
currentMaterialDetails.push(detail_disp);
|
});
|
|
state.currentMaterialDetails = currentMaterialDetails;
|
state.allMaterialDetails = JSON.parse(JSON.stringify(currentMaterialDetails));
|
}
|
|
const handleMateriaInput = (value, index) => {
|
state.currentMaterialDetails[index].SelMaterialName = value
|
}
|
|
defineExpose({ initialData, getParas4Store })
|
</script>
|
|
<style lang="scss">
|
.materialBox {
|
.cz_select input {
|
background-color: #eee;
|
border-color: #eee;
|
}
|
|
.material-panel-body {
|
display: flex;
|
flex-direction: column;
|
background-color: #fff !important;
|
margin-bottom: 10px;
|
|
}
|
|
.mater-gup-style {
|
width: 100%;
|
height: 40px;
|
background: #eee;
|
line-height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 10px;
|
|
.cz_select {
|
width: 220px;
|
}
|
}
|
|
.table_box {
|
width: 100%;
|
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-right: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9 !important;
|
color: #000000;
|
font-size: 12px;
|
}
|
|
.inputandselect_div {
|
position: relative;
|
|
input {
|
-webkit-appearance: none;
|
background-color: #fff;
|
background-image: none;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
box-sizing: border-box;
|
color: #606266;
|
display: inline-block;
|
font-size: inherit;
|
height: 22px;
|
line-height: 40px;
|
outline: none;
|
padding: 0 15px;
|
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
width: 100%;
|
border: unset;
|
}
|
|
select {
|
background-color: #fff;
|
border-radius: 4px;
|
border: unset;
|
box-sizing: border-box;
|
color: #606266;
|
display: inline-block;
|
font-size: inherit;
|
height: 26px;
|
line-height: 40px;
|
outline: none;
|
padding: 0 15px;
|
width: 100%;
|
}
|
|
.input_materia {
|
position: absolute;
|
left: 25px;
|
top: 4px;
|
text-align: center;
|
}
|
}
|
|
.content3 {
|
width: 100%;
|
height: 100%;
|
line-height: 30px;
|
text-align: center;
|
background-color: #fff;
|
border-top: 1px solid #e9e9e9 !important;
|
border-right: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
color: #000000;
|
font-size: 12px;
|
}
|
|
.table_head {
|
border-top: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
}
|
|
.el-input__inner {
|
height: 24px;
|
line-height: 24px;
|
border: 1px solid #fff;
|
padding: unset;
|
text-align: center;
|
}
|
|
.el-input__icon {
|
line-height: 24px;
|
width: 20px;
|
}
|
|
.el-input-number {
|
width: 100%;
|
line-height: unset;
|
}
|
|
.el-input-number__decrease {
|
display: block;
|
}
|
|
.el-input-number__increase {
|
display: block;
|
}
|
|
.install_content {
|
.el-input__inner {
|
text-align: left;
|
padding-left: 30px
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
:deep(.cz_select .el-select__wrapper) {
|
text-align: center;
|
}
|
</style>
|
