ylrz_his_scrm_adminUI/src/views/app/role/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="queryParams.roleName" placeholder="请输入APP角色名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['app:role:add']">新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['app:role:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['app:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['app:role:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="APP角色名称" align="center" prop="roleName" />
      <el-table-column label="APP角色类型" align="center" prop="roleType">
        <template slot-scope="scope">
          <dict-tag :options="roleTypeOptions" :value="scope.row.roleType" />
        </template>
      </el-table-column>
      <el-table-column label="APP角色等级" align="center" prop="roleLevel" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['app:role:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['app:role:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改APP角色对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="APP角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入APP角色名称" />
        </el-form-item>
        <el-form-item label="注册奖励类型" prop="registerRewardType">
          <el-select v-model="form.registerRewardType" @change="registerRewardTypeChange" placeholder="请选择注册奖励类型">
            <el-option label="红包" :value="1" />
            <el-option label="积分" :value="2" />
            <el-option label="商品" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.registerRewardType == 1" label="注册-红包金额" prop="registerRedPacket">
          <el-input-number v-model="form.registerRedPacket" :precision="1" :step="1" :min="0.1" />
        </el-form-item>

        <el-form-item v-if="form.registerRewardType == 3" label="注册商品类型" prop="registerProductType">
          <el-select v-model="form.registerProductType" @change="registerProductTypeChange" placeholder="请选择注册商品类型">
            <el-option label="套餐包" :value="1" />
            <el-option label="商城商品" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.registerRewardType == 3 && form.registerProductType == 2" label="注册奖励商品"
          prop="registerProductId">
          <el-select v-model="form.registerProductId" filterable placeholder="请选择">
            <el-option v-for="item in productOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.registerRewardType == 3 && form.registerProductType == 1" label="注册-商品"
          prop="registerProductId">
          <el-select v-model="form.registerProductId" filterable placeholder="请选择">
            <el-option v-for="item in packagePrizeOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.registerRewardType == 2" label="注册-积分" prop="registerIntegral">
          <el-input-number v-model="form.registerIntegral" :step="1" :min="1" />
        </el-form-item>
        <el-form-item label="看课奖励有效天数" prop="courseDay">
          <el-input-number v-model="form.courseDay" :step="1" :min="1" />
        </el-form-item>
        <el-form-item label="看课奖励类型" prop="courseRewardType">
          <el-select v-model="form.courseRewardType" @change="courseRewardTypeChange" placeholder="请选择看课奖励类型">
            <el-option label="红包" :value="1" />
            <el-option label="积分" :value="2" />
            <el-option label="商品" :value="3" />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="form.courseRewardType == 3" label="看课奖励商品类型" prop="courseProductType">
          <el-select v-model="form.courseProductType" placeholder="请选择看课商品类型">
            <el-option label="套餐包" :value="1" />
            <el-option label="商城商品" :value="2" />
          </el-select>
        </el-form-item>



        <el-form-item v-if="form.courseRewardType == 3 && form.courseProductType == 2" label="看课-商品"
          prop="registerProductId">
          <el-select v-model="form.courseProductId" filterable placeholder="请选择">
            <el-option v-for="item in productOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.courseRewardType == 3 && form.courseProductType == 1" label="看课-商品"
          prop="registerProductId">
          <el-select v-model="form.courseProductId" filterable placeholder="请选择">
            <el-option v-for="item in packagePrizeOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.courseRewardType == 3" label="商品领取所需天数" prop="courseNeedDay">
          <el-input-number v-model="form.courseNeedDay" :step="1" :min="1" />
        </el-form-item>
        <el-form-item v-if="form.courseRewardType == 1 || form.courseRewardType == 2" label="红包/积分规则类型"
          prop="courseRewardRuleType">
          <el-select v-model="form.courseRewardRuleType" @change="courseRewardRuleTypeChange"
            placeholder="请选择红包/积分规则类型">
            <el-option label="平均" :value="1" />
            <el-option label="定制" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.courseRewardType == 1 && form.courseRewardRuleType == 1" label="平均每天红包金额" prop="courseRedPacket">
          <el-input-number v-model="form.courseRedPacket" :precision="1" :step="1" :min="0.1" />
        </el-form-item>
        <el-form-item v-if="form.courseRewardType == 2 && form.courseRewardRuleType == 1" label="平均每天积分" prop="courseIntegral">
          <el-input-number v-model="form.courseIntegral" :step="1" :min="1" />
        </el-form-item>

        <!-- 红包规则 -->
        <el-card v-if="form.courseRewardRuleType == 2 && form.courseRewardType == 1" class="box-card">
          <div slot="header" class="clearfix">
            <span>红包规则</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addItem">
              新增
            </el-button>
          </div>

          <!-- 列表展示区域 -->
          <div v-for="(item, index) in items" :key="index" class="item-row">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-input :value="'第' + item.day + '天'" disabled class="day-input">
                </el-input>
              </el-col>
              <el-col :span="12">
                <el-input-number v-model="item.value" placeholder="请输入金额" :precision="1" :step="1" :min="0.1" >  
                  <template slot="prepend">¥</template>
                </el-input-number>
              </el-col>
              <el-col :span="4">
                <el-button v-if="items.length > 1" type="danger" icon="el-icon-delete" circle size="small"
                  @click="removeItem(index)">
                </el-button>
              </el-col>
            </el-row>
          </div>

          <!-- 当没有数据时显示 -->
          <el-empty v-if="items.length === 0" description="请添加红包规则">
          </el-empty>

          <!-- 数据统计 -->
          <el-divider></el-divider>
          <div class="statistics">
            <el-tag type="success">总金额: {{ totalAmount }}</el-tag>
          </div>
        </el-card>

        <!-- 积分规则 -->
        <el-card v-if="form.courseRewardRuleType == 2 && form.courseRewardType == 2" class="box-card">
          <div slot="header" class="clearfix">
            <span>积分规则</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addItem">
              新增
            </el-button>
          </div>

          <!-- 列表展示区域 -->
          <div v-for="(item, index) in items" :key="index" class="item-row">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-input :value="'第' + item.day + '天'" disabled class="day-input">
                </el-input>
              </el-col>
              <el-col :span="12">
                <el-input-number v-model="item.value" clearable :step="1" :min="1" placeholder="请输入积分" />
              </el-col>
              <el-col :span="4">
                <el-button v-if="items.length > 1" type="danger" icon="el-icon-delete" circle size="small"
                  @click="removeItem(index)">
                </el-button>
              </el-col>
            </el-row>
          </div>

          <!-- 当没有数据时显示 -->
          <el-empty v-if="items.length === 0" description="请添加积分规则">
          </el-empty>

          <!-- 数据统计 -->
          <el-divider></el-divider>
          <div class="statistics">
            <el-tag type="success">总积分: {{ totalAmount }}</el-tag>
          </div>
        </el-card>

        <el-form-item label="角色等级" prop="roleLevel">
          <el-input-number v-model="form.roleLevel" clearable :step="1" :min="1" placeholder="请输入积分" />
        </el-form-item>
        <el-form-item label="角色类型" prop="roleType">
          <el-select v-model="form.roleType" @change="roleTypeChange" placeholder="请选择角色类型">
            <el-option label="通用" :value="1" />
            <el-option label="标签" :value="2" />
            <el-option label="套餐包" :value="3" />
            <el-option label="商城商品" :value="4" />
            <el-option label="标签+套餐包" :value="5" />
            <el-option label="标签+商城商品" :value="6" />
            <el-option label="标签+商品" :value="7" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.roleType == 2 || form.roleType == 5 || form.roleType == 6 || form.roleType == 7" label="角色标签" prop="roleTags">
          <el-select v-model="form.roleTags" filterable multiple placeholder="请选择角色标签">
            <el-option v-for="item in tagOptions" :key="item.tagId" :label="item.name" :value="item.tagId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.roleType == 3 || form.roleType == 5 || form.roleType == 7" label="角色套餐包" prop="rolePackageProductIds">
          <el-select v-model="form.rolePackageProductIds" filterable multiple placeholder="请选择角色套餐包">
            <el-option v-for="item in packageOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.roleType == 4 || form.roleType == 6 || form.roleType == 7" label="角色商城商品" prop="roleStoreProductIds">
          <el-select v-model="form.roleStoreProductIds" filterable multiple placeholder="请选择角色商城商品">
            <el-option v-for="item in productOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, exportRole } from "@/api/app/role";
import { packageOptions, packagePrizeOptions } from "@/api/his/package";
import { productOptions } from "@/api/hisStore/storeProduct";
import { tagOptions } from "@/api/qw/tag";

export default {
  name: "Role",
  data() {
    return {
      packagePrizeOptions: [],
      packageOptions: [],
      productOptions: [],
      tagOptions: [],

      roleTypeOptions: [
        { dictLabel: '通用', dictValue: '1' },
        { dictLabel: '标签', dictValue: '2' },
        { dictLabel: '套餐包', dictValue: '3' },
        { dictLabel: '商城商品', dictValue: '4' },
      ],
      // 初始数据：默认第一天，金额为空
      items: [

      ],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // APP角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: null,
        registerRewardType: null,
        registerRedPacket: null,
        registerProductId: null,
        registerProductType: null,
        registerIntegral: null,
        courseDay: null,
        courseRewardType: null,
        courseRedPacket: null,
        courseIntegral: null,
        courseProductType: null,
        courseProductId: null,
        courseNeedDay: null,
        courseRewardRuleType: null,
        courseRewardRule: null,
        roleLevel: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        registerRewardType: [
          { required: true, message: '请选择注册奖励类型', trigger: 'change' }
        ],
        registerRedPacket: [
          { required: true, message: '请输入注册红包金额', trigger: 'blur' },
        ],
        registerIntegral: [
          { required: true, message: '请输入注册积分', trigger: 'blur' },
        ],
        registerProductType: [
          { required: true, message: '请选择注册奖励商品类型', trigger: 'change' }
        ],
        registerProductId: [
          { required: true, message: '请选择注册奖励商品', trigger: 'change' }
        ],
        courseDay: [
          { required: true, message: '请输入看课奖励有效天数', trigger: 'blur' },
        ],
        courseRewardType: [
          { required: true, message: '请选择看课奖励类型', trigger: 'change' }
        ],
        courseRedPacket: [
          { required: true, message: '请输入看课红包金额', trigger: 'blur' },
        ],
        courseIntegral: [
          { required: true, message: '请输入看课积分', trigger: 'blur' },
        ],
        courseProductType: [
          { required: true, message: '请选择看课奖励商品类型', trigger: 'change' }
        ],
        courseProductId: [
          { required: true, message: '请选择看课奖励商品', trigger: 'change' }
        ],
        courseNeedDay: [
          { required: true, message: '请输入商品领取所需天数', trigger: 'blur' },
        ],
        courseRewardRuleType: [
          { required: true, message: '请选择红包/积分规则类型', trigger: 'change' }
        ],
        roleLevel: [
          { required: true, message: '请输入角色等级', trigger: 'blur' },
        ],
        roleType: [
          { required: true, message: '请选择角色类型', trigger: 'change' }
        ],
        roleTags: [
          { required: true, message: '请选择角色标签', trigger: 'change' }
        ],
        rolePackageProductIds: [
          { required: true, message: '请选择角色套餐包', trigger: 'change' }
        ],
        roleStoreProductIds: [
          { required: true, message: '请选择角色商城商品', trigger: 'change' }
        ],
      },
      packetAmount: null,
    };
  },
  created() {
    this.getList();
    productOptions().then(res => {
      this.productOptions = res.rows;
    });
    packageOptions().then(res => {
      this.packageOptions = res.rows;
    });
    tagOptions().then(res => {
      this.tagOptions = res.rows;
    });
    packagePrizeOptions().then(res => {
      this.packagePrizeOptions = res.rows;
    })
  },
  computed: {
    // 计算总金额
    totalAmount() {
      this.packetAmount = this.items.reduce((total, item) => {
        const amount = Number(item.value)
        return total + (isNaN(amount) ? 0 : amount)
      }, 0)
      console.log(this.packetAmount)
      return this.items.reduce((total, item) => {
        const amount = Number(item.value)
        return total + (isNaN(amount) ? 0 : amount)
      }, 0).toFixed(1);
    }
  },
  methods: {
    //注册奖励类型改变
    registerRewardTypeChange() {
      this.form.registerRedPacket = null;
      this.form.registerProductType = null;
      this.form.registerProductId = null;
      this.form.registerIntegral = null;
    },
    //注册商品类型改变
    registerProductTypeChange() {
      this.form.registerProductId = null;
    },

    //看课奖励类型改变
    courseRewardTypeChange() {
      this.items = [];
      this.form.courseRedPacket = null;
      this.form.courseIntegral = null;
      this.form.courseProductType = null;
      this.form.courseProductId = null;
      this.form.courseNeedDay = null;
      this.form.courseRewardRuleType = null;
    },
    courseRewardRuleTypeChange() {
      this.items = [];
    },
    roleTypeChange() {
      this.roleTags = [];
      this.roleStoreProductIds = [];
      this.rolePackageProductIds = [];
    },

    // 新增记录
    addItem() {
      const newDay = this.items.length + 1
      this.items.push({
        day: newDay,
        value: null
      })

      // 添加成功提示
      this.$message({
        message: `已添加第${newDay}天记录`,
        type: 'success',
        duration: 1500
      })
    },

    // 删除记录
    removeItem(index) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除选中的项
        this.items.splice(index, 1)

        // 重新排列天数
        this.reorderDays()

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 重新排列天数（保持连续）
    reorderDays() {
      this.items.forEach((item, index) => {
        item.day = index + 1
      })
    },

    // 获取所有数据（可用于提交）
    getFormData() {
      return this.items.map(item => ({
        day: item.day,
        amount: item.amount ? Number(item.amount) : null
      }))
    },

    /** 查询APP角色列表 */
    getList() {
      this.loading = true;
      listRole(this.queryParams).then(response => {
        this.roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        roleName: null,
        registerRewardType: null,
        registerRedPacket: null,
        registerProductId: null,
        registerProductType: null,
        registerIntegral: null,
        courseDay: null,
        courseRewardType: null,
        courseRedPacket: null,
        courseIntegral: null,
        courseProductType: null,
        courseProductId: null,
        courseNeedDay: null,
        courseRewardRuleType: null,
        courseRewardRule: null,
        roleLevel: null,
        roleTags: null,
        rolePackageProductIds: null,
        roleStoreProductIds: null,
        createTime: null,
        updateTime: null
      };
      this.items = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加APP角色";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getRole(id).then(response => {
        this.form = response.data;
        if (this.form.courseRewardRule) {
          this.items = this.form.courseRewardRule
        } else {
          this.items = []
        };
        this.open = true;
        this.title = "查看APP角色";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if ((this.form.courseRewardType == 1 || this.form.courseRewardType == 2)&&this.form.courseRewardRuleType == 2) {
        if (this.items.length > 0) {
          this.form.courseRewardRule = this.items;
        } else {
          this.$message.error("请完善红包/积分规则信息");
          return;
        }
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.courseRewardRuleType == 2) {
            if (this.items.length > 0) {
              this.form.courseRewardRule = this.items;
            }
          }
          if (this.form.id != null) {
            updateRole(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRole(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除APP角色编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delRole(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有APP角色数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportRole(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => { });
    }
  }
};
</script>
<style scoped>
.box-card {
  width: 100%;
}

.item-row {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.item-row:hover {
  background-color: #f5f7fa;
}

.day-input {
  font-weight: bold;
  color: #409EFF;
}

.statistics {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 修改el-input前缀样式 */
.el-input-group__prepend {
  background-color: #fff;
}
</style>