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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="课堂分类" prop="cateId">
        <el-select v-model="queryParams.cateId" placeholder="请选择" clearable size="small"
                   @change="getQuerySubCateList(queryParams.cateId)">
          <el-option
            v-for="dict in categoryOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课堂子分类" prop="subCateId">
        <el-select v-model="queryParams.subCateId" placeholder="请选择" clearable size="small">
          <el-option
            v-for="dict in querySubCateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课堂id" prop="courseId">
        <el-input
          v-model="queryParams.courseId"
          placeholder="请输入课堂id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="课堂名称" prop="courseName">
        <el-input
          v-model="queryParams.courseName"
          placeholder="请输入课堂名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="关联的公司" prop="companyIds">
        <el-select v-model="queryParams.companyIdsList" multiple placeholder="请选择公司" filterable clearable style="width: 90%;">
          <el-option
            v-for="dict in companyOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课堂类型" prop="isPrivate" style="display: none">
        <el-select v-model="queryParams.isPrivate" placeholder="请选择" clearable size="small">
          <el-option
            v-for="dict in courseTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </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="['course:userCourse: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="['course:userCourse: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="['course:userCourse: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="['course:userCourse:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

<!--    <el-table height="600" border v-loading="loading" :data="userCourseList" @selection-change="handleSelectionChange" style="width: 100%" :fit="true">-->
    <el-table max-height="600" border v-loading="loading" :data="userCourseList" @selection-change="handleSelectionChange" style="width: 100%" :fit="true">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="课程ID" align="center" prop="courseId" width="55"/>
      <el-table-column label="所属项目" align="center" prop="projectName" width="120"/>
      <el-table-column label="封面图片" align="center" prop="imgUrl" width="170">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover"
          >
            <img slot="reference" :src="scope.row.imgUrl" width="100">
            <img :src="scope.row.imgUrl" style="max-width: 300px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="课堂名称" align="center" show-overflow-tooltip prop="courseName" min-width="100"/>
      <el-table-column label="排序" align="center" prop="sort" width="80"/>
      <el-table-column label="分类名称" align="center" prop="cateName" width="120"/>
      <el-table-column label="子分类名称" align="center" prop="subCateName" width="120"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleCatalog(scope.row)"
            v-hasPermi="['course:userCourse:cateMange']"
          >目录管理
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['course:userCourse:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateRedPage(scope.row)"
            v-hasPermi="['course:userCourse:editRedPage']"
          >统一修改红包金额
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleCopy(scope.row)"
            v-hasPermi="['course:userCourse:copy']"
          >复制
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['course:userCourse:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isPrivate === 1"
            v-has-permi="['course:userCourse:editConfig']"
            @click="configCourse(scope.row)"
          >过程页配置
          </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"
    />

    <!-- 添加或修改课程对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-form-item label="所属项目" prop="project">
            <el-select v-model="form.project" placeholder="请选择项目" filterable clearable size="small">
              <el-option
                v-for="dict in projectOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="课堂名称" prop="courseName">
              <el-input v-model="form.courseName" placeholder="请输入课堂名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课堂分类" prop="cateId">
              <el-select v-model="form.cateId" placeholder="请选择" clearable size="small"
                         @change="getSubCateList(form.cateId)">
                <el-option
                  v-for="dict in categoryOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课堂子分类" prop="subCateId">
              <el-select v-model="form.subCateId" placeholder="请选择" clearable size="small">
                <el-option
                  v-for="dict in subCategoryOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
                          <el-input-number v-model="form.sort"  :min="0"  label="排序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="课堂简介" prop="description">
              <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入课堂简介"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课程封面" prop="imgUrl">
          <ImageUpload v-model="form.imgUrl" type="image" :num="10" :width="150" :height="150"/>
        </el-form-item>
        <el-form-item label="关联公司" prop="tags">
          <el-select v-model="companyIds" multiple placeholder="请选择公司" filterable clearable style="width: 90%;">
            <el-option
              v-for="dict in companyOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </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>


    <el-dialog title="修改课程红包金额" :visible.sync="openRedPage.open" width="1000px" append-to-body>
      <el-form ref="openRedPage" :model="openRedPage" :rules="rulesRedPage" label-width="110px">
        <el-form-item label="红包金额" prop="redPacketMoney">
          <el-input-number v-model="openRedPage.redPacketMoney" :min="0.1" :max="200" :step="0.1"></el-input-number>
        </el-form-item>
        <div v-if="!!enableRandomRedPacket" style=" display: flex;
                  flex-direction: column;">
             <div v-for="(rule, index) in openRedPage.rules" :key="index" class="form-row">
           <el-form-item
            label="随机红包金额区间"
            :prop="`rules.${index}.minAmount`"
            :rules="[
              { required: true, message: '请输入最小金额', trigger: 'blur' },
              { validator: validateMinAmount, trigger: 'blur', index: index }
            ]"
            class="form-item-amount"
          >
            <el-input
              v-model.number="rule.minAmount"
              type="number"
              :min="0.01"
              :precision="2"
              :step="0.01"
              placeholder="最小金额"
              size="small"
              class="amount-input"
              @input="handleAmountInput(rule, 'minAmount')"
            ></el-input>
            <span class="separator">-</span>
            <el-input
              v-model.number="rule.maxAmount"
              type="number"
              :min="rule.minAmount || 0.01"
              :precision="2"
              :step="0.01"
              placeholder="最大金额"
              size="small"
              class="amount-input"
              @input="handleAmountInput(rule, 'maxAmount')"
            ></el-input>
            <span class="suffix">元</span>
          </el-form-item>
              <el-form-item
                label="随机权重"
                :prop="`rules.${index}.weight`"
                :rules="[
                  { required: true, message: '请输入权重', trigger: 'blur' },
                  { type: 'integer', message: '权重必须为整数', trigger: 'blur' },
                ]"
                class="form-item-weight"
              >
                <el-input
                  v-model.number="rule.weight"
                  type="number"
                  :min="1"
                  placeholder="权重"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-tooltip class="item" effect="dark" content="权重越高，被随机到的概率越大" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              <div class="action-buttons">
                <el-button
                  icon="el-icon-plus"
                  size="mini"
                  type="text"
                  @click="addRule(index)"
                  class="add-btn"
                >
                  新增
                </el-button>
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  @click="deleteRule(index)"
                  :disabled="openRedPage.rules.length <= 1"
                  class="delete-btn"
                >
                  删除
                </el-button>
              </div>
            </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRedPage">确 定</el-button>
        <el-button @click="cancelRedPage">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 过程页配置 -->
    <el-dialog
      :visible.sync="configDialog.dialogVisible"
      title="过程页配置"
      append-to-body
      width="1200px"
    >
      <el-form :model="configDialog.form" :rules="configDialog.rules" ref="configForm" label-width="110px">
        <el-form-item label="过程页图片" prop="coverImg">
          <ImageUpload v-model="configDialog.form.coverImg" :height="150" :limit="1" :width="150" type="image"/>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 不配置将使用课程默认图片</span>
        </el-form-item>
        <el-form-item label="首播电视台" prop="tvEnable">
          <el-switch v-model="configDialog.form.tvEnable" active-color="#13ce66"/>
        </el-form-item>
        <el-form-item prop="tv" v-if="configDialog.form.tvEnable">
          <el-input v-model="configDialog.form.tv" clearable></el-input>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 多个首播电视台，请用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="网络播放平台" prop="networkEnable">
          <el-switch v-model="configDialog.form.networkEnable" active-color="#13ce66"/>
        </el-form-item>
        <el-form-item prop="network" v-if="configDialog.form.networkEnable">
          <el-input v-model="configDialog.form.network" clearable></el-input>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 多个网络播放平台，请用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="制作单位" prop="unitEnable">
          <el-switch v-model="configDialog.form.unitEnable" active-color="#13ce66"/>
        </el-form-item>
        <el-form-item prop="unit" v-if="configDialog.form.unitEnable">
          <el-input v-model="configDialog.form.unit" clearable></el-input>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 多个制作单位，请用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="专家顾问团队" prop="teamEnable">
          <el-switch v-model="configDialog.form.teamEnable" active-color="#13ce66"/>
        </el-form-item>
        <el-form-item prop="team" v-if="configDialog.form.teamEnable">
          <el-input v-model="configDialog.form.team" clearable></el-input>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 多个专家顾问，请用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="支持单位" prop="supportEnable">
          <el-switch v-model="configDialog.form.supportEnable" active-color="#13ce66"/>
        </el-form-item>
        <el-form-item prop="support" v-if="configDialog.form.supportEnable">
          <el-input v-model="configDialog.form.support" clearable></el-input>
          <i class="el-icon-warning"/>
          <span style="color: rgb(153, 169, 191)"> 多个支持单位，请用英文逗号隔开</span>
        </el-form-item>
        <el-form-item label="监督投诉电话" prop="complaintPhone">
          <el-input v-model="configDialog.form.complaintPhone" placeholder="请输入监督投诉电话" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"
                   :loading="configDialog.updating"
                   :disabled="configDialog.updating"
                   @click="submitConfigForm">确 定</el-button>
        <el-button @click="cancelConfig">取 消</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :with-header="false"
      size="75%"
      :title="show.title" :visible.sync="show.open" append-to-body>
      <userCourseCatalogDetails ref="userCourseCatalogDetails"/>
    </el-drawer>
  </div>
</template>

<script>
import {
  listUserCourse,
  getUserCourse,
  delUserCourse,
  addUserCourse,
  updateUserCourse,
  exportUserCourse,
  updateIsShow,
  copyUserCourse,
  putOn,
  pullOff, updateUserCourseRedPage,
  editConfig
} from '@/api/course/userCourse'

import {getSelectableRange} from "@/api/qw/sopTemp";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Editor from '@/components/Editor/wang';
import ImageUpload from '@/components/ImageUpload/index';
import {listBySearch} from "@/api/course/userTalent";
import userCourseCatalogDetails from '../../components/course/userCourseCatalogDetails.vue';
import {getAllCourseCategoryList, getCatePidList, getCateListByPid} from "@/api/course/userCourseCategory";
import {allList} from "@/api/company/company";
import VideoUpload from '@/components/VideoUpload/index.vue'
import { getConfigByKey } from '@/api/system/config'
export default {
  name: "UserCourse",
  components: {
    VideoUpload,
    Treeselect,
    Editor, ImageUpload, userCourseCatalogDetails
  },
  watch:{
  // 深度监听 rules 数组的变化，以更新总权重
    "openRedPage.rules": {
      handler(val) {
        // this.calculateTotalWeight();
        this.validateRules();
      },
      deep: true,
    },
  },
  data() {
    return {
      talentParam: {
        phone: null,
        talentId: null
      },
      talentList: [],
      startTimeRange: [],
      show: {
        title: "目录管理",
        open: false
      },
      activeName: "1",
      projectOptions: [],
      tagsOptions: [],
      tags: [],
      companyIds: [],
      courseTypeOptions: [],
      orOptions: [],
      specShowOptions: [],
      specTypeOptions: [],
      categoryOptions: [],
      subCategoryOptions: [],
      querySubCateOptions: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 课程表格数据
      userCourseList: [],
      companyOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openRedPage:{
        open:false,
        courseId:null,
        courseName:null,
        redPacketMoney:0.1,
        //随机红包配置
        rules:[
           {
            minAmount: 0.01,
            maxAmount: 0.01,
            weight: 100,
          }
        ]
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cateId: null,
        subCateId: null,
        title: null,
        imgUrl: null,
        userId: null,
        sort: null,
        status: null,
        isVip: null,
        isHot: null,
        isShow: "1",
        views: null,
        duration: null,
        description: null,
        hotRanking: null,
        integral: null,
        price: null,
        courseId: null,
        isPrivate: 1,
        companyIdsList:[],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        courseName: [
          {required: true, message: "课堂名称不能为空", trigger: "blur"}
        ],
        imgUrl: [
          {required: true, message: "封面图片不能为空", trigger: "blur"}
        ],
        isTui: [
          {required: true, message: "是否推荐不能为空", trigger: "blur"}
        ],
        isBest: [
          {required: true, message: "是否精选不能为空", trigger: "blur"}
        ],
        isFast: [
          {required: true, message: "是否允许快进不能为空", trigger: "blur"}
        ],
        isAutoPlay: [
          {required: true, message: "是否自动播放不能为空", trigger: "blur"}
        ],
        sort: [
          {required: true, message: "排序不能为空", trigger: "blur"}
        ],
        views: [
          {required: true, message: "播放量不能为空", trigger: "blur"}
        ],
        likes: [
          {required: true, message: "点赞数不能为空", trigger: "blur"}
        ],
        favoriteNum: [
          {required: true, message: "收藏数不能为空", trigger: "blur"}
        ],
        shares: [
          {required: true, message: "分享数不能为空", trigger: "blur"}
        ],
        isIntegral: [
          {required: true, message: "是否允许积分兑换不能为空", trigger: "blur"}
        ],
        isShow: [
          {required: true, message: "上架状态不能为空", trigger: "blur"}
        ],
        isPrivate: [
          {required: true, message: "公私域不能为空", trigger: "blur"}
        ],
        integral: [
          {required: true, message: "小节兑换积分不能为空", trigger: "blur"}
        ],
      },

      rulesRedPage:{
        redPacketMoney: [
          {required: true, message: "红包金额不能为空", trigger: "blur"}
        ],
      },
      configDialog: {
        dialogVisible: false,
        updating: false,
        form: {
          id: null,
          coverImg: null,
          tvEnable: 0,
          tv: null,
          networkEnable: 0,
          network: null,
          unitEnable: 0,
          unit: null,
          teamEnable: 0,
          team: null,
          supportEnable: 0,
          support: null,
          //监督投诉电话
          complaintPhone: null,
        },
        rules: {
          tv: [
            { required: true, message: '首播电视台不能为空', trigger: 'blur' }
          ],
          network: [
            { required: true, message: '网络播放平台不能为空', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '制作单位不能为空', trigger: 'blur' }
          ],
          team: [
            { required: true, message: '专家顾问团队不能为空', trigger: 'blur' }
          ],
          support: [
            { required: true, message: '支持单位不能为空', trigger: 'blur' }
          ],
        }
      },
      enableRandomRedPacket:false
    };
  },
  created() {
    this.getList();
    getConfigByKey('randomRedpacket:config').then(res=>{
        console.log("res::")
        console.log(res);
        let configData = res.data;
        if(!!configData && !!configData.configValue){
           let configValue = JSON.parse(configData.configValue);
           console.log(configValue);
           if(!!configValue.enableRandomRedpacket){
            this.enableRandomRedPacket = configValue.enableRandomRedpacket;
           }
        }
    }).catch(res=>{

    })
    getCatePidList().then(response => {
      this.categoryOptions = response.data;
    });


    getSelectableRange().then(e => {
      this.startTimeRange = e.data;
    })
    // this.getTreeselect();
    this.getDicts("sys_spec_show").then(response => {
      this.specShowOptions = response.data;
    });
    this.getDicts("sys_spec_type").then(response => {
      this.specTypeOptions = response.data;
    });
    this.getDicts("sys_course_type").then(response => {
      this.courseTypeOptions = response.data;
    });
    this.getDicts("sys_course_project").then(response => {
      this.projectOptions = response.data;
    });
    this.getDicts("sys_course_tags").then(response => {
      this.tagsOptions = response.data;
    });
    this.getDicts("sys_company_or").then(response => {
      this.orOptions = response.data;
    });
    allList().then(response => {
      this.companyOptions = response.rows;
    });
  },
  methods: {
    selectTalent() {

    },
    talentMethod(query) {
      if (query !== '') {
        this.talentParam.phone = query;
        listBySearch(this.talentParam).then(response => {
          this.talentList = response.data;
        });
      }
    },
    getSubCateList(pid) {
      this.form.subCateId = null;
      if (pid == '') {
        this.subCategoryOptions = [];
        return
      }
      getCateListByPid(pid).then(response => {
        this.subCategoryOptions = response.data;
      });
    },
    getQuerySubCateList(pid) {
      this.queryParams.subCateId = null;
      if (pid == '') {
        this.querySubCateOptions = [];
        return
      }
      this.queryParams.subCateId = null;
      getCateListByPid(pid).then(response => {
        this.querySubCateOptions = response.data;
      });
    },
    handleShow(row) {
      var isShowValue = row.isShow === 0 ? 1 : 0;
      var course = {courseId: row.courseId, isShow: isShowValue};
      updateIsShow(course).then(response => {
        this.msgSuccess("修改成功");
        this.getList();
      });
    },
    handleCatalog(row) {
      const courseId = row.courseId;
      this.show.open = true;
      setTimeout(() => {
        this.$refs.userCourseCatalogDetails.getDetails(courseId, row.courseName, row.isPrivate);
      }, 200);
    },
    /** 转换课堂分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.cateId,
        label: node.cateName,
        children: node.children
      };
    },
    getTreeselect() {
      getAllCourseCategoryList().then(response => {
        this.categoryOptions = [];
        const data = this.handleTree(response.data, "cateId", "pid");
        this.categoryOptions = data;
      });
    },
    /** 查询课程列表 */
    getList() {
      this.loading = true;
      listUserCourse(this.queryParams).then(response => {
        this.userCourseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        courseId: null,
        cateId: null,
        subCateId: null,
        title: null,
        imgUrl: null,
        secondImg: null,
        userId: null,
        sort: null,
        createTime: null,
        updateTime: null,
        status: 0,
        isVip: null,
        isAutoPlay: "1",
        isIntegral: "0",
        isShow: "1",
        isFast: "1",
        isTui: "1",
        isBest: "1",
        isNext: "1",
        isPrivate: "1",
        views: 100000,
        duration: null,
        description: null,
        hotRanking: null,
        integral: null,
        price: null,
        likes: 100000,
        shares: 100000,
        favoriteNum: 100000,
        hotNum: 100000,
      };
      this.tags = [];
      this.subCategoryOptions = []
      this.companyIds = []
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.companyIdsList = [];
      this.queryParams.isShow = this.activeName
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.courseId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.talentList = [];
      this.open = true;
      this.title = "添加课程";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.talentList = [];
      const courseId = row.courseId || this.ids
      getUserCourse(courseId).then(response => {
        this.form = response.data;
        // this.form.cateId = response.data.cateId.toString();
        if (this.form.cateId) {
          getCateListByPid(this.form.cateId).then(response => {
            this.subCategoryOptions = response.data;
          });
        }
        // this.form.courseType = response.data.courseType.toString();
        if (response.data.project != null) {
          this.form.project = response.data.project.toString();
        }
        if (response.data.tags != null) {
          this.tags = response.data.tags.split(",")
        }
        this.form.isAutoPlay = response.data.isAutoPlay.toString();
        this.form.isShow = response.data.isShow.toString();
        this.form.isBest = response.data.isBest.toString();
        this.form.isFast = response.data.isFast.toString();
        this.form.isIntegral = response.data.isIntegral.toString();
        this.form.isTui = response.data.isTui.toString();
        this.form.isNext = response.data.isNext.toString();
        this.form.isPrivate = response.data.isPrivate.toString();
        this.talentParam.talentId = response.data.talentId;
        if (this.form.companyIds != null) {
          this.companyIds = ((this.form.companyIds).split(",").map(Number))
        } else {
          this.companyIds = []
        }

        listBySearch(this.talentParam).then(response => {
          this.talentList = response.data;
        });
        this.open = true;
        this.title = "修改课程";
      });
    },

    handleUpdateRedPage(row){
      this.openRedPage.open=true;
      this.openRedPage.courseId=row.courseId;
      this.openRedPage.courseName=row.courseName;

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {

          this.form.companyIds = this.companyIds.toString()
          // 私域课程
          this.form.isPrivate = 1
          if (this.form.courseId != null) {
            updateUserCourse(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUserCourse(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    submitFormRedPage(){

      const courseId = this.openRedPage.courseId;
      const redPacketMoney = this.openRedPage.redPacketMoney;
      let randomRedPacketRules = JSON.stringify( this.openRedPage.rules);
      console.log(randomRedPacketRules)
      this.$confirm('是否确认将课程id 为"' + courseId + '"的红包批量修改为：【'+redPacketMoney+'】?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateUserCourseRedPage({courseId:courseId,redPacketMoney:redPacketMoney,randomRedPacketRules:randomRedPacketRules});
      }).then(() => {
        this.getList();
        this.msgSuccess("修改成功");
        this.openRedPage.open=false;
      }).finally(() => {
        this.getList();
        this.openRedPage.open=false;
      });

    },
    cancelRedPage(){
      this.openRedPage.open=false;
    },

    /** 复制按钮操作 */
    handleCopy(row) {
      const courseId = row.courseId;
      this.$confirm('是否确认复制课程编号为"' + courseId + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return copyUserCourse(courseId);
      }).then(() => {
        this.getList();
        this.msgSuccess("复制成功");
      }).catch(() => {
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const courseIds = row.courseId || this.ids;
      this.$confirm('是否确认删除课程编号为"' + courseIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delUserCourse(courseIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有课程数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportUserCourse(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },
    putOn() {
      const courseIds = this.ids;
      if (courseIds == null || courseIds == "") {
        return this.$message("未选择课程");
      }
      this.$confirm('是否确认批量上架课程?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return putOn(courseIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("上架成功");
      }).catch(function () {
      });
    },
    pullOff() {
      const courseIds = this.ids;
      if (courseIds == null || courseIds == "") {
        return this.$message("未选择课程");
      }
      this.$confirm('是否确认批量下架课程?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return pullOff(courseIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("下架成功");
      }).catch(function () {
      });
    },
    configCourse(row) {
      if (row.configJson) {
        this.configDialog.form = {
          tvEnable: 0,
          networkEnable: 0,
          unitEnable: 0,
          teamEnable: 0,
          supportEnable: 0,
          ...JSON.parse(row.configJson)
        }
      }
      this.configDialog.form.id = row.courseId
      this.configDialog.dialogVisible = true;
      this.configDialog.updating = false
    },
    submitConfigForm() {
      this.$refs['configForm'].validate(valid => {
        if (!valid) {
          this.msgError('请完善配置内容')
          return
        }

        if (this.configDialog.updating) {
          return
        }
        this.configDialog.updating = true

        const content = {
          coverImg: this.configDialog.form.coverImg,
          tvEnable: this.configDialog.form.tvEnable,
          tv: this.configDialog.form.tv?.replace("，",","),
          networkEnable: this.configDialog.form.networkEnable,
          network: this.configDialog.form.network?.replace("，",","),
          unitEnable: this.configDialog.form.unitEnable,
          unit: this.configDialog.form.unit?.replace("，",","),
          teamEnable: this.configDialog.form.teamEnable,
          team: this.configDialog.form.team?.replace("，",","),
          supportEnable: this.configDialog.form.supportEnable,
          support: this.configDialog.form.support?.replace("，",","),
        }

        const params = {
          id: this.configDialog.form.id,
          configJson: JSON.stringify(content)
        }

        editConfig(params).then(() => {
          this.msgSuccess('修改成功')
          this.configDialog.dialogVisible = false;
          this.getList()
        }).finally(() => {
          setTimeout(() => {
            this.configDialog.updating = false
          }, 500)
        })
      })
    },
    cancelConfig() {
      this.configDialog.form = {
        id: null,
        coverImg: null,
        tvEnable: 0,
        tv: null,
        networkEnable: 0,
        network: null,
        unitEnable: 0,
        unit: null,
        teamEnable: 0,
        team: null,
        supportEnable: 0,
        support: null
      }
      this.resetForm('configForm')
      this.configDialog.dialogVisible = false;
    },
    // 实时过滤金额输入，只允许两位小数
    handleAmountInput(rule, field) {
      let value = rule[field];
      if (value === null || value === undefined) return;

      // 转换为字符串处理
      let str = value.toString();

      // 移除除数字和小数点外的所有字符
      str = str.replace(/[^0-9.]/g, '');

      // 只保留一个小数点
      const dotIndex = str.indexOf('.');
      if (dotIndex !== -1) {
        str = str.substring(0, dotIndex + 1) + str.substring(dotIndex + 1).replace(/\./g, '');
      }

      // 限制小数点后最多两位
      if (dotIndex !== -1 && str.length > dotIndex + 3) {
        str = str.substring(0, dotIndex + 3);
      }

      // 转换回数字并更新
      rule[field] = parseFloat(str) || 0;
    },
      deleteRule(index) {
      this.$confirm("确定要删除这个区间吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.openRedPage.rules.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
      addRule(index) {
      // 在当前行的后面插入一个新行
      this.openRedPage.rules.splice(index + 1, 0, {
        minAmount: 0.01,
        maxAmount: 0.01,
        weight: 100,
      });
    },
       // 自定义校验规则：确保最大金额大于最小金额
    validateMinAmount(rule, value, callback) {
      // debugger;
      // const maxAmount = this.form29.rules[].maxAmount

      const index = rule.index;
      const maxAmount = this.openRedPage.rules[index].maxAmount;

      if (value > maxAmount) {
        callback(new Error("最小金额不能大于最大金额"));
      } else {
        callback();
      }
    },
      validateRules() {
      this.openRedPage.rules.forEach((rule) => {
        if (rule.minAmount === undefined || rule.minAmount < 0.01) {
          rule.minAmount = 0.01;
        }
        if (rule.maxAmount === undefined || rule.maxAmount < rule.minAmount) {
          rule.maxAmount = rule.minAmount;
        }
        if (rule.weight === undefined || rule.weight < 1) {
          rule.weight = 1;
        }
      });
    },

  }
};
</script>