# ui-antd-template

**Repository Path**: byteuser/ui-antd-template

## Basic Information

- **Project Name**: ui-antd-template
- **Description**: 基于ant-design-vue的基础开发类库，开发基础功能，减少重复工作
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-09
- **Last Updated**: 2021-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 表单

```js

<ui-form :form="form" :dataSource="formData" @update-data="updateData">
  <template #footer>
    <a-button type="primary">提交</a-button>
    <a-button type="primary">提交</a-button>
  </template>
</ui-form>

const schema = {
  options: {
    labelCol: 6,           
    wrapperCol: 18,
    layout: 'horizontal', // horizontal vertical inline
  },  
  groups: [
    {
      label: "基本信息",
      grid: 3,
      fields: [
        {
          type: FormItemType.INPUT,  // password textarea number
          label: '登录账号',
          name: 'loginName',
          placeholder: '',
          rules: [{required: true, message: '请输入登录账号'}],
          change: (e) => {
            console.info(e);
          },
          pressEnter: () => {}
        },
        {
          type: FormItemType.PASSWORD,  // password textarea number
          label: '登录密码',
          name: 'loginPwd',
          placeholder: '密码',
          rules: [{required: true, message: '请输入登录密码'}]
        },
        {
          type: FormItemType.NUMBER,  // password textarea number
          label: 'age',
          name: 'age',
          placeholder: '年龄',
          min: 1,
          max: 120
        },
        {
          type: FormItemType.SELECT,
          mode: 'multiple',  // tags multiple
          label: '登陆方式',
          name: 'loginWay',
          placeholder: 'dda',
          rules: [{required: true, message: '请输入登录账号'}],
          sourceData: [{id: 1, name:"微信"}, {id: 2, name: 'qq'}],
          props: {label: 'name', value: 'id'},
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.SELECT,
          label: '登陆方式',
          name: 'default',
          placeholder: 'dda',
          rules: [{required: true, message: '请输入登录账号'}],
          sourceData: [{id: 1, name:"微信"}, {id: 2, name: 'qq'}],
          props: {label: 'name', value: 'id'},
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.RADIO,  // radio
          label: '单选框',
          name: 'radio',
          style: 'solid', // outline solid
          rules: [{required: true, message: '请输入登录账号'}],
          sourceData: [{id: 1, name:"微信"}, {id: 2, name: 'qq'}],
          props: {label: 'name', value: 'id'},
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.RADIO,  // radio
          label: '单选框',
          name: 'outline',
          style: 'outline', // outline solid
          rules: [{required: true, message: '请输入登录账号'}],
          sourceData: [{id: 1, name:"微信"}, {id: 2, name: 'qq'}],
          props: {label: 'name', value: 'id'},
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.CHECKBOX,  // checkbox
          label: '多选框',
          name: 'checkbox',
          rules: [{required: true, message: '请输入登录账号'}],
          sourceData: [{id: 1, name:"微信"}, {id: 2, name: 'qq'}],
          props: {label: 'name', value: 'id'},
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.SWITCH,  // switch
          label: 'switch',
          name: 'switch',
          rules: [{required: true, message: '请输入登录账号'}],
          checkedChildren: "启动",
          unCheckedChildren: "禁用",
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.DATE,  // date
          label: 'date',
          name: 'date',
          style: "date",  // date range
          rules: [{required: true, message: '请输入登录账号'}],
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.DATE,  // date
          label: 'date',
          name: 'range',
          style: "range",  // date range
          rules: [{required: true, message: '请输入登录账号'}],
          change: (e) => {
            console.info(e);
          }
        },
        {
          type: FormItemType.TEXTAREA,  // 将textarea放到最后面
          label: '备注',
          name: 'desc',
          placeholder: '个人介绍',
        }
      ]
    }
  ]
};
```

## 菜单

```
<ui-menu :model="selectedKeys" :dataSource="schema"></ui-menu>

const schema = {
  options: {
    class: "ui-menu",
    theme: "light",
    mode: "inline",
  },
  props: {
    key: "id",                         // ID
    name: "permissionName",            // 名称
    url: "permissionLink",             // 链接
    icon: "permissionIcon",            // 图标
    type: "permissionType",            // 类型
    outer: "permissionIsOuter",
    children: "children"
  },
  groups: [
    {
      "id": 1,
      "permissionName": "首页",
      "permissionLink": "/dashboard",
      "permissionIcon": "icon-tuichu",
      "permissionType": "MENU",
      "permissionIsOuter": 0,
    },
    {
      "id": 2,
      "permissionName": "系统设置",
      "permissionLink": "/dashboard1",
      "permissionIcon": "",
      "permissionType": "DIR",
      "permissionIsOuter": 0,
      children: [
        {
          "id": 3,
          "permissionName": "卡卡卡的",
          "permissionLink": "/dashboard2",
          "permissionIcon": "",
          "permissionType": "MENU",
          "permissionIsOuter": 0,
        },
        {
          "id": 4,
          "permissionName": "卡卡卡的",
          "permissionLink": "/dashboard4",
          "permissionIcon": "",
          "permissionType": "MENU",
          "permissionIsOuter": 0,
        }
      ]
    }
  ]
};
```