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

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

const request = function ({ pageNo }: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = {
        list: [
          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 1 },
          { name: '李四' + pageNo, sex: '女', id: '' + pageNo + 2 },
          { name: '王五' + pageNo, sex: '男', id: '' + pageNo + 3 },
          { name: '赵六' + pageNo, sex: '女', id: '' + pageNo + 4 },
          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 5 }
        ],
        total: 10
      }
      resolve(data)
    }, 1500)
  })
}

const formData = reactive<any>({})
const formConfig = reactive<BasicForm>({
  span: 12,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '',
      value: '',
      name: '',
      type: 'form-title',
      span: 24,
      notFormItem: true,
      props: {
        title: '基础表单',
        type: 'success',
        color: '#0366d6'
      }
    },
    {
      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: {
          multiple: true
        }
      }
    },
    {
      label: '下拉表格',
      value: '',
      name: 'tableSelect',
      type: 'tableSelect',
      props: {
        tableConfig: {
          column: [
            {
              title: '#',
              type: 'seq',
              width: 45,
              align: 'center'
            },
            {
              title: '姓名',
              field: 'name',
              align: 'center'
            },
            {
              title: '性别',
              align: 'center',
              slot: 'sex'
            }
          ],
          /* 实际开发应传入接口方法 */
          request: request,
          pageSize: 5
        }
      }
    },
    {
      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',
        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() {
          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: 'erp/prod/temp/1702626281947.png,erp/prod/temp/1702626287319.png',
      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-20px overflow-auto">
    <form-title type="primary" class="py-10px mb-4">
      <template #default> 标题 </template>
    </form-title>
    <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>
</template>

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