antissoft / lvqianmeiye_ERP

<template>
  <div class="business-config-panel" v-loading="loading">
    <div class="business-config-panel__header">
      <el-alert
        title="按业务模块配置规则；后续新增配置项将在此页分组展示。"
        type="info"
        :closable="false"
        show-icon
      />
      <el-button
        type="primary"
        size="small"
        :loading="saving"
        class="business-config-panel__save"
        @click="$emit('save')"
      >保 存</el-button>
    </div>

    <el-collapse v-model="activeModules" class="business-config-panel__collapse">
      <el-collapse-item name="consume">
        <template slot="title">
          <span class="module-title">
            <i class="el-icon-s-order module-icon module-icon--consume"></i>
            耗卡管理
          </span>
        </template>

        <el-card shadow="never" class="config-section">
          <div slot="header" class="config-section__header">
            <span>小程序端</span>
            <span class="config-section__tag">门店小程序</span>
          </div>
          <p class="config-section__tip">
            耗卡发生后，超过下列天数将禁止「修改 / 作废 / 重开单」。
          </p>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="可修改天数" prop="consumeEditableDays" label-width="100px">
                <el-input-number
                  v-model="form.consumeEditableDays"
                  :min="1"
                  :max="365"
                  :precision="0"
                  :step="1"
                  controls-position="right"
                />
                <span class="field-suffix">天</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" class="config-section">
          <div slot="header" class="config-section__header">
            <span>管理后台</span>
            <span class="config-section__tag">会员耗卡</span>
          </div>
          <p class="config-section__tip">
            分别限制「作废」「删除」可操作的天数；填 0 表示不限制天数。是否显示按钮请在「菜单管理 → 按钮权限」中为角色授权。
          </p>
          <ConfigRuleRow
            title="作废耗卡"
            description="标记为无效并级联作废品项、业绩、人次，数据保留可查询。按钮权限编码：btn_cancel。"
            :days.sync="form.adminConsumeVoidEditableDays"
          />
          <ConfigRuleRow
            title="删除耗卡"
            description="物理删除耗卡及关联子表数据，不可恢复。按钮权限编码：btn_remove。"
            :days.sync="form.adminConsumeDeleteEditableDays"
          />
        </el-card>
      </el-collapse-item>

      <el-collapse-item name="sleepRemind">
        <template slot="title">
          <span class="module-title">
            <i class="el-icon-bell module-icon module-icon--sleep"></i>
            沉睡提醒
          </span>
        </template>

        <el-card shadow="never" class="config-section">
          <div slot="header" class="config-section__header">
            <span>门店PC端</span>
            <span class="config-section__tag">会员管理</span>
          </div>
          <p class="config-section__tip">
            设置沉睡会员提醒天数，超过该天数未消费的会员将在门店PC端显示在沉睡提醒列表中。
          </p>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="沉睡天数" prop="sleepRemindDays" label-width="100px">
                <el-input-number
                  v-model="form.sleepRemindDays"
                  :min="1"
                  :max="365"
                  :precision="0"
                  :step="1"
                  controls-position="right"
                />
                <span class="field-suffix">天</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import ConfigRuleRow from './config-rule-row'

export default {
  name: 'BusinessConfigPanel',
  components: { ConfigRuleRow },
  props: {
    form: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    saving: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeModules: ['consume']
    }
  }
}
</script>

<style lang="scss" scoped>
.business-config-panel {
  padding-top: 4px;

  &__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  &__save {
    flex-shrink: 0;
    width: 100px;
  }

  &__collapse {
    border: none;

    >>> .el-collapse-item__header {
      height: 48px;
      line-height: 48px;
      font-size: 15px;
      font-weight: 500;
      border-bottom: 1px solid #ebeef5;
    }

    >>> .el-collapse-item__wrap {
      border-bottom: none;
    }

    >>> .el-collapse-item__content {
      padding: 16px 0 8px;
    }
  }
}

.module-title {
  display: inline-flex;
  align-items: center;
}

.module-icon {
  margin-right: 8px;
  font-size: 16px;

  &--consume {
    color: #409EFF;
  }

  &--sleep {
    color: #E6A23C;
  }
}

.config-section {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;

  &:last-child {
    margin-bottom: 0;
  }

  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }

  &__tag {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    background: #f4f4f5;
    color: #909399;
    font-size: 12px;
    font-weight: normal;
  }

  &__tip {
    margin: 0 0 12px;
    color: #909399;
    font-size: 13px;
    line-height: 1.6;
  }
}

.field-suffix {
  margin-left: 8px;
  color: #909399;
  font-size: 13px;
}
</style>