# erpack 项目代码

本页面所用数据源dataSource.js

export default [
  {
    id: 1,
    name: '张三',
    age: 3,
    gender: '男',
    address: '芜湖市~',
    birthday: '2000-01-01'
  },
  {
    id: 2,
    name: '李四',
    age: 5,
    gender: '女',
    address: '芜湖市~',
    birthday: '2000-01-01',
  },
]

模型代码User.js

// @ts-nocheck
import { Model, Property, NumberProperty } from 'erpack'

export default class User extends Model {
  properties () {
    return {
      name: new Property({
        label: '姓名',
        required: true,
      }),
      age: new NumberProperty({
        label: '年龄',
        required: true,
        min: 0,
      }),
      gender: new Property({
        label: '性别',
        required: true,
      }),
      birthday: new Property('出生日期'),
      address: new Property('住址'),
    }
  }
}

# 列表页面

仅展示表格，省去了列 title 的设置。

姓名
年龄
性别
出生日期
住址
张三3男2000年01月01日芜湖市~
李四5女2000年01月01日芜湖市~
<script>
import dataSource from '../dataSource'
import User from '../User'

const columns = [
  'name',
  'age',
  'gender',
  { type: 'date', dataIndex: 'birthday', format: 'YYYY年MM月DD日' },
  'address',
]

export default {
  render () {
    return <erp-table
      rowKey="id"
      dataSource={dataSource}
      columns={columns}
      modelClass={User}
    />
  }
}
</script>

# 查看页面

姓名张三年龄3性别男
出生日期2000-01-01住址芜湖市~
<script>
import dataSource from '../dataSource'
import User from '../User'
const user = new User(dataSource[0])

const items = [
  'name', 'age', 'gender',
  'birthday', 'address'
]

export default {
  render () {
    return <erp-descriptions
      bordered
      form={user}
      items={items}
    />
  }
}
</script>

# 编辑页面

修改值来触发验证效果试试

男
<template>
  <erp-form :form="user">
    <erp-grid columns="3">
      <erp-form-item prop="name">
        <a-input v-model="user.name" />
      </erp-form-item>
      <erp-form-item prop="age">
        <a-input-number v-model="user.age" />
      </erp-form-item>
      <erp-form-item prop="gender">
        <a-select allowClear v-model="user.gender" :options="options" />
      </erp-form-item>
      <erp-grid-item colSpan="3">
        <erp-form-item prop="address">
          <a-textarea v-model="user.address" />
        </erp-form-item>
      </erp-grid-item>
    </erp-grid>
  </erp-form>
</template>
<script>
import dataSource from '../dataSource'
import User from '../User'

const user = new User(dataSource[0])

export default {
  data () {
    return {
      user,
      options: [
        { label: '男', value: '男' },
        { label: '女', value: '女' },
      ]
    }
  },
}
</script>

← Model 模型 →