# u-processes

**Repository Path**: itcheung_admin/u-processes

## Basic Information

- **Project Name**: u-processes
- **Description**: 今年表单写太多了，写个配置的表单渲染器吧，支持传入自定义组件
再加个拖拽上来就变成可视化编程了
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-12-28
- **Last Updated**: 2024-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## 上手

现在从 npm 安装并引入 u-processes

` npm install u-processes -S `

修改 src/main.js

```
import Vue from 'vue';
import UProcesses from 'u-processes'
Vue.use(UProcesses)     
```



## 表单 u-form 

| 参数   | 说明             | 类型\|默认值                 |      |      |      |
| ------ | ---------------- | ---------------------------- | ---- | ---- | ---- |
| list   | 表单渲染格式     | []                           |      |      |      |
| model  | 表单绑定的值     | {}                           |      |      |      |
| layout | 栅格布局(共24份) | {labelCol: 6,wrapperCol: 12} |      |      |      |
|        |                  |                              |      |      |      |
|        |                  |                              |      |      |      |

#### list参数

| 参数      | 说明 |      | 类型\|默认值 |      |      |
| --------- | ---- | ---- | ------------ | ---- | ---- |
| type      |      |      |              |      |      |
| label     |      |      |              |      |      |
| options   |      |      |              |      |      |
| model     |      |      |              |      |      |
| rules     |      |      |              |      |      |
| component |      |      |              |      |      |
|           |      |      |              |      |      |

#### options参数





```html
<template>
  <div>
      <u-form  
        ref="form"
        :layout="{
          labelCol: 6,
          wrapperCol: 12
        }"  
        :list="JSon" 
        :model="model"
      >
      </u-form>
      
      <a-button @click="validate">校验</a-button>
  </div>
</template>
```





```javascript
<script>
import custom from "@/components/custom.vue";
const JSon = [
  {
    type: "Input",
    label: "输入框1",
    options: {
      type: "text",
      width: "100%",
      defaultValue: "",
      placeholder: "请输入",
      clearable: false,
      maxLength: null,
      hidden: false,
      disabled: false
    },
    model: "input_1619405689850",
    rules: ["required", "phone"]
  },
  {
    type: "Select",
    label: "下拉选择器",
    options: {
      placeholder: "请选择111",
      options: [
        {
          value: "",
          label: "请选择"
        },
        {
          value: "1",
          label: "下拉框1"
        },
        {
          value: "2",
          label: "下拉框2"
        }
      ],
      showSearch: false
    },
    model: "select_1619405737149",
    rules: [
      {
        required: true,
        message: "必填项111"
      }
    ]
  },
  {
    type: "Number",
    label: "数字输入框",
    options: {
      width: "100%",
      min: 0, //
      max: 10, //
      precision: null,
      step: 1,
      hidden: false,
      disabled: false,
      placeholder: "请输入ddd"
    },
    model: "number_1619405691382",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  {
    type: "Date",
    label: "日期选择框",
    options: {
      width: "100%",
      rangeDefaultValue: [],
      range: "date",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: "date----",
      rangePlaceholder: "大撒大撒",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    },
    model: "date_1619405741417",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  {
    type: "Date",
    label: "月份选择框",
    options: {
      width: "100%",
      rangeDefaultValue: [],
      range: "Month",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: "date----",
      rangePlaceholder: "大撒大撒",
      format: "YYYY-MM",
      valueFormat: "YYYY-MM"
    },
    model: "Month_1619405741417",
    rules: ["required"]
  },
  {
    type: "Date",
    label: "时间范围选择框",
    options: {
      width: "100%",
      rangeDefaultValue: ["1995-02-03", "2080-03-01"],
      range: "Range",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: ["请选择开始日期ddd", "请选择结束日期aaa"],
      rangePlaceholder: ["请选dsaas择开始日期ddd", "请选dsa择结束日期aaa"],
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    },
    model: "Range_1619405741417",

    rules: ["required"]
  },

  {
    type: "Radio",
    label: "单选框",

    options: {
      disabled: false,
      hidden: false,
      defaultValue: "",
      dynamicKey: "",
      dynamic: false,
      options: [
        {
          value: "1",
          label: "选项1"
        },
        {
          value: "2",
          label: "选项2"
        },
        {
          value: "3",
          label: "选项3"
        }
      ]
    },
    model: "radio_1619405728779",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  {
    type: "Checkbox",
    label: "多选框",

    options: {
      disabled: false,
      hidden: false,
      defaultValue: [],
      dynamicKey: "",
      dynamic: false,
      options: [
        {
          value: "1",
          label: "选项1"
        },
        {
          value: "2",
          label: "选项2"
        },
        {
          value: "3",
          label: "选项3"
        }
      ]
    },
    model: "checkbox_1619405732853",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  //   {
  //     type: "uploadFile",
  //     label: "上传文件",
  //     icon: "icon-upload",
  //     options: {
  //       defaultValue: "[]",
  //       multiple: false,
  //       disabled: false,
  //       hidden: false,
  //       drag: false,
  //       downloadWay: "a",
  //       dynamicFun: "",
  //       width: "100%",
  //       limit: 3,
  //       data: "{}",
  //       fileName: "file",
  //       headers: {},
  //       action: "http://cdn.kcz66.com/uploadFile.txt",
  //       placeholder: "上传"
  //     },
  //     model: "uploadFile_1619405745335",
  //     key: "uploadFile_1619405745335",
  //     help: "",
  //     rules: [
  //       {
  //         required: false,
  //         message: "必填项"
  //       }
  //     ]
  //   },
  {
    type: "Cascader",
    label: "级联选择器",
    options: {
      disabled: false,
      hidden: false,
      showSearch: false,
      placeholder: "请选择",
      clearable: false,
      dynamicKey: "",
      dynamic: true,
      options: [
        {
          value: "1",
          label: "选项1",
          children: [
            {
              value: "11",
              label: "选项11"
            }
          ]
        },
        {
          value: "2",
          label: "选项2",
          children: [
            {
              value: "22",
              label: "选项22"
            }
          ]
        }
      ]
    },
    model: "cascader_1619405748156",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  {
    type: "Switch",
    label: "开关",

    options: {
      defaultValue: true,
      hidden: false,
      disabled: false,
      "checked-children": "1",
      "un-checked-children": "0"
    },
    model: "switch_1619405751155",
    rules: [
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  //   {
  //     type: "button",
  //     label: "按钮",
  //     icon: "icon-button-remove",
  //     options: {
  //       type: "primary",
  //       handle: "submit",
  //       dynamicFun: "",
  //       hidden: false,
  //       disabled: false
  //     },
  //     key: "button_1619405752471"
  //   },
  {
    type: "Text",
    label: "文字",
    icon: "icon-zihao",
    options: {
      textAlign: "left",
      hidden: false,
      showRequiredMark: false
    },
    model: "text_1619405751155"
  },
  //   {
  //     type: "alert",
  //     label: "警告提示",
  //     icon: "icon-zu",
  //     options: {
  //       type: "success",
  //       description: "",
  //       showIcon: false,
  //       banner: false,
  //       hidden: false,
  //       closable: false
  //     },
  //     key: "alert_1619405757843"
  //   }
  {
    type: "custom", //自定义组件
    label: "自定义组件案例",
    options: {
      type: "success",
      description: "",
      showIcon: false,
      banner: false,
      hidden: false,
      closable: false
    },
    component: custom, // 必须 当type: "custom"时 ,必须传入一个组件
    model: "alert_1619405757843", // 传入键名称
    rules: [
      // 传入校验规则
      {
        required: true,
        message: "必填项"
      }
    ]
  },
  {
    type: "customTorsoDictionary",
    label: "业务相关组件案例",
    icon: "icon-zu",
    options: {
      type: "success",
      description: "",
      showIcon: false,
      banner: false,
      hidden: false,
      closable: false
    },
    key: "customTorsoDictionary_1619405757843",
    model: "customTorsoDictionary_1619405757843", // 传入键名称
    rules: [
      // 传入校验规则
      "required"
    ]
  }
];

export default {
  components: { custom },
  data() {
    return {
      JSon,
      formFormat: [],
      model: {
        input_1619405689850: "ddd",
        select_1619405737149: "1",
        number_1619405691382: 1,
        date_1619405741417: "2021-05-24",
        Month_1619405741417: "2021-05",
        Range_1619405741417: [],
        radio_1619405728779: "1",
        alert_1619405757843: "dasd",
        checkbox_1619405732853: [],
        cascader_1619405748156: [],
        switch_1619405751155: true,
        text_1619405751155: "这是文字,.,.,.,.,.,.,.",
        customTorsoDictionary_1619405757843: ""
      }
    };
  },
  methods: {
    validate() {
      console.log("this.$refs.form.validate()");
      console.log(this.$refs.form.validate());
    }
};
</script>
```









# 发布npm 打包命令

>> npm run lib