ylrz_his_scrm_adminUI/src/views/course/courseRandomRedPacket/index.vue

<template>
  <div class="app-container course-random-red-packet">
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <div>
          <div class="title">配置中心 - 课程随机红包</div>
          <div class="desc">
            绑定课程项目fs_user_course.project，仅白名单企业可参与；权重总和需为100%，多个企业ID逗号分隔，填写ALL代表全部企业随机红包
          </div>
        </div>
        <el-tag type="info" size="small">红包模块 v2.0</el-tag>
      </div>

      <el-tabs v-model="activeTab" type="card" class="config-tabs">
        <el-tab-pane label="单项目配置" name="single" />
        <el-tab-pane label="批量配置" name="batch" />
      </el-tabs>

      <el-form
        v-show="activeTab === 'single'"
        ref="singleFormRef"
        :model="singleForm"
        :rules="singleRules"
        label-width="120px"
        v-loading="loading"
      >
        <el-form-item label="课程项目" prop="project">
          <el-select
            v-model="singleForm.project"
            placeholder="请选择课程项目"
            filterable
            clearable
            style="width: 420px"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
            />
          </el-select>
        </el-form-item>

        <el-divider content-position="left">红包开关配置</el-divider>

        <el-form-item label="开启随机红包">
          <el-switch
            v-model="singleForm.enableRandom"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>

        <template v-if="singleForm.enableRandom">
          <div v-for="(tier, index) in singleForm.tiers" :key="'single-' + index" class="tier-row">
            <el-form-item
              label="红包金额"
              :prop="'tiers.' + index + '.amount'"
              :rules="[{ required: true, message: '请填写金额', trigger: 'blur' }]"
            >
              <el-input-number
                v-model="tier.amount"
                :min="0.01"
                :max="200"
                :step="0.01"
                :precision="2"
                controls-position="right"
              />
              <span class="unit">元</span>
            </el-form-item>
            <el-form-item
              label="权重占比"
              :prop="'tiers.' + index + '.weight'"
              :rules="[
                { required: true, message: '请填写权重', trigger: 'blur' },
                { type: 'number', min: 1, message: '权重不能小于0', trigger: 'blur' }
              ]"
            >
              <el-input-number
                v-model="tier.weight"
                :min="1"
                :max="100"
                controls-position="right"
              />
              <span class="unit">%</span>
            </el-form-item>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="delete-btn"
              :disabled="singleForm.tiers.length <= 1"
              @click="removeTier('singleForm', index)"
            />
          </div>

          <el-form-item>
            <el-button type="primary" plain icon="el-icon-plus" @click="addTier('singleForm')">新增档位</el-button>
            <span class="weight-total" :class="{ error: singleTotalWeight !== 100 }">
              权重总和：{{ singleTotalWeight }}%
            </span>
          </el-form-item>
        </template>

        <el-divider content-position="left">企业白名单</el-divider>

        <el-form-item label="允许企业">
          <el-select
            v-model="singleWhitelistCompanyIds"
            multiple
            filterable
            clearable
            collapse-tags
            placeholder="不选择代表全部企业走随机红包"
            style="width: 100%"
            @change="handleWhitelistChange('single')"
          >
            <el-option label="全部企业 (ALL)" value="ALL" />
            <el-option
              v-for="item in companyOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="String(item.dictValue)"
            />
          </el-select>
          <div class="tip">多个企业ID逗号分隔，内部存储ALL代表全部企业可参与随机红包</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submitSingleForm">保存配置</el-button>
          <el-button @click="resetSingleForm">重置</el-button>
        </el-form-item>
      </el-form>

      <el-form
        v-show="activeTab === 'batch'"
        ref="batchFormRef"
        :model="batchForm"
        :rules="batchRules"
        label-width="120px"
        v-loading="batchLoading"
      >
        <el-form-item label="课程项目" prop="projects">
          <el-select
            v-model="batchForm.projects"
            placeholder="请选择课程项目（可多选）"
            filterable
            clearable
            multiple
            collapse-tags
            style="width: 420px"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
            />
          </el-select>
        </el-form-item>

        <el-divider content-position="left">红包开关配置</el-divider>

        <el-form-item label="开启随机红包">
          <el-switch
            v-model="batchForm.enableRandom"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>

        <template v-if="batchForm.enableRandom">
          <div v-for="(tier, index) in batchForm.tiers" :key="'batch-' + index" class="tier-row">
            <el-form-item
              label="红包金额"
              :prop="'tiers.' + index + '.amount'"
              :rules="[{ required: true, message: '请填写金额', trigger: 'blur' }]"
            >
              <el-input-number
                v-model="tier.amount"
                :min="0.01"
                :max="200"
                :step="0.01"
                :precision="2"
                controls-position="right"
              />
              <span class="unit">元</span>
            </el-form-item>
            <el-form-item
              label="权重占比"
              :prop="'tiers.' + index + '.weight'"
              :rules="[
                { required: true, message: '请填写权重', trigger: 'blur' },
                { type: 'number', min: 1, message: '权重不能小于0', trigger: 'blur' }
              ]"
            >
              <el-input-number
                v-model="tier.weight"
                :min="1"
                :max="100"
                controls-position="right"
              />
              <span class="unit">%</span>
            </el-form-item>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="delete-btn"
              :disabled="batchForm.tiers.length <= 1"
              @click="removeTier('batchForm', index)"
            />
          </div>

          <el-form-item>
            <el-button type="primary" plain icon="el-icon-plus" @click="addTier('batchForm')">新增档位</el-button>
            <span class="weight-total" :class="{ error: batchTotalWeight !== 100 }">
              权重总和：{{ batchTotalWeight }}%
            </span>
          </el-form-item>
        </template>

        <el-divider content-position="left">企业白名单</el-divider>

        <el-form-item label="允许企业">
          <el-select
            v-model="batchWhitelistCompanyIds"
            multiple
            filterable
            clearable
            collapse-tags
            placeholder="不选择代表全部企业走随机红包"
            style="width: 100%"
            @change="handleWhitelistChange('batch')"
          >
            <el-option label="全部企业 (ALL)" value="ALL" />
            <el-option
              v-for="item in companyOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="String(item.dictValue)"
            />
          </el-select>
          <div class="tip">多个企业ID逗号分隔，内部存储ALL代表全部企业可参与随机红包</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submitBatchForm">批量保存</el-button>
          <el-button @click="resetBatchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getCourseRandomRedPacket,
  saveCourseRandomRedPacket,
  batchSaveCourseRandomRedPacket
} from '@/api/course/courseRandomRedPacket'
import { allList } from '@/api/company/company'

const defaultTier = () => ({ amount: 1.88, weight: 50 })

const defaultConfig = () => ({
  enableRandom: false,
  companyWhitelist: '',
  tiers: [defaultTier()]
})

export default {
  name: 'CourseRandomRedPacket',
  data() {
    return {
      activeTab: 'single',
      loading: false,
      batchLoading: false,
      submitting: false,
      projectOptions: [],
      companyOptions: [],
      singleWhitelistCompanyIds: [],
      batchWhitelistCompanyIds: [],
      batchReferenceProject: null,
      singleForm: {
        project: null,
        ...defaultConfig()
      },
      batchForm: {
        projects: [],
        ...defaultConfig()
      },
      singleRules: {
        project: [{ required: true, message: '请选择课程项目', trigger: 'change' }]
      },
      batchRules: {
        projects: [{ type: 'array', required: true, min: 1, message: '请至少选择一个课程项目', trigger: 'change' }]
      }
    }
  },
  computed: {
    singleTotalWeight() {
      return this.calcTotalWeight(this.singleForm.tiers)
    },
    batchTotalWeight() {
      return this.calcTotalWeight(this.batchForm.tiers)
    }
  },
  watch: {
    'singleForm.project'(project) {
      if (project) {
        this.loadSingleConfig(project)
      } else {
        this.applyDefaultConfig(this.singleForm)
      }
    },
    'batchForm.projects': {
      handler(projects) {
        if (!projects || !projects.length) {
          this.batchReferenceProject = null
          this.applyDefaultConfig(this.batchForm)
          return
        }
        const referenceProject = projects[0]
        if (referenceProject === this.batchReferenceProject) {
          return
        }
        this.batchReferenceProject = referenceProject
        this.loadBatchConfig(referenceProject)
      },
      deep: true
    }
  },
  created() {
    this.getDicts('sys_course_project').then(response => {
      this.projectOptions = response.data || []
    })
    allList().then(res => {
      this.companyOptions = res.rows || []
    })
    if (this.$route.query.project) {
      this.singleForm.project = Number(this.$route.query.project)
    }
  },
  methods: {
    calcTotalWeight(tiers) {
      return (tiers || []).reduce((sum, item) => sum + (Number(item.weight) || 0), 0)
    },
    applyDefaultConfig(form) {
      const defaults = defaultConfig()
      form.enableRandom = defaults.enableRandom
      form.companyWhitelist = defaults.companyWhitelist
      form.tiers = JSON.parse(JSON.stringify(defaults.tiers))
      this.parseWhitelistToUi(form === this.singleForm ? 'single' : 'batch')
    },
    applyConfigData(form, data) {
      if (data) {
        form.enableRandom = !!data.enableRandom
        form.companyWhitelist = data.companyWhitelist || ''
        form.tiers = (data.tiers && data.tiers.length)
          ? JSON.parse(JSON.stringify(data.tiers.map(item => ({
            amount: Number(item.amount),
            weight: Number(item.weight)
          }))))
          : JSON.parse(JSON.stringify(defaultConfig().tiers))
      } else {
        this.applyDefaultConfig(form)
        return
      }
      this.parseWhitelistToUi(form === this.singleForm ? 'single' : 'batch')
    },
    parseWhitelistToUi(mode) {
      const form = mode === 'single' ? this.singleForm : this.batchForm
      const whitelist = (form.companyWhitelist || '').trim()
      const idsKey = mode === 'single' ? 'singleWhitelistCompanyIds' : 'batchWhitelistCompanyIds'
      if (!whitelist || whitelist.toUpperCase() === 'ALL') {
        this[idsKey] = whitelist.toUpperCase() === 'ALL' ? ['ALL'] : []
        return
      }
      this[idsKey] = whitelist.split(',').map(item => item.trim()).filter(Boolean)
    },
    buildWhitelistFromUi(mode) {
      const companyIds = mode === 'single' ? this.singleWhitelistCompanyIds : this.batchWhitelistCompanyIds
      if (companyIds.includes('ALL')) {
        return 'ALL'
      }
      if (companyIds && companyIds.length) {
        return companyIds.join(',')
      }
      return ''
    },
    handleWhitelistChange(mode) {
      const idsKey = mode === 'single' ? 'singleWhitelistCompanyIds' : 'batchWhitelistCompanyIds'
      const companyIds = this[idsKey]
      if (!companyIds.length) {
        return
      }
      if (companyIds.includes('ALL')) {
        this[idsKey] = ['ALL']
        return
      }
      this[idsKey] = companyIds.filter(id => id !== 'ALL')
    },
    loadSingleConfig(project) {
      this.loading = true
      getCourseRandomRedPacket(project).then(res => {
        this.applyConfigData(this.singleForm, res.data)
      }).finally(() => {
        this.loading = false
      })
    },
    loadBatchConfig(project) {
      this.batchLoading = true
      getCourseRandomRedPacket(project).then(res => {
        this.applyConfigData(this.batchForm, res.data)
      }).finally(() => {
        this.batchLoading = false
      })
    },
    validateConfig(form, totalWeight) {
      if (form.enableRandom) {
        if (totalWeight !== 100) {
          this.$message.warning('权重总和必须为 100%')
          return false
        }
        if (!form.tiers.length) {
          this.$message.warning('至少保留一个红包档位')
          return false
        }
      }
      return true
    },
    buildPayload(form, mode) {
      return {
        enableRandom: form.enableRandom,
        companyWhitelist: this.buildWhitelistFromUi(mode),
        tiers: form.enableRandom ? form.tiers : []
      }
    },
    addTier(formName) {
      this[formName].tiers.push({ amount: 1.88, weight: 10 })
    },
    removeTier(formName, index) {
      this[formName].tiers.splice(index, 1)
    },
    resetSingleForm() {
      this.singleForm.project = null
      this.applyDefaultConfig(this.singleForm)
      this.$nextTick(() => {
        if (this.$refs.singleFormRef) {
          this.$refs.singleFormRef.clearValidate()
        }
      })
    },
    resetBatchForm() {
      this.batchForm.projects = []
      this.batchReferenceProject = null
      this.applyDefaultConfig(this.batchForm)
      this.$nextTick(() => {
        if (this.$refs.batchFormRef) {
          this.$refs.batchFormRef.clearValidate()
        }
      })
    },
    submitSingleForm() {
      this.$refs.singleFormRef.validate(valid => {
        if (!valid) {
          return
        }
        if (!this.validateConfig(this.singleForm, this.singleTotalWeight)) {
          return
        }
        this.submitting = true
        saveCourseRandomRedPacket({
          project: this.singleForm.project,
          ...this.buildPayload(this.singleForm, 'single')
        }).then(() => {
          this.$message.success('保存成功')
        }).finally(() => {
          this.submitting = false
        })
      })
    },
    submitBatchForm() {
      this.$refs.batchFormRef.validate(valid => {
        if (!valid) {
          return
        }
        if (!this.validateConfig(this.batchForm, this.batchTotalWeight)) {
          return
        }
        this.submitting = true
        batchSaveCourseRandomRedPacket({
          projects: this.batchForm.projects,
          ...this.buildPayload(this.batchForm, 'batch')
        }).then(() => {
          this.$message.success(`已成功配置 ${this.batchForm.projects.length} 个项目`)
        }).finally(() => {
          this.submitting = false
        })
      })
    }
  }
}
</script>

<style scoped>
.course-random-red-packet .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.course-random-red-packet .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.course-random-red-packet .desc,
.course-random-red-packet .tip {
  color: #909399;
  font-size: 13px;
  line-height: 1.6;
}

.course-random-red-packet .config-tabs {
  margin-bottom: 16px;
}

.course-random-red-packet .tier-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.course-random-red-packet .unit {
  margin-left: 8px;
  color: #606266;
}

.course-random-red-packet .delete-btn {
  margin-top: 6px;
  color: #f56c6c;
}

.course-random-red-packet .weight-total {
  margin-left: 16px;
  color: #67c23a;
  font-weight: 600;
}

.course-random-red-packet .weight-total.error {
  color: #f56c6c;
}
</style>