# my-form
### **my-form 调用方式**
> 此组件基于form表单二次封装，适用于form表单提交适用
``` Vue
<template>
  <my-form
      :rules="rules"
      :disabled="disabled"
      :model="model"
      :list="list"
      :saveBtn="saveBtn"
      :publishBtn="publishBtn"
      :postBtn="postBtn"
      @handleSubmit="handleSubmit"
      @cancel="toBiddingList"
      @handlePost="handlePost"
    ></my-form>
</template>
<script>
    data() {
        return {
            rules:{}, //规则
            model: { //form表单参数，参数解构
              type: "SP",
              message: "同意。",
              bidding: {
                clinchAmount: "",
                isLast: false,
                approveStatus: "DRAFT",
                commentDtos: [],
                importance: null,
                biddingAttachments: []
              }
            },
            list: [
              {
                title: "基本信息",
                row: [
                  {
                    col: [
                      {
                        step: 2, //参数层级
                        showOrHide: true, //用于是否展示
                        disabled: true, // 是否可以编辑
                        label: "投标编号", //label名称
                        prop: "bidding.bidNo",　//绑定prop
                        attr: "bidding", //v-model的第一层级对象
                        attr2: "bidNo", //v-model的第二层级对象
                        type: "text" //类型，text date select... 与elementui设置一致
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "投标日期",
                        prop: "bidding.bidDate",
                        attr: "bidding",
                        attr2: "bidDate",
                        type: "date"
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "标的名称",
                        prop: "bidding.subjectName",
                        attr: "bidding",
                        attr2: "subjectName",
                        type: "text"
                      }
                    ]
                  },
                  {
                    col: [
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "项目类型(一级)",
                        class: "over-more",
                        valueAttr: "id",
                        labAttr: "name",
                        cascaderType: 1,
                        type: "cascader",
                        prop: "bidding.projectLv1",
                        // labelWidth: "112px",
                        attr: "bidding",
                        attr2: "projectLv1",
                        change: () => {
                          this.biddingParams.bidding.projectLv2 = "";
                        },
                        options: []
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "项目类型(二级)",
                        class: "over-more",
                        valueAttr: "id",
                        labAttr: "name",
                        type: "cascader",
                        cascaderType: 1,
                        prop: "bidding.projectLv2",
                        // labelWidth: "100px",
                        attr: "bidding",
                        options: [],
                        attr2: "projectLv2"
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "明细分类",
                        type: "text",
                        prop: "bidding.projectLv3",
                        // labelWidth: "100px",
                        attr: "bidding",
                        attr2: "projectLv3"
                      }
                    ]
                  },
                  {
                    col: [
                      {
                        step: 2,
                        type: "cascaderActive",
                        cascaderType: 1,
                        filterable: true,
                        showOrHide: true,
                        disabled: false,
                        remote: true,
                        labelAttr: "userName",
                        valueAttr: "userName",
                        label: "业务经理",
                        prop: "bidding.businessManager",
                        attr: "bidding",
                        attr2: "businessManager",
                        options: [],
                        remoteMethod: this.remoteBusinessManager,
                        change: () => {
                          return;
                        }
                      },
                      {
                        step: 2,
                        type: "cascaderActive",
                        cascaderType: 1,
                        filterable: true,
                        showOrHide: true,
                        disabled: false,
                        remote: true,
                        labelAttr: "userName",
                        valueAttr: "id",
                        label: "售前支持",
                        prop: "bidding.projectManager",
                        attr: "bidding",
                        attr2: "projectManager",
                        options: [],
                        remoteMethod: this.remotePreSaleSupport,
                        change: v => {
                          let name = "";
                          this.tenderList[0].row[2].col[1].options.forEach(item => {
                            if (item.id === v) {
                              name = item.userName;
                            }
                          });
                          this.biddingParams.bidding.preSaleSupport = name;
                          return;
                        }
                      },
                      {
                        step: 2,
                        type: "cascaderActive",
                        cascaderType: 1,
                        filterable: true,
                        showOrHide: true,
                        disabled: false,
                        remote: true,
                        labelAttr: "groupName",
                        valueAttr: "groupName",
                        label: "所属部门",
                        prop: "bidding.departmentName",
                        attr: "bidding",
                        attr2: "departmentName",
                        options: [],
                        remoteMethod: this.remoteDept,
                        change: () => {
                          return;
                        }
                      }
                    ]
                  },
                  {
                    col: [
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "项目开始时间",
                        prop: "bidding.projectStartDate",
                        attr: "bidding",
                        attr2: "projectStartDate",
                        type: "date"
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "项目结束时间",
                        prop: "bidding.projectEndDate",
                        attr: "bidding",
                        attr2: "projectEndDate",
                        type: "date"
                      },
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "投资额",
                        prop: "bidding.investment",
                        attr: "bidding",
                        attr2: "investment",
                        suffixIcon: "元",
                        type: "number"
                      }
                    ]
                  },
                  {
                    col: [
                      {
                        step: 2,
                        showOrHide: true,
                        disabled: false,
                        label: "重要程度",
                        prop: "bidding.importance",
                        attr: "bidding",
                        attr2: "importance",
                        type: "select",
                        options: [
                          {
                            value: "General",
                            label: "一般"
                          },
                          {
                            value: "Important",
                            label: "重要"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
            ]
        }
    },
    computed: {
      disabled() {
        return true; //返回布尔类型用于设置全部form表单是否可以编辑
      },
      saveBtn() {
        return true; //返回布尔类型 用于判断是否展示保存按钮
      },
      publishBtn() {
        return true; //返回布尔类型 用于判断发布按钮是否展现
      },
      postBtn() {
        return true; //返回布尔类型 用于判断提交按钮是否展现
      }
    },
    methods: {
        handleSubmit() {
          // ... your code
        },
        cancel() {
          // ...your code
        },
        handlePost() {
          // ... your code
        },
        handlePublish() {
          // ... your code
        }
    }

</script>
```
### **Attributes**
属性|值|说明|
:-|:-|:-|
disabled|false|返回布尔类型用于设置全部form表单是否可以编辑
saveBtn|false|返回布尔类型 用于判断是否展示保存按钮
publishBtn|false|返回布尔类型 用于判断发布按钮是否展现
postBtn|false|返回布尔类型 用于判断提交按钮是否展现
      

> list 配置参数

公共属性
属性|值|说明
:-|:-|:-|
type|text/textarea/select/date/<br />cascaderActive/rate/number/radioGroup|输入框类型
step|1/2/3/model|对象层级(number)
showOrHide|true|显示或者隐藏(布尔值)
disabled|false|禁用(布尔值)
label|-|输入框关联的label文字(string)
prop|-|表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的(string)
attr|-|model绑定对象第一级属性
attr2|-|model绑定对象第二级属性
attr3|-|model绑定对象第三级属性
change|-|传入方法(function)
class|-|css中的类名

当type为text或者rate的时候可以设置属性suffixIcon: "元"，输入框尾部图标。

额外字段
当type="cascaderActive",属性cascaderType为必填项，值为对象层级1/2/3
当type="cascaderActive"或"select",额外属性为：

属性|值|说明
:-|:-|:-|
labelAttr|-|下拉框展示值,
valueAttr|-|下拉框绑定v-model属性,
options|-|下拉框数组(Array)