yos_web/src/optionSystem/selectOption/components/DieFa.vue

<template>
  <div style="display: flex;height: 100vh">
    <Aside :resultArr="resultArr" :fujianArr="fujianArr" @refresh="resultRefresh"></Aside>
    <div class="drawer__panel">
        <div class="my-steps">
            <a-steps :current="active-1" style="margin-bottom: 10px;">
                <a-step :title="item.title" v-for="(item,index) in items" :key="index">
                    <i slot="icon" class="iconfont" style="font-size: 32px;color: #3874F6 !important" v-if="active > index+1">&#xe6fd;</i>
                </a-step>
            </a-steps>
        </div>
        <!--选光头-->
        <div class="dialog-content" v-show="active == 1">
            <div class="option-line">
                <div class="item">
                    <div class="label">驱动方式:</div>
                    <MySelect :isClear="false" @click="$event => {guangtouChange($event);Search('guangtouParam','drivetype')}" :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.value"></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>
            <!--光头-->
            <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 14px">
                <template v-slot:customcol="scope">
                    <span v-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
                </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-if="guangtouParam.content.where.drivetype=='电动'">
                <div class="item">
                    <div class="label">驱动方式:</div>
                    <MySelect @click="Search('excelParam','actuatordrivetype');calcTableHieght('excelRef')" :options="[{remarks:'电动开关',value:'电动开关'},{remarks:'电动调节',value:'电动调节'}]" v-model="excelParam.content.where.actuatordrivetype"></MySelect>
                </div>
            </div>
            <div class="option-line" v-if="guangtouParam.content.where.drivetype=='电动'">
                <div class="item">
                    <div class="label">品牌:</div>
                    <MySelect @click="Search('excelParam','actuatorbrand');calcTableHieght('excelRef')" :disabled="!excelParam.content.where.actuatordrivetype" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
                </div>
            </div>
            <div class="option-line" v-else>
                <div class="item">
                    <div class="label">品牌:</div>
                    <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
                </div>
            </div>
            <div v-if="guangtouParam.content.where.drivetype == '电动' && excelParam.content.where.actuatorbrand && actuatorname.length">
                <div class="option-line">
                    <div class="item">
                        <div class="label" style="width: 80px;">执行器类型:</div>
                        <span style="font-size: 14px;font-weight: bold;color:#3874F6">{{ excelParam.content.where.actuatorname || '--' }}</span>
                    </div>
                </div>
                <SelectBar style="margin: 20px 0" v-model="excelParam.content.where.actuatorname" :options="actuatorname.map(v => {return {url:v.url,remarks:v.remarks.split('-').pop(),value:v.remarks}})" @change="Search('excelParam','actuatorname')"></SelectBar>
            </div>
            <div class="option-line" v-if="guangtouParam.content.where.drivetype=='电动'">
                <div class="item">
                    <div class="label">电源电压:</div>
                    <MySelect @click="Search('excelParam','supplyvoltage')" :disabled="!excelParam.content.where.actuatorname" :options="supplyvoltage" v-model="excelParam.content.where.supplyvoltage"></MySelect>
                </div>
                <div class="item">
                    <div class="label">信号类型:</div>
                    <MySelect @click="Search('excelParam','actuatorsignal')" :disabled="!excelParam.content.where.supplyvoltage" :options="actuatorsignal" v-model="excelParam.content.where.actuatorsignal"></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.actuatorname" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></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="tips" v-if="guangtouParam.content.where.drivetype=='电动' && resultArr.length" style="color:#3874F6;margin-top: 10px;"><i class="el-icon-warning" style="margin-right: 5px;"></i>建议开关阀时间{{ caliber.filter(v=>v.value==resultArr[0].caliber).length ? caliber.filter(v=>v.value==resultArr[0].caliber)[0].remarks:'-' }}秒</div>
            <!--执行器-->
            <MyTable fixedName="operation" :height="tableHeight" :noQuery="true" ref="excelRef" :tableName="guangtouParam.content.where.drivetype=='电动'?'excelTable1':'excelTable2'" :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: 14px">
                <template v-slot:customcol="scope">
                    <span v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</span>
                    <span v-else-if="scope.column.columnname == 'maxsquarewidth'">{{scope.column.data[scope.column.columnname].join(',')}}</span>
                    <span v-else-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
                </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: 14px">
            <template v-slot:customcol="scope">
                <span v-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
            </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" v-if="resultArr.length && resultArr[0].itemno"><span style="color: #888888;">料号：</span>{{resultArr[0].itemno }}</div>
                            <div class="item" v-if="resultArr.length && resultArr[0].torque"><span style="color: #888888;">扭矩：</span>{{resultArr[0].torque }}</div>
                            <div class="item" v-if="resultArr.length && resultArr[0].flh"><span style="color: #888888;">法兰号：</span>{{resultArr[0].flh }}</div>
                            <div class="item" v-if="resultArr.length && resultArr[0].caliber"><span style="color: #888888;">公称通径：</span>{{resultArr[0].caliber }}</div>
                            <div class="item" v-if="resultArr.length && resultArr[0].stemmaterial"><span style="color: #888888;">阀杆材质：</span>{{resultArr[0].stemmaterial }}</div>
                            <div class="item" v-if="resultArr.length && resultArr[0].mainmaterial"><span style="color: #888888;">主体材质：</span>{{resultArr[0].mainmaterial }}</div>
                        </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 ? ` + 减速箱：${resultArr[1] && resultArr[1].gearboxname}` : '' }}</div>
                        <div class="descript">
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].torque"><span style="color: #888888;">输出扭矩：</span>{{resultArr[1].torque }}(Nm)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].maxruntime"><span style="color: #888888;">开关时间：</span>{{resultArr[1].maxruntime }}(s)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].speed"><span style="color: #888888;">转速：</span>{{resultArr[1].speed }}(rpm)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].handwheelratio"><span style="color: #888888;">减速比：</span>{{resultArr[1].ratio }}</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].supplyvoltage"><span style="color: #888888;">电压：</span>{{resultArr[1].supplyvoltage }}(V)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].ratedcurrent"><span style="color: #888888;">电流：</span>{{resultArr[1].ratedcurrent }}(A)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].ratedpower"><span style="color: #888888;">功率：</span>{{resultArr[1].ratedpower }}(KW)</div>
                            <div class="item" v-if="resultArr.length >= 2 && resultArr[1].actuatorsignal"><span style="color: #888888;">信号类型：</span>{{resultArr[1].actuatorsignal.join(',') }}</div>
                            
                        </div>
                    </td>
                </tr>
                <tr v-if="fujianArr.length">
                    <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>

                        <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="fixed__btn__panel">
            <el-button size="small" @click="close" class="normal-btn-width">取 消</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="onSubmit" class="normal-btn-width" v-if="active == 4">确认添加</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import MySelect from '@/optionSystem/FProductManage/modules/select.vue'
import MyTable from '@/optionSystem/FProductManage/modules/table.vue'
import SelectBar from '@/optionSystem/FProductManage/modules/selectBar.vue'
import Aside from '@/optionSystem/FProductManage/modules/aside.vue'
export default {
    props:['position'],
    components:{MySelect,MyTable,SelectBar,Aside},
    inject:['valvetype','detailData'],
    data () {
        return {
            items: [
                {title:'选光头',value:'光头'},
                {title:'选执行器',value:'执行器'},
                {title:'选辅件',value:'辅件'},
                {title:'确认配置',value:'配置'}
            ],
            active:1,
            tableHeight:'400px',
            excel:'',
            gangtou:'',
            resultArr:[],
            caliber:[],
            nominalpressure:[],
            connection:[],
            bodymaterial:[],
            stemmaterial:[],
            plinthmaterial:[],
            actuatorbrand:[],
            actuatorsignal:[],
            supplyvoltage:[],
            actuatorname:[],
            actuatordrivetype:[],
            drivetype:[],
            bodystructure:[],
            func:[],
            guangtouList:[],
            isFujianShow:false,//辅件是否显示
            form: {
                "itemid": 0,
                "plm_itemextendid": 0,
                "valvetype": "蝶阀", //阀门类型（固定）
                "itemno": "", //产品编码（必填，唯一）
                "itemname": "", //产品名称（必填）
                "erpitemno": "", //erp品号（必填）
                "erpitemname": "", //erp品名（必填）
                "spec": "", //规格尺寸（必填）
                "model": "", //型号（必填）
                "material": "", //材质（必填，选项）
                "marketprice": '',
                "caliber": "", //公称通径
                "nominalpressure": [
                    
                ], //公称压力
                "connection": "",
                "drivetype": [
             
                ], //驱动方式
                "valveplatematerial": "",
                "bodymaterial": "",
                "stemmaterial": "",
                "plinthmaterial": "",
                "torque": "", //
                "maxruntime": "", //90°最大运行时间
                "actuatorbrand":"",//执行器品牌
                "actuatordrivetype":"",//执行器类型
                "part_itemids": [
                    
                ]
            },
            guangtouParam: {
                "id": 20240718162102,
                "content": {
                    "pageNumber": 1,
                    "pageSize": 30,
                    "where": {
                        "condition": "",
                        "caliber": "", //公称通径
                        "nominalpressure": "", //公称压力
                        "connection": "", //连接方式
                        "bodymaterial": "", //阀体材质
                        "stemmaterial": "", //阀杆材质
                        "plinthmaterial": "", //阀座材质
                        "drivetype": "电动" //驱动方式
                    }
                },
            },
            excelList:[],
            excelParam: {
                "id": 20240718162202,
                "content": {
                    "itemid": "",//光头id
                    "pageNumber": 1,
                    "pageSize": 30,
                    "where": {
                        "actuatordrivetype": "电动开关", //驱动方式
                        "condition1": "",
                        "condition2": "",
                        "torque": "", //阀门扭矩
                        "flh": "", //法兰号
                        "actuatorbrand": "", //品牌
                        "actuatorname":'',
                        "supplyvoltage":'',
                        "actuatorsignal":'',
                        "maxsquarewidth": "", //方阀杆最大宽度
                        "maxrounddiameter": "" //圆阀杆最大直径
                    }
                },
            },
            fujianList:[],
            fujianArr:[],
            loading:false,
            fujianParam: {
                "id": 20240718162402,
                "content": {
                    "othertypes": [
                    ],
                    "pageNumber": 1,
                    "pageSize": 300,
                    "where": {
                        "actuatorbrand": "" //品牌
                    }
                },
            },
            timer:null,
            product:{}
        }
    },
    watch: {
        active (val) {
            switch (val) {
                case 1:
                    this.calcTableHieght('guangtouRef')
                    break;
                case 2:
                    this.calcTableHieght('excelRef')
                    break;
                case 3:
                    this.calcTableHieght('fujianRef')
                    break;
                default:
                    break;
            }
            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})
                }
                this.$api.requested({
                    "id": 2024071916224702,
                    "content": {
                        "sa_projectid": this.detailData().sa_projectid,
                        "part_itemids": this.resultArr.map(item => {
                            return {
                                parttype:item.parttype,
                                itemid:item.itemid
                            }
                        })
                    },
                }).then(res => {
                    this.product = res.data
                })
            }
        }
    },
    methods: {
        resultRefresh (type) {
            if (type == '光头') {
                this.active=1
                this.resultArr=[]
                this.fujianArr=[]
                this.items.splice(2,1)
            } else if (type == '执行器') {
                this.active=2
                this.resultArr.splice(1)
                this.fujianArr=[]
            } else {
                this.fujianArr=[]
                this.active = 3
                this.fujianParam.content.othertypes = ['电磁阀','限位开关','过滤减压阀']
                this.$refs.fujianRef.listData()
            } 
        },
        close () {
            this.active = 1
            this.guangtouParam.content.where.drivetype = '电动'
            this.resultArr = []
            this.fujianArr = []
            this.$emit('close')
        },
        //搜索
        Search (type,position) {
            let index = 0
            let whereKeys = Object.keys(this[type].content.where)
            if (position) {
                index = whereKeys.indexOf(position) + 1
            }
            if (type != 'excelParam') {
                for (let i = index; i < whereKeys.length - 1; i++) {
                    if (!position && whereKeys[i].indexOf('condition') != -1) continue
                    this[type].content.where[whereKeys[i]] = ''            
                }
            } else if (type == 'excelParam') {
                for (let i = index; i < whereKeys.length; i++) {
                    if (whereKeys[i].indexOf('condition') != -1 || whereKeys[i].indexOf('flh') != -1 || whereKeys[i].indexOf('maxrounddiameter') != -1 || whereKeys[i].indexOf('maxsquarewidth') != -1 || whereKeys[i].indexOf('torque') != -1 || whereKeys[i].indexOf('drivetype') != -1) continue
                    this[type].content.where[whereKeys[i]] = ''
                }
            }
            switch (type) {
                case 'guangtouParam':
                    if (this.loading) return
                    this.loading = true
                    whereKeys = whereKeys.filter(item => item != 'caliber')
                    this.$refs.guangtouRef&&this.$refs.guangtouRef.listData(_changeOption)
                    break;
                case 'excelParam':
                    if (this.loading) return
                    this.loading = true
                    this.$nextTick(() => {
                        this.$refs.excelRef&&this.$refs.excelRef.listData(_changeOption2)
                    })
                    break;
                default:
                    break;
            }
            //更新选项列表
            let that = this
            function _changeOption () {
                that.loading = false
                let isbreak=false
                for (let i = 0; i < whereKeys.length; i++) {
                    if (isbreak) break;
                    if (whereKeys[i].indexOf('condition') == -1) {
                        if (that.$refs.guangtouRef.list.length) {
                            if (i >= index-1 && whereKeys[i]!='drivetype') {
                                that[whereKeys[i]] = that.$refs.guangtouRef.list[0].option[whereKeys[i]]
                                if (that[whereKeys[i]].length == 1) {
                                    if (that.guangtouParam.content.where[position]) that.guangtouParam.content.where[whereKeys[i]] = that[whereKeys[i]][0].value
                                    if (that.timer) clearTimeout(that.timer)
                                    that.timer = setTimeout(() => {
                                        that.$refs.guangtouRef&&that.$refs.guangtouRef.listData()
                                    })
                                } else if (that[whereKeys[i]].length > 1) {
                                    that.guangtouParam.content.where[whereKeys[i]] = ''
                                }

                                if (that.$refs.guangtouRef.list[0].option[whereKeys[i]].length>1) {
                                    isbreak = true
                                }
                            }
                        } else {
                            if (i >= index && whereKeys[i] != 'drivetype') that[whereKeys[i]] = []
                        }
                    }
                }
            }
            function _changeOption2 () {
                that.loading = false
                let isbreak=false
                for (let i = 5; i < whereKeys.length; i++) {
                    if (isbreak) break;
                    if (whereKeys[i].indexOf('condition') == -1) {
                        if (that.$refs.excelRef.list.length) {
                            if (i >= index) {
                                if (whereKeys[i] != 'drivetype') that[whereKeys[i]] = that.$refs.excelRef.list[0].option[whereKeys[i]]
                                if (that[whereKeys[i]].length == 1) {
                                    if (that.excelParam.content.where[position]) that.excelParam.content.where[whereKeys[i]] = that[whereKeys[i]][0].value
                                    if (that.timer) clearTimeout(that.timer)
                                    that.timer = setTimeout(() => {
                                        that.$refs.excelRef&&that.$refs.excelRef.listData()
                                    })
                                } else if (that[whereKeys[i]].length > 1 && whereKeys[i] != 'drivetype') {
                                    that.excelParam.content.where[whereKeys[i]] = ''
                                }
                                if (that.$refs.excelRef.list[0].option[whereKeys[i]].length>1) {
                                    isbreak = true
                                }
                            }
                        } else {
                            if (i >= index && whereKeys[i] != 'drivetype') that[whereKeys[i]] = []
                        }
                    }
                }
            }
        },
        calcTableHieght (id) {
            this.$nextTick(() => {
                if (!this.$refs[id]) return 
                let target = this.$refs[id].$el.getBoundingClientRect()
                let clientHeight = document.body.clientHeight
                this.tableHeight = clientHeight - target.top - 85 + 'px'
                this.$refs[id].$refs.table.doLayout()
            })
        },
        guangtouChange (val) {
            switch (val) {
                case '电动':
                    this.excelParam = {
                        "id": 20240718162202,
                        "content": {
                            "itemid": 0,//光头id
                            "pageNumber": 1,
                            "pageSize": 30,
                            "where": {
                                "actuatordrivetype": "电动开关", //驱动方式
                                "condition1": "",
                                "condition2": "",
                                "torque": "", //阀门扭矩
                                "flh": "", //法兰号
                                "actuatorbrand": "", //品牌
                                "actuatorname":'',
                                "supplyvoltage":'',
                                "actuatorsignal":'',
                                "maxsquarewidth": "", //方阀杆最大宽度
                                "maxrounddiameter": "" //圆阀杆最大直径
                            }
                        },
                    }
                    break;
                case '气动':
                    
                this.excelParam = {
                    "id": 20240718162302,
                    "content": {
                        "pageNumber": 1,
                        "pageSize": 30,
                        "where": {
                            "condition1": "",
                            "torque": "", //阀门扭矩
                            "flh": "", //法兰号
                            "maxsquarewidth": "", //方阀杆最大宽度
                            "maxrounddiameter": "", //圆阀杆最大直径
                            "actuatorbrand": "", //品牌
                            "actuatorname":'',
                            "func": "", //功能
                            "bodystructure": "", //结构
                            "drivetype":'气动调节',
                        }
                    },
                }
                break;
                default:
                    break;
            }
        },
        async onSubmit () {
            this.$confirm('确认加入单据吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async () => {
                let mainvalve = Object.keys(this.guangtouParam.content.where).filter(v => v.indexOf('condition') == -1).reduce((result,item) => {
                    result[item] = this.guangtouParam.content.where[item]
                    return result
                },{})
                let actuator = Object.keys(this.excelParam.content.where).filter(v => v.indexOf('condition') == -1).reduce((result,item) => {
                    result[item] = this.excelParam.content.where[item]
                    return result
                },{})

                let param = {
                    "id": 2024071809123402,
                    "content": {
                        "sa_lectotypecfgid": 0,
                        "projectname": "",
                        "enterprisename": "",
                        "source": "",
                        "sourceid": this.$route.query.id,
                        "sourcetable": "",
                        "valvetype":this.valvetype(),
                        "filter": {
                            "mainvalve": mainvalve,
                            "actuator": actuator,
                            "other": {
                                fujianArr:this.fujianArr
                            }
                        },
                        "part_itemids": this.resultArr
                    },
                }
                this.$emit('handleParam',param)
                let res = await this.$api.requested(param)
                this.tool.showMessage(res,() => {
                    this.close()
                })
            }).catch(() => {
            })
            
        },
        //选择目标
        selectTarget (data,type) {
            data.parttype = type
            this.resultArr.push(data)
            if (type == '主阀') {
                this.guangtouChange(this.guangtouParam.content.where.drivetype)
                this.excelParam.content.itemid = data.itemid
                this.excelParam.content.where.torque = data.torque
                this.excelParam.content.where.flh = data.flh
                this.excelParam.content.where.maxsquarewidth = data.maxsquarewidth
                this.excelParam.content.where.maxrounddiameter = data.maxrounddiameter
                this.$nextTick(() => {
                    this.$refs.excelRef.listData(() => {
                        if (!this.$refs.excelRef.list.length) return
                        this.actuatorbrand = this.$refs.excelRef.list[0].option.actuatorbrand
                        this.bodystructure = this.$refs.excelRef.list[0].option.bodystructure
                        this.func = this.$refs.excelRef.list[0].option.func
                    })
                })
            this.active = 2
            } else if (type == '执行器') {
                this.resultArr[1].itenname = this.resultArr[1].actuatorname
                this.resultArr[1].itemno = this.resultArr[1].actuatorno

                if (this.excelParam.content.where.drivetype == '气动调节') {
                    this.fujianParam.content.othertypes = ['定位器','过滤减压阀']
                } else {
                    this.fujianParam.content.othertypes = ['电磁阀','限位开关','过滤减压阀']
                }
                data.itemid = data.actuatorid
                data.itemname = data.actuatorname
                if (this.guangtouParam.content.where.drivetype == '气动') {
                    this.active = 3
                    this.$refs.fujianRef.listData()
                } else {
                    this.active = 4
                }
            } else {
                if (this.fujianArr.filter(item=>item.itemid==data.itemid).length) return
                this.fujianParam.content.othertypes.splice(this.fujianParam.content.othertypes.indexOf(data.itemname),1)
                if (!this.fujianParam.content.othertypes.length) return this.active = 4
                this.loading = true
                this.$refs.fujianRef.listData(()=> {
                    this.fujianArr.push(data)
                    this.loading = false
                })
                
            }
            this.resultArr[this.resultArr.length - 1] = data
        },
        //重置
        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) => {
                this.caliber = res.data;
                console.log(this.caliber, "公称通径");
            });
            this.$store.dispatch("optiontypeselect", "pressure").then((res) => {
                this.nominalpressure = res.data;
                console.log(this.nominalpressure, "公称压力");
            });
            this.$store.dispatch("optiontypeselect", "connection").then((res) => {
                this.connection = res.data;
                console.log(this.connection, "连接方式");
            });
            this.$store.dispatch("optiontypeselect", "bodymaterial").then((res) => {
                this.bodymaterial = res.data;
                console.log(this.bodymaterial, "阀体材质");
            });
            this.$store.dispatch("optiontypeselect", "stemmaterial").then((res) => {
                this.stemmaterial = res.data;
                console.log(this.stemmaterial, "阀杆材质");
            });
            this.$store.dispatch("optiontypeselect", "plinthmaterial").then((res) => {
                this.plinthmaterial = res.data;
                console.log(this.plinthmaterial, "阀座材质");
            });
            this.drivetype = [{remarks:'电动',value:'电动'},{remarks:'气动',value:'气动'}];
            console.log(this.drivetype, "驱动方式");
            this.$store.dispatch("optiontypeselect", "lectotypebrand").then((res) => {
                this.actuatorbrand = res.data;
                console.log(this.actuatorbrand, "执行器品牌");
            });
            this.$store.dispatch("optiontypeselect", "actuatordrivetype").then((res) => {
                this.actuatordrivetype = res.data;
                console.log(this.actuatordrivetype, "执行器驱动方式");
            });
            this.$store.dispatch("optiontypeselect", "bodystructure").then((res) => {
                this.bodystructure = res.data;
                console.log(this.bodystructure, "结构");
            });
            this.$store.dispatch("optiontypeselect", "func").then((res) => {
                this.func = res.data;
                console.log(this.func, "功能");
            });
        }
    },
    created () {
        this.optionsList()
    },
    mounted () {
        this.calcTableHieght('guangtouRef')
    }
}
</script>

<style scoped>
    /deep/.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
        background: #3874F6 !important;
    }
    /deep/.ant-steps-item-finish .ant-steps-item-icon {
        background: none !important;
    }
    /deep/.ant-steps-item-icon {
        background: #3874F6;
        height: 32px !important;
    }
    /deep/.ant-steps-item-wait .ant-steps-item-icon {
        background: none !important;
    }
    /deep/.ant-steps-item-active .ant-steps-item-title {
        color:#3874F6 !important;
        font-weight: bold;
    }
    /deep/.fixed__btn__panel {
        padding-left: 240px !important;
    }
    .scroll {
        height: calc(100vh - 60px);
        overflow-y: scroll;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    .select-info {
        background: #F5F6FA;
        font-family: Microsoft YaHei, Microsoft YaHei;
        width: 240px;
        border-right: 1px #999999 solid;
        z-index: 301;
        flex-shrink: 0;
        word-wrap: break-word;
    }
    .select-info .info-title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding: 10px 20px;
        border-bottom: 1px solid #D9D9D9;
    }
    .select-info .product-wrapper {
        padding: 0 20px;
    }

    .select-info .product-wrapper .product {
        padding-bottom:20px;
        border-bottom: #D9D9D9 1px solid;
    }
    .select-info .product-wrapper .product:last-child {
        border-bottom: none !important;
    }
    .select-info .product-wrapper .product .product-header {
        display: flex;
        align-items: center;
        align-content: center;
        padding: 10px 0;
    }
    .select-info .product-wrapper .product .product-header span:last-child {
        color: #3874F6;
        margin-left: 18px;
        cursor: pointer;
    }
    .select-info .product-wrapper .product .product-header .title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
    }
    .select-info .product-wrapper .product .product-header img {
        width: 12px;
        height: 12px;
    }
    .select-info .product-wrapper .product .product-name {
        font-weight: 400;
        font-size: 14px;
        color: #555555;
    }
    .select-info .product-wrapper .product .attrite {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        padding-top: 10px;
    }
    .select-info .product-wrapper .product .attrite .attrite-title {
        color: #555555;
    }
    .select-info .product-wrapper .product .attrite .attrite-value {
    }

    .select-info .product-wrapper .product .attrite2 {
        display: flex;
        flex-direction: column;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        padding-top: 10px;
    }
    .select-info .product-wrapper .product .attrite2 .attrite-title {
        color: #555555;
        margin-bottom: 5px;
    }
    .select-info .product-wrapper .product .attrite2 .attrite-value {
    }

    .select-info .product-wrapper .product {
        display: flex;
        flex-direction: column;
    }


    .drawer__panel {
        font-family: Source Han Sans SC, Source Han Sans SC;
        padding: 10px 40px !important;
        flex: 1;
        overflow: hidden;
    }
    .my-steps {
        padding: 0px 68px;
    }
    .product-info {
        padding: 10px 20px;
        border: 1px solid #3874F6;
        background: rgba(56, 116, 246, 0.08);
        margin-top: 5px;
        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: 4px;
        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;
    }
    .product-content .block .header {
        display: flex;
        align-content: center;
        align-items: center;
        margin-bottom: 20px;
    }
    .product-content .block .header .title {
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
    }
    .product-content .block .header .handle {
        display: flex;
    }
    
    .dialog-content {

    }
    .dialog-content .option-line {
        display: flex;
        margin-top: 10px;
    }
    .dialog-content .option-line .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500px;
        margin-right: 20px;
    }
    .dialog-content .option-line .item .label {
        width: 70px;
        flex-shrink: 0;
        text-align-last: justify;
        margin-right: 15px;
        color: #000000 !important;
    }
    .descript {
       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: 20px 20px;
        min-width: 120px;
    }
    .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;
        flex-wrap: wrap;
    }
    .descript .item {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-right: 40px;
        margin-bottom: 5px;
    }
    .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>