fs-admin/src/views/system/user.vue

<script setup lang="ts">
import type { BasicForm } from '@/types/form'

const CRUD = {
  create() {
    return Promise.resolve()
  },
  update() {
    return Promise.resolve()
  },
  getList() {
    return new Promise(resolve => {
      return resolve({
        data: [
          {
            id: 1,
            phone: '187',
            name: 'test',
            state: true,
            gender: '1'
          }
        ],
        total: 1
      })
    })
  }
}

const testGetRole = () => {
  Promise.resolve().then(() => {
    formConfig.formItems[3].options = [
      {
        label: '测试角色',
        value: '1'
      }
    ]
  })
}
testGetRole()
const test = () => {
  console.log('object input')
}
const change = (e: any) => {
  console.log('focus')
  console.log(e)
}

const formConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '用户名',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      search: true,
      events: {
        input: test,
        focus: change
      }
    },
    {
      label: '密码',
      value: '',
      name: 'password',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '手机号',
      value: '',
      name: 'phone',
      type: 'input',
      search: true,
      props: {
        maxlength: 11
      }
    },
    {
      label: '角色',
      value: '',
      name: 'role',
      type: 'select',
      options: []
    },
    // {
    //   label: '性别',
    //   value: '1',
    //   name: 'gender',
    //   type: 'radio-group',
    //   options: [
    //     {
    //       label: '1',
    //       value: '男'
    //     },
    //     {
    //       label: '2',
    //       value: '女'
    //     }
    //   ]
    // },
    {
      label: '启用',
      value: true,
      name: 'state',
      type: 'switch'
    }
  ]
})
</script>

<template>
  <pro-table :crud="CRUD" :formConfig="formConfig">
    <el-table-column prop="name" label="用户名"></el-table-column>
    <el-table-column prop="phone" label="手机号"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </pro-table>
</template>

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