webos-form-design（webos）

本组件需要配合vuewebos使用，需要安装layui-vue，并且设置全局。 基于layui-vue，需要配合webos使用，详情使用参考webos.asxsyd92.com。 主要实现表单组件图片上传、颜色选择、按钮、文本输入框、下拉框、单选框、多选框、开关、日期选择、时间选择、文件上传、表格、树形结构、富文本编辑器。

安装

npm install webos-form-design

安装

npm install @layui/layui-vue

需安装请求模块

npm install  webosutils

引入

import { createApp } from 'vue'
import Router from './router'
import Store from './store'
import App from './App.vue'
import Layuid from '@layui/layui-vue'
import { VueUeditorWrap } from 'vue-ueditor-wrap'
import '@layui/layui-vue/lib/index.css';
import 'font-awesome/css/font-awesome.min.css';

const app = createApp(App)

app.use(Store);
app.use(Router);
app.use(Layuid);
app.use(VueUeditorWrap);
app.mount('#app');

弹出对话框示例

<template>

  <lay-card>
    <lay-form :model="fromdata.field" ref="popfrom" :class="formstyle">
      <lay-row>
        <div v-for="(item, index) in fromdata.data" :key="index">
          <subform :data="item" :value="fromdata.field"></subform>
        </div>
      </lay-row>
    </lay-form>
  </lay-card>

</template>
<script lang="ts">
export default {
  name: "popform"
}
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { layer } from '@layui/layer-vue'
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../store/app";
import webosutils from 'webosutils';

import { subform } from 'webos-form-design/index';
interface IdesignselectProps {
  fromid: any, instanceid: any, callback: Function
}
const props = withDefaults(defineProps<IdesignselectProps>(), {
  fromid: String, instanceid: String, callback: Function
});

const appStore = useAppStore();
const formstyle = ref("");
const fromdata = ref({ name: "" }) as any;
const validateModel = ref({});
const popfrom = ref(null) as any;

// 校验
const validate = (data: any, layid: any, layers: any) => {



  popfrom.value.validate((isValidate: any, model: any, errors: any) => {

    if (!isValidate) {
      errors.forEach((item: any) => {
        layer.notify({
          title: "温馨提示",
          content: item.message
        });
        //layer.msg(item.message, { icon: 2, time: 1000 })
      });


      return;
    }
    var index = layer.msg("加载中...", { icon: 16, shadeClose: false });
    if (data != null) {
      model = { ...model, ...data };
    }

    var url = "";

    if (fromdata.value.form.url != "" && fromdata.value.form.url != undefined && fromdata.value.form.url != null) {
      url = fromdata.value.form.url;
    } else {
      url = "/v1/api/form/FormCommonTaskSave";
    }
    webosutils.http.post(url, { table: fromdata.value.form.table, data: JSON.stringify(model), istask: false, fromid: props.fromid }).then((res: any) => {
      layer.close(index);
      if (res.success) {

        layers.close(layid);
      }

      props.callback(res, "callback");


    }).catch(resp => {
      layer.close(index);
      props.callback({ success: false, msg: "网络错误", layid: layid, data: resp }, "callback");


    })

  })
}


//渲染表单
const render = () => {

  webosutils.http.post("/v1/api/form/getFormJson", { fromid: props.fromid, instanceid: props.instanceid }, "请稍等").then((res: any) => {


    if (res.success) {
      var k = JSON.parse(res.data.runhtml);

      fromdata.value = k;
      formstyle.value = k.form.style;
      if (k.field == null) {
        var obj = new Object() as any;
        fromdata.value.data.forEach((key: any) => {
          for (let keys in key.data) {
            if (keys == "name") {
              obj[key.data[keys]] = key.data['value'];
            }
          }
        });


        fromdata.value.field = obj;

      }

    } else {

      layer.msg(res.msg, { icon: 2 });
      return;
    }
  }).catch((res: any) => {



  })
}

defineExpose({
  validate
})
onMounted(() => {
  render();
})


</script>

<style lang="less" scoped></style>

传入JSON实例

"data": [
{
"icon": "fa fa-tree",
"name": "tree",
"id": "16_1716282225316",
"type": "tree",
"data": {
"id": "org",
"col": "24",
"label": "按部门",
"type": "api",
"name": "org",
"autocomplete": "off",
"placeholder": "请输入按部门",
"inputclass": "radio",
"disabled": "block",
"showtext": "false",
"value": "/api/users/getBuutonDept?code=dept",
"data": "/api/users/getdeptall?code=dept",
"input": "",
"excel": "false",
"checkstrictly": "true",
"multiple": "true"
}
},
{
"icon": "fa fa-tree",
"name": "tree",
"id": "16_1716282260930",
"type": "tree",
"data": {
"id": "aera",
"col": "24",
"label": "按区域",
"type": "api",
"name": "aera",
"autocomplete": "off",
"placeholder": "请输入按区域",
"inputclass": "radio",
"disabled": "block",
"showtext": "false",
"value": "/api/users/getButtonAera",
"data": "/api/users/getdeptall?code=0",
"input": "",
"excel": "false",
"checkstrictly": "true",
"multiple": "true"
}
},
{
"icon": "fa fa-table",
"name": "inputtalbe",
"id": "17_1715758729533",
"type": "inputtalbe",
"data": {
"id": "users",
"col": "12",
"label": "按人员",
"type": "text",
"name": "users",
"autocomplete": "off",
"placeholder": "placeholder",
"inputclass": "radio",
"disabled": "block",
"showtext": "false",
"value": {},
"data": {
"columns": [
{
"title": "姓名",
"key": "label"
},
{
"title": "电话",
"key": "mobileno"
},
{
"title": "操作",
"customSlot": "operator",
"key": "operator",
"fixed": "right"
}
],
"api": "/api/users/getselectuser",
"valueapi": "/api/users/getButtonUser",
"fieldtitle": "label",
"fieldvalue": "id",
"max": 10000
},
"input": "",
"excel": "false",
"display": "block",
"required": "false"
}
},
{
"icon": "fa fa-edit",
"name": "复选框",
"id": "3_1716296738261",
"type": "checkbox",
"data": {
"id": "button",
"col": "24",
"label": "复选框",
"type": "api",
"name": "button",
"autocomplete": "off",
"placeholder": "请选择复选框",
"inputclass": "layui-input",
"disabled": "block",
"showtext": "false",
"required": "false",
"value": "/api/users/getBuuttonValue",
"data": "/api/users/getBuutton",
"input": "",
"excel": "false",
"display": "block"
}
}
],
"form": {
"type": "table",
"table": "",
"style": "layui-form",
"url": "/api/users/setapp",
"mode": "api",
"name": "授权"
},
"rules": {}
}

表单设计