ads_web/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdGroup.vue

<template>
  <div class="customize-container">
    <el-card body-style="padding: 20px 80px 0 80px;" v-loading="groupLoading">
      <div style="font-weight: 700; padding-bottom: 18px">
        <span style="color: #306cd7; font-size: 26px">|</span>
        <span style="font-size: 18px; padding-left: 5px">广告组</span>
      </div>
      <el-form
        ref="groupRuleFormRef"
        :model="groupRuleForm"
        :rules="groupRules"
        label-position="left"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon>
        <el-form-item label="广告组名称" prop="groupName">
          <el-input v-model="groupRuleForm.groupName" style="width: 600px" placeholder="请输入广告组名称" />
          <el-button type="primary" plain :disabled="!respCampaignId" @click="submitGroupForm(groupRuleFormRef)" style="margin-left: 30px">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watch, Ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useShopInfo } from '/@/stores/shopInfo'
import { postGroupData } from '../api/index'

const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
const respCampaignId = inject<Ref>('respCampaignId')
const respCampaignName = inject<Ref>('respCampaignName')

const groupLoading = ref(false)

const formSize = ref('default')
const groupRuleFormRef = ref<FormInstance>()
interface groupRuleForm {
  groupName: string
}
const groupRuleForm = reactive<groupRuleForm>({
  groupName: '',
})
const groupRules = reactive<FormRules<groupRuleForm>>({
  groupName: [{ required: true, message: '请输入广告活动', trigger: 'blur' }],
})

const submitGroupForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      createGroups()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const respAdGroupId = ref('')
async function createGroups() {
  groupLoading.value = true
  const groupData = {
    profile_id: profile.value.profile_id,
    campaignId: respCampaignId.value,
    name: respCampaignName.value,
  }

  const filteredRequestData = Object.fromEntries(Object.entries(groupData).filter(([_, v]) => v != null))
  try {
    const response = await postGroupData(filteredRequestData)
    respAdGroupId.value = response.data.adGroupId
    ElMessage({
      message: '广告组创建成功',
      type: 'success',
    })
    groupRuleForm.groupName = ''
  } catch (error) {
    ElMessage.error('广告组创建失败!')
    console.error('请求失败：', error)
  } finally {
    groupLoading.value = false
  }
}

const emit = defineEmits(['update-groupId'])

watch(respAdGroupId, () => {
  if (respAdGroupId.value) {
    emit('update-groupId', {
      id: respAdGroupId.value,
    })
  }
})

</script>

<style lang="scss" scoped>
.customize-container {
  margin-top: 10px;
}
::v-deep(.el-form-item__label) {
  font-weight: 500;
  color: #505968;
}
</style>