表单

![](/media/202404/2024-04-30_104429_293362.png)

------------
表单

------------
代码示例如下
```html
<template>
  <div>
    <hi-toolbar :buttons="buttons" :source="deptStore" :addOne="false">
    </hi-toolbar>
    <button @click="precision()">precision()</button>
    <button @click="hide()">hide()</button>
    <button @click="show()">show()</button>
    <button @click="$refs.detailForm.validate()">validate()</button>
    <button @click="readonlychange">readonlychange</button>
    <button @click="readonlychange1">fieldrequiredchange</button>
    <div v-html="deptStore.curRecord">fff</div>
      
    <hi-form
      :dataSource="deptStore"
      ref="detailForm"
      :model="deptStore.curRecord"
      :items="items"
      :disabled="false"
      :columnsTotal="3"
      :labelPosition="labelPosition"
      :labelWidth="labelWidth"
    ></hi-form>
    
  </div>
</template>

name: "F7",
          children:[
            {
              element:"el-button",
              slot:"append",
              props:{
                icon:"el-icon-search",  
              },
              on: {
                click: (e)=>{
                  console.log(this)
                }
              }
            },
            {
              element:"el-select",
              slot:"prepend",
              name:"id",
              props:{
              },
              children:[
                {
                  element: "el-option",
                  props: { value: "选项1", label: "黄金糕" },
                },
                {
                  element: "el-option",
                  props: { value: "选项2", label: "双皮奶" },
                },
                {
                  element: "el-option",
                  props: { value: "选项3", label: "蚵仔煎" },
                },
              ]
            }
          ]
        },
    // {
    //   name:"F7",
    //   element: "el-radio-group",
    //   props: {
        
    //   },
    //   children: [
    //     {
    //       element: "el-radio",
    //       props: { value: "11", label: "11" },
    //     },
    //     {
    //       element: "el-radio",
    //       props: { value: "21", label: "21" },
    //     },
    //   ]
       
    // },
        {
          name: "F7",
          element: "hi-checkbox",
          props: {
            lookup:{
                    multiSelect:false,
                    checkValid:true,
                    active:true,
                    sourceDatas1:[
                        {
                            "FC1": "a",
                            "FC2": "aa"
                        },
                        {
                            "FC1": "b",
                            "FC2": "bb"
                        },
                        {
                            "FC1": "c",
                            "FC2": "cc"
                        }
                    ],
                    // param:new dataHelper.queryHelper.Param(
                    //     {where:new dataHelper.queryHelper.Where({
                    //         "join": "and",
                    //         "criterionData": {
                    //             items:[{
                    //                 "sign": "noteq",
                    //                 "name": "FDESC",
                    //                 "tablefilter": false,
                    //                 "dataType": "dbString",
                    //                 "value":"-1",
                    //                 "enabled": true
                    //            }
                    //         ]}
                    //     })}
                    // ),
                    "modelFile":"eap5csxm.pro/KongJianCeShi.dir/ShuJuZuJian.dir/MoXingCeShi.dir/ShuJuMoXing.moduledir/dataset.datadir/ChaZhaoDingYiShuJuJi.bizstore|YpDTzIRm.BizEntity~_extFile",
                    // label:"FC2",
                    // filtername:"FCOMMON",
                    // filternames:[{
                    //     name:"FDESC"
                    // },{
                    //     name:"FPINYIN",
                    //     operate:"like"
                    // },{
                    //     name:"FJIANPIN"
                    // }],
                    tableprops:{
                        // border:true,
                        hideRowBorder:true,
                        stripe:true,
                        "show-header":false,
                        //fit:false,
                        size:"mini",
                        "max-height":400,
                        white_space_nowrap:true
                    },
                    "returnFields": {
                        "a": "FC1", 
                        "b": "FC2",
                        "F7":"FC1"
                    },
                    "columns": [
                        {
                            "name": "FC1",
                            "label": "简拼",
                            // "width":
                        },
                        {
                            "name": "FC2",
                            "label": "编号",
                            "width":100
                        },
                       /*  
                        {
                            "name": "FUSERID",
                            "label": "FUSERID"
                        } */
                    ]
                }
          }
        },
        {
          name: "FGUID",
          label: "经纬度",
          colspan: 1,
          rowspan: 1,
          element: "hi-cascader",
          props: {
            lookup: {
                    label:"desc",
                    // multiSelect:true,
                    "modelFile": "eap5csxm.pro/KongJianCeShi.dir/ShuJuZuJian.dir/ShuKongJian.moduledir/dataset.datadir/ShuKongJianw_shukongj.bizstore|fDgHULTF.BizEntity~_extFile",
                    // param: { "fid": "-1"},
                    id: "fguid",
                    pid: "fid",
                    pathLabels: "pathLabels",//标签路径
                    // returnFields: {
                    //     "desc": "name",
                    //     "note":"note",
                    // },
                    sourceDsId:"LttuNS9K",
                    "fieldPair": {
                    //模型数据集
                        "LttuNS9K":
                        {
                            "targetEntity": "vfPrrdr",
                            "returnFields": {
                                "FGUID": "note",
                                "name": "name"
                            }
                        },
                },
                },

"show-all-levels": false,
                props: {
                    value: "note",
                    label: "name",
                    leaf: "leaf",
                    emitPath:false,
                    // multiple: true,
                    // checkStrictly: true,
                    lazy: true
                }
          }
        },
        {
          name: "field19",
          element: "el-radio-group",
          children: [
            <el-radio label="ANY">独占</el-radio>,
            <el-radio label="ALL">会签</el-radio>,
            <el-radio label="SEQUENCE">顺序</el-radio>,
          ],
        },

{
          name: "F6",
          colspan: 1,
          element: "hi-select-grid",
          label: "下拉网格",
          props: {
            selectOption: {
              // remote:true,
              loading: true,
              multiple: false,
              clearable: true,
              filterable: true,
              "allow-create": true,
              "collapse-tags": true,
            },
            lookup:{
                    active:true,
                    // sourceDatas:data,
                    // param:new dataHelper.queryHelper.Param(
                    //     {where:new dataHelper.queryHelper.Where({
                    //         "join": "and",
                    //         "criterionData": {
                    //             items:[{
                    //                 "sign": "noteq",
                    //                 "name": "FDESC",
                    //                 "tablefilter": false,
                    //                 "dataType": "dbString",
                    //                 "value":"-1",
                    //                 "enabled": true
                    //            }
                    //         ]}
                    //     })}
                    // ),
                    "modelFile":"eap5csxm.pro/KongJianCeShi.dir/ShuJuZuJian.dir/MoXingCeShi.dir/ShuJuMoXing.moduledir/dataset.datadir/ChaZhaoDingYiShuJuJi.bizstore|YpDTzIRm.BizEntity~_extFile",
                    label:"FJIANPIN",
                    // filtername:"FCOMMON",
                    // filternames:[{
                    //     name:"FDESC"
                    // },{
                    //     name:"FPINYIN",
                    //     operate:"like"
                    // },{
                    //     name:"FJIANPIN"
                    // }],
                    tableprops:{
                        // border:true,
                        hideRowBorder:true,
                        stripe:true,
                        "show-header":false,
                        //fit:false,
                        size:"mini",
                        "max-height":150,
                        white_space_nowrap:true
                    },
                    "returnFields": {
                        "b": "FC1", 
                        "a": "FC2",
                        "F7": "FC1"
                    },
                    "columns": [
                        {
                            "name": "FC1",
                            "label": "简拼",
                            // "width":
                        },
                        // {
                        //     "name": "FC2",
                        //     "label": "编号",
                        //     "width":100
                        // },
                       /*  
                        {
                            "name": "FUSERID",
                            "label": "FUSERID"
                        } */
                    ]
                }
          },
        },
        {
          name: "field13",
          colspan: 2,
          element: "hi-data-select",
          label: "查找定义",
          props: {
            disabled: false,
            required: true,
            // size: "small",
            selectOption: {
              loading: true,
              multiple: false,
              clearable: true,
              filterable: true,
              // "allow-create":true,
              "collapse-tags": false,
              "default-first-option": true,
            },
            lookup: {
              // filtername: "FCOMMON",
              /* filternames: [
                            {
                                name: "FBARCODE"
                            }, {
                                name: "FDESC"
                            }, {
                                name: "FPINYIN",
                                operate: "like"
                            }, {
                                name: "FJIANPIN"
                            }], */
              // layout:"updown",
              /* param:{
                            FPID:"-1"
                        }, */
               where:{
                  "join": "and",
                  "criterionData": {
                      items:[{
                          "sign": "noteq",
                          "name": "FPID",
                          "tablefilter": false,
                          "dataType": "dbString",
                          "value":function(dataset,model){
                            if(!model.desc){
                                 throw new Error(11111)
                            }else{
                                return model.desc
                            }
                          },
                          "enabled": true
                     }
                  ] }
              },
              storeCfg: {
                modelFile: "eap5csxm.pro/KongJianCeShi.dir/ShuJuZuJian.dir/MoXingCeShi.dir/ShuJuMoXing.moduledir/dataset.datadir/ChaZhaoDingYiShuJuJi.bizstore|YpDTzIRm.BizEntity~_extFile",
                //数据集配置  部门
                id: "dept",
                //主键
                primary: ["id"],
                //操作权限
                operations: ["oinsert", "odelete", "oquery", "omodify"],
                //字段顺序,自动填充的顺充
                sortFields: ["FID", "FNUMBER"],
                fields: {
                  FID: {
                    name: "FID", //字段ID
                    label: "FID", //字段描述
                    dbtype: "dbInt", //数据类型
                    required: true,
                    readonly: true,
                    length: 50,
                    rules: [],
                  },
                  FPID: {
                    name: "FPID", //字段ID
                    label: "FPID", //字段描述
                    dbtype: "dbString", //数据类型
                  },
                  FVALUE: {
                    name: "FJIANPIN", //字段ID
                    label: "FJIANPIN", //字段描述
                    dbtype: "dbString", //数据类型
                  },
                  FDESC: {
                    name: "FDESC", //字段ID
                    label: "FDESC", //字段描述
                    dbtype: "dbText", //数据类型
                  },
                  FUSERID: {
                    name: "FPATH", //字段ID
                    label: "FPATH", //字段描述
                    dbtype: "dbString", //数据类型
                  },
                },
              },
              tableprops: {
                // border:true,
                hideRowBorder: true,
                stripe: true,
                "show-header": true,
                //fit:false,
                size: "mini",
                "max-height": 400,
                white_space_nowrap: true,
              },
              active: true,
              /* treeOption:{
                            "modelFile": "database/base/dataset/SqlBaseEntity.xml",
                            param: { "FPID": "-1", $pageIndex: -1, $pageSize: -1 },
                            id: "FID",
                            pid: "FPID",
                            leaf: "FLEAF",//叶子节点
                            treeField:"FID",
                            joinField:"FPID",
                            // "joinType": "eq",
                            props:{
                                label: "FDESC",
                            },
                        }, */
              addRecord: true,
              // uniqueFields: ["name"], //唯一字段
              multiSelect: false, //multiple
              checkValid: true, //验证约束 allow-create
              // "returnFields": {
              //     "desc": "FDESC",
              //     "field13": "FBARCODE"
              // },
              columns: [
                {
                  name: "FC1",
                  label: "FC1",
                  width: 100,
                },
                {
                  name: "FC2",
                  label: "FC2",
                },
              ],
              queryOption: {
                columnsTotal: 4,
                fields: [
                  {
                    name: "FJIANPIN",
                    label: "FID",
                    element: "el-input",
                  },
                  {
                    name: "FDESC",
                    label: "FPID",
                    element: "el-input",
                  },
                ],
              },
            },
          },
        },
        {
          name: "field1",
          label: "活动名称mini",
          colspan: 1,
          required: true,
          props: {
            maxlength: 5,
            labelWidth: "130px",
            showWordLimit: true,
            size: "mini",
          },
        },

{
          name: "field5",
          required: true,
          props: {
            //format:"￥NNN,NNN",
            //dbType:"dbInt",
            "controls-position": "right",
          },
          label: "活动性质",
        },
        {
          name: "field7",
          colspan: 2,
          element: "el-slider",
          label: "活动形式",
          props: {
            "show-input": true,
          },
        },
        {
          name: "field6",
          element: "el-rate",
          props: {
            colors: ["red", "blue", "yellow"],
            "void-icon-class": "el-icon-set-up",
            "icon-classes": [
              "el-icon-set-up",
              "el-icon-set-up",
              "el-icon-set-up",
            ],
          },
          label: "特殊资源",
        },
        {
          name: "field8",
          element: "el-select",
          label: "多选枚举",
          props: {
            multiple: true,
            placeholder: "请选择",
          },
          children: [
            {
              element: "el-option",
              props: { value: "选项1", label: "黄金糕" },
            },
            {
              element: "el-option",
              props: { value: "选项2", label: "双皮奶" },
            },
            {
              element: "el-option",
              props: { value: "选项3", label: "蚵仔煎" },
            },
          ],
        },
        {
          name: "field9",
          element: "el-select",
          label: "单选枚举",
          props: {
            placeholder: "请选择",
          },
          children: [
            {
              element: "el-option",
              domProps: {
                innerHTML: `
                    <span style="float: left">选项1</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">黄金糕</span>
                    `,
              },
              props: { value: "选项1", label: "黄金糕" },
            },
            {
              element: "el-option",
              props: { value: "选项2", label: "双皮奶" },
            },
            {
              element: "el-option",
              props: { value: "选项3", label: "蚵仔煎" },
            },
          ],
        },

{
          //label:"button",
          element: "el-button",
          // domProps: {
          //   innerHTML: "上传"
          // },
          on: {
            click: function () {
              
            },
          },
          props: {
            labelWidth: "0px",
            round: true,
            // text:"按钮111",
            icon: "el-icon-search",
          },
          children: ["上传"],
        },
        {
          name: "field12",
          element: "hi-textarea",
          props: {
            popup:true,
            placeholder:"placeholder",
            type: "textarea",
            //   autosize:{ minRows: 2, maxRows: 4},
            rows: 5,
          },
          label: "textarea",
        },
        {
          element: "el-upload",
          props: {
            
            action: "https://jsonplaceholder.typicode.com/posts/",
            multiple: true,
            limit: 2,
            "list-type": "text",
          },
          children: [
            {
              element: "el-button",
              domProps: {
                innerHTML: "附件上传",
              },
              props: {
                labelWidth: "0px",
                icon: "el-icon-search",
              },
            },
          ],
        },
        {
          name: "imageview",
          label: "附件上传",
          colspan: 3,
          rowspan: 1,
          element: "HiImageCropper",
          props: {
            // disabled: true,
            popup:true,
            size:"mini",
            "with-credentials": true,
            accept: "image/png, image/jpeg",
            limit: 1,
            fileExtension:"jpg",
            fileSize:2,
            // "show-file-list":false,
            multiple: true,
            // "listType": "picture-card",
          },
        },
        {
          name: "imageview",
          label: "附件上传field12",
          colspan: 3,
          rowspan: 1,
          element: "hi-upload",
          props: {
            disabled: false,
            "with-credentials": true,
            // accept: "image/png, image/jpeg",
            // "show-file-list":false,
            multiple: true,
            // "listType": "picture-card",
          },
        },
         {
          name: "name",
          label: "附件上传",
          colspan: 3,
          rowspan: 1,
          element: "hi-upload",
          props: {
            // disabled: true,
            "with-credentials": true,
            accept: "image/png, image/jpeg",
            // limit: 1,
            // "show-file-list":false,
            multiple: true,
            "listType": "picture",
          },
        },
        {
          name: "field12",
          label: "附件弹出",
          colspan: 3,
          rowspan: 1,
          element: "hi-upload",
          props: {
            clearable: true,
            uploadName: "附件上传",
            disabled: true,
            popup:true,
            // action:"https://jsonplaceholder.typicode.com/posts/",
            multiple: true,
            "listType": "picture-card",
          },
        },
        {
          name: "field14",
          label: "经纬度",
          colspan: 3,
          rowspan: 1,
          element: "hi-map-select",
          props: {
            clearable: true,
            zoom: 8,
            lonField: "LON",
            latField: "LAT",
            animateFn(resolve) {
              var option = {
                zoom: 10,
                center: [119.27274892109617, 26.042715416136318],
              };
              resolve(option);
            },
          },
        },
        
        {
          name: "LAT",
          label: "经纬度",
          colspan: 3,
          rowspan: 1,
          // element: "hi-cascader-tab",
          props: {
            lookup: {
              modelFile: "database/base/dataset/SqlBaseEntity.xml",
              param: { FPID: "-1", $pageIndex: -1, $pageSize: -1 },
              id: "FID",
              pid: "FPID",
              pathLabels: "id", //标签路径
              returnFields: {
                desc: "FDESC",
                name: "FPATH",
              },
            },

"show-all-levels": true,
            props: {
              value: "FVALUE",
              label: "FDESC",
              leaf: "FLEAF",
              // emitPath:false,
              // multiple: true,
              // checkStrictly: true,
              lazy: true,
            },
          },
        },
        {
          name: "field16",
          colspan: 1,
          rowspan: 1,
          element: "el-image",
          style: {
            width: "100px",
            height: "100px",
          },
          injection: "props.src",

props: {
            format: function (val) {
              return "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
            },
            // src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          },
          label: "image",
        },
        {
          element: "div",
          name: "id",
          injection: "domProps.innerHTML",
          style: {
            color: "blue",
          },
          props: {
            type: "",
            format: function (n) {
              return n == 1 ? "男" : "女";
            },
          },
          domProps: {
            innerHTML: "",
          },
        },
        {
          element: "div",
          props:{
            labelWidth: "0px",
          },
          domProps: {
            innerHTML: `<span style="color:red">aaaa</span>`,
          },
        }, 
        {
          name: "field16",
          colspan: 1,
          // element: "hi-select-grid",
          label: "下拉网格",
          props: {
            selectOption: {
              // remote:true,
              loading: true,
              multiple: false,
              clearable: true,
              filterable: true,
              "allow-create": true,
              "collapse-tags": true,
            },
            lookup: {
              modelFile: "database/base/dataset/SqlBaseEntity.xml",
              label: "FDESC",
              param: { FPID: "-1" },
              tableprops: {
                // border:true,
                //stripe:true,
                "show-header": false,
                //fit:false,
                size: "mini",
                "max-height": 400,
              },
              returnFields: {
                field16: "FVALUE",
                desc: "FDESC",
              },
              columns: [
                // {
                //     "name": "FID",
                //     "label": "FID",
                //     "width":100
                // },
                {
                  name: "FID",
                  label: "编号",
                  width: 200,
                },
                /* {
                                "name": "FPID",
                                "label": "FPID"
                            },
                            {
                                "name": "FDESC",
                                "label": "FDESC"
                            },
                            {
                                "name": "FVALUE",
                                "label": "FVALUE"
                            } */
              ],
            },
          },
        },
      ],
    };
  },
  methods: {
    readonlychange() {
      this.readonly = !this.readonly;
      // this.deptStore.setReadonly(this.readonly);
       this.deptStore.setFieldReadonly(["F7"], true);
      // this.deptStore.emitter.emit(
      //   "fieldreadonlychange",
      //   this,
      //   ["id", "desc"],
      //   this.readonly
      // );
    },
    readonlychange1() {
      this.required = !this.required;
      this.deptStore.setFieldRequired("id",this.required)
    },
    precision() {
      this.items[0].props.precision = 0;
    },
    hide() {
      // this.$refs.detailForm.hideField(["field13", "desc"]);
      this.$refs.detailForm.hideField("field16", true);
      // this.$set(this.items,3,{
      //     hide:true,
      // })
    },
    show() {
      this.$refs.detailForm.hideField("field16", false);
      // this.$refs.detailForm.hideField(["field13", "desc"], false);
    },
  },
  created() {
    this.deptStore = this.$dsContainer.createDataSet(this.deptCfg);
    this.deptStore.on("afterchange",()=>{
    })
  },
};
</script>
```

</div>

### Attributes

| 参数             | 说明                                              | 类型      | 可选值                   | 默认值    |
|----------------|-------------------------------------------------|---------|-----------------------|--------|
| dataSource     | 数据集对象                                           | object  | —                     | —      |
| rules          | 表单验证规则                                          | object  | —                     | —      |
| model          | 表单数据对象                                          | object  | —                     | —      |
| clearable      | 字段删除按钮                                          | boolean | —                     | true   |
| colPercents    | 列比例                                             | Array   | —                     | [1, 1] |
| columnsTotal   | 总列数                                             | Number  | —                     | 2      |
| items          | 字段配置                                            | Array   | —                     | —      |
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width | string  | right/left/top        | right  |
| labelWidth     | 表单域标签的宽度                                        | string  | —                     | 100px  |
| lblWidths      | 标签宽度比例                                          | Array   | —                     | []     |
| size           | 用于控制该表单域下组件的尺寸                                  | string  | medium / small / mini |        |
| disabled       | 是否禁用该表单内的所有组件。                                  | boolean |                       | false  |

### Form Methods

| 方法名       | 说明   | 参数          |
|-----------|------|-------------|
| hideField | 隐藏字段 | fields,hide |

### Form-Item Attributes

| 参数         | 说明                                                                                                                                        | 类型     | 可选值                                | 默认值      |
|------------|-------------------------------------------------------------------------------------------------------------------------------------------|--------|------------------------------------|----------|
| element    | 字段类型                                                                                                                                      | string | el-input/el-input-number/el-button | el-input |
| props      | 字段扩展配置,例如{ type:"datetime" }                                                                                                              | Object |                                    |          |
| children   | 字段孩子配置，例如el-select》children:[{element:"el-option",props:{value:"选项1",label:"黄金糕"}},{element:"el-option",props:{value:"选项2",label:"双皮奶"}}] | Object |                                    |          |
| colspan    | 跨列数                                                                                                                                       | Number | —                                  | 1        |
| rowspan    | 跨行数                                                                                                                                       | Number | —                                  | 1        |
| label      | 标签文本                                                                                                                                      | string | —                                  |          |
| labelWidth | 表单域标签的的宽度，例如 "50px"。                                                                                                                      | string | —                                  | 100px    |
| size       | 用于控制该表单域下组件的尺寸                                                                                                                            | string | medium / small / mini              |          |

</style>

表 单

表单