选型2.0

src/assets/清空.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723180242813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10504" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M691.2 93.866667H332.8v93.866666h358.4V93.866667z m-51.2 307.2v409.6h-76.8V401.066667h76.8z m-179.2 0v409.6h-76.8V401.066667h76.8z m332.8-128H230.4l25.6 657.066666h512l25.6-657.066666zM699.733333 0c42.666667 0 76.8 34.133333 76.8 76.8v102.4h145.066667c17.066667 0 34.133333 17.066667 34.133333 42.666667v42.666666c0 8.533333 0 8.533333-8.533333 8.533334h-68.266667l-25.6 674.133333c0 42.666667-34.133333 76.8-76.8 76.8H247.466667c-42.666667 0-76.8-34.133333-76.8-76.8l-25.6-674.133333H76.8c-8.533333 0-8.533333-8.533333-8.533333-8.533334v-42.666666c0-25.6 17.066667-42.666667 34.133333-42.666667H256V85.333333c0-42.666667 34.133333-76.8 76.8-85.333333h366.933333z" fill="#3874F6" p-id="10505"></path></svg>

src/optionSystem/FProductManage/modules/Steps.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="steps">
+    <div class="step-item">
+        <div class="step-item_icon"></div>
+        <div class="step-item_content">
+            <div class="step-title">选光头</div>
+        </div>
+    </div>
+    <div class="step-item">
+        <div class="step-item_icon"></div>
+        <div class="step-item_content">
+            <div class="step-title">选光头</div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+
+        }
+    },
+    props: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped>
+.steps {
+    display: flex;
+}
+.steps .steps-item {
+    flex: 1;
+}
+.steps .steps-item .steps-item_icon {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    border-radius: 32px;
+    background-color: #e6f4ff;
+    border-color: #e6f4ff;
+}
+.steps .steps-item .steps-item_content {}
+.steps .steps-item .steps-item_content .steps-title {
+    position: relative;
+}
+.steps .steps-item .steps-item_content .steps-title::after {
+    content: '';
+    width: 99999px;
+    height: 1px;
+    background: rgba(5, 5, 5, 0.06);
+    position: absolute;
+    top: 16px;
+    display: block;
+}
+</style>

src/optionSystem/FProductManage/modules/diefa/diefaAdd.vue

@@ -49,228 +49,207 @@
             <div class="title">组成件</div>
             <div class="handle">
                 <el-button type="primary" size="mini" style="margin-right: 10px;" @click="showFun" :disabled="resultArr.length!=0">选择</el-button>
-                <el-dialog custom-class="custom-select-option_class" :visible.sync="dialogVisible" width="1100px" append-to-body :show-close="false" v-if="dialogVisible">
-                    <el-tabs v-model="activePosition">
-                        <el-tab-pane label="选光头" name="光头" :disabled="activePosition!='光头'">
-                            <div class="dialog-content">
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">搜索:</div>
-                                        <el-input
-                                            placeholder="名称/料号"
-                                            v-model="guangtouParam.content.where.condition"
-                                            clearable
-                                            @clear="Search('guangtouParam')"
-                                            size="small"
-                                            @keyup.enter.native="Search('guangtouParam')">
-                                        </el-input>
+                <el-drawer title="阀门选型" custom-class="custom-select-option_class" :visible.sync="dialogVisible" size="1200px" append-to-body :show-close="false" v-if="dialogVisible">
+                    <div class="drawer__panel">
+                        <div class="my-steps">
+                            <el-steps size="small" :active="active" finish-status="finish" process-status="wait">
+                                <el-step v-for="(item,index) in items" :key="index">
+                                    <span @click="stepsClick" slot="title">{{item.title}}</span>
+                                </el-step>
+                            </el-steps>
+                        </div>
+                        <div class="product-info">
+                            <div class="title">配置概要</div>
+                            <div class="info-content">
+                                <div class="info-item" style="width: 50%;margin-bottom: 16px">
+                                    <div class="info-title">
+                                        <div class="title">光头</div>
+                                        <span v-show="!!resultArr[0]" @click="active=1;resultArr=[];fujianArr=[];items.splice(2,1)">
+                                            <img src="@/assets/重选.svg" alt="">
+                                            重选
+                                        </span>
                                     </div>
+                                    <div class="name" v-if="resultArr[0]">{{ resultArr[0].itemname}}</div>
+                                    <div class="name" v-else>暂无</div>
                                 </div>
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">驱动方式:</div>
-                                        <MySelect :isClear="false" @click="guangtouChange" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
+                                <div class="info-item" style="width: 50%;">
+                                    <div class="info-title">
+                                        <div class="title">执行器</div>
+                                        <span v-show="!!resultArr[1]" @click="active=2;resultArr.splice(1);fujianArr=[]">
+                                            <img src="@/assets/重选.svg" alt="">
+                                            重选
+                                        </span>
                                     </div>
+                                    <div class="name" v-if="resultArr[1]">{{ resultArr[1].itemname}} {{ guangtouParam.content.where.drivetype == '电动' ? ` + 减速箱：${resultArr[1].gearboxname}` : '' }}</div>
+                                    <div class="name" v-else>暂无</div>
                                 </div>
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">公称通径:</div>
-                                        <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
-                                            <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                                        </el-select>
+                                <div class="info-item" style="width: 100%;">
+                                    <div class="info-title">
+                                        <div class="title">辅件</div>
                                     </div>
-                                    <div class="item">
-                                        <div class="label">公称压力:</div>
-                                        <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
-                                            <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                                        </el-select>
+                                    <div style="display: flex" v-if="fujianArr.length">
+                                        <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item)">{{ item.itemname }}：{{ item.model }}</el-tag>    
                                     </div>
+                                    <div class="name" v-else>暂无</div>
                                 </div>
-
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">连接方式:</div>
-                                        <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
-                                    </div>
+                            </div>
+                        </div>
+                        <!--选光头-->
+                        <div class="dialog-content" v-show="active == 1">
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">搜索:</div>
+                                    <el-input
+                                        placeholder="名称/料号"
+                                        v-model="guangtouParam.content.where.condition"
+                                        clearable
+                                        @clear="Search('guangtouParam')"
+                                        size="small"
+                                        @keyup.enter.native="Search('guangtouParam')">
+                                    </el-input>
                                 </div>
-
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">阀体材质:</div>
-                                        <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
-                                            <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                                        </el-select>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">阀杆材质:</div>
-                                        <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
-                                            <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                                        </el-select>
-                                    </div>
-                                    <div class="item">
-                                        <div class="label">阀座材质:</div>
-                                        <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
-                                            <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                                        </el-select>
-                                    </div>
+                            </div>
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">驱动方式:</div>
+                                    <MySelect :isClear="false" @click="guangtouChange" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
                                 </div>
-                                <!--光头-->
-                                <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                                    <template v-slot:customcol="scope">
-                                        <p>{{scope.column.data[scope.column.columnname]}}</p>
-                                    </template>
-                                    <template v-slot:opreation="scope">
-                                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
-                                    </template>
-                                </MyTable>
                             </div>
-                        </el-tab-pane>
-
-                        <el-tab-pane label="选执行器" name="执行器"  :disabled="activePosition!='执行器'">
-                            <div class="dialog-content">
-
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">光头:</div>
-                                        <MySelect 
-                                            v-if="resultArr.length"
-                                            :higit="true"
-                                            :options="[{
-                                                remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`
-                                            }]" 
-                                            v-model="gangtou"
-                                            :isClear="false"
-                                        >
-                                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[]">重选</el-button>
-                                        </MySelect>
-                                    </div>
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">公称通径:</div>
+                                    <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
+                                        <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                                    </el-select>
                                 </div>
-
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">执行器:</div>
-                                        <el-input
-                                            placeholder="型号/料号"
-                                            v-model="excelParam.content.where.condition1"
-                                            clearable
-                                            @clear="Search('excelParam')"
-                                            size="small"
-                                            @keyup.enter.native="Search('excelParam')">
-                                        </el-input>
-                                    </div>
-
-                                    <div class="item" v-if="guangtouParam.content.where.drivetype!='气动'">
-                                        <div class="label">减速箱:</div>
-                                        <el-input
-                                            placeholder="型号/料号"
-                                            v-model="excelParam.content.where.condition2"
-                                            clearable
-                                            @clear="Search('excelParam')"
-                                            size="small"
-                                            @keyup.enter.native="Search('excelParam')">
-                                        </el-input>
-                                    </div>
+                                <div class="item">
+                                    <div class="label">公称压力:</div>
+                                    <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
+                                        <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                                    </el-select>
                                 </div>
 
-                                <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
-                                    <div class="item">
-                                        <div class="label">驱动方式:</div>
-                                        <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
-                                    </div>
+                                <div class="item">
+                                    <div class="label">连接方式:</div>
+                                    <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
                                 </div>
+                            </div>
 
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">品牌:</div>
-                                        <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
-                                    </div>
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">阀体材质:</div>
+                                    <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
+                                        <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                                    </el-select>
                                 </div>
-
-                                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                                    <div class="item">
-                                        <div class="label">功能:</div>
-                                        <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
-                                    </div>
+                                <div class="item">
+                                    <div class="label">阀杆材质:</div>
+                                    <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
+                                        <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                                    </el-select>
+                                </div>
+                                <div class="item">
+                                    <div class="label">阀座材质:</div>
+                                    <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
+                                        <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                                    </el-select>
+                                </div>
+                            </div>
+                            <!--光头-->
+                            <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+                                <template v-slot:customcol="scope">
+                                    <p>{{scope.column.data[scope.column.columnname]}}</p>
+                                </template>
+                                <template v-slot:opreation="scope">
+                                    <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
+                                </template>
+                            </MyTable>
+                        </div>
+                        <!--选执行器-->
+                        <div class="dialog-content" v-show="active == 2">
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">执行器:</div>
+                                    <el-input
+                                        placeholder="型号/料号"
+                                        v-model="excelParam.content.where.condition1"
+                                        clearable
+                                        @clear="Search('excelParam')"
+                                        size="small"
+                                        @keyup.enter.native="Search('excelParam')">
+                                    </el-input>
                                 </div>
 
-                                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                                    <div class="item">
-                                        <div class="label">结构:</div>
-                                        <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
-                                    </div>
+                                <div class="item" v-if="guangtouParam.content.where.drivetype!='气动'">
+                                    <div class="label">减速箱:</div>
+                                    <el-input
+                                        placeholder="型号/料号"
+                                        v-model="excelParam.content.where.condition2"
+                                        clearable
+                                        @clear="Search('excelParam')"
+                                        size="small"
+                                        @keyup.enter.native="Search('excelParam')">
+                                    </el-input>
                                 </div>
+                            </div>
 
-                                <!--执行器-->
-                                <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                                    <template v-slot:customcol="scope">
-                                        <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
-                                        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
-                                    </template>
-                                    <template v-slot:opreation="scope">
-                                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')">选择</el-button>
-                                    </template>
-                                </MyTable>
+                            <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
+                                <div class="item">
+                                    <div class="label">驱动方式:</div>
+                                    <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
+                                </div>
                             </div>
-                        </el-tab-pane>
 
-                        <el-tab-pane label="选辅件" name="辅件"  :disabled="activePosition!='辅件'" v-if="isFujianShow">
-                            <div class="dialog-content">
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">光头:</div>
-                                        <MySelect 
-                                            v-if="resultArr.length"
-                                            :higit="true"
-                                            :options="[{remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`}]" 
-                                            v-model="gangtou"
-                                            :isClear="false"
-                                        >
-                                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[];fujianArr=[]">重选</el-button>
-                                        </MySelect>
-                                    </div>
+                            <div class="option-line">
+                                <div class="item">
+                                    <div class="label">品牌:</div>
+                                    <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
                                 </div>
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label">执行器:</div>
-                                        <MySelect 
-                                            v-if="resultArr.length>=2"
-                                            :higit="true"
-                                            :options="[{remarks:resultArr[1].actuatormodel,value:resultArr[1].itemid}]" 
-                                            v-model="excel"
-                                            :isClear="false"
-                                        >
-                                            <el-button slot="custom" type="text" size="mini" @click="activePosition='执行器';resultArr.splice(1);fujianArr=[]">重选</el-button>
-                                        </MySelect>
-                                    </div>
+                            </div>
+
+                            <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+                                <div class="item">
+                                    <div class="label">功能:</div>
+                                    <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
                                 </div>
+                            </div>
 
-                                <div class="option-line">
-                                    <div class="item">
-                                        <div class="label" style="width:50px !important">辅件:</div>
-                                        <div style="display: flex">
-                                            <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item)">{{ item.model }}:{{ item.itemname }}</el-tag>    
-                                        </div>
-                                    </div>
+                            <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+                                <div class="item">
+                                    <div class="label">结构:</div>
+                                    <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
                                 </div>
+                            </div>
 
-                                <!--辅件-->
-                                <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+                            <!--执行器-->
+                            <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
                                 <template v-slot:customcol="scope">
-                                    <p>{{scope.column.data[scope.column.columnname]}}</p>
+                                    <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
+                                    <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
                                 </template>
                                 <template v-slot:opreation="scope">
-                                    <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
+                                    <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')" :disabled="(loading) || (guangtouParam.content.where.drivetype=='电动' && resultArr.length == 2)">选择</el-button>
                                 </template>
-                                </MyTable>
-                            </div>
-                        </el-tab-pane>
-                    </el-tabs>
-
-                    <div class="dialog-footer">
+                            </MyTable>
+                        </div>
+                        <!--选辅件-->
+                        <div class="dialog-content" v-show="active == 3">
+                            <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+                            <template v-slot:customcol="scope">
+                                <p>{{scope.column.data[scope.column.columnname]}}</p>
+                            </template>
+                            <template v-slot:opreation="scope">
+                                <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
+                            </template>
+                            </MyTable>
+                        </div>
+                    </div>
+                    <div class="fixed__btn__panel">
                         <el-button size="small" @click="refresh()" class="normal-btn-width">取 消</el-button>
-                        <el-button size="small" type="primary" @click="dialogVisible=false;writeForm()" class="normal-btn-width" v-if="activePosition == '辅件'" :disabled="$refs.fujianRef.list.length!= 0">确认</el-button>
+                        <el-button size="small" type="primary" class="normal-btn-width" @click="writeForm();dialogVisible=false" v-if="active == 2 && guangtouParam.content.where.drivetype=='电动'" :disabled="resultArr.length <2">确定添加</el-button>
+                        <el-button size="small" type="primary" @click="dialogVisible=false;writeForm()" class="normal-btn-width" v-if="active == 3" :disabled="$refs.fujianRef.list.length!= 0">确定添加</el-button>
                     </div>
-                </el-dialog>
+                </el-drawer>
                 <el-button size="mini" @click="refresh">清空</el-button>
             </div>
         </div>
@@ -362,13 +341,18 @@
 <script>
 import MySelect from '../select.vue'
 import MyTable from '../table.vue'
-
+import Steps from '../Steps.vue'
 export default {
-    components:{MySelect,MyTable},
+    components:{MySelect,MyTable,Steps},
     props:['data'],
     data () {
         return {
-            tableHeight:'200px',
+            items: [
+                {title:'选光头',value:'光头'},
+                {title:'选执行器',value:'执行器'},
+            ],
+            active:1,
+            tableHeight:'400px',
             dialogVisible:false,
             form:{},
             rules:{
@@ -382,8 +366,6 @@ export default {
             excel:'',
             gangtou:'',
             resultArr:[],
-            activePosition:'光头',
-            
             caliber:[],
             nominalpressure:[],
             connection:[],
@@ -396,7 +378,6 @@ export default {
             bodystructure:[],
             func:[],
             guangtouList:[],
-            isFujianShow:false,//辅件是否显示
             form: {
                 "itemid": 0,
                 "plm_itemextendid": 0,
@@ -433,7 +414,7 @@ export default {
                 "id": 2024071014420002,
                 "content": {
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999999,
                     "where": {
                         "condition": "",
                         "caliber": "", //公称通径
@@ -452,7 +433,7 @@ export default {
                 "content": {
                     "itemid": "",//光头id
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999999,
                     "where": {
                         "condition1": "",
                         "condition2": "",
@@ -474,7 +455,7 @@ export default {
                     "othertypes": [
                     ],
                     "pageNumber": 1,
-                    "pageSize": 300,
+                    "pageSize": 9999999999,
                     "where": {
                         "actuatorbrand": "" //品牌
                     }
@@ -605,7 +586,7 @@ export default {
                         "content": {
                             "itemid": 0,//光头id
                             "pageNumber": 1,
-                            "pageSize": 20,
+                            "pageSize": 9999999999,
                             "where": {
                                 "condition1": "",
                                 "condition2": "",
@@ -625,7 +606,7 @@ export default {
                     "id": 20240710163502,
                     "content": {
                         "pageNumber": 1,
-                        "pageSize": 20,
+                        "pageSize": 9999999999,
                         "where": {
                             "condition1": "",
                             "torque": "", //阀门扭矩
@@ -650,7 +631,9 @@ export default {
             data.parttype = type
             this.resultArr.push(data)
             if (type == '主阀') {
-                if (this.guangtouParam.content.where.drivetype == '气动') this.isFujianShow = true
+                if (this.guangtouParam.content.where.drivetype == '气动') {
+                    this.items.push({title:'选辅件',value:'辅件'})
+                }
                 this.guangtouChange(this.guangtouParam.content.where.drivetype)
                 this.excelParam.content.itemid = data.itemid
                 this.excelParam.content.where.torque = data.torque
@@ -667,7 +650,7 @@ export default {
                 })
                 
 
-                this.activePosition = '执行器'
+                this.active = 2
             } else if (type == '执行器') {
                 this.resultArr[1].itenname = this.resultArr[1].actuatormodel
 
@@ -678,12 +661,11 @@ export default {
                 }
                 data.itemid = data.actuatorid
                 data.itemname = data.actuatormodel
-                if (this.isFujianShow) {
-                    this.activePosition = '辅件'
-                    this.$refs.fujianRef.listData()
-                } else {
-                    this.writeForm()
-                    this.dialogVisible = false
+                if (this.items.length >= 3) {
+                    this.active = 3
+                    this.$nextTick(() => {
+                        this.$refs.fujianRef.listData()
+                    })
                 }
             } else {
                 if (this.fujianArr.filter(item=>item.itemid==data.itemid).length) return
@@ -701,7 +683,6 @@ export default {
             this.form.caliber = this.resultArr[0].caliber
             this.form.nominalpressure = this.resultArr[0].nominalpressure
             this.form.connection = this.resultArr[0].connection
-            this.form.drivetype = [this.guangtouParam.content.where.drivetype]
             this.form.valveplatematerial = this.resultArr[0].valveplatematerial
             this.form.bodymaterial = this.resultArr[0].bodymaterial
             this.form.stemmaterial = this.resultArr[0].stemmaterial
@@ -727,12 +708,21 @@ export default {
             
             this.$refs.fujianRef.listData()
         },
+        stepsClick (val) {
+            for (let i = 0; i < this.items.length; i++) {
+                if (val == this.items[i].value) {
+                    this.active = i + 1
+                    break;
+                }                
+            }
+        },
         //重置
         refresh () {
             this.resultArr = []
             this.fujianArr = []
             this.dialogVisible = false
-            this.activePosition = '光头'
+            this.active = 1
+            this.items = this.items.splice(0,2)
             this.$refs.form2.resetFields()
         },
         async onSubmit (callback) {
@@ -810,14 +800,84 @@ export default {
 </script>
 
 <style scoped>
-    /deep/.el-dialog__header {
-        display: none !important;
+    /deep/.el-drawer__header {
+        padding: 10px 20px !important;
     }
-    /deep/.el-dialog__body {
-        padding-top: 0 !important;
+    /deep/.el-step__title {
+        width: 100px !important;
+        cursor: pointer;
     }
-    .product-content {
-
+    .drawer__panel {
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        padding: 20px 40px !important;
+    }
+    .my-steps {
+        padding: 0px 68px;
+    }
+    .product-info {
+        padding: 16px 20px;
+        border: 1px solid #3874F6;
+        background: rgba(56, 116, 246, 0.08);
+        margin-top: 20px;
+        border-radius: 2px;
+    }
+    .product-info .title {
+        margin-bottom: 16px;
+        font-weight: bold;
+        color: #333333;
+        font-size: 16px !important;
+    }
+    .product-info .info-content {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .product-info .info-content .info-item {
+        display: flex;
+        flex-direction: column;
+    } 
+    .product-info .info-content .info-item .info-title {
+        margin-bottom: 8px;
+        display: flex;
+        align-content: center;
+        align-items: center;
+    }
+    .product-info .info-content .info-item .info-title .title {
+        margin-bottom: 0px !important;
+    }
+    .product-info .info-content .info-item .info-title div {
+        margin-right: 20px;
+        font-size: 14px !important;
+    }
+    .product-info .info-content .info-item .info-title span {
+        font-size: 14px;
+        color: #3874F6 !important;
+        cursor: pointer;
+        display: inline-block;
+        display: flex;
+        align-items: center;
+        align-content: center;
+    }
+    .product-info .info-content .info-item .info-title span img {
+        width: 12px;
+        height: 12px;
+        margin-right: 4px;
+    }
+    .product-info .info-content .info-item .name {
+        font-weight: 400;
+        font-size: 14px;
+        color: #555555;
+    }
+    .product-info .info-content .info-item .names {
+        font-weight: 400;
+        font-size: 14px;
+        color: #555555;
+        display: flex;
+    }
+    .product-info .info-content .info-item .names div {
+        margin-right: 20px;
+    }
+    .product-info .info-content .info-item .names div span {
+        margin-right: 10px;
     }
     .product-content .block {
         margin-top: 30px;
@@ -863,11 +923,4 @@ export default {
        font-size:12px;
        color:red;
     }
-</style>
-<style>
-@media screen and (max-width:1800px) {
-    .custom-select-option_class.el-dialog {
-        margin-top: 10px !important;
-    }
-}
 </style>

src/optionSystem/FProductManage/modules/select.vue

@@ -2,9 +2,12 @@
     <div class="custom-select">
         <span class="title" v-if="title">{{title}}</span>
         <div class="box">
-            <span v-for="(item,index) in options" :class="['item',item.value == value || higit ? 'active' : '',disabled?'disabled':'']" @click="update(item.value)">{{ item.remarks }}</span>
+            <span :style="options.length == 1 ? 'border-radius:2px !important':''" v-for="(item,index) in options" :class="[options.length == 1 ? 'item2':'item',item.value == value || higit ? 'active' : '',disabled?'disabled':'']" @click="update(item.value)">{{ item.remarks }}</span>
             <slot name="custom"></slot>
-            <span :class="['item','clear']" @click="update('')" v-if="isClear && !disabled && value && options.length">清空</span>
+            <div :class="['clear']" @click="update('')" v-if="isClear && !disabled && value && options.length">
+                <img src="@/assets/清空.svg" alt="" style="width:12px;height: 12px;margin-right: 4px;">
+                清空
+            </div>
         </div>
     </div>
 </template>
@@ -79,24 +82,39 @@ export default {
 }
 .custom-select .active {
     background: #3874f6;
+    border: 1px solid #3874f6 !important;
     color: #ffffff !important;
 }
 .custom-select .box {
     display: flex;
     align-items: center;
 }
-.custom-select .item {
+.custom-select .item,.item2 {
     font-size: 14px;
     color: #000000;
-    margin-right: 30px;
     cursor: pointer;
     display: block;
-    padding: 2px 5px;
-    border-radius: 2px;
+    padding: 6px 15px;
+    border: 1px solid rgba(217, 217, 217, 1);
     user-select: none;
 }
+.custom-select .item:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+.custom-select .item:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-left: none;
+    margin-right: 30px;
+}
 .custom-select .clear {
     color: #3874f6 !important;
+    cursor: pointer;
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+    align-content: center;
     font-size: 12px !important;
 }
 .disabled {

src/optionSystem/FProductManage/modules/table.vue

@@ -22,7 +22,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div  class="container normal-panel" style="text-align:right" v-if="param">
+      <div  class="container normal-panel" style="text-align:right" v-if="param && page">
         <el-pagination
             background
             @size-change="handleSizeChange"
@@ -47,7 +47,7 @@
       opwidth:操作列宽度
     */
     name:'MyTable',
-    props:['layout','data','custom','height','fixedName','width','checkbox','redirect','customHeader','param','noQuery'],
+    props:['layout','data','custom','height','fixedName','width','checkbox','redirect','customHeader','param','noQuery','page'],
     data () {
       return {
         list:[],

src/optionSystem/optionOrder/detail/index.vue

@@ -7,7 +7,6 @@
         :editData="mainData"
         :mainAreaData="mainAreaData"
         turnPageId="2024071815534702"
-        delApiId="2024071814493602"
         idname="sa_lectotypecfgid"
         ownertable="sa_lectotypecfg"
         tags=""

src/optionSystem/optionOrder/detail/modules/components/DieFa.vue

@@ -1,228 +1,200 @@
 <template>
-  <div>
-    <el-tabs v-model="activePosition">
-        <el-tab-pane label="选光头" name="光头" :disabled="isEdit && activePosition!='光头'">
-            <div class="dialog-content">
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">搜索:</div>
-                        <el-input
-                            placeholder="名称/料号"
-                            v-model="guangtouParam.content.where.condition"
-                            clearable
-                            @clear="Search('guangtouParam')"
-                            size="small"
-                            @keyup.enter.native="Search('guangtouParam')">
-                        </el-input>
-                    </div>
-                </div>
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">驱动方式:</div>
-                        <MySelect :isClear="false" @click="guangtouChange();Search('guangtouParam','drivetype');resultArr=[]" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
-                    </div>
-                </div>
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">公称通径:</div>
-                        <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
-                            <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">公称压力:</div>
-                        <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">连接方式:</div>
-                        <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
-                    </div>
-                </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">阀体材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">阀杆材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">阀座材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
+  <div class="drawer__panel">
+    <div class="my-steps">
+        <el-steps size="small" :active="active" finish-status="finish">
+            <el-step v-for="(item,index) in items" :key="index" process-status="wait">
+                <span @click="stepsClick(item.value)" slot="title">{{item.title}}</span>
+            </el-step>
+        </el-steps>
+    </div>
+    <div class="product-info">
+        <div class="title">配置概要</div>
+        <div class="info-content">
+            <div class="info-item" style="width: 50%;margin-bottom: 16px">
+                <div class="info-title">
+                    <div class="title">光头</div>
+                    <span v-show="!!resultArr[0]" @click="active=1;resultArr=[];fujianArr=[];items.splice(2,1);isEdit=true">
+                        <img src="@/assets/重选.svg" alt="">
+                        重选
+                    </span>
                 </div>
-
-                
-                <!--光头-->
-                <MyTable :height="tableHeight" ref="guangtouRef" :noQuery="true" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                    <template v-slot:customcol="scope">
-                        <p>{{scope.column.data[scope.column.columnname]}}</p>
-                    </template>
-                    <template v-slot:opreation="scope">
-                        <i class="el-icon-check" style="color: #3874f6;" v-if="scope.data.isSelect"></i>
-                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype" v-else >选择</el-button>
-                    </template>
-                </MyTable>
+                <div class="name" v-if="resultArr[0]">{{ resultArr[0].itemname}}</div>
+                <div class="name" v-else>暂无</div>
             </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="选执行器" name="执行器" :disabled="isEdit && activePosition!='执行器'">
-            <div class="dialog-content">
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">光头:</div>
-                        <MySelect 
-                            v-if="resultArr.length"
-                            :higit="true"
-                            :options="[{
-                                remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`
-                            }]" 
-                            v-model="gangtou"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[]">重选</el-button>
-                        </MySelect>
-                    </div>
+            <div class="info-item" style="width: 50%;">
+                <div class="info-title">
+                    <div class="title">执行器</div>
+                    <span v-show="!!resultArr[1]" @click="active=2;resultArr.splice(1);fujianArr=[];isEdit=true">
+                        <img src="@/assets/重选.svg" alt="">
+                        重选
+                    </span>
                 </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">执行器:</div>
-                        <el-input
-                            placeholder="型号/料号"
-                            v-model="excelParam.content.where.condition1"
-                            clearable
-                            @clear="Search('excelParam')"
-                            size="small"
-                            @keyup.enter.native="Search('excelParam')">
-                        </el-input>
-                    </div>
-
-                    <div class="item" v-if="guangtouParam.content.where.drivetype!='气动'">
-                        <div class="label">减速箱:</div>
-                        <el-input
-                            placeholder="型号/料号"
-                            v-model="excelParam.content.where.condition2"
-                            clearable
-                            @clear="Search('excelParam')"
-                            size="small"
-                            @keyup.enter.native="Search('excelParam')">
-                        </el-input>
-                    </div>
+                <div class="name" v-if="resultArr[1]">{{ resultArr[1].itemname}} {{ guangtouParam.content.where.drivetype == '电动' ? ` + 减速箱：${resultArr[1].gearboxname}` : '' }}</div>
+                <div class="name" v-else>暂无</div>
+            </div>
+            <div class="info-item" style="width: 100%;">
+                <div class="info-title">
+                    <div class="title">辅件</div>
                 </div>
-
-                <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">驱动方式:</div>
-                        <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
-                    </div>
+                <div style="display: flex" v-if="fujianArr.length">
+                    <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item);isEdit=true">{{ item.itemname }}：{{ item.model }}</el-tag>    
                 </div>
+                <div class="name" v-else>暂无</div>
+            </div>
+        </div>
+    </div>
+    <!--选光头-->
+    <div class="dialog-content" v-show="active == 1">
+        <div class="option-line">
+            <div class="item">
+                <div class="label">搜索:</div>
+                <el-input
+                    placeholder="名称/料号"
+                    v-model="guangtouParam.content.where.condition"
+                    clearable
+                    @clear="Search('guangtouParam')"
+                    size="small"
+                    @keyup.enter.native="Search('guangtouParam')">
+                </el-input>
+            </div>
+        </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">驱动方式:</div>
+                <MySelect :isClear="false" @click="guangtouChange" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
+            </div>
+        </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">公称通径:</div>
+                <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
+                    <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">公称压力:</div>
+                <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
 
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">品牌:</div>
-                        <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
-                    </div>
-                </div>
+            <div class="item">
+                <div class="label">连接方式:</div>
+                <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
+            </div>
+        </div>
 
-                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">功能:</div>
-                        <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
-                    </div>
-                </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">阀体材质:</div>
+                <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">阀杆材质:</div>
+                <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">阀座材质:</div>
+                <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+        </div>
+        <!--光头-->
+        <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+            <template v-slot:customcol="scope">
+                <p>{{scope.column.data[scope.column.columnname]}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+                <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
+            </template>
+        </MyTable>
+    </div>
+    <!--选执行器-->
+    <div class="dialog-content" v-show="active == 2">
+        <div class="option-line">
+            <div class="item">
+                <div class="label">执行器:</div>
+                <el-input
+                    placeholder="型号/料号"
+                    v-model="excelParam.content.where.condition1"
+                    clearable
+                    @clear="Search('excelParam')"
+                    size="small"
+                    @keyup.enter.native="Search('excelParam')">
+                </el-input>
+            </div>
 
-                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">结构:</div>
-                        <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
-                    </div>
-                </div>
+            <div class="item" v-if="guangtouParam.content.where.drivetype!='气动'">
+                <div class="label">减速箱:</div>
+                <el-input
+                    placeholder="型号/料号"
+                    v-model="excelParam.content.where.condition2"
+                    clearable
+                    @clear="Search('excelParam')"
+                    size="small"
+                    @keyup.enter.native="Search('excelParam')">
+                </el-input>
+            </div>
+        </div>
 
-                <!--执行器-->
-                <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                    <template v-slot:customcol="scope">
-                        <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
-                        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
-                    </template>
-                    <template v-slot:opreation="scope">
-                        <i class="el-icon-check" style="color: #3874f6;" v-if="scope.data.isSelect"></i>
-                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')" v-else>选择</el-button>
-                    </template>
-                </MyTable>
+        <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">驱动方式:</div>
+                <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
             </div>
-        </el-tab-pane>
+        </div>
 
-        <el-tab-pane label="选辅件" name="辅件" :disabled="isEdit && activePosition!='辅件'" v-if="isFujianShow">
-            <div class="dialog-content">
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">光头:</div>
-                        <MySelect 
-                            v-if="resultArr.length"
-                            :higit="true"
-                            :options="[{remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`}]" 
-                            v-model="gangtou"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[];fujianArr=[]">重选</el-button>
-                        </MySelect>
-                    </div>
-                </div>
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">执行器:</div>
-                        <MySelect 
-                            v-if="resultArr.length>=2"
-                            :higit="true"
-                            :options="[{remarks:resultArr[1].actuatormodel||resultArr[1].itemname,value:resultArr[1].itemid}]" 
-                            v-model="excel"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='执行器';resultArr.splice(1);fujianArr=[]">重选</el-button>
-                        </MySelect>
-                    </div>
-                </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">品牌:</div>
+                <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
+            </div>
+        </div>
 
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label" style="width:50px !important">辅件:</div>
-                        <div style="display: flex">
-                            <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item)">{{ item.model }}:{{ item.itemname }}</el-tag>    
-                        </div>
-                    </div>
-                </div>
+        <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">功能:</div>
+                <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
+            </div>
+        </div>
 
-                <!--辅件-->
-                <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                <template v-slot:customcol="scope">
-                    <p>{{scope.column.data[scope.column.columnname]}}</p>
-                </template>
-                <template v-slot:opreation="scope">
-                    <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
-                </template>
-                </MyTable>
+        <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">结构:</div>
+                <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
             </div>
-        </el-tab-pane>
-    </el-tabs>
+        </div>
 
-    <div class="dialog-footer">
-        <el-button size="small" @click="close" class="normal-btn-width">取 消</el-button>
-        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width" v-if="activePosition == '辅件'" :disabled="$refs.fujianRef.list.length!= 0">确认</el-button>
+        <!--执行器-->
+        <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+            <template v-slot:customcol="scope">
+                <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
+                <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+                <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')" :disabled="(loading) || (guangtouParam.content.where.drivetype=='电动' && resultArr.length == 2)">选择</el-button>
+            </template>
+        </MyTable>
+    </div>
+    <!--选辅件-->
+    <div class="dialog-content" v-show="active == 3">
+        <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+        <template v-slot:customcol="scope">
+            <p>{{scope.column.data[scope.column.columnname]}}</p>
+        </template>
+        <template v-slot:opreation="scope">
+            <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
+        </template>
+        </MyTable>
+    </div>
+    <div class="fixed__btn__panel">
+        <el-button size="small" @click="close()" class="normal-btn-width">取 消</el-button>
+        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width" v-if="active == 3" :disabled="$refs.fujianRef.list.length!= 0">确认</el-button>
     </div>
   </div>
 </template>
@@ -230,19 +202,23 @@
 <script>
 import MySelect from '@/optionSystem/FProductManage/modules/select.vue'
 import MyTable from '@/optionSystem/FProductManage/modules/table.vue'
+import Steps from '@/optionSystem/FProductManage/modules/Steps.vue'
 export default {
-    components:{MySelect,MyTable},
+    components:{MySelect,MyTable,Steps},
     props:['data'],
     inject:['valvetype','resultArrs'],
     data () {
         return {
-            tableHeight:'200px',
+            items: [
+                {title:'选光头',value:'光头'},
+                {title:'选执行器',value:'执行器'},
+            ],
+            active:1,
+            tableHeight:'400px',
             isEdit:false,
             excel:'',
             gangtou:'',
             resultArr:[],
-            activePosition:'光头',
-            
             caliber:[],
             nominalpressure:[],
             connection:[],
@@ -255,7 +231,6 @@ export default {
             bodystructure:[],
             func:[],
             guangtouList:[],
-            isFujianShow:false,//辅件是否显示
             form: {
                 "itemid": 0,
                 "plm_itemextendid": 0,
@@ -292,7 +267,7 @@ export default {
                 "id": 20240718162102,
                 "content": {
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999,
                     "sa_lectotypecfgid":this.$route.query.id,
                     "where": {
                         "condition": "",
@@ -312,7 +287,7 @@ export default {
                 "content": {
                     "itemid": "",//光头id
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999,
                     "sa_lectotypecfgid":this.$route.query.id,
                     "where": {
                         "condition1": "",
@@ -348,6 +323,8 @@ export default {
     methods: {
         init () {
             this.guangtouChange(this.data.filter.mainvalve.drivetype)
+            console.log(this.data.filter.mainvalve);
+            
             Object.keys(this.data.filter.mainvalve).forEach(v => {
                 this.guangtouParam.content.where[v] = this.data.filter.mainvalve[v]
             })
@@ -355,11 +332,13 @@ export default {
                 this.excelParam.content.where[v] = this.data.filter.actuator[v]
             })
             if (this.guangtouParam.content.where.drivetype == '气动') {
-                this.isFujianShow = true
+                this.items.push({title:'选辅件',value:'辅件'})
                 this.fujianArr = this.data.filter.other.fujianArr
             }
             this.$refs.guangtouRef.listData(() => {
                 if (!this.$refs.guangtouRef.list.length) return
+                console.log(this.$refs.guangtouRef.list[0]);
+                
                 this.nominalpressure = this.$refs.guangtouRef.list[0].option.nominalpressure
                 this.connection = this.$refs.guangtouRef.list[0].option.connection
                 this.bodymaterial = this.$refs.guangtouRef.list[0].option.bodymaterial
@@ -381,10 +360,14 @@ export default {
             }, 1000);
         },
         close () {
-            this.activePosition = '光头'
+            this.active = 1
             this.guangtouParam.content.where.drivetype = '电动'
             this.resultArr = []
             this.fujianArr = []
+            this.items = [
+                {title:'选光头',value:'光头'},
+                {title:'选执行器',value:'执行器'},
+            ]
             this.isEdit = false
             this.$emit('close')
         },
@@ -492,7 +475,7 @@ export default {
                         "content": {
                             "itemid": 0,//光头id
                             "pageNumber": 1,
-                            "pageSize": 20,
+                            "pageSize": 9999999,
                             "sa_lectotypecfgid":this.$route.query.id,
                             "where": {
                                 "condition1": "",
@@ -513,7 +496,7 @@ export default {
                     "id": 20240718162302,
                     "content": {
                         "pageNumber": 1,
-                        "pageSize": 20,
+                        "pageSize": 9999999,
                         "sa_lectotypecfgid":this.$route.query.id,
                         "where": {
                             "condition1": "",
@@ -590,11 +573,11 @@ export default {
             if (type == '主阀') {
                 this.resultArr[0] = data
                 
-                if (this.guangtouParam.content.where.drivetype == '气动') {
-                    this.isFujianShow = true
-                } else {
-                    this.isFujianShow = false
-                }
+                if (this.guangtouParam.content.where.drivetype == '气动' && this.items.length == 2) {
+                      this.items.push({title:'选辅件',value:'辅件'})
+                  } else if (this.guangtouParam.content.where.drivetype == '电动' && this.items.length == 3) {
+                    this.items.splice(2,1)
+                  }
                 this.guangtouChange(this.guangtouParam.content.where.drivetype)
                 this.excelParam.content.itemid = data.itemid
                 this.excelParam.content.where.torque = data.torque
@@ -609,7 +592,7 @@ export default {
                         this.func = this.$refs.excelRef.list[0].option.func
                     })
                 })
-                this.activePosition = '执行器'
+                this.active = 2
             } else if (type == '执行器') {
                 this.resultArr[1] = data
                 this.resultArr[1].itenname = this.resultArr[1].actuatormodel
@@ -637,8 +620,8 @@ export default {
 
                 data.itemid = data.actuatorid
                 data.itemname = data.actuatormodel
-                if (this.isFujianShow) {
-                    this.activePosition = '辅件'
+                if (this.items.length >= 3) {
+                    this.active = 3
                     this.$refs.fujianRef.listData()
                 } else {
                     this.onSubmit()
@@ -671,6 +654,15 @@ export default {
             
             this.$refs.fujianRef.listData()
         },
+        stepsClick (val) {
+            if (this.isEdit) return this.$message.warning('已操作过选型单，请按步骤进行！！')
+            for (let i = 0; i < this.items.length; i++) {
+                if (val == this.items[i].value) {
+                    this.active = i + 1
+                    break;
+                }                
+            }
+        },
         //选项
         optionsList () {
             this.$store.dispatch("optiontypeselect", "caliber").then((res) => {
@@ -690,9 +682,80 @@ export default {
 
 <style scoped>
     
-    .product-content {
-
-    }
+    .drawer__panel {
+          padding: 20px 40px !important;
+      }
+      .my-steps {
+          padding: 0px 68px;
+      }
+      .drawer__panel {
+          font-family: Source Han Sans SC, Source Han Sans SC;
+      }
+      .product-info {
+          padding: 16px 20px;
+          border: 1px solid #3874F6;
+          background: rgba(56, 116, 246, 0.08);
+          margin-top: 20px;
+          border-radius: 2px;
+      }
+      .product-info .title {
+          margin-bottom: 16px;
+          font-weight: bold;
+          color: #333333;
+          font-size: 16px !important;
+      }
+      .product-info .info-content {
+          display: flex;
+          flex-wrap: wrap;
+      }
+      .product-info .info-content .info-item {
+          display: flex;
+          flex-direction: column;
+      } 
+      .product-info .info-content .info-item .info-title {
+          margin-bottom: 8px;
+          display: flex;
+          align-content: center;
+          align-items: center;
+      }
+      .product-info .info-content .info-item .info-title .title {
+          margin-bottom: 0px !important;
+      }
+      .product-info .info-content .info-item .info-title div {
+          margin-right: 20px;
+          font-size: 14px !important;
+      }
+      .product-info .info-content .info-item .info-title span {
+          font-size: 14px;
+          color: #3874F6 !important;
+          cursor: pointer;
+          display: inline-block;
+          display: flex;
+          align-items: center;
+          align-content: center;
+      }
+      .product-info .info-content .info-item .info-title span img {
+          width: 12px;
+          height: 12px;
+          margin-right: 4px;
+      }
+      .product-info .info-content .info-item .name {
+          font-weight: 400;
+          font-size: 14px;
+          color: #555555;
+      }
+      .product-info .info-content .info-item .names {
+          font-weight: 400;
+          font-size: 14px;
+          color: #555555;
+          display: flex;
+      }
+      .product-info .info-content .info-item .names div {
+          margin-right: 20px;
+      }
+      .product-info .info-content .info-item .names div span {
+          margin-right: 10px;
+      }
     .product-content .block {
         margin-top: 30px;
         padding-left: 20px;

src/optionSystem/optionOrder/detail/modules/edit.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
         <el-button type="primary" size="mini" @click="onShow" :disabled="data.createuserid != userid || data.status == '无需评审'"> 编辑 </el-button>
-        <el-dialog custom-class="custom-select-option_class" :visible.sync="drawer" width="1100px" append-to-body :show-close="false">
+        <el-drawer title="阀门选型" custom-class="custom-select-option_class" :visible.sync="drawer" size="1200px" append-to-body :show-close="false">
             <component ref="target" @close="drawer=false" :is="formComponent" :data="data" @onEditSuccess="onEditSuccess"></component>
-        </el-dialog>
+        </el-drawer>
     </div>
   </template>
 <script>
@@ -22,6 +22,11 @@ export default {
         valvetype:() => this.type,
         }
     },
+    watch: {
+        drawer (val) {
+            if (!val) this.$refs.target.close()
+        }
+    },
     computed: {
         ...mapGetters({
         loading: "loading",
@@ -64,22 +69,11 @@ created () {
 };
 </script>
 <style scoped>
-.dialog-footer {
-    margin-top: 32px;
-    text-align: center;
-}
-/deep/.el-dialog__header {
-    display: none !important;
+/deep/.el-drawer__header {
+    padding: 10px 20px !important;
 }
-/deep/.el-dialog__body {
-    padding-top: 0 !important;
-}
-</style>
-<style>
-@media screen and (max-width:1800px) {
-    .custom-select-option_class.el-dialog {
-        margin-top: 10px !important;
-    }
+/deep/.el-step__title {
+    width: 100px !important;
+    cursor: pointer;
 }
-</style>
-    
+</style>

src/optionSystem/selectOption/add.vue

@@ -1,9 +1,9 @@
 <template>
     <div style="display: inline;">
         <el-button type="primary" size="small" @click="drawer=true"> 阀门选型 </el-button>
-        <el-dialog custom-class="custom-select-option_class" :visible.sync="drawer" width="1100px" append-to-body :show-close="false">
+        <el-drawer title="阀门选型" custom-class="custom-select-option_class" :visible.sync="drawer" size="1200px" append-to-body :show-close="false">
             <component :position="position" @close="drawer=false" :is="formComponent" v-on="$listeners"></component>
-        </el-dialog>
+        </el-drawer>
     </div>
   </template>
     
@@ -59,22 +59,12 @@ created () {
 };
 </script>
 <style scoped>
-.dialog-footer {
-    margin-top: 32px;
-    text-align: center;
+/deep/.el-drawer__header {
+    padding: 10px 20px !important;
 }
-/deep/.el-dialog__header {
-    display: none !important;
-}
-/deep/.el-dialog__body {
-    padding-top: 0 !important;
-}
-</style>
-<style>
-@media screen and (max-width:1800px) {
-    .custom-select-option_class.el-dialog {
-        margin-top: 10px !important;
-    }
+/deep/.el-step__title {
+    width: 100px !important;
+    cursor: pointer;
 }
 
 </style>

src/optionSystem/selectOption/components/DieFa.vue

@@ -1,209 +1,219 @@
 <template>
-  <div>
-    <el-tabs v-model="activePosition">
-        <el-tab-pane label="选光头" name="光头" :disabled="activePosition!='光头'">
-            <div class="dialog-content">
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">驱动方式:</div>
-                        <MySelect :isClear="false" @click="guangtouChange();Search('guangtouParam','drivetype')" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
-                    </div>
+  <div class="drawer__panel">
+    <div class="my-steps">
+        <el-steps size="small" :active="active" finish-status="finish" process-status="wait">
+            <el-step v-for="(item,index) in items" :key="index">
+                <span slot="title">{{item.title}}</span>
+            </el-step>
+        </el-steps>
+    </div>
+    <div class="product-info" v-show="active != 4">
+        <div class="title">配置概要</div>
+        <div class="info-content">
+            <div class="info-item" style="width: 50%;margin-bottom: 16px">
+                <div class="info-title">
+                    <div class="title">光头</div>
+                    <span v-show="!!resultArr[0]" @click="active=1;resultArr=[];fujianArr=[]">
+                        <img src="@/assets/重选.svg" alt="">
+                        重选
+                    </span>
                 </div>
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">公称通径:</div>
-                        <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
-                            <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">公称压力:</div>
-                        <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
+                <div class="name" v-if="resultArr[0]">{{ resultArr[0].itemname}}</div>
+                <div class="name" v-else>暂无</div>
+            </div>
+            <div class="info-item" style="width: 50%;">
+                <div class="info-title">
+                    <div class="title">执行器</div>
+                    <span v-show="!!resultArr[1]" @click="active=2;resultArr.splice(1);fujianArr=[]">
+                        <img src="@/assets/重选.svg" alt="">
+                        重选
+                    </span>
                 </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">连接方式:</div>
-                        <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
-                    </div>
+                <div class="name" v-if="resultArr[1]">{{ resultArr[1].itemname}} {{ guangtouParam.content.where.drivetype == '电动' ? ` + 减速箱：${resultArr[1].gearboxname}` : '' }}</div>
+                <div class="name" v-else>暂无</div>
+            </div>
+            <div class="info-item" style="width: 100%;">
+                <div class="info-title">
+                    <div class="title">辅件</div>
                 </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">阀体材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">阀杆材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <div class="label">阀座材质:</div>
-                        <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
-                            <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
-                        </el-select>
-                    </div>
+                <div style="display: flex" v-if="fujianArr.length">
+                    <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item)">{{ item.itemname }}：{{ item.model }}</el-tag>    
                 </div>
-
-                
-                <!--光头-->
-                <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                    <template v-slot:customcol="scope">
-                        <p>{{scope.column.data[scope.column.columnname]}}</p>
-                    </template>
-                    <template v-slot:opreation="scope">
-                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
-                    </template>
-                </MyTable>
+                <div class="name" v-else>暂无</div>
+            </div>
+        </div>
+    </div>
+    <!--选光头-->
+    <div class="dialog-content" v-show="active == 1">
+        <div class="option-line">
+            <div class="item">
+                <div class="label">驱动方式:</div>
+                <MySelect :isClear="false" @click="guangtouChange" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
+            </div>
+        </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">公称通径:</div>
+                <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
+                    <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">公称压力:</div>
+                <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
             </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="选执行器" name="执行器"  :disabled="activePosition!='执行器'">
-            <div class="dialog-content">
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">光头:</div>
-                        <MySelect 
-                            v-if="resultArr.length"
-                            :higit="true"
-                            :options="[{
-                                remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`
-                            }]" 
-                            v-model="gangtou"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[]">重选</el-button>
-                        </MySelect>
-                    </div>
-                </div>
 
-                <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">驱动方式:</div>
-                        <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
-                    </div>
-                </div>
+            <div class="item">
+                <div class="label">连接方式:</div>
+                <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
+            </div>
+        </div>
 
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">品牌:</div>
-                        <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
-                    </div>
-                </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">阀体材质:</div>
+                <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">阀杆材质:</div>
+                <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+            <div class="item">
+                <div class="label">阀座材质:</div>
+                <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
+                    <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
+                </el-select>
+            </div>
+        </div>
+        <!--光头-->
+        <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+            <template v-slot:customcol="scope">
+                <p>{{scope.column.data[scope.column.columnname]}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+                <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
+            </template>
+        </MyTable>
+    </div>
+    <!--选执行器-->
+    <div class="dialog-content" v-show="active == 2">
+        <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">驱动方式:</div>
+                <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
+            </div>
+        </div>
 
-                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">功能:</div>
-                        <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
-                    </div>
-                </div>
+        <div class="option-line">
+            <div class="item">
+                <div class="label">品牌:</div>
+                <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
+            </div>
+        </div>
 
-                <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
-                    <div class="item">
-                        <div class="label">结构:</div>
-                        <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
-                    </div>
-                </div>
+        <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">功能:</div>
+                <MySelect :disabled="!excelParam.content.where.actuatorbrand" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
+            </div>
+        </div>
 
-                <!--执行器-->
-                <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                    <template v-slot:customcol="scope">
-                        <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
-                        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
-                    </template>
-                    <template v-slot:opreation="scope">
-                        <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')">选择</el-button>
-                    </template>
-                </MyTable>
+        <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
+            <div class="item">
+                <div class="label">结构:</div>
+                <MySelect :disabled="!excelParam.content.where.func"  @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
             </div>
-        </el-tab-pane>
+        </div>
 
-        <el-tab-pane label="选辅件" name="辅件"  :disabled="activePosition!='辅件'" v-if="isFujianShow">
-            <div class="dialog-content">
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">光头:</div>
-                        <MySelect 
-                            v-if="resultArr.length"
-                            :higit="true"
-                            :options="[{remarks:`${resultArr[0].itemname}`,value:`${resultArr[0].itemid}`}]" 
-                            v-model="gangtou"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='光头';isFujianShow=false;resultArr=[];fujianArr=[]">重选</el-button>
-                        </MySelect>
-                    </div>
-                </div>
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label">执行器:</div>
-                        <MySelect 
-                            v-if="resultArr.length>=2"
-                            :higit="true"
-                            :options="[{remarks:resultArr[1].actuatormodel,value:resultArr[1].itemid}]" 
-                            v-model="excel"
-                            :isClear="false"
-                        >
-                            <el-button slot="custom" type="text" size="mini" @click="activePosition='执行器';resultArr.splice(1);fujianArr=[]">重选</el-button>
-                        </MySelect>
+        <!--执行器-->
+        <MyTable :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+            <template v-slot:customcol="scope">
+                <p v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</p>
+                <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+                <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')" :disabled="(loading) || (guangtouParam.content.where.drivetype=='电动' && resultArr.length == 2)">选择</el-button>
+            </template>
+        </MyTable>
+    </div>
+    <!--选辅件-->
+    <div class="dialog-content" v-show="active == 3">
+        <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
+        <template v-slot:customcol="scope">
+            <p>{{scope.column.data[scope.column.columnname]}}</p>
+        </template>
+        <template v-slot:opreation="scope">
+            <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
+        </template>
+        </MyTable>
+    </div>
+    <div class="dialog-content" v-if="active == 4">
+        <table bgcolor="#FAFAFA" cellpadding="0" style="width: 100%;" class="result">
+            <tr style="width: 100px;">
+                <td class="title">光头</td>
+                <td>
+                    <div class="text1" style="margin-bottom: 8px;">{{ resultArr[0] && resultArr[0].itemname}}</div>
+                    <div class="descript">
+                        <div class="item">料号：{{ resultArr[0] && resultArr[0].itemno }}</div>
+                        <div class="item">扭矩：{{ resultArr[0] && resultArr[0].torque }}</div>
+                        <div class="item">法兰号：{{ resultArr[0] && resultArr[0].flh }}</div>
+                        <div class="item">阀杆尺寸：{{ resultArr[0] && resultArr[0].stemmaterial }}</div>
                     </div>
-                </div>
-
-                <div class="option-line">
-                    <div class="item">
-                        <div class="label" style="width:50px !important">辅件:</div>
-                        <div style="display: flex">
-                            <el-tag size="small" closable v-for="item in fujianArr" :key="item.itemid" style="margin-right: 10px" @close="handleClose(item)">{{ item.model }}:{{ item.itemname }}</el-tag>    
-                        </div>
+                </td>
+            </tr>
+            <tr>
+                <td class="title">执行器</td>
+                <td>
+                    <div class="text1" style="margin-bottom: 8px;">{{ resultArr[1] && resultArr[1].actuatormodel }} {{guangtouParam.content.where.drivetype == '电动' ? ` + 减速箱：${resultArr[1] && resultArr[1].gearboxname}` : '' }}</div>
+                    <div class="descript">
+                        <div class="item">输出扭矩：{{ resultArr[1] && resultArr[1].torque }}</div>
+                        <div class="item">开关时间：{{ resultArr[1] && resultArr[1].maxruntime }}</div>
+                        <div class="item">转速：{{ resultArr[1] && resultArr[1].speed }}</div>
+                        <div class="item">圆阀杆直径：{{ resultArr[1] && resultArr[1].maxrounddiameter }}</div>
+                        <div class="item">方阀杆直径：{{ resultArr[1] && resultArr[1].maxsquarewidth }}</div>
                     </div>
-                </div>
+                </td>
+            </tr>
+            <tr>
+                <td class="title">辅件</td>
+                <td style="padding: 0;">
+                    <tr style="border-bottom: 1px solid #DDDDDD;" class="custom-table">
+                        <div>定位器</div>
+                        <div class="text1">{{ resultArr.filter(item => item.itemname == '定位器').length ? resultArr.filter(item => item.itemname == '定位器')[0].model : '暂无' }}</div>
+                        <div>电磁阀</div>
+                        <div class="text1">{{ resultArr.filter(item => item.itemname == '电磁阀').length ? resultArr.filter(item => item.itemname == '电磁阀')[0].model : '暂无' }}</div>
+                    </tr>
 
-                <!--辅件-->
-                <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 25px">
-                <template v-slot:customcol="scope">
-                    <p>{{scope.column.data[scope.column.columnname]}}</p>
-                </template>
-                <template v-slot:opreation="scope">
-                    <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
-                </template>
-                </MyTable>
-            </div>
-        </el-tab-pane>
-        <el-tab-pane label="确认配置" name="配置" :disabled="activePosition!='配置'">
-            <div class="dialog-content">
-                <div class="option-line">
-                    <div class="item">
-                        <span class="label" style="font-weight: bold">成品料号:</span>
-                        <span style="color: #3874f6;font-size: 14px;font-weight: bold">{{ Object.keys(product).length ? product.itemno||'暂无成品' : '' }}</span>
-                    </div>
-                    <div class="item">
-                        <span class="label" style="font-weight: bold">{{product.itemno?'牌价':'预估价格'}}:</span>
-                        <span style="color: red;font-size: 14px;font-weight: bold">{{ Object.keys(product).length ? tool.formatAmount(product.price,2) : 'xxxxxx' }}</span>
-                    </div>
-                </div>
-                <MyTable height="400" ref="resultTable" :layout="tool.tabelCol($route.name)['reslutList'].tablecols" :data="resultArr" :opwidth="200" :custom="true" style="margin-top: 25px">
-                    <template v-slot:customcol="scope">
-                        <p v-if="scope.column.columnname == 'model'">{{ scope.column.data.actuatormodel }}</p>
-                        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
-                    </template>
-                </MyTable>
-            </div>
-            
-        </el-tab-pane>
-    </el-tabs>
+                    <tr class="custom-table">
+                        <div>限位开关</div>
+                        <div class="text1">{{ resultArr.filter(item => item.itemname == '限位开关').length ? resultArr.filter(item => item.itemname == '限位开关')[0].model : '暂无' }}</div>
+                        <div>过滤减压阀</div>
+                        <div class="text1">{{ resultArr.filter(item => item.itemname == '过滤减压阀').length ? resultArr.filter(item => item.itemname == '过滤减压阀')[0].model : '暂无' }}</div>
+                    </tr>
+                </td>
+            </tr>
+            <tr>
+                <td class="title">成品料号</td>
+                <td class="text1">{{ Object.keys(product).length ? product.itemno||'暂无成品' : '' }}</td>
+            </tr>
+            <tr>
+                <td class="title">{{product.itemno?'牌价':'预估价格'}}</td>
+                <td class="text2">￥{{ Object.keys(product).length ? tool.formatAmount(product.price,2) : 'xxxxxx' }}</td>
+            </tr>
+        </table>
+    </div>
 
-    <div class="dialog-footer">
+    <div class="fixed__btn__panel">
         <el-button size="small" @click="close" class="normal-btn-width">取 消</el-button>
-        <el-button size="small" type="primary" @click="activePosition='配置'" class="normal-btn-width" v-if="activePosition == '辅件'" :disabled="$refs.fujianRef.list.length!= 0">下一步</el-button>
-        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width" v-if="activePosition == '配置'">加入{{ position }}</el-button>
+        <el-button size="small" @click="guangtouParam.content.where.drivetype == '电动' ? active = 2 : active = 3" type="primary" v-if="active == 4" class="normal-btn-width">上一步</el-button>
+        <el-button size="small" type="primary" @click="active=4" class="normal-btn-width" v-if="active == 3" :disabled="$refs.fujianRef.list.length!= 0">下一步</el-button>
+        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width" v-if="active == 4">确认添加</el-button>
     </div>
   </div>
 </template>
@@ -211,18 +221,24 @@
 <script>
 import MySelect from '@/optionSystem/FProductManage/modules/select.vue'
 import MyTable from '@/optionSystem/FProductManage/modules/table.vue'
+import Steps from '@/optionSystem/FProductManage/modules/Steps.vue'
 export default {
     props:['position'],
-    components:{MySelect,MyTable},
+    components:{MySelect,MyTable,Steps},
     inject:['valvetype'],
     data () {
         return {
-            tableHeight:'200px',
+            items: [
+                {title:'选光头',value:'光头'},
+                {title:'选执行器',value:'执行器'},
+                {title:'选辅件',value:'辅件'},
+                {title:'确认配置',value:'配置'}
+            ],
+            active:1,
+            tableHeight:'400px',
             excel:'',
             gangtou:'',
             resultArr:[],
-            activePosition:'光头',
-            
             caliber:[],
             nominalpressure:[],
             connection:[],
@@ -272,7 +288,7 @@ export default {
                 "id": 20240718162102,
                 "content": {
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999,
                     "where": {
                         "condition": "",
                         "caliber": "", //公称通径
@@ -291,7 +307,7 @@ export default {
                 "content": {
                     "itemid": "",//光头id
                     "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageSize": 9999999,
                     "where": {
                         "condition1": "",
                         "condition2": "",
@@ -324,8 +340,8 @@ export default {
         }
     },
     watch: {
-        activePosition (val) {
-            if (val == '配置') {
+        active (val) {
+            if (val == 4) {
                 if (this.guangtouParam.content.where.drivetype == '电动') {
                     if (this.resultArr[1].gearboxid) this.resultArr.push({parttype:'减速箱',itemid:this.resultArr[1].gearboxid,itemname:this.resultArr[1].gearboxname,actuatorbrand:this.resultArr[1].gearboxbrand})
                 }
@@ -347,7 +363,7 @@ export default {
     },
     methods: {
         close () {
-            this.activePosition = '光头'
+            this.active = 1
             this.guangtouParam.content.where.drivetype = '电动'
             this.resultArr = []
             this.fujianArr = []
@@ -458,7 +474,7 @@ export default {
                         "content": {
                             "itemid": 0,//光头id
                             "pageNumber": 1,
-                            "pageSize": 20,
+                            "pageSize": 9999999,
                             "where": {
                                 "condition1": "",
                                 "condition2": "",
@@ -478,7 +494,7 @@ export default {
                     "id": 20240718162302,
                     "content": {
                         "pageNumber": 1,
-                        "pageSize": 20,
+                        "pageSize": 9999999,
                         "where": {
                             "condition1": "",
                             "torque": "", //阀门扭矩
@@ -546,7 +562,6 @@ export default {
             data.parttype = type
             this.resultArr.push(data)
             if (type == '主阀') {
-                if (this.guangtouParam.content.where.drivetype == '气动') this.isFujianShow = true
                 this.guangtouChange(this.guangtouParam.content.where.drivetype)
                 this.excelParam.content.itemid = data.itemid
                 this.excelParam.content.where.torque = data.torque
@@ -561,9 +576,7 @@ export default {
                         this.func = this.$refs.excelRef.list[0].option.func
                     })
                 })
-                
-
-                this.activePosition = '执行器'
+            this.active = 2
             } else if (type == '执行器') {
                 this.resultArr[1].itenname = this.resultArr[1].actuatorname
                 this.resultArr[1].itemno = this.resultArr[1].actuatorno
@@ -575,11 +588,11 @@ export default {
                 }
                 data.itemid = data.actuatorid
                 data.itemname = data.actuatorname
-                if (this.isFujianShow) {
-                    this.activePosition = '辅件'
+                if (this.guangtouParam.content.where.drivetype == '气动') {
+                    this.active = 3
                     this.$refs.fujianRef.listData()
                 } else {
-                    this.activePosition = '配置'
+                    this.active = 4
                 }
             } else {
                 if (this.fujianArr.filter(item=>item.itemid==data.itemid).length) return
@@ -609,6 +622,14 @@ export default {
             
             this.$refs.fujianRef.listData()
         },
+        //重置
+        refresh () {
+            this.resultArr = []
+            this.fujianArr = []
+            this.dialogVisible = false
+            this.active = 1
+            this.items = this.items.splice(0,2)
+        },
         //选项
         optionsList () {
             this.$store.dispatch("optiontypeselect", "caliber").then((res) => {
@@ -662,9 +683,78 @@ export default {
 </script>
 
 <style scoped>
-    
-    .product-content {
 
+    .drawer__panel {
+        padding: 20px 40px !important;
+        font-family: Source Han Sans SC, Source Han Sans SC;
+    }
+    .my-steps {
+        padding: 0px 68px;
+    }
+    .product-info {
+        padding: 16px 20px;
+        border: 1px solid #3874F6;
+        background: rgba(56, 116, 246, 0.08);
+        margin-top: 20px;
+        border-radius: 2px;
+    }
+    .product-info .title {
+        margin-bottom: 16px;
+        font-weight: bold;
+        color: #333333;
+        font-size: 16px !important;
+    }
+    .product-info .info-content {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .product-info .info-content .info-item {
+        display: flex;
+        flex-direction: column;
+    } 
+    .product-info .info-content .info-item .info-title {
+        margin-bottom: 8px;
+        display: flex;
+        align-content: center;
+        align-items: center;
+    }
+    .product-info .info-content .info-item .info-title .title {
+        margin-bottom: 0px !important;
+    }
+    .product-info .info-content .info-item .info-title div {
+        margin-right: 20px;
+        font-size: 14px !important;
+    }
+    .product-info .info-content .info-item .info-title span {
+        font-size: 14px;
+        color: #3874F6 !important;
+        cursor: pointer;
+        display: inline-block;
+        display: flex;
+        align-items: center;
+        align-content: center;
+    }
+    .product-info .info-content .info-item .info-title span img {
+        width: 12px;
+        height: 12px;
+        margin-right: 4px;
+    }
+    .product-info .info-content .info-item .name {
+        font-weight: 400;
+        font-size: 14px;
+        color: #555555;
+    }
+    .product-info .info-content .info-item .names {
+        font-weight: 400;
+        font-size: 14px;
+        color: #555555;
+        display: flex;
+    }
+    .product-info .info-content .info-item .names div {
+        margin-right: 20px;
+    }
+    .product-info .info-content .info-item .names div span {
+        margin-right: 10px;
     }
     .product-content .block {
         margin-top: 30px;
@@ -710,4 +800,76 @@ export default {
        font-size:12px;
        color:red;
     }
+    table,td,tr {
+        border-collapse: collapse;
+    }
+    td {
+        padding: 20px 20px;
+    }
+    table,td {
+        border: 1px solid #DDDDDD;
+    }
+    .result{
+        margin-top: 20px;
+    }
+    .result .title {
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        font-size: 16px;
+        color: #333333;
+        padding: 34px 20px;
+    }
+    .custom-table {
+        border: none;
+        display: flex;
+        height: 64px;
+        align-items: center;
+        align-content: center;
+    }
+    .custom-table div{
+        border-right: 1px solid #DDDDDD;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        padding-left: 20px;
+    }
+    .custom-table div:nth-child(1) {
+        width: 120px;
+    }
+    .custom-table div:nth-child(2) {
+        flex: 1;
+    }
+    .custom-table div:nth-child(3) {
+        width: 120px;
+    }
+    .custom-table div:nth-child(4) {
+        flex: 1;
+    }
+    .descript {
+        display: flex;
+    }
+    .descript .item {
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        margin-right: 40px;
+    }
+    .descript .item:last-child {
+        margin-right: 0 !important;
+    }
+    .text1 {
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        font-size: 16px;
+        color: #3874F6;
+    }
+    .text2 {
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        font-size: 16px;
+        color: #E80000;
+    }
+
 </style>