fs-admin/src/components/form/FormComp.vue

<!-- eslint-disable vue/no-mutating-props -->
<script setup lang="ts">
import type { BasicFormItem } from '@/types/form'
import type { UploadProps } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { ACCESS_TOKEN } from '@/utils/constants'

interface Props {
  modelValue: any
  item: BasicFormItem
}

const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const baseApi = import.meta.env.VITE_BASE_API

const modelValue = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})

const placeholder = (item: BasicFormItem) => {
  if (['select', 'cascader', 'date-picker', 'time-picker', 'time-select', 'dict'].includes(item.type)) {
    return '请选择' + item.label
  } else {
    return '请输入' + item.label
  }
}

if (props.item.request) {
  props.item.request(props.item).then((res: any) => {
    props.item.options = res
  })
}

const user = useUserStore()
const headers = reactive({
  [ACCESS_TOKEN]: user.token
})
// 图片上传
// const handleUploadSuccess: UploadProps['onSuccess'] = response => {
//   modelValue.value = import.meta.env.VITE_BASE_PATH + response.data
// }
</script>

<template>
  <el-cascader
    v-if="item.type === 'cascader'"
    style="width: 100%"
    v-model="modelValue"
    v-bind="item.props"
    v-on="item.events || {}"
    :placeholder="item.placeholder || placeholder(item)"
  >
    <template #[slot.name]="{ node, data }" v-for="slot in item.slots" :key="slot.alias">
      <slot :name="slot.alias" :node="node" :data="data"></slot>
    </template>
  </el-cascader>
  <el-date-picker
    v-else-if="item.type === 'date-picker'"
    style="width: 100%"
    v-model="modelValue"
    v-bind="item.props"
    v-on="item.events || {}"
    :placeholder="item.placeholder || placeholder(item)"
  >
    <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
      <slot :name="slot.alias" v-bind="slotProps"></slot>
    </template>
  </el-date-picker>
  <el-upload
    v-else-if="item.type === 'upload'"
    v-model:file-list="modelValue"
    :action="baseApi + '/file/upload'"
    :headers="headers"
    v-bind="item.props"
    v-on="item.events || {}"
  >
    <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
      <slot :name="slot.alias" v-bind="slotProps"></slot>
    </template>
  </el-upload>

  <el-select
    v-else-if="item.type === 'select'"
    v-model="modelValue"
    v-bind="item.props"
    :placeholder="item.placeholder || placeholder(item)"
    v-on="item.events || {}"
  >
    <el-option
      v-for="(option, index) in item.options"
      :label="option.label"
      :value="option.value"
      :key="index"
      v-bind="option.props"
    >
    </el-option>
    <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
      <slot :name="slot.alias" v-bind="slotProps"></slot>
    </template>
  </el-select>
  <component
    v-else
    :is="'el-' + item.type"
    v-model="modelValue"
    v-bind="item.props"
    :placeholder="item.placeholder || placeholder(item)"
    v-on="item.events || {}"
  >
    <template v-if="item.type === 'radio-group'">
      <el-radio v-for="(option, index) in item.options" :label="option.label" :key="index" v-bind="option.props">
        {{ option.value }}
      </el-radio>
    </template>
    <template v-if="item.type === 'checkbox-group'">
      <el-checkbox v-for="(option, index) in item.options" :label="option.label" :key="index" v-bind="option.props">
        {{ option.value }}
      </el-checkbox>
    </template>
    <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
      <slot :name="slot.alias" v-bind="slotProps"></slot>
    </template>
  </component>
</template>

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