2021-06-21

<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-row v-for="(child, index) in selects" :key="index">
      <a-col :span="6">
        <a-form-item label="子机构">
          <a-select
            v-decorator="[
              `organ${index}`,
              {
                rules: [
                  { required: true, message: '请输入子机构' },
                ],
              },
            ]"
            placeholder="请输入子机构"
            
          >
            <a-select-option
              v-for="item in children.organ"
              :key="item.value"
              :value="item.value"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="联系人">
          <a-select
            v-decorator="[
              `linker${index}`,
              {
                rules: [
                  { required: true, message: '请输入联系人' },
                ],
              },
            ]"
            placeholder="请输入联系人"
            
          >
            <a-select-option
              v-for="item in children.linker"
              :key="item.value"
              :value="item.value"
            >
              {{ item.value }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="邮箱">
          <a-select
            v-decorator="[
              `email${index}`,
              {
                rules: [
                  { required: true, message: '请输入邮箱' },
                ],
              },
            ]"
            placeholder="请输入邮箱"
            
          >
            <a-select-option
              v-for="item in children.email"
              :key="item.value"
              :value="item.value"
            >
              {{ item.value }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <!-- <a-button type="primary" @click="add">
          增加
        </a-button> -->
        <div class="add_btn" @click="add" v-if="slen-1==index">
          <img src="@/assets/img/add.png" alt="" />
        </div>
        <div class="del_btn" @click="del(index)" v-if="slen>1?index >= 0:false">
          <img src="@/assets/img/del.png" alt="" />
        </div>
      </a-col>
    </a-row>

    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),

      selects: [1],
      slen: 1,
      i: 2,


      children: {
        organ: [
          {
            name: "机构1",
            value: "机构1",
          },
          {
            name: "机构2",
            value: "机构2",
          },
          {
            name: "机构3",
            value: "机构3",
          },
        ],
        linker: [
          {
            name: "联系人1",
            value: "联系人1",
          },
          {
            name: "联系人2",
            value: "联系人2",
          },
          {
            name: "联系人3",
            value: "联系人3",
          },
        ],
        email: [
          {
            name: "邮箱1",
            value: "邮箱1",
          },
          {
            name: "邮箱2",
            value: "邮箱2",
          },
          {
            name: "邮箱3",
            value: "邮箱3",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log("err", err);
        if (!err) {
          console.log("Received values of form: ", values);
        }

        let selects = this.selects;
        let len = selects.length;

        for (let i = 0; i < len; i++) {
          // values.include(organ)
          // console.log("values.include(organ)",values.include(organ));
          let organamei = "organ" + i;
          let linkeri = "linker" + i;
          let emaili = "email" + i;
          for (let j = i +1; j < len; j++) {
            let organamej = "organ" + j;
            let linkerj = "linker" + j;
            let emailj = "email" + j;
            // if (i != j && j > i) {
              if (
                values[organamei] == values[organamej] &&
                values[linkeri] == values[linkerj] &&
                values[emaili] == values[emailj]
              ) {
                const arr = [
                  {
                    message: "重新选择",
                    field: "organ1",
                  },
                ];
                this.form.setFields({
                  [`${organamej}`]: {
                    value: values[organamej],
                    errors: arr,
                  },
                  [`${linkerj}`]: {
                    value: values[linkerj],
                    errors: arr,
                  },
                  [`${emailj}`]: {
                    value: values[emailj],
                    errors: arr,
                  },
                });
              }
            // }
          }
          console.log("values.organ+i", values["organ0"]);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },

    del(myindex) {
      this.selects = this.selects.filter(
        (currentValue, index) => index != myindex
      );
      console.log("this.selects", this.selects);
    
      this.slen = this.selects.length;
      if(this.slen==1) {
        this.i = 2
      }
    },

    add() {
      console.log("增加了");
      
      this.selects.push(this.i)
      //  = [...this.selects, this.i];
      console.log("this.selects", this.selects);
      this.i = this.i + 1;
      this.slen = this.selects.length;
      
      // this.form = this.$form.createForm(this, { name: 'coordinated' })
    },
  },
};
</script>
<style lang="less" scoped>
.add_btn {
  width: 20px;
  height: 20px;
  margin: 10px;
  display: inline-block;
  img {
    width: 100%;
    height: 100%;
  }
}
.del_btn {
  width: 20px;
  height: 20px;
  margin: 10px;
  display: inline-block;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

菜鸟小徒弟组长提出的需求，从需求就可以看出这个组长也是菜鸟

需求就和这demo样式差不多了，作为一个资深工程师首行是不建议放删除按钮的，你把首行删了那还添加个啥？其中运用的知识点较为密集，可以作为参考案例学习！主要就是校验重复并报警告，还有就是添加选择框的功能，小菜鸟可以学习一下。其中运用了多个生僻运算符，和一个简单的冒泡算法！