yos_web/src/optionSystem/FProductManage/modules/diefa/edit.vue

<template>
  <div class="product-content">
    <el-row :gutter="20">
        <el-form :model="form" ref="form" :rules="rules"  size="mini" label-position="right" label-width="90px">
            <el-col :span="12">
                <el-form-item  label="产品编码" prop="itemno" :rules="[{ required: true, message: '请输入产品编码'}]">
                    <el-input type="text" autosize v-model="form.itemno" placeholder="输入产品编码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="产品名称" prop="itemname" :rules="[{ required: true, message: '请输入产品名称'}]">
                    <el-input type="text" autosize v-model="form.itemname" placeholder="输入产品名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="erp品号" prop="erpitemno" :rules="[{ required: true, message: '请输入erp品号'}]">
                    <el-input type="text" autosize v-model="form.erpitemno" placeholder="输入erp品号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="erp品名" prop="erpitemname" :rules="[{ required: true, message: '请输入erp品名'}]">
                    <el-input type="text" autosize v-model="form.erpitemname" placeholder="输入erp品名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="规格尺寸" prop="spec" :rules="[{ required: true, message: '请输入规格尺寸'}]">
                    <el-input type="text" autosize v-model="form.spec" placeholder="输入规格尺寸"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="型号" prop="model" :rules="[{ required: true, message: '请输入型号'}]">
                    <el-input type="text" autosize v-model="form.model" placeholder="输入型号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="材质" prop="material" :rules="[{ required: true, message: '请输入材质'}]">
                    <el-input type="text" autosize v-model="form.material" placeholder="输入材质"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item  label="牌价" prop="marketprice" :rules="[{ pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,message:'请输入数字（最多两位小数）',trigger:'blur'}]">
                    <el-input type="text" autosize v-model="form.marketprice" placeholder="输入牌价"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
    </el-row>
    <div class="block">
        <div class="header">
            <div class="title">组成件</div>
            <div class="handle">
                <el-button type="primary" size="mini" style="margin-right: 10px;" @click="dialogVisible=true;calcTableHieght('guangtouRef')" :disabled="resultArr.length!=0">选择</el-button>
                <el-drawer custom-class="custom-select-option_class" :visible.sync="dialogVisible" size="1300px" append-to-body :show-close="false" v-if="dialogVisible" :wrapperClosable="false" :close-on-press-escape="false">
                    <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>
                                    <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="$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">
                                <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>

                            <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=='电动'" style="color:#3874F6;margin-top: 10px;"><i class="el-icon-warning" style="margin-right: 5px;"></i>建议开关阀时间{{ caliber.filter(v=>v.value==guangtouParam.content.where.caliber).length ? caliber.filter(v=>v.value==guangtouParam.content.where.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">
                                    <div v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</div>
                                    <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>
                    <div class="fixed__btn__panel">
                        <el-button size="small" @click="refresh()" class="normal-btn-width">取 消</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-drawer>
                <el-button size="mini" @click="refresh">清空</el-button>
            </div>
        </div>
        <div class="content">
            <!--结果-->
            <tableLayout :layout="tool.tabelCol($route.name)['reslutList'].tablecols" :data="resultArr" :opwidth="200" style="margin-top: 25px">
            </tableLayout>
        </div>
    </div>

    <div class="block">
        <div class="header">
            <div class="title">技术信息</div>
        </div>
        <div class="content">
            <el-row :gutter="20">
                <el-form :model="form" ref="form2"  size="mini" label-position="left" label-width="85px">
                    <el-col :span="12">
                        <el-form-item  label="公称通径" prop="caliber">
                            <el-input type="text" autosize v-model="form.caliber" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="公称压力" prop="nominalpressure">
                            <el-select v-model="form.nominalpressure" multiple placeholder="请选择公称压力" size="small" style="width:100%" disabled>
                                <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks" disabled></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="连接方式" prop="connection">
                            <el-input type="text" autosize v-model="form.connection" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="驱动方式" prop="drivetype">
                            <el-select multiple v-model="form.drivetype" placeholder="请选择驱动方式" size="small" style="width:100%" disabled>
                                <el-option v-for="item in drivetype" :key="item.value" :value="item.value" :label="item.remarks" disabled></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="蝶板材质" prop="valveplatematerial">
                            <el-input type="text" autosize v-model="form.valveplatematerial" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="阀体材质" prop="bodymaterial">
                            <el-input type="text" autosize v-model="form.bodymaterial" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="阀杆材质" prop="stemmaterial">
                            <el-input type="text" autosize v-model="form.stemmaterial" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="阀座材质" prop="plinthmaterial">
                            <el-input type="text" autosize v-model="form.plinthmaterial" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="执行器品牌" prop="actuatorbrand">
                            <el-input type="text" autosize v-model="form.actuatorbrand" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="执行器类型" prop="actuatordrivetype">
                            <el-input type="text" autosize v-model="form.actuatordrivetype" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="行程时间" prop="maxruntime">
                            <el-input type="text" autosize v-model="form.maxruntime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  label="输出力矩" prop="torque">
                            <el-input type="text" autosize v-model="form.torque" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
    </div>
  </div>
  </template>
  
  <script>
  import MySelect from '../select.vue'
  import MyTable from '../table.vue'
  import SelectBar from '../selectBar.vue'
  import Aside from '../aside.vue'
  export default {
      components:{MySelect,MyTable,SelectBar,Aside},
      props:['data'],
      data () {
          return {
              items: [
                  {title:'选光头',value:'光头'},
                  {title:'选执行器',value:'执行器'},
              ],
              active:1,
              tableHeight:'400px',
              dialogVisible:false,
              form:{},
              rules:{
                  itemno:[
                      { required: true, message: '请输入产品编码', trigger: 'blur'},
                  ],
                  itemname:[
                      { required: true, message: '请输入产品名称', trigger: 'blur'},
                  ],
              },
              excel:'',
              gangtou:'',
              resultArr:[],
              caliber:[],
              nominalpressure:[],
              connection:[],
              bodymaterial:[],
              stemmaterial:[],
              plinthmaterial:[],
              actuatorbrand:[],
              actuatorname:[],
              actuatorsignal:[],
              supplyvoltage:[],
              actuatordrivetype:[],
              drivetype:[],
              bodystructure:[],
              func:[],
              guangtouList:[],
              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": 2024071014420002,
                  "content": {
                      "pageNumber": 1,
                      "pageSize": 30,
                      "where": {
                          "condition": "",
                          "caliber": "", //公称通径
                          "nominalpressure": "", //公称压力
                          "connection": "", //连接方式
                          "bodymaterial": "", //阀体材质
                          "stemmaterial": "", //阀杆材质
                          "plinthmaterial": "", //阀座材质
                          "drivetype": "电动" //驱动方式
                      }
                  },
              },
              excelList:[],
              excelParam: {
                  "id": 20240710163402,
                  "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": 20240710163602,
                  "content": {
                      "othertypes": [
                      ],
                      "pageNumber": 1,
                      "pageSize": 30,
                      "where": {
                          "actuatorbrand": "" //品牌
                      }
                  },
              },
              timer:null
          }
      },
      watch: {
        'excelParam.content.where.actuatorbrand': {
            handler (val) {
                setTimeout(() => {
                    this.calcTableHieght('excelRef')
                },500)
            }
        },
        active (val) {
            console.log(val);
            switch (val) {
                
                case 1:
                    this.calcTableHieght('guangtouRef')
                    break;
                case 2:
                    this.calcTableHieght('excelRef')
                    break;
                case 3:
                    this.calcTableHieght('fujianRef')
                    break;
                default:
                    break;
            }
        }
    },
      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 = this.resultArr.splice(0,1)
                this.fujianArr=[]
            } else {
                this.resultArr = this.resultArr.splice(0,2)
                this.fujianArr=[]
                if (this.excelParam.content.where.drivetype == '气动调节') {
                    this.fujianParam.content.othertypes = ['定位器','过滤减压阀']
                } else if (this.excelParam.content.where.drivetype == '气动开关') {
                    this.fujianParam.content.othertypes = ['电磁阀','限位开关','过滤减压阀']
                }
                this.$refs.fujianRef.listData()
            } 
        },
          async showFun () {
              if (this.data) {
                let res = await this.$api.requested({
                    "id": 2024071014203202,
                    "content": {
                        "itemid": this.$route.query.id
                    },
                })
                this.resultArr = res.data
                console.log(this.resultArr);
                
                this.form = Object.assign({},this.form,this.data)
              }
                this.loading = false
              this.drawer = true
          },
          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()
                })
            },
          //搜索
          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]] = []
                          }
                      }
                  }
              }
          },
          guangtouChange (val) {
            switch (val) {
                case '电动':
                    this.excelParam = {
                        "id": 20240710163402,
                        "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;
            }
        },
          //选择目标
          selectTarget (data,type) {
              data.parttype = type
              this.resultArr.push(data)
              if (type == '主阀') {
                  if (this.guangtouParam.content.where.drivetype == '气动' && this.items.length == 2) {
                      this.items.push({title:'选辅件',value:'辅件'})
                  } else if (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
                  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].itemname = this.resultArr[1].actuatormodel
                  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.actuatormodel
                  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
                  this.fujianParam.content.othertypes.splice(this.fujianParam.content.othertypes.indexOf(data.itemname),1)
                  this.loading = true
                  this.$refs.fujianRef.listData(()=> {
                      this.fujianArr.push(data)
                      this.loading = false
                  })
                  
              }
              this.resultArr[this.resultArr.length - 1] = data
          },
          writeForm () {
              this.form.caliber = this.resultArr[0].caliber
              this.form.nominalpressure = this.resultArr[0].nominalpressure
              this.form.connection = this.resultArr[0].connection
              this.form.valveplatematerial = this.resultArr[0].valveplatematerial
              this.form.bodymaterial = this.resultArr[0].bodymaterial
              this.form.stemmaterial = this.resultArr[0].stemmaterial
              this.form.plinthmaterial = this.resultArr[0].plinthmaterial
              this.form.actuatorbrand = this.resultArr[1].actuatorbrand
              this.form.actuatordrivetype = this.resultArr[1].actuatordrivetype
              this.form.maxruntime = this.resultArr[1].maxruntime
              this.form.torque = this.resultArr[1].torque
          },
          handleClose (tag) {
              this.fujianArr = this.fujianArr.filter(item => {
                  if (item.itemid != tag.itemid) {
                      return item
                  } else {
                      this.fujianParam.content.othertypes.push(item.itemname)
                  }
              })
              this.resultArr = this.resultArr.filter(item => {
                  if (item.itemid != tag.itemid) {
                      return item
                  }
              })
              
              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.active = 1
              this.items = this.items.splice(0,2)
              this.$refs.form2.resetFields()
          },
          async onSubmit (callback) {
              this.$store.commit('setLoading',true)
              this.form.part_itemids = this.resultArr.map(item => {
                  return {
                      parttype:item.parttype,
                      itemid:item.itemid
                  }
              })
              this.form.part_itemids.push({parttype:'减速箱',itemid:this.resultArr[1].gearboxid||0})
              this.$api.requested({
                  id:20240710094402,
                  content: this.form
              }).then(res=>{
                  this.tool.showMessage(res,() => {
                    this.$refs.form.resetFields()
                    this.drawer = false
                    this.$emit('onSuccess')
                    this.$store.commit('setLoading',false)
                  })
              })
          },
          //选项
          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()
      }
  }
  </script>
  
  <style scoped>
      /deep/.el-drawer__header {
        display: none !important;
      }
      /deep/.el-step__title {
          width: 100px !important;
          cursor: pointer;
      }
        /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/.el-drawer__body {
        display: flex;
    }
    /deep/.fixed__btn__panel {
        padding-left: 240px !important;
    }
    .scroll {
        height: calc(100vh - 60px);
        overflow-y: scroll;
    }
    ::-webkit-scrollbar {
        display: none;
    }
      .drawer__panel {
          padding: 10px 40px !important;
          flex: 1;
          overflow: hidden;
      }
      .my-steps {
          padding: 0px 68px;
      }
      .drawer__panel {
          font-family: Source Han Sans SC, Source Han Sans SC;
      }
      
      .product-content .block {
          margin-top: 20px;
          padding-left: 20px;
      }
      .product-content .block .header {
          display: flex;
          align-content: center;
          align-items: center;
      }
      .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;
      }
  </style>