|  | @@ -0,0 +1,163 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <Dialog :title="dialogTitle" v-model="dialogVisible" class="!w-50%">
 | 
	
		
			
				|  |  | +    <el-form
 | 
	
		
			
				|  |  | +      ref="formRef"
 | 
	
		
			
				|  |  | +      :model="formData"
 | 
	
		
			
				|  |  | +      :rules="formRules"
 | 
	
		
			
				|  |  | +      label-width="150px"
 | 
	
		
			
				|  |  | +      v-loading="formLoading"
 | 
	
		
			
				|  |  | +      :validate-on-rule-change="false"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <el-form-item label="活动名称" prop="activityTitle">
 | 
	
		
			
				|  |  | +        <el-input v-model="formData.activityTitle" placeholder="请输入活动名称" class="!w-240px"/>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="举办机构" prop="activityOrganizer">
 | 
	
		
			
				|  |  | +        <el-input v-model="formData.activityOrganizer" placeholder="请输入举办机构名称" class="!w-240px"/>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item label="开始时间" prop="activityStartDate">
 | 
	
		
			
				|  |  | +        <el-date-picker v-model="formData.activityStartDate" :disabledDate="disabledDates" value-format="x" type="date" placeholder="请选择活动开始时间" class="!w-240px" />
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="结束时间" prop="activityEndDate">
 | 
	
		
			
				|  |  | +        <el-date-picker v-model="formData.activityEndDate" :disabledDate="disabledDates" value-format="x" type="date" placeholder="请选择活动结束时间" class="!w-240px" />
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="投票频率" prop="votingRule.dateType">
 | 
	
		
			
				|  |  | +				<el-radio-group v-model="formData.votingRule.dateType">
 | 
	
		
			
				|  |  | +					<el-radio value="day">每天</el-radio>
 | 
	
		
			
				|  |  | +					<el-radio value="month">每月</el-radio>
 | 
	
		
			
				|  |  | +					<el-radio value="year">每年</el-radio>
 | 
	
		
			
				|  |  | +				</el-radio-group>
 | 
	
		
			
				|  |  | +			</el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="指定频率内可投票数" prop="votingRule.num">
 | 
	
		
			
				|  |  | +				<el-input-number v-model="formData.votingRule.num" :min="1" :step="1" />
 | 
	
		
			
				|  |  | +			</el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="活动图片" prop="headImg">
 | 
	
		
			
				|  |  | +        <UploadImg v-model="formData.headImg" height="150px" width="150px" :fileSize="20" />
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +			<el-form-item label="活动背景图" prop="activityContent.backgroundImg">
 | 
	
		
			
				|  |  | +        <UploadImg v-model="formData.activityContent.backgroundImg" height="150px" width="150px" :fileSize="20" />
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item label="活动内容" prop="activityContent.content">
 | 
	
		
			
				|  |  | +        <Editor v-model="formData.activityContent.content" height="150px" />
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +    </el-form>
 | 
	
		
			
				|  |  | +    <template #footer>
 | 
	
		
			
				|  |  | +      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
 | 
	
		
			
				|  |  | +      <el-button @click="dialogVisible = false">取 消</el-button>
 | 
	
		
			
				|  |  | +    </template>
 | 
	
		
			
				|  |  | +  </Dialog>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script setup lang="ts">
 | 
	
		
			
				|  |  | +import { VotingActivityApi } from '@/api/menduner/system/vote'
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +defineOptions({ name: 'VotingActivityForm' })
 | 
	
		
			
				|  |  | +defineProps({
 | 
	
		
			
				|  |  | +  area: Array,
 | 
	
		
			
				|  |  | +  position: Array
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +const { t } = useI18n() // 国际化
 | 
	
		
			
				|  |  | +const message = useMessage() // 消息弹窗
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const dialogVisible = ref(false) // 弹窗的是否展示
 | 
	
		
			
				|  |  | +const dialogTitle = ref('') // 弹窗的标题
 | 
	
		
			
				|  |  | +const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
 | 
	
		
			
				|  |  | +const formType = ref('') // 表单的类型:create - 新增;update - 修改
 | 
	
		
			
				|  |  | +const formData = ref({
 | 
	
		
			
				|  |  | +	votingActivityId: undefined,
 | 
	
		
			
				|  |  | +	activityTitle: undefined,
 | 
	
		
			
				|  |  | +	activityStartDate: undefined,
 | 
	
		
			
				|  |  | +	activityEndDate: undefined,
 | 
	
		
			
				|  |  | +	activityContent: {
 | 
	
		
			
				|  |  | +		backgroundImg: undefined,
 | 
	
		
			
				|  |  | +		content: undefined
 | 
	
		
			
				|  |  | +	},
 | 
	
		
			
				|  |  | +	activityOrganizer: undefined,
 | 
	
		
			
				|  |  | +	votingRule: {
 | 
	
		
			
				|  |  | +		dateType: 'day', // 投票频率:day - 日,month - 月,year - 年
 | 
	
		
			
				|  |  | +		num: 1 // 指定频率内最多投票次数
 | 
	
		
			
				|  |  | +	},
 | 
	
		
			
				|  |  | +	headImg: undefined
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const formRules = reactive({
 | 
	
		
			
				|  |  | +  activityTitle: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
 | 
	
		
			
				|  |  | +  activityStartDate: [{ required: true, message: '活动开始时间', trigger: 'change' }],
 | 
	
		
			
				|  |  | +  activityEndDate: [{ required: true, message: '活动结束时间', trigger: 'change' }],
 | 
	
		
			
				|  |  | +  activityOrganizer: [{ required: true, message: '举办机构不能为空', trigger: 'blur' }],
 | 
	
		
			
				|  |  | +  headImg: [{ required: true, message: '活动图片不能为空', trigger: 'change' }],
 | 
	
		
			
				|  |  | +	'activityContent.backgroundImg': [{ required: true, message: '活动背景图不能为空', trigger: 'change' }],
 | 
	
		
			
				|  |  | +	'activityContent.content': [{ required: true, message: '活动内容不能为空', trigger: 'blur' }],
 | 
	
		
			
				|  |  | +	'votingRule.dateType': [{ required: true, message: '投票频率不能为空', trigger: 'change' }],
 | 
	
		
			
				|  |  | +	'votingRule.num': [{ required: true, message: '投票频率不能为空', trigger: 'change' }],
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +const formRef = ref() // 表单 Ref
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +// 过去的日期不可选
 | 
	
		
			
				|  |  | +const disabledDates = (date) => {
 | 
	
		
			
				|  |  | +  const currentDate = new Date()
 | 
	
		
			
				|  |  | +  currentDate.setDate(currentDate.getDate() - 1)
 | 
	
		
			
				|  |  | +  return date.getTime() < currentDate.getTime()
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +/** 打开弹窗 */
 | 
	
		
			
				|  |  | +const open = async (type: string, id?: number) => {
 | 
	
		
			
				|  |  | +  dialogVisible.value = true
 | 
	
		
			
				|  |  | +  dialogTitle.value = t('action.' + type)
 | 
	
		
			
				|  |  | +  formType.value = type
 | 
	
		
			
				|  |  | +  resetForm()
 | 
	
		
			
				|  |  | +  // 修改时,设置数据
 | 
	
		
			
				|  |  | +  if (id) {
 | 
	
		
			
				|  |  | +    formLoading.value = true
 | 
	
		
			
				|  |  | +    try {
 | 
	
		
			
				|  |  | +      formData.value = await VotingActivityApi.getVotingActivity(id)
 | 
	
		
			
				|  |  | +    } finally {
 | 
	
		
			
				|  |  | +      formLoading.value = false
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +defineExpose({ open }) // 提供 open 方法,用于打开弹窗
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +/** 提交表单 */
 | 
	
		
			
				|  |  | +const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
 | 
	
		
			
				|  |  | +const submitForm = async () => {
 | 
	
		
			
				|  |  | +  // 校验表单
 | 
	
		
			
				|  |  | +  await formRef.value.validate()
 | 
	
		
			
				|  |  | +  // 提交请求
 | 
	
		
			
				|  |  | +  formLoading.value = true
 | 
	
		
			
				|  |  | +  try {
 | 
	
		
			
				|  |  | +    if (formType.value === 'create') {
 | 
	
		
			
				|  |  | +      await VotingActivityApi.createVotingActivity(formData.value)
 | 
	
		
			
				|  |  | +      message.success(t('common.createSuccess'))
 | 
	
		
			
				|  |  | +    } else {
 | 
	
		
			
				|  |  | +      await VotingActivityApi.updateVotingActivity(formData.value)
 | 
	
		
			
				|  |  | +      message.success(t('common.updateSuccess'))
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    dialogVisible.value = false
 | 
	
		
			
				|  |  | +    // 发送操作成功的事件
 | 
	
		
			
				|  |  | +    emit('success')
 | 
	
		
			
				|  |  | +  } finally {
 | 
	
		
			
				|  |  | +    formLoading.value = false
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +/** 重置表单 */
 | 
	
		
			
				|  |  | +const resetForm = () => {
 | 
	
		
			
				|  |  | +  formData.value = {
 | 
	
		
			
				|  |  | +		votingActivityId: undefined,
 | 
	
		
			
				|  |  | +		activityTitle: undefined,
 | 
	
		
			
				|  |  | +		activityStartDate: undefined,
 | 
	
		
			
				|  |  | +		activityEndDate: undefined,
 | 
	
		
			
				|  |  | +		activityContent: {
 | 
	
		
			
				|  |  | +			backgroundImg: undefined,
 | 
	
		
			
				|  |  | +			content: undefined
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		activityOrganizer: undefined,
 | 
	
		
			
				|  |  | +		votingRule: {
 | 
	
		
			
				|  |  | +			dateType: 'day',
 | 
	
		
			
				|  |  | +			num: 1
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		headImg: undefined
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +  formRef.value?.resetFields()
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 |