表单多选后，统一操作

表单多选后，统一选下拉框的值

form表单和checkbox结合，全选和多选之后，统一处理供应商和类型的下拉选择

       <div class="titleLine">
          <span class="span1" ><Checkbox v-model="allSingle" @on-change='handleSelectAll(allSingle)' style="padding-right: 10px;"></Checkbox></span>
          <span class="span2">供应商</span>
          <span class="span2">类型</span>
          <span class="span2">ID</span>
        </div>
        <Form ref="formDynamic" :model="formDynamic" :label-width="80">
            <FormItem
                    v-for="(item, index) in formDynamic.items"
                    v-if="item.status"
                    :key="index"
                    :prop="'items.' + index + '.value'"
                    >
                <Row>
                    <Checkbox v-model="item.single" style="padding-right: 10px;"></Checkbox>
                    <Select v-model="item.provider" @on-change='providerSelect(item.provider)'>
                        <Option v-for="item in adArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select v-model="item.type" @on-change='typeSelect(item.type)'>
                        <Option v-for="item in idArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Col span="6">
                        <Input type="text" v-model="item.unitid" placeholder="请输入id"/>
                    </Col>
                    <Col span="4" offset="1">
                    <Icon v-if='index>0' @click="handleRemove(index)" type="md-close-circle" />
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="8">
                        <Button type="dashed" long @click="handleAdd" icon="md-add"></Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem style="text-align: center;">
                <Button @click="handleReset('formDynamic')" style="margin-left: 8px;margin-right:30px;">取消</Button>
                <Button type="primary" @click="handleSubmit('formDynamic')">提交</Button>
            </FormItem>
        </Form>

export default {
  data () {
    return {
      modal: true,
      index: 1,
      price: '100',
      allSingle:false, //全选控制
      idArr: [{'label':'1','value':'类型1','label':'2','value':'类型2'}],
      adArr: [{'label':'1','value':'供应商1','label':'2','value':'供应商2'}],
      formDynamic: {
        items: [
          {
            single: false,
            unitid: '',
            provider: '',
            adType: '',
            index: 1,
            status: 1
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          //提交接口
        }   
    },
    handleReset (name) {
     this.$refs[name].resetFields() 
    },
    handleAdd () {
      this.index++
      this.formDynamic.items.push({
        value: '',
        index: this.index,
        status: 1
      })
    },
    handleSelectAll (status) { //全选操作
      let obj = this.$refs.formDynamic.model.items;
      _.mapKeys(obj, function(value, key) {
        return value.single = status;
      });
    },
    providerSelect(index,provider){ //多选---provider
      if(this.formDynamic.items[index].single) {
        const newList = this.formDynamic.items.map(item => {
          return { ...item, provider: item.single ? provider : item.provider }
        })
        this.formDynamic.items = newList;
      }
    },
    typeSelect(index,type){ //多选---type
      if(this.formDynamic.items[index].single) {
        const newList = this.formDynamic.items.map(item => {
          return { ...item, type: item.single ? type : item.type }
        })
        this.formDynamic.items = newList;
      }
      
    }
  },
  mounted () {
  }
}