ZhangTing_web/src/views/Banner/BannerForm.vue

<template>
  <Dialog v-model="dialogVisible" :title="title">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      label-width="80px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称" clearable/>
      </el-form-item>
      <template v-for="item in formShowItem" :key="item.prop">
        <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules" v-if="!item.hide || item.show">
          <div v-if="item.prop === 'barrage'" class="barrage">
            <el-input v-model="formData[item.prop]" placeholder="请输入" type="textarea"  clearable :rows="5"/>
            <el-button v-loading="AILoading" type="text" @click="getAIContent">AI生成</el-button>
          </div>
          <el-select v-model="formData[item.prop]" v-else-if="item.type === 'select'">
            <el-option
              v-for="v in item.selectData"
              :key="v.value"
              :label="v.label"
              :value="v.value"
            />
          </el-select>
          <UploadImgs
            v-else-if="item.type === 'image'"
            v-model="formData[item.prop]"
            :limit="item.limit || 1"
            :fileSize="item.size || 20"
          />
          <el-input v-else v-model="formData[item.prop]" :placeholder="item.placeholder || '请输入'" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as BannerApi from '@/api/banner'

defineOptions({name: 'BannerForm'})
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
const AILoading = ref(false) // AI生成弹幕
const formData = ref({
  id: undefined,
  type: 1,
  name: undefined,
  title: undefined,
  content: undefined,
  backgroundImages: [],
  images: [],
  fullName: undefined,
  barrage: undefined,
  oneScreen: undefined,
  twoScreen: undefined,
  threeScreen: undefined,
  fourScreen: undefined,
  category: undefined,
})
const formRef = ref() // 表单 Ref
const birthdayCategory = [
  {label: '海报', value: 1},
  {label: '模板', value: 2}
]
const dataCategory = [
  {label: '全屏', value: 1},
  {label: '二分屏', value: 2},
  {label: '三分屏', value: 3},
  {label: '四分屏', value: 4}
]
const typeTextData = {
  1: '欢迎页',
  2: '主题活动',
  3: '生日祝福',
  4: '数据展示'
}
const formItemList = computed(()=>{
  return {
    1: [
      {
        label: '欢迎标题',
        prop: 'title',
        rules: {required: true, trigger: 'blur', message: '请填写欢迎标题'}
      },
      {
        label: '欢迎内容',
        prop: 'content',
        rules: {required: true, trigger: 'blur', message: '请填写欢迎内容'}
      },
      {label: '背景图片', prop: 'backgroundImages', type: 'image'}
    ],
    2: [{label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4}],
    3: [
      {
        label: '类型',
        prop: 'category',
        rules: {required: true, trigger: 'change', message: '请选择类型'},
        type: 'select',
        selectData: birthdayCategory,
      },
      {
        label: '祝福标题',
        prop: 'title',
        rules: {required: true, trigger: 'blur', message: '请填写祝福标题'},
        hide:formData.value.category === 1
      },
      {
        label: '祝福语',
        prop: 'content',
        rules: {required: true, trigger: 'blur', message: '请填写祝福语'},
        hide:formData.value.category === 1
      },
      {label: '姓名', prop: 'fullName',placeholder:'格式：张三，李四，xx'},
      {label: '祝福弹幕', prop: 'barrage', type: 'textarea'},
      {label: '背景图片', prop: 'backgroundImages', type: 'image',limit: 4},
      {label: '个人图片', prop: 'images', type: 'image', limit: 6, hide:formData.value.category === 1},
    ],
    4: [
      {
        label: '类型',
        prop: 'category',
        rules: {required: true, trigger: 'change', message: '请选择类型'},
        type: 'select',
        selectData: dataCategory
      },
      {label: '背景图片', prop: 'backgroundImages', type: 'image'},
      {label: '一屏', prop: 'oneScreen', type: 'image', limit: 6,hide:true,show:true},
      {label: '二屏', prop: 'twoScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 2},
      {label: '三屏', prop: 'threeScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 3},
      {label: '四屏', prop: 'fourScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 4}
    ]
  }
})
const title = computed(() => {
  const stateText = formData.value.id ? '编辑' : '新增'
  const typeText = typeTextData[formData.value.type]
  return stateText + typeText
})
const formShowItem = computed(() => {
  return formItemList.value[formData.value.type]
})

const getAIContent = async () => {
  if (AILoading.value) return
  try {
    AILoading.value = true
    const res = await BannerApi.getContentBanner(`帮我生成生日祝福语带上姓名，姓名叫${formData.value.fullName}，返回数组格式，一个大数组，嵌套2个数组存放所有祝福语，一人两条祝福，两个数组各一条，前面加个类似🎉 🌼 🎂 🎈 🌟 💐 这种小图标，其余字符全部不要。`)
    formData.value.barrage = res
    AILoading.value = false
  } catch {
    AILoading.value = false
  }

}
/** 打开弹窗 */
const open = async (type: number, id: any) => {
  resetForm()
  if (id) {
    formData.value = await BannerApi.infoBanner(id)
  } else {
    formData.value.type = type
  }
  dialogVisible.value = true
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (formData.value.id) {
      await BannerApi.updateBanner(formData.value)
      ElMessage.success('编辑成功')
    } else {
      await BannerApi.addBanner(formData.value)
      ElMessage.success('新增成功')
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    type: 1,
    name: undefined,
    title: undefined,
    content: undefined,
    backgroundImages: [],
    images: [],
    fullName: undefined,
    barrage: undefined,
    oneScreen: undefined,
    twoScreen: undefined,
    threeScreen: undefined,
    fourScreen: undefined,
    category:undefined
  }
  formRef.value?.resetFields()
}
const emit = defineEmits(['success'])
</script>
<style lang="scss" scoped>
.barrage {
  display: flex;
  align-items: center;
  width: 100%;

  .el-button {
    margin-left: 20px;
  }
}
</style>