fs-admin/src/views/form/Basic.vue

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

const formConfig = reactive<BasicForm>({
  span: 24,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '用户名',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
    },
    {
      label: '登录名',
      value: '',
      name: 'loginName',
      type: 'input',
      rules: [{ required: true, message: '请输入登录名', trigger: 'blur' }]
    },
    {
      label: '密码',
      value: '',
      name: 'password',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '手机号',
      value: '',
      name: 'phone',
      type: 'input',
      props: {
        maxlength: 11
      }
    },
    {
      label: '字段名',
      value: '',
      name: 'name',
      type: 'input'
    },
    {
      label: '字段名',
      value: '',
      name: 'name',
      type: 'input',
      slots: [
        {
          name: 'prepend',
          alias: 'prepend1'
        },
        {
          name: 'append',
          alias: 'append1'
        }
      ]
    },
    {
      label: '字段名',
      value: '',
      name: 'field',
      type: 'cascader',
      props: {
        options: [
          {
            value: 'guide',
            label: 'Guide',
            children: [
              {
                value: 'disciplines',
                label: 'Disciplines',
                children: [
                  {
                    value: 'consistency',
                    label: 'Consistency'
                  },
                  {
                    value: 'feedback',
                    label: 'Feedback'
                  },
                  {
                    value: 'efficiency',
                    label: 'Efficiency'
                  },
                  {
                    value: 'controllability',
                    label: 'Controllability'
                  }
                ]
              },
              {
                value: 'navigation',
                label: 'Navigation',
                children: [
                  {
                    value: 'side nav',
                    label: 'Side Navigation'
                  },
                  {
                    value: 'top nav',
                    label: 'Top Navigation'
                  }
                ]
              }
            ]
          },
          {
            value: 'resource',
            label: 'Resource',
            children: [
              {
                value: 'axure',
                label: 'Axure Components'
              },
              {
                value: 'sketch',
                label: 'Sketch Templates'
              },
              {
                value: 'docs',
                label: 'Design Documentation'
              }
            ]
          }
        ]
      },
      slots: [
        {
          name: 'default',
          alias: 'cDefault'
        }
      ]
    }
  ]
})

const formData = reactive({})

const create = () => {
  console.log('保存的方法')
}
const update = () => {
  console.log('保存的方法')
}

const proFormRef = ref<any>()
const handleSave = () => {
  proFormRef.value.submit()
}
</script>

<template>
  <div class="h-full bg-white p-16px pt-50px flex justify-center">
    <div class="w-500px">
      <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
        <template #prepend> testt </template>
        <template #prepend1> test1 </template>
        <template #append> testt </template>
        <template #append1> test1 </template>
        <template #cDefault="{ node, data }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </pro-form>
      <div class="text-center">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

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