rongshu/pc/src/components/crowdTask/AddRuleGroupDialog.vue

<template>
  <el-dialog
    title="新增规则组"
    :visible.sync="innerVisible"
    width="560px"
    :close-on-click-modal="false"
    @close="reset"
  >
    <el-form ref="form" :model="form" label-width="140px" label-position="right">
      <el-form-item label="规则组卡种类型" required>
        <el-select
          v-model="form.cardType"
          placeholder="请选择"
          style="width: 100%"
          @change="form.ruleGroupId = ''"
        >
          <el-option label="借记卡圈客规则" value="debitCard" />
          <el-option label="信用卡圈客规则" value="creditCard" />
        </el-select>
      </el-form-item>

      <el-form-item label="规则组" required>
        <el-select
          v-model="form.ruleGroupId"
          placeholder="请选择"
          filterable
          :filter-method="filterRuleGroup"
          style="width: 100%"
          no-data-text="暂无可选规则组"
          no-match-text="未找到匹配的规则组"
        >
          <el-option
            v-for="rg in filteredGroups"
            :key="rg.id"
            :label="`${rg.id}(${rg.name})`"
            :value="rg.id"
          />
        </el-select>
        <div class="hint">仅展示「已上线」状态且与卡种类型匹配的规则组</div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ruleGroupStore from '@/store/ruleGroupStore'

export default {
  name: 'AddRuleGroupDialog',
  props: {
    visible: { type: Boolean, default: false },
    excludeIds: { type: Array, default: () => [] }
  },
  data() {
    return {
      form: { cardType: '', ruleGroupId: '' },
      filterKeyword: ''
    }
  },
  computed: {
    innerVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    },
    filteredGroups() {
      const all = ruleGroupStore.list.filter((rg) => rg.status === 'online')
      return all.filter((rg) => {
        if (this.form.cardType && rg.type !== this.form.cardType) return false
        if (this.excludeIds.includes(rg.id)) return false
        if (this.filterKeyword) {
          const k = this.filterKeyword.toLowerCase()
          if (!rg.id.toLowerCase().includes(k) && !rg.name.toLowerCase().includes(k)) {
            return false
          }
        }
        return true
      })
    }
  },
  watch: {
    visible(v) {
      if (v) this.reset()
    }
  },
  methods: {
    reset() {
      this.form = { cardType: '', ruleGroupId: '' }
      this.filterKeyword = ''
    },
    filterRuleGroup(k) {
      this.filterKeyword = k
    },
    handleSave() {
      if (!this.form.cardType) {
        this.$message.error('请选择规则组卡种类型')
        return
      }
      if (!this.form.ruleGroupId) {
        this.$message.error('请选择规则组')
        return
      }
      const rg = ruleGroupStore.getById(this.form.ruleGroupId)
      if (!rg) {
        this.$message.error('所选规则组不存在')
        return
      }
      this.$emit('save', {
        id: rg.id,
        name: rg.name,
        description: rg.description || '-',
        logic: rg.logic,
        ruleCount: (rg.rules || []).length
      })
      this.innerVisible = false
    },
    handleCancel() {
      this.innerVisible = false
    }
  }
}
</script>

<style scoped>
.hint { color: #909399; font-size: 12px; margin-top: 4px; }
.dialog-footer { text-align: center; }
</style>