实现iview专业版中的高级表单

看了view专业版里面的表单，发现要money才能查看代码，自己写吧。。。。。

专业版效果

实现效果

业务中需要裴姐调个样式

上代码

<Row>
      <Table :columns="TableColumns" :data="groupData" @on-selection-change="handleSelect"></Table>
</Row>
<div v-show="enterpriseType !== '10'">
    <Button class="btn-add" type="dashed" style="margin-right:8px" @click="groupAdd">新增     </Button>
</div>

<Modal v-model="ModalAddEnterprise" title="新增企业" :width="1120">
      <div>
        <EnterpriseAdd
          ref="enterpriseAdd"
          :companyType="enterpriseType"
          @SubmitSuccess="handleSubmitSuccess('addEnterprise')"
          @SubmitCancel="handleSubmitCancel('addEnterprise')"
        ></EnterpriseAdd>
      </div>
      <div slot="footer"></div>
    </Modal>

    <Modal v-model="ModalEditEnterprise" title="编辑企业" :width="1120">
      <div>
        <EnterpriseAdd
          ref="enterpriseEdit"
          :companyType="enterpriseType"
          @SubmitSuccess="handleSubmitSuccess('editEnterprise')"
          @SubmitCancel="handleSubmitCancel('editEnterprise')"
        ></EnterpriseAdd>
      </div>
      <div slot="footer"></div>
    </Modal>

    <Modal v-model="ModalAddPeople" title="新增人员" :width="1120">
      <div>
        <PeopleAdd
          ref="peopleAdd"
          :comId="comId"
          @SubmitSuccess="handleSubmitSuccess('addPeople')"
          @SubmitCancel="handleSubmitCancel('addPeople')"
        ></PeopleAdd>
      </div>
      <div slot="footer"></div>
    </Modal>

    <Modal v-model="ModalEditPeople" title="编辑人员" :width="1120">
      <div>
        <PeopleAdd
          ref="peopleEdit"
          :comId="comId"
          @SubmitSuccess="handleSubmitSuccess('editPeople')"
          @SubmitCancel="handleSubmitCancel('editPeople')"
        ></PeopleAdd>
      </div>
      <div slot="footer"></div>
    </Modal>

import EnterpriseAdd from "../../enterprise-management/enterprise-add";
import PeopleAdd from "../../people-management/people-add";
export default {
  name: "select-enterprise",
  data() {
    return {
      TableColumns: [
        {
          title: "企业名称",
          key: "enterpriseId",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Select",
                {
                  style: {
                  },
                  props: {
                    value: this.groupData[params.index].enterpriseId,
                    filterable: true,
                    clearable: true,
                    allowCreate: true
                  },
                  on: {
                    "on-change": event => {
                      this.groupData[params.index].enterpriseId = event;
                      params.row.enterpriseId = event;
                      this.ShowCompanyInfo(params.row, params.index);
                    },
                    "on-create": event => {
                      this.addEnterprise(event);
                    }
                  }
                },
                this.enterpriseList.map((item, itemIndex) => {
                  return h(
                    "Option",
                    {
                      props: {
                        value: item.id,
                        key: item.id
                      }
                    },
                    item.name
                  );
                })
              )
            ]);
          }
        },
        {
          title: "企业法人",
          key: "legalPerson",
          align: "center"
        },
        {
          title: "法人电话",
          key: "tel",
          align: "center"
        },
        {
          title: "社会信用代码",
          key: "creditCode",
          align: "center"
        },
        {
          title: "项目负责人",
          key: "projectLeaderId",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Select",
                {
                  style: {
                    width: "100%"
                  },
                  props: {
                    value: this.groupData[params.index].projectLeaderId,
                    filterable: true,
                    clearable: true,
                    allowCreate: true
                  },
                  on: {
                    "on-open-change": event => {
                      this.openPeople(params.row, params.index);
                    },
                    "on-change": event => {
                      params.row.projectLeaderId = event;
                      this.groupData[params.index].projectLeaderId = event;
                      this.ShowPeopleInfo(params.row, params.index);
                    },
                    "on-create": event => {
                      this.enterAddPeople(event);
                    }
                  }
                },
                params.row.projectLeaderList.map((item, itemIndex) => {
                  return h(
                    "Option",
                    {
                      props: {
                        value: item.id,
                        key: item.id
                      }
                    },
                    item.name
                  );
                })
              )
            ]);
          }
        },
        {
          title: "职位",
          key: "post",
          align: "center"
        },
        {
          title: "联系方式",
          key: "peoTel",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          wdith: 250,
          render: (h, params) => {
            return h("div", [
              params.row.enterpriseId
                ? h(
                    "Tooltip",
                    {
                      props: {
                        placement: "top",
                        transfer: true,
                        content: "编辑企业"
                      },
                      on: {
                        click: () => {}
                      }
                    },
                    [
                      h("Icon", {
                        props: {
                          type: "ios-create"
                        },
                        style: {
                          fontSize: "20px",
                          color: "#c6ccd3",
                          marginRight: "10px",
                          marginTop: "3px"
                        },
                        on: {
                          click: () => {
                            this.editEnterprise(
                              params.row.enterpriseId,
                              params.index
                            );
                          }
                        }
                      })
                    ]
                  )
                : "",
              params.row.projectLeaderId
                ? h(
                    "Tooltip",
                    {
                      props: {
                        placement: "top",
                        transfer: true,
                        content: "编辑人员"
                      },
                      on: {
                        click: () => {}
                      }
                    },
                    [
                      h("Icon", {
                        props: {
                          type: "ios-create-outline"
                        },
                        style: {
                          fontSize: "20px",
                          color: "#c6ccd3",
                          marginRight: "10px",
                          marginTop: "3px"
                        },
                        on: {
                          click: () => {
                            this.editPeople(params.row, params.index);
                          }
                        }
                      })
                    ]
                  )
                : "",
              this.groupData.length > 1
                ? h(
                    "Tooltip",
                    {
                      props: {
                        placement: "top",
                        transfer: true,
                        content: "删除"
                      },
                      on: {
                        click: () => {}
                      }
                    },
                    [
                      h("Icon", {
                        props: {
                          type: "md-trash"
                        },
                        style: {
                          fontSize: "20px",
                          color: "#c6ccd3",
                          marginRight: "10px",
                          marginTop: "3px"
                        },
                        on: {
                          click: () => {
                            this.groupDel(params.row, params.index);
                          }
                        }
                      })
                    ]
                  )
                : ""
            ]);
          }
        }
      ],
      TableData: [],
      TotalCount: 0,
      PageIndex: 1,
      groupData: [
        {
          projectLeaderList: [],
          enterpriseId: "", // 企业Id
          legalPerson: "",
          creditCode: "",
          tel: "",
          projectLeaderId: "", // 项目负责人Id
          post: "",
          peoTel: "",
          editEnterpriseFlag: false, // 是否显示修改企业按钮
          editPeopleFlag: false // 是否显示修改人员按钮
        }
      ],
      enterpriseList: [], // 企业待选数据
      projectLeaderList: [], // 项目负责人待选数据
      /**
       * 控制新增企业模态框
       */
      ModalAddEnterprise: false,

      /**
       * 控制编辑企业模态框
       */
      ModalEditEnterprise: false,

      /**
       * 控制新增人员模态框
       */
      ModalAddPeople: false,

      /**
       * 控制编辑人员模态框
       */
      ModalEditPeople: false,

      /**
       * 新增人员传给子组件的企业Id
       */
      comId: "",
      peopleLeaderIndex: 0,

      /**
       * 为了人员回车新增把名字带到子组件，需要定义变量存储已选的企业信息
       */
      groupItem: {},
      groupIndex: 0
    };
  },
  props: {
    enterpriseType: {
      type: String,
      required: true
    }
  },
  methods: {
    handleSelect() {},
    handlePageChange() {},
    getGroupData(data) {
      if (data.length) {
        this.groupData = data;
      } else {
        this.groupData = [
          {
            projectLeaderList: [],
            enterpriseId: "", // 企业Id
            legalPerson: "",
            creditCode: "",
            tel: "",
            projectLeaderId: "", // 项目负责人Id
            post: "",
            peoTel: ""
          }
        ];
      }
      this.getEnterpriseList();
      this.groupData.forEach((item, index) => {
        this.getProjectLeaderList(item.enterpriseId, index);
        this.enterpriseList.forEach((ele, eleIndex) => {
          if (item.enterpriseId == ele.id) {
            this.$set(this.enterpriseList[eleIndex], "disabled", true);
          } else {
            this.$set(this.enterpriseList[eleIndex], "disabled", false);
          }
        });
      });
    },
    getEnterpriseList() {
      let params = {
        parameter: "companyType",
        operators: "1",
        queryValue: `${this.enterpriseType}`,
        queryType: "string",
        PageSize: -1
      };
      this.enterpriseList = [];
      this.$api.Enterprise.Page(params).then(res => {
        res.data.result.items.forEach((item, index) => {
          item.disabled = false;
          this.enterpriseList.push(item);
        });
        this.groupData.forEach((item, index) => {
          if (item.enterpriseId) {
            this.enterpriseList.forEach((ele, eleIndex) => {
              if (item.enterpriseId == ele.id) {
                this.groupData[index].legalPerson = ele.legalPerson;
                this.groupData[index].creditCode = ele.creditCode;
                this.groupData[index].tel = ele.tel;
                this.$set(this.enterpriseList[eleIndex], "disabled", true);
              }
            });
          }
        });
      });
    },

    ShowCompanyInfo(item, index) {
      if (item.enterpriseId == undefined) {
        this.groupData[index].legalPerson = "";
        this.groupData[index].creditCode = "";
        this.groupData[index].tel = "";
        this.groupData[index].projectLeaderId = "";
        this.groupData[index].post = "";
        this.groupData[index].peoTel = "";
        this.groupData[index].editEnterpriseFlag = false;
        this.groupData[index].editPeopleFlag = false;
      } else {
        this.enterpriseList.forEach((params, paramsIndex) => {
          if (params.id == item.enterpriseId) {
            this.groupData[index].legalPerson = params.legalPerson;
            this.groupData[index].creditCode = params.creditCode;
            this.groupData[index].tel = params.tel;
            this.groupData[index].editEnterpriseFlag = true;
          }
        });
      }
      // 所有企业先置为可选
      this.enterpriseList.forEach((enterpriseItem, enterpriseIndex) => {
        this.$set(this.enterpriseList[enterpriseIndex], "disabled", false);
      });
      // 去掉已经被选中的企业
      this.groupData.forEach((ele, eleIndex) => {
        if (ele.enterpriseId) {
          let selectIndex = this.enterpriseList.findIndex(
            obj => obj.id == ele.enterpriseId
          );
          this.$set(this.enterpriseList[selectIndex], "disabled", true);
        }
      });
      this.getProjectLeaderList(item.enterpriseId, index);
      this.$set(this, "groupData", this.groupData);
    },

    getProjectLeaderList(enterpriseId, index) {
      this.groupData[index].post = "";
      this.groupData[index].peoTel = "";
      let params = {
        parameter: "enterprise",
        operators: "1",
        queryValue: `${enterpriseId}`,
        queryType: "string",
        globalSearchValue: "",
        globalSearchType: 0,
        pageSize: -1,
        orderBy: "",
        orderByType: ""
      };
      this.$api.People.Page(params).then(res => {
        this.groupData[index].projectLeaderList = res.data.result.items;
        if (this.groupData[index].projectLeaderId) {
          this.groupData[index].projectLeaderList.forEach(ele => {
            if (this.groupData[index].projectLeaderId == ele.id) {
              this.groupData[index].post = ele.post;
              this.groupData[index].peoTel = ele.tel;
            }
          });
        }
      });
    },
    openPeople(item, index) {
      if (!item.enterpriseId) {
        this.$Message.warning("请先选择企业!");
        return;
      }
      this.groupItem = item;
      this.groupIndex = index;
    },
    ShowPeopleInfo(item, index) {
      if (item.projectLeaderId) {
        this.groupData[index].projectLeaderList.forEach(ele => {
          if (item.id == ele.projectLeaderId) {
            this.groupData[index].post = ele.post;
            this.groupData[index].peoTel = ele.tel;
            this.groupData[index].editPeopleFlag = true;
          }
        });
      } else {
        this.groupData[index].post = "";
        this.groupData[index].peoTel = "";
        this.groupData[index].editPeopleFlag = false;
      }
    },

    groupAdd() {
      let group = {};
      group.projectLeaderList = [];
      group.enterpriseId = "";
      group.projectLeaderId = "";
      group.legalPerson = "";
      group.creditCode = "";
      group.tel = "";
      group.post = "";
      group.peoTel = "";
      group.editEnterpriseFlag = false;
      group.editPeopleFlag = false;
      this.groupData.push(group);
    },
    groupDel(item, index) {
      if (this.groupData.length == 1) {
        this.$Message.warning("至少要有一条企业信息!");
        return;
      }
      this.groupData.splice(index, 1);
    },
    submitData() {
      // let flag = true;
      // this.groupData.forEach(item => {
      //   if (!item.enterpriseId || !item.projectLeaderId) {
      //               flag = false;
      //     this.$Message.warning("企业名称和项目负责人必填，请核对信息!");
      //     return;
      //   }
      // });
      // if (flag) {
      this.$emit("submit-handle", this.groupData, this.enterpriseType);
      // }
    },
    resetData() {
      this.groupData = [
        {
          projectLeaderList: [],
          enterpriseId: "", // 企业Id
          legalPerson: "",
          creditCode: "",
          tel: "",
          projectLeaderId: "", // 项目负责人Id
          post: "",
          peoTel: "",
          editEnterpriseFlag: false,
          editPeopleFlag: false
        }
      ];
      this.enterpriseList = [];
      this.projectLeaderList = [];
    },

    /**
     * 新增企业
     */
    addEnterprise(query) {
      this.$refs.enterpriseAdd.getDetail("", false);
      this.$refs.enterpriseAdd.getEnterpriseName(query);
      this.ModalAddEnterprise = true;
    },

    /**
     * 编辑选中的企业
     */
    editEnterprise(enterpriseId, index) {
      this.$refs.enterpriseEdit.getDetail(enterpriseId, false);
      this.ModalEditEnterprise = true;
    },

    /**
     * 回车调用新增人员方法
     */
    enterAddPeople(query) {
      this.addPeople(this.groupItem, this.groupIndex, query);
    },

    /**
     * 新增人员
     */
    addPeople(item, index, query) {
      if (!item.enterpriseId) {
        this.$Message.warning("请先选择企业!");
        return;
      }
      this.comId = item.enterpriseId;
      this.peopleLeaderIndex = index;
      this.$refs.peopleAdd.getPeopleName(query);
      this.ModalAddPeople = true;
    },

    /**
     * 编辑选中的人员
     */
    editPeople(item, index) {
      this.comId = item.enterpriseId;
      this.peopleLeaderIndex = index;
      this.$refs.peopleEdit.getDetail(
        item.enterpriseId,
        item.projectLeaderId,
        false
      );
      this.ModalEditPeople = true;
    },

    handleSubmitSuccess(type) {
      switch (type) {
        case "addEnterprise":
          this.ModalAddEnterprise = false;
          this.getEnterpriseList();
          break;
        case "editEnterprise":
          this.ModalEditEnterprise = false;
          this.getEnterpriseList();
          break;
        case "addPeople":
          this.ModalAddPeople = false;
          this.getProjectLeaderList(this.comId, this.peopleLeaderIndex);
          break;
        case "editPeople":
          this.ModalEditPeople = false;
          this.getProjectLeaderList(this.comId, this.peopleLeaderIndex);
          break;
        default:
          this.ModalAddEnterprise = false;
          this.ModalAddPeople = false;
          this.ModalEditEnterprise = false;
          this.ModalEditPeople = false;
      }
    },
    handleSubmitCancel(type) {
      switch (type) {
        case "addEnterprise":
          this.ModalAddEnterprise = false;
          break;
        case "editEnterprise":
          this.ModalEditEnterprise = false;
          break;
        case "addPeople":
          this.ModalAddPeople = false;
          break;
        case "editPeople":
          this.ModalEditPeople = false;
        default:
          this.ModalAddEnterprise = false;
          this.ModalEditEnterprise = false;
          this.ModalAddPeople = false;
          this.ModalEditPeople = false;
      }
    }
  },
  created() {
  },
  mounted() {}
};