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

<script lang="ts" setup>
import type { BasicForm } from '@/types/form'
import { ElInput } from 'element-plus'
import validator from '@/utils/validator'

const formData = reactive<any>({})
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: 'password',
      type: 'custom',
      slots: [
        {
          name: 'default',
          alias: 'password'
        }
      ],
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '区域',
      value: [],
      name: 'area',
      type: 'area',
      props: {
        props: {
          value: 'id'
        }
      }
    },
    {
      label: '手机号',
      value: '',
      name: 'phone',
      type: 'input',
      rules: [
        // {
        //   validator: validator.mobile
        // }
      ]
    },
    {
      label: '开关',
      value: true,
      name: 'ss',
      type: 'switch',
      props: {}
    },
    {
      label: '',
      value: '',
      name: '',
      type: 'button',
      notFormItem: true,
      props: {
        buttonName: '按钮'
      }
    },
    {
      label: '',
      value: '',
      name: '',
      type: 'alert',
      notFormItem: true,
      props: {
        title: 'alert',
        type: 'warning'
      }
    },
    {
      label: '字典',
      value: '',
      name: 'field1',
      type: 'dict',
      props: {
        type: 'task_from',
        clearable: true,
        multiple: true
      }
    },
    {
      label: '字段名',
      value: '',
      name: 'field2',
      type: 'input',
      slots: [
        {
          name: 'prepend',
          alias: 'prepend1'
        },
        {
          name: 'append',
          alias: 'append1'
        }
      ]
    },
    {
      label: '字段名',
      value: '',
      name: 'field3',
      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'
        }
      ],
      events: {
        change(item: any) {
          formData.name = 'c'
          formConfig.formItems[1].hidden = true
        }
      }
    },
    {
      label: '树选择',
      value: '',
      name: 'tree',
      type: 'tree-select',
      props: {
        data: [
          {
            value: '1',
            label: 'Level one 1',
            children: [
              {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                  {
                    value: '1-1-1',
                    label: 'Level three 1-1-1'
                  }
                ]
              }
            ]
          },
          {
            value: '2',
            label: 'Level one 2',
            children: [
              {
                value: '2-1',
                label: 'Level two 2-1',
                children: [
                  {
                    value: '2-1-1',
                    label: 'Level three 2-1-1'
                  }
                ]
              },
              {
                value: '2-2',
                label: 'Level two 2-2',
                children: [
                  {
                    value: '2-2-1',
                    label: 'Level three 2-2-1'
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    {
      label: '图片',
      value: [],
      name: 'image',
      type: 'image-upload',
      slots: [
        {
          name: 'tip',
          alias: 'tip'
        }
      ]
    },
    {
      label: '文件',
      value: [],
      name: 'picture',
      type: 'image-upload',
      props: {
        limit: 9,
        multiple: true
      }
    },
    {
      label: '文件',
      value: '',
      name: 'file',
      type: 'file-upload',
      slots: [
        {
          name: 'default',
          alias: 'file'
        }
      ]
    },
    {
      label: '可编辑标签',
      value: 'f,ghh',
      name: 'tag',
      type: 'edit-tag'
    },
    {
      label: '自定义',
      value: '',
      name: 'custom',
      type: 'custom',
      notFormItem: true,
      slots: [
        {
          name: 'default',
          alias: 'customDefault'
        }
      ]
    }
  ]
})

const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}

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

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<template>
  <div class="h-full bg-white p-16px pt-50px flex justify-center overflow-auto">
    <div class="w-500px">
      <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
        <template #prepend1> test1 </template>
        <template #append1> test1 </template>
        <template #cDefault="{ node, data }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
        <template #file>
          <el-button type="primary">上传文件</el-button>
        </template>
        <template #tip>
          <div><el-text>请上传750*450px 的图片</el-text></div>
        </template>

        <template #password>
          <el-input type="password" name="password" v-model="formData.password" placeholder="请输入密码"></el-input>
          <el-text type="info">密码需包含大写字母、小写字母、数字</el-text>
        </template>
        <template #customDefault>
          <el-space wrap>
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              size="small"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="ml-1 w-20"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput"> + New Tag </el-button>
          </el-space>
        </template>
      </pro-form>
      <div class="text-center">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

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