3.3 示例代码 · ZT

GisForm使用示例代码 ``` Vue <template> <div style="height: 100%; overflow-y:auto"> <gis-form ref="gisForm" style="height: auto" :rule="rule" :mode="mode" :config="config" v-model="formData" autoable :portName="portName" :param="param" /> </div> </template> <script> export default { components: { }, props: { // 当前操作的模式（1、add 新增 2、edit编辑 3、show 查看） mode: { type: String, default: 'add' }, // 初始化的参数 param: String }, data () { return { // 接口名称 portName: "", // 配置 config: { span: 12, // 每个元素所占行内占比为12 }, formData: { }, rule: [ { title: "基础组件", type: "title" }, { type: "input", // 组件类型必填 field: "input", // 对应字段必填 title: "输入框", // 中文标题必填 className: "test", // 注入css类名，所有组件都支持选填 iType: "password", // iview中的type，更名为iType 选填 }, { type: "number", // 组件类型必填 field: "number", // 对应字段必填 title: "数字选择器", // 中文标题必填 }, { type: "date", // 组件类型必填 field: "date", // 对应字段必填 title: "日期选择器", // 中文标题必填 }, { type: "time", // 组件类型必填 field: "time", // 对应字段必填 title: "时间选择器", // 中文标题必填 }, { type: "select", // 组件类型必填 field: "select", // 对应字段必填 title: "选择框", // 中文标题必填 options: [ // 选项必填 { label: "是", value: "true" }, { label: "否", value: "false" } ] }, { type: "check", // 组件类型必填 field: "check", // 对应字段必填 title: "多选器", // 中文标题必填 options: [ // 选项必填 { label: "是", value: "是" }, { label: "否", value: "否" } ] }, { type: "radio", // 组件类型必填 field: "radio", // 对应字段必填 title: "单选器", // 中文标题必填 options: [ // 选项必填 { label: "是", value: "true" }, { label: "否", value: "false" } ] }, { type: "switch", // 组件类型必填 field: "switch", // 对应字段必填 title: "开关", // 中文标题必填 }, { type: "textarea", // 组件类型必填 field: "textarea", // 对应字段必填 title: "文本域", // 中文标题必填 span: 24, // 行内宽度（最大24）选填 }, { type: "col", // 组件类型必填 field: "col", // 对应字段必填 title: "空白占位格", // 中文标题必填 span: 24, // 行内宽度（最大24）选填 }, { title: "gisPlugin内置组件", type: "title" }, { type: "upload", // 组件类型必填 field: "upload", // 对应字段必填 title: "上传组件", // 中文标题必填 }, { type: "photo", // 组件类型必填 field: "photo", // 对应字段必填 title: "图片上传", // 中文标题必填 }, { type: "table", // 组件类型必填 field: "table", // 对应字段必填 title: "表格", // 中文标题必填 hiddenLabel: true, // 隐藏title 必填 label: "表格", // 表格内中文标题必填 mode: "add", // 当前表格的操作状态必填 column: [ // 行的配置必填 { title: "input", key: "input", type: "input", }, { type: "select", title: "select", key: "select", clearable: true, options: [ { label: "是", value: "true" }, { label: "否", value: "false" } ] }, { type: "date", title: "date", key: "date", } ], buttons: [ // 按钮配置选填 { title: "批量删除", icon: "md-trash", event: json => { } }, ], height: 150, // 表格默认高度，超过高度出现滚动选填 on: { "on-remove": (e) => { // 点击删除一行的回调，回调参数为行的内容 console.log(e) } } }, { type: "editor", // 组件类型必填 field: "editor", // 对应字段必填 title: "富文本编辑器", // 中文标题必填 label: "动态图层定义", }, { type: "cell", // 组件类型必填 field: "cell", // 对应字段必填 title: "高阶组件", // 中文标题必填 render: (h, data) => { return h("Button", "高阶组件测试") } }, { title: "自定义组件", type: "title", }, { title: "自定义组件", type: "custom", component: { template: "<Alert>自定义组件component方式</Alert>" } }, { title: "自定义组件", type: "custom", component: { render: (h) => { return h("Alert", "自定义组件render方式") } } } ] } }, methods: { handleSubmit (process) { this.formData.handleSubmit((data) => { this.postRequest('/basicData/add', data).then(res => { this.$Message.success(res.message) this.$emit('handleSubmit') }) }, () => { this.$Message.console.error('请完善表单') }) } } } </script> <style> .test { background-color: #dbdbdb; } </style> ``` 效果图 ![](https://img.kancloud.cn/b0/ea/b0ea428d5ae23b3403712c67eb57edf8_1850x1024.png) GisTagForm组件示例代码 ``` Vue <template> <div style="height:100%"> <gis-tag-form ref="tagForm" :tags="tags" :direction="direction" :rules="rules" v-model="data" style="height:100%"> </gis-tag-form> </div> </template> <script> export default { data () { return { // tag 的排布放行支持垂直或水平（1、vertical 垂直 2、horizontal 水平） direction: 'vertical', tags: [ { title: '模块一', icon: "logo-android" }, { title: '模块二', icon: "logo-apple" }, { title: '模块三', icon: "logo-angular" } ], rules: [ [ { type: "title", title: "business", }, { type: "input", title: "输入", field: 'input', icon: "md-add", readonly: false, span: 24, on: { 'on-click': (e) => { this.rule[1].readonly = true this.rule[2].disabled = true } } }, { type: "date", title: "date", field: 'date', validate: true }, { type: "select", title: "select", field: 'select', options: [ { value: 'London', label: 'London', icon: 'md-alarm' }, { value: 'New York', label: 'New York' }, { value: 'Ottawa', label: 'Ottawa' } ], clearable: true, validate: true }, ], [ { type: "title", title: "business2", }, { type: "radio", title: "radio", field: 'radio', options: [ { value: '1', label: 'London' }, { value: '2', label: 'New York' }, { value: '3', label: 'Ottawa' } ], validate: true }, { type: "upload", title: "upload", field: 'upload', span: 12, validate: true }, { type: "date", title: "date", field: 'date', validate: true } ], [ { type: "table", field: 'table', hiddenLabel: true, validate: true, label: 'table', showSummary: true, draggable: true, column: [ { type: 'index', width: 40, align: 'center' }, { title: 'Name', key: 'name', type: 'input' }, { title: 'Age', key: 'age', type: 'number' }, { title: 'Address', key: 'address', type: 'input' }, { title: 'Date', key: 'date', type: 'date' } ], on: { 'on-remove': (e) => { console.log(e) } } } ] ], data: [ {}, {}, {} ] } }, methods: { handleSubmit () { this.$refs.tagForm.handleSubmit(() => { this.$Message.success('ok') }, () => { this.$Message.error('error') }) } } } </script> <style> </style> ``` 效果图 ![](https://img.kancloud.cn/f0/02/f002d91e33b035cbfe67d7d993d865e1_1632x317.png)