<script setup>
|
import request from "@/utils/request"
|
import deepClone from "@/utils/deepClone";
|
import {ElMessage} from "element-plus";
|
import {ref} from "vue";
|
const disposeList = $ref([
|
'彩釉',
|
'蒙砂',
|
'镀膜',
|
'贴膜',
|
'喷砂',
|
'磨边'
|
])
|
let processList = $ref([
|
'磨边',
|
'镀膜',
|
'倒角',
|
'清洗',
|
'打孔',
|
'挖缺',
|
'挖槽',
|
'水切割',
|
'丝印',
|
'半钢化',
|
'钢化',
|
'夹层',
|
'中空',
|
'包装'
|
])
|
let BasicData = ref({
|
stuffColor:null,
|
stuffCraft:null,
|
stuffLowE:null,
|
stuffPosition:null,
|
stuffThickness:null,
|
InterlayerType:null,
|
InterlayerThickness:null,
|
InterlayerColor:null
|
|
})
|
let stuff = ref({
|
thickness:'',
|
color:'',
|
craft:'',
|
position:'',
|
lowE:''
|
})
|
let processChecked = ref([])
|
|
request.get(`/basicData/BasicDataByType/product`).then((res) => {
|
if(res.code==200){
|
console.log(res.data)
|
BasicData.value = res.data
|
}else{
|
ElMessage.warning(res.msg)
|
}
|
})
|
|
const reset = () => {
|
processChecked.value=[]
|
Object.keys(stuff.value).forEach((item,index)=>{
|
stuff.value[item]=''
|
})
|
}
|
</script>
|
|
<template>
|
<div id="main-div">
|
<div class="glass-param inline-flex"
|
:style="{
|
boxShadow: `var(--el-box-shadow-lighter)`,
|
}"
|
>
|
<div class="glass-type">
|
<h5>材料属性</h5>
|
<el-row :gutter="50">
|
<!-- <el-col :span="6"></el-col>-->
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select v-model="stuff.thickness" size="small" clearable placeholder="*厚度:" >
|
<el-option v-for="item in BasicData.stuffThickness"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-select v-model="stuff.color" size="small" clearable placeholder="*颜色:" filterable>
|
<el-option v-for="item in BasicData.stuffColor"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select v-model="stuff.craft" size="small" clearable placeholder="*工艺属性:" >
|
<el-option v-for="item in BasicData.stuffCraft"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-select v-model="stuff.position" size="small" clearable placeholder="位置:" >
|
<el-option v-for="item in BasicData.stuffPosition"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content ep-bg-purple" >
|
<el-select v-model="stuff.lowE" size="small" clearable placeholder="LOW-E面:" >
|
<el-option v-for="item in BasicData.stuffLowE"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="line"/>
|
<div class="glass-dispose">
|
<h5>表面处理</h5>
|
<div class="glass-dispose-detail">
|
<div v-for="n in 2" class="glass-dispose-detail-1">
|
<p style="writing-mode: vertical-rl;">
|
{{n===1?'第一面':'第二面'}}
|
</p>
|
<div class="glass-dispose-detail-list"
|
v-for="(item,index) in disposeList"
|
>
|
<el-checkbox
|
:label="item" size="large" />
|
<el-input
|
v-if="index==0 && n==1"
|
class="dispose-input"
|
size="small"
|
clearable />
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
<div class="line"/>
|
<div class="glass-process">
|
<h5>工艺属性</h5>
|
<el-checkbox
|
v-model="processChecked"
|
v-for="item in processList"
|
:label="item"
|
class="glass-process-checkbox"
|
size="small" />
|
</div>
|
<div class="line"/>
|
<div class="glass-spacer">
|
<div class="glass-spacer-jc">
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*中空厚度:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*充气方式:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*封胶:" />
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*默认胶深:" />
|
<el-button
|
size="small"
|
type="primary"
|
round>中空间隔物</el-button>
|
|
</div>
|
<div class="glass-spacer-zk">
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*夹层厚度:" >
|
<el-option v-for="item in BasicData.InterlayerThickness"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*类型:" >
|
<el-option v-for="item in BasicData.InterlayerType"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
<el-select
|
size="small"
|
style="width: 100px"
|
clearable placeholder="*颜色:" >
|
<el-option v-for="item in BasicData.InterlayerColor"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
<el-button
|
size="small"
|
type="primary"
|
style="margin-left: 100px"
|
round>夹层间隔物</el-button>
|
</div>
|
</div>
|
<div class="line"/>
|
<div class="glass-oneSlice">
|
<div class="glass-oneSlice-type">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" style="margin-left: 0.5rem" >单片玻璃属性：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="13">
|
<div class="grid-content ep-bg-purple" >
|
<el-input :value="stuff.thickness+stuff.color+stuff.craft+stuff.position+stuff.lowE" size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="grid-content ep-bg-purple" >
|
<el-button
|
@click="reset"
|
size="small"
|
type="primary"
|
round>重置</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="glass-oneSlice-type">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" style="margin-left: 0.5rem" >工艺流程属性：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="13">
|
<div class="grid-content ep-bg-purple" >
|
<el-input :value="processChecked.join('->')" size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="grid-content ep-bg-purple" >
|
<el-button
|
size="small"
|
type="primary"
|
round>确认</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="glass-other">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
快速查询：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
计重厚度：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
厚度：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1"
|
style="margin-left: 0.5rem;text-align: center">
|
备注：
|
</el-text>
|
<el-input size="small" disabled />
|
</div>
|
</el-col>
|
</el-row>
|
|
</div>
|
</div>
|
|
|
<div class="glass-part inline-flex"
|
:style="{
|
boxShadow: `var(--el-box-shadow-lighter)`,
|
}">
|
<div class="glass-part-all">
|
<el-row >
|
<el-col :span="4">
|
<div class="grid-content ep-bg-purple" >
|
<el-text class="mx-1" size="large" >产品名称：</el-text>
|
</div>
|
</el-col>
|
<el-col :span="20">
|
<div class="grid-content ep-bg-purple" >
|
<el-input size="large" disabled />
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<div class="glass-part-detail">
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改玻璃</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mm白玻"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改夹层</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mmPVB透明"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
<el-row style="width: 90%" >
|
<el-col :span="4">
|
<el-button
|
size="small"
|
type="primary"
|
round>修改玻璃</el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-input
|
value="5mm白玻"
|
size="small"
|
disabled />
|
</el-col>
|
</el-row>
|
|
</div>
|
<el-button
|
style="float: right;
|
margin-right: 0.5rem;"
|
|
size="large"
|
type="primary"
|
round>重置</el-button>
|
</div>
|
</div>
|
</template>
|
|
<style scoped >
|
#main-div{
|
width: 100%;
|
height: 100%;
|
}
|
.glass-param{
|
height: 100%;
|
width: 59.5%;
|
float: left;
|
}
|
.glass-part{
|
height: 100%;
|
width: 39.5%;
|
float: right;
|
}
|
.glass-type{
|
width: 100%;
|
height: 12%;
|
|
}
|
.glass-dispose{
|
width: 100%;
|
height: 20%;
|
}
|
.glass-dispose-detail{
|
margin-top: 0.5rem;
|
margin-left: 0.5rem;
|
|
}
|
.glass-dispose-detail-1{
|
width:50%;
|
height: 15vh;
|
float: left;
|
}
|
.glass-dispose-detail-1 p{
|
height: 80%;
|
float: left;
|
margin-top: 2%;
|
}
|
.glass-dispose-detail-list{
|
width: 45%;
|
float: left;
|
height: 25px;
|
}
|
.dispose-input{
|
width:70px;
|
margin-left: 1rem;
|
}
|
.glass-process{
|
width: 100%;
|
height: 25%;
|
}
|
.glass-process-checkbox{
|
margin-left: 0.5rem;
|
float: left;
|
}
|
.glass-spacer{
|
width: 100%;
|
height: 15%;
|
margin-bottom: 0;
|
}
|
.glass-spacer div{
|
width: 100%;
|
height: 50%;
|
}
|
.glass-oneSlice{
|
width: 100%;
|
height: 10%;
|
//background-color: #1890FF;
|
}
|
.glass-oneSlice-type{
|
width: 100%;
|
height: 20%;
|
}
|
.glass-other{
|
width: 100%;
|
height: 10%;
|
}
|
.glass-part-all{
|
margin-left: 2%;
|
margin-top: 2%;
|
width: 96%;
|
height: 10%;
|
}
|
.glass-part-detail{
|
margin-left: 2%;
|
margin-top: 2%;
|
width: 96%;
|
height: 75%;
|
}
|
|
|
|
/*玻璃组合明细 glass-part*/
|
|
h5{
|
margin-top: 0.5rem;
|
margin-left: 0.5rem;
|
}
|
/*布局css*/
|
.el-row {
|
margin-bottom: 20px;
|
margin-top: 1rem;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
/* .el-col{
|
background-color: #1890FF;
|
}*/
|
.line {
|
width: 100%;
|
height: 0;
|
border-top: 2px solid var(--el-border-color);
|
}
|
|
</style>
|
