2022-03-29 select切换用on-select事件

这种情况不能用on-change事件，否则修改附不上值，或者赋值，不能切换初始数据，所以只能用on-select

on-change:选中的Option变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性
on-select:选择项目时触发

 <Row :gutter="25">
          <Col :span="12">
            <FormItem label="依据时间" prop="calculateTimeType">
              <Select
                      @on-select="calculateTimeTypeFn"
                      v-model="form.calculateTimeType"
                      clearable
                      placeholder="请选择依据时间类型"
              >
                <Option v-for="item in calculateTimeTypeList" :value="item.value" :key="item.label">{{ item.label }} </Option>
              </Select>
            </FormItem>
          </Col>
          <Col :span="24">
            <div style="margin-left: 18px;margin-bottom:10px;" v-for="(item,index) in ruleContentList" :key="index">
              在 &nbsp;<TimePicker  v-model="item.timeStartEnd" :value="item.timeStartEnd" format="HH:mm:ss" type="timerange" placement="bottom-end" placeholder="请选择开始时间和结束时间" style="width: 200px"></TimePicker> &nbsp;期间的订单，不得晚于计算依据时间当日后  &nbsp;<Input v-model="item.withinDay" clearable placeholder="请输入天数" style="width: 80px"></Input> 日 &nbsp; <TimePicker :value="item.beforTime" v-model="item.beforTime" format="HH:mm:ss" placeholder="请选择时间" style="width: 200px"></TimePicker>
              <span v-if="index!=0" @click="deleteRule(index)"><i class="ivu-icon ivu-icon-ios-close " style="font-size: 31px;color: #000;transition: color 0.2s ease;position: relative; top: 1px;}"></i></span>
            </div>
          </Col>
          <Col :span="12" v-if="form.calculateTimeType!='AUDIT_TIME'&&ruleContentList.length<3"> <!--只有创建时间和支付时间显示按钮，否则反之-->
            <Button style="margin-left: 18px; margin-top:20px;" type="primary" @click="addRule">+新增规则</Button>
          </Col>
        </Row>

data里面的
//规则
        ruleContentList:[
          {
                timeStartEnd:['00:00:00', '09:59:59'],
                withinDay:0,
                beforTime:'17:00:00',
          },
          {
              timeStartEnd:['18:00:00', '23:59:59'],
              withinDay:1,
              beforTime:'17:00:00',
          },
          {
              timeStartEnd:['10:00:00', '17:59:59'],
              withinDay:0,
              beforTime:'23:59:59',
          }
        ],
  //新增/编辑表单
        form: {
          warehouseType:'', //仓库类型
          warehouseId:'', //仓库
          customerCode:'', //货主
          sourcePlatformCode:'', //订单渠道
          effectTime:  moment().format('YYYY-MM-DD') +  ' 00:00:00', //生效时间
          expireTime: moment().format('YYYY-MM-DD') +  ' 23:59:59', //失效时间
          calculateTimeType:'AUDIT_TIME',
          ruleContent:[
            {
              startTime:'',
              endTime:'',
              withinDay:'',
              beforTime:'',
            }
          ]
        },

//点击下拉的时候on-select
 calculateTimeTypeFn(val){
          if(val.value== 'CREATE_TIME' || val.value== 'PAY_TIME'){ //创建时间和支付时间
                  this.ruleContentList=[
                      {
                          timeStartEnd:'',
                          withinDay:'',
                          beforTime:'',
                      },
                  ]
              }else{ //审核时间
                  //初始化规则
                  this.ruleContentList=[
                      {
                          timeStartEnd:['00:00:00', '09:59:59'],
                          withinDay:0,
                          beforTime:'17:00:00',
                      },
                      {
                          timeStartEnd:['18:00:00', '23:59:59'],
                          withinDay:1,
                          beforTime:'17:00:00',
                      },
                      {
                          timeStartEnd:['10:00:00', '17:59:59'],
                          withinDay:0,
                          beforTime:'23:59:59',
                      }
                  ]
              }
      },

//修改赋值的时候
   {
              title: this.$t('public.button.operating'),
              key: 'action',
              fixed: 'right',
              tooltip: true,
              align: 'center',
              render: (h, params) => {
                return h(
                        'div', [
                          h('Button', {
                            props: {
                              type: 'text',
                              size: 'small'
                            },
                            on: {
                              click: () => {
                                const set = this.$refs
                                set['form'].resetFields()
                                getByRuleId(params.row.ruleId).then(res => {
                                  if(res.status == 200){
                                        let timeResult=[]
                                        // this.$nextTick(()=> {
                                          if (res.data.warehouseType) {
                                            this.provinceTypeFn(res.data.warehouseType)
                                          }
                                          this.form = {
                                            warehouseType: res.data.warehouseType, //仓库类型
                                            warehouseId: res.data.warehouseVOList.map(item => item.warehouseId), //仓库
                                            customerCode: res.data.customerVOList.map(item => item.customerCode), //货主
                                            sourcePlatformCode: res.data.sourcePlatformCode ? res.data.sourcePlatformCode.split(',') : '', //订单渠道
                                            effectTime: res.data.effectTime, //生效时间
                                            expireTime: res.data.expireTime, //失效时间
                                            ruleId: res.data.ruleId, //id
                                            calculateTimeType: res.data.calculateTimeType ? res.data.calculateTimeType.split(',') : '',
                                            ruleContent:res.data.ruleContent
                                          }
                                          this.ruleContentList=[]
                                          if(res.data.calculateTimeType&&res.data.ruleId&&res.data.ruleContent.length>0){
                                            res.data.ruleContent.map(item => {
                                              this.ruleContentList.push({
                                                timeStartEnd: [item.startTime,item.endTime],
                                                beforTime: item.beforTime,
                                                withinDay: item.withinDay,
                                              })
                                            })
                                          }
                                      console.log('回显数据',this.ruleContentList);
                                      // })
                                  }
                                })
                                this.dialogStatus = 'update'
                                this.showCreate = true
                              }
                            }
                          }, this.$t('transceiver.button.modify')),
          }