# webosformdesign

**Repository Path**: asxsyd92/webosformdesign

## Basic Information

- **Project Name**: webosformdesign
- **Description**: webos表单设计
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-06
- **Last Updated**: 2025-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webos-form-design（webos）v3.2

单独剥离vuewebos，需要安装layui-vue，并且设置全局。
框架依赖，需要自行安装，以下未打包到依赖

vue vuedraggable  moment  vue-ueditor-wrap  vue3-json-editor  webosutils  @layui/layui-vue  md-editor-v3  lodash
主要实现表单组件图片上传、颜色选择、按钮、文本输入框、下拉框、单选框、多选框、开关、日期选择、时间选择、文件上传、表格、树形结构、富文本编辑器。

## 安装

```
npm install webos-form-design
```

## 需安装请求模块

```

npm i webosutils
npm i  vuedraggable
npm i moment 
npm i  vue-ueditor-wrap  
npm i vue3-json-editor 
npm i webosutils 
npm i @layui/layui-vue 
npm i md-editor-v3 
npm i lodash
```

## 引入

```

import { createApp } from 'vue'


import Layuid from '@layui/layui-vue'
import App from './App.vue'
import '@layui/layui-vue/lib/index.css';
import 'font-awesome/css/font-awesome.min.css';

const app = createApp(App)

app.use(Layuid);

app.mount('#app');
```

## 完整例子

```
<template>
    <!-- 弹窗表单 -->
<lay-button type="primary" @click="openform()">弹窗表单</lay-button>

<!-- 普通页面表单 -->
<PageForm :fromdata="fromdata" :fromvalue="{}"
     @callback="(e) => { 
        console.log(e);
    }" @errorcallback="() => {
        console.log('errorcallback');
    }
    ">

</PageForm> 
<!-- 表单设计器 -->
<FormDesign @preview="(e) => {

       utls.openform(LayerForm, e);
}
"></FormDesign>
</template>
<script setup lang="ts">
import { ref,h } from "vue";
import { layer } from "@layui/layer-vue";
import   'webos-form-design/lib/index/css';
import { LayerForm,PageForm,FormDesign } from "webos-form-design/lib/webos-form-design.es";
import {utls} from './utls/index';
const openform = () => {
    console.log(LayerForm);
    debugger;
    utls.openform(LayerForm, fromdata);

}
var fromdata = {
    form: {
        mode: "",
        name: "",
        style: "",
        table: "",
        type: "",
        url: "",
    }, data: [{
        icon: "fa fa-edit",
        name: "title",
        id: "1",
        type: "input",
        data: {
            id: "title",
            col: "12",
            label: "标题",
            type: "text",
            name: "title",
            autocomplete: "off",
            placeholder: "请输入标题",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            required: "true",
            value: "",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    },
    {
        icon: "fa fa-edit",
        name: "title2",
        id: "1",
        type: "input",
        data: {
            id: "title2",
            col: "12",
            label: "标题2",
            type: "text",
            name: "title2",
            autocomplete: "off",
            placeholder: "placeholder",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            value: "",
            required: "true",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    }
    ,
    {
        icon: "fa fa-edit",
        name: "title3",
        id: "1",
        type: "input",
        data: {
            id: "title3",
            col: "24",
            label: "标题2",
            type: "password",
            name: "title3",
            autocomplete: "off",
            placeholder: "placeholder",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            required: "true",
            value: "",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    }
],
 rules: {},
 field:{}
};



</script>
```

# 完整的表单Json结构

```{
 {
    form: {
        mode: "",
        name: "",
        style: "",
        table: "",
        type: "",
        url: "",
    }, data: [{
        icon: "fa fa-edit",
        name: "title",
        id: "1",
        type: "input",
        data: {
            id: "title",
            col: "12",
            label: "标题",
            type: "text",
            name: "title",
            autocomplete: "off",
            placeholder: "请输入标题",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            required: "true",
            value: "",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    },
    {
        icon: "fa fa-edit",
        name: "title2",
        id: "1",
        type: "input",
        data: {
            id: "title2",
            col: "12",
            label: "标题2",
            type: "text",
            name: "title2",
            autocomplete: "off",
            placeholder: "placeholder",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            value: "",
            required: "true",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    }
    ,
    {
        icon: "fa fa-edit",
        name: "title3",
        id: "1",
        type: "input",
        data: {
            id: "title3",
            col: "24",
            label: "标题2",
            type: "password",
            name: "title3",
            autocomplete: "off",
            placeholder: "placeholder",
            inputclass: "block",
            disabled: "block",
            showtext: "false",
            required: "true",
            value: "",
            data: { api: "", para: {} },
            input: "",
            excel: "false",
        }
    }
],
 rules: {},
 field:{}
};
```

# 实例请查看example 

npm  run dev