tangguo_admin/src/views/moduleConfManagement/moduleList/index.vue

<template>
  <div class="tag-box">
    <!--操作栏-->
    <div class="action-bar">
      <el-input
        placeholder="请输入专题ID"
        v-model="params.id"
        clearable
        size="small"
        class="param-input"
      ></el-input>
      <el-input
        placeholder="请输入模块名称"
        v-model="params.moduleName"
        clearable
        size="small"
        class="param-input"
      ></el-input>
      <el-input
        placeholder="请输入亚模块名称"
        v-model="params.subModuleName"
        clearable
        size="small"
        class="param-input"
      ></el-input>
      <el-select
        v-model="params.type"
        placeholder="请选择类型"
        clearable
        size="small"
      >
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="params.showType"
        placeholder="请选择展示类型"
        clearable
        size="small"
      >
        <el-option
          v-for="item in showTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="params.status"
        placeholder="请选择是否启用"
        clearable
        size="small"
      >
        <el-option
          v-for="item in enables"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="getModules('status')"
        style="margin-right: 20px"
        >搜索</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="addAndEdit('add')"
        style="margin-right: 20px"
        >新增</el-button
      >
      <el-button
        type="warning"
        size="small"
        @click="setMarquee()"
        style="margin-right: 20px"
        >配置模块跑马灯</el-button
      >
    </div>
    <!--数据表格-->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      ref="multipleTable"
      height="600"
    >
      <el-table-column prop="id" label="专题id" align="center" min-width="210">
        <template slot-scope="scope">
          <span>{{ scope.row.id || "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建时间"
        align="center"
        min-width="180"
      >
        <template slot-scope="scope">
          <span>{{ changeTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="deletedAt"
        label="删除时间"
        align="center"
        min-width="180"
      >
        <template slot-scope="scope">
          <span>{{ changeTime(scope.row.deletedAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="moduleName"
        label="模块名称"
        align="center"
        min-width="150"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.moduleName || "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sectionLimit"
        label="专题数量限制"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sectionLimit || "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sortNum"
        label="排序"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sortNum || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center" min-width="120">
        <template slot-scope="scope">
          <el-tag type="success">{{ typeFilter(scope.row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="showType"
        label="展示类型"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(scope.row.showType, showTypes)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="showChosenVideo"
        label="是否展示精选视频"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(
              scope.row.haiJiaoStyle.showChosenVideo,
              showChosenVideoOptions,
            )
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="defaultShow"
        label="列表展示样式"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(
              scope.row.haiJiaoStyle.defaultShow,
              defaultShowOptions,
            )
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sortShow"
        label="排序规则展示样式"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(scope.row.haiJiaoStyle.sortShow, sortShowOptions)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sectionStyle"
        label="专题展示样式"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(
              scope.row.haiJiaoStyle.sectionStyle,
              sectionStyleOptions,
            )
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="AI广场类型" align="center" min-width="120">
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(
              scope.row.aiPlazaStyle.type,
              aiPlazaStyleTypeOptions,
            )
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="pureVersion"
        label="是否纯净版"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.pureVersion">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="封面" align="center" min-width="120" prop="cover">
        <template slot-scope="scope">
          <img-load
            :width="'111px'"
            :height="'50px'"
            :src="imgUrl + scope.row.cover"
            v-if="scope.row.cover"
          >
          </img-load>
          <span v-else style="color: #838F9B">暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column
        label="AI广场类型是否选中"
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            commonTypeFilter(
              scope.row.aiPlazaStyle.select,
              aiPlazaStyleSelectOptions,
            )
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 0">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="subModuleName"
        label="亚模块名称"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.subModuleName || "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        label="修改时间"
        align="center"
        min-width="180"
      >
        <template slot-scope="scope">
          <span>{{ changeTime(scope.row.updatedAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-edit"
            @click="addAndEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :page-sizes="[10, 15, 20, 30]"
      :current-page="params.pageNumber"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="changeSize"
      @current-change="changeCurrent"
    ></el-pagination>
    <!-- 新增、修改 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="680px"
      @before-close="handleClose"
    >
      <el-form :model="form" label-width="140px" :rules="rules" ref="form">
        <el-form-item label="模块名称" prop="moduleName">
          <el-input v-model="form.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="亚模块名称" prop="subModuleName">
          <el-input v-model="form.subModuleName"></el-input>
        </el-form-item>
        <el-form-item label="数量限制" prop="sectionLimit">
          <el-input v-model.number="form.sectionLimit"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sortNum">
          <el-input v-model.number="form.sortNum"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="form.type"
            @change="form.defaultTagId == ''"
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="默认标签"
          prop="defaultTagId"
          v-if="form.type == 2"
        >
          <el-input
            v-model.trim="form.defaultTagId"
            placeholder="请输入标签ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="展示类型">
          <el-select v-model="form.showType" placeholder="请选择展示类型">
            <el-option
              v-for="item in showTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示精选视频">
          <el-select
            v-model="form.haiJiaoStyle.showChosenVideo"
            placeholder="请选择是否展示精选视频"
          >
            <el-option
              v-for="item in showChosenVideoOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列表展示样式">
          <el-select
            v-model="form.haiJiaoStyle.defaultShow"
            placeholder="请选择列表展示样式"
          >
            <el-option
              v-for="item in defaultShowOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则展示样式">
          <el-select
            v-model="form.haiJiaoStyle.sortShow"
            placeholder="请选择排序规则展示样式"
          >
            <el-option
              v-for="item in sortShowOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专题展示类型">
          <el-select
            v-model="form.haiJiaoStyle.sectionStyle"
            placeholder="请选择专题展示类型"
          >
            <el-option
              v-for="item in sectionStyleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则展示样式1">
          <el-select
            v-model="sortShowOption1.val"
            placeholder="请选择排序规则展示样式"
          >
            <el-option
              v-for="item in sortRules"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则展示样式2">
          <el-select
            v-model="sortShowOption2.val"
            placeholder="请选择排序规则展示样式"
          >
            <el-option
              v-for="item in sortRules"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则展示样式3">
          <el-select
            v-model="sortShowOption3.val"
            placeholder="请选择排序规则展示样式"
          >
            <el-option
              v-for="item in sortRules"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则展示样式4">
          <el-select
            v-model="sortShowOption4.val"
            placeholder="请选择排序规则展示样式"
          >
            <el-option
              v-for="item in sortRules"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-for="(option, index) in sortRuleSlots">
          <template v-if="option.val === 2">
            <el-form-item :key="'refresh-' + index" :label="`规则${index + 1}刷新模式`">
              <el-select v-model="option.refreshMode" placeholder="请选择刷新模式">
                <el-option
                  v-for="item in refreshModeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="option.refreshMode === 'RANDOM_TOP_N'"
              :key="'candidate-' + index"
              :label="`规则${index + 1}随机候选数`"
            >
              <el-input-number
                v-model="option.randomCandidateN"
                :min="1"
                :max="30"
              ></el-input-number>
            </el-form-item>
          </template>
        </template>
        <el-form-item label="上线时间">
          <el-date-picker
            type="datetime"
            v-model="form.onlineAt"
            placeholder="请选择上线时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="下线时间">
          <el-date-picker
            type="datetime"
            v-model="form.offlineAt"
            placeholder="请选择下线时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排除最新">
          <el-switch v-model="form.excludeLatest"></el-switch>
        </el-form-item>
        <el-form-item label="排除推荐">
          <el-switch v-model="form.excludeRecommend"></el-switch>
        </el-form-item>
        <el-form-item label="排除搜索">
          <el-switch v-model="form.excludeSearch"></el-switch>
        </el-form-item>
        <el-form-item label="非活跃仅搜索可见">
          <el-switch v-model="form.searchOnlyWhenInactive"></el-switch>
        </el-form-item>
        <el-form-item label="AI广场类型">
          <el-select
            v-model="form.aiPlazaStyle.type"
            placeholder="请选择AI广场类型"
          >
            <el-option
              v-for="item in aiPlazaStyleTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否纯净版">
          <el-select v-model="form.pureVersion" placeholder="请选择是否纯净版">
            <el-option
              v-for="item in pureVersions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面:" prop="cover">
          <base-upload
            class="upload"
            :cover="form.cover"
            :action="action"
            wSize="222"
            hSize="100"
            :width="'111px'"
            :height="'50px'"
            @successCallback="handleAvatarSuccess"
          ></base-upload>
        </el-form-item>

        <el-form-item label="AI广场类型是否选中">
          <el-select v-model="form.aiPlazaStyle.select" placeholder="请选择">
            <el-option
              v-for="item in aiPlazaStyleSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select v-model="form.status" placeholder="请选择是否启用">
            <el-option
              v-for="item in enables"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 配置跑马灯 -->
    <el-dialog
      title="配置跑马灯"
      :visible.sync="marqueeVisible"
      width="500px"
      @before-close="handleClose"
      v-loading="marqueeLoading"
    >
      <el-form :model="marqueeForm" :rules="rules" ref="form">
        <el-form-item label="跑马灯内容" prop="marqueeStr">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            class="inp"
            v-model="marqueeForm.marqueeStr"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="marqueeVisible = false">取 消</el-button>
        <el-button type="primary" @click="editMarquee()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api";
import { uniteDate } from "@/utils/validator.js";
import baseConfig from "@/utils/serverUrlConfig";

export default {
  data() {
    return {
      imgUrl: baseConfig.imgUrl,
      // 封面上传地址
      action: baseConfig.baseServerUrl + "/vid/uploadStatic",
      // 表格数据加载动画
      loading: false,
      enables: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
      // 列表数据
      tableData: [],
      total: 0,
      params: {
        pageNumber: 1,
        pageSize: 10,
        excludeSearch: false,
      },
      form: {
        id: "",
        moduleName: "",
        subModuleName: "",
        sectionLimit: undefined,
        sortNum: undefined,
        showType: 1,
        type: 1,
        status: 1,
        haiJiaoStyle: {
          sectionStyle: 0,
          sortShow: 0,
          defaultShow: 0,
          showChosenVideo: 0,
          sortRules: undefined, // 排序规则
        },
        aiPlazaStyle: {
          type: undefined,
          select: true,
        },
        defaultTagId: "",
        cover: "",
        pureVersion: false,
        onlineAt: "",
        offlineAt: "",
        excludeLatest: false,
        excludeRecommend: false,
        excludeSearch: false,
        searchOnlyWhenInactive: false,
      },
      types: [
        { label: "首页", value: 1 },
        { label: "社区", value: 2 },
        { label: "暗网", value: 3 },
        { label: "动画", value: 4 },
        { label: "漫画", value: 5 },
        { label: "小说", value: 6 },
        { label: "黄游", value: 7 },
        { label: "图集", value: 8 },
        { label: "短视频", value: 9 },
        // { label: "私密圈", value: 10 },
        { label: "AI广场", value: 11 },
        { label: "短剧", value: 12 },
      ],
      showTypes: [
        // { label: "首页最新推荐展示类型", value: 1 },
        { label: "模块普通海角系样式", value: 1 },
        { label: "全专题组合样式", value: 2 },
        // { label: "(17岁)单排专题横滑动展示", value: 4 },
        // { label: "女优网黄展示样式", value: 5 },
      ],
      showChosenVideoOptions: [
        { label: "不展示", value: 0 },
        { label: "展示", value: 1 },
      ],
      defaultShowOptions: [
        { label: "双排", value: 0 },
        { label: "单排", value: 1 },
      ],
      sortShowOptions: [
        { label: "展示", value: 1 },
        { label: "不展示", value: 0 },
      ],
      sectionStyleOptions: [
        { label: "17岁专题", value: 1 },
        { label: "女优专题", value: 2 },
        { label: "网黄专题", value: 3 },
        { label: "普通专题", value: 4 },
        // { label: "厂牌专题", value: 5 },
        { label: "不展示", value: 0 },
      ],
      aiPlazaStyleTypeOptions: [
        { label: "全部", value: 0 },
        { label: "ai图片换脸", value: 1 },
        { label: "ai视频换脸", value: 2 },
        { label: "ai脱衣", value: 3 },
        { label: "ai图生视频", value: 4 },
        { label: "ai绘画", value: 5 },
      ],
      aiPlazaStyleSelectOptions: [
        { label: "选中", value: true },
        { label: "未选中", value: false },
      ],
      sortRules: [
        {
          name: "最新上架",
          value: 1,
        },
        {
          name: "热门推荐",
          value: 2,
        },
        {
          name: "最多收藏",
          value: 7,
        },
        {
          name: "最新热评",
          value: 9,
        },
      ],
      sortShowOption1: {
        val: 1,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      },
      sortShowOption2: {
        val: 2,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      },
      sortShowOption3: {
        val: 7,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      },
      sortShowOption4: {
        val: 9,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      },
      refreshModeOptions: [
        { label: "默认", value: "DEFAULT" },
        { label: "热门随机刷新", value: "RANDOM_TOP_N" },
      ],
      pureVersions: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
      dialogVisible: false,
      dialogTitle: "",
      rules: {
        moduleName: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
        ],
        subModuleName: [
          { required: true, message: "请输入亚模块名称", trigger: "blur" },
        ],
        sectionLimit: [
          { required: true, message: "请输入数量限制", trigger: "blur" },
        ],
        marqueeStr: [
          { required: true, message: "请输入跑马灯内容", trigger: "blur" },
        ],
      },
      // 跑马灯
      marqueeLoading: false,
      marqueeVisible: false,
      marqueeForm: {
        marqueeStr: "",
      },
    };
  },
  created() {
    this.getModules();
  },
  computed: {
    sortRuleSlots() {
      return [
        this.sortShowOption1,
        this.sortShowOption2,
        this.sortShowOption3,
        this.sortShowOption4,
      ];
    },
  },
  methods: {
    normalizeSortRuleOption(rule, defaultVal) {
      const val = rule && rule.val !== undefined ? rule.val : defaultVal;
      const meta = this.sortRules.find((item) => item.value === val) || {};
      return {
        val,
        refreshMode: rule && rule.refreshMode ? rule.refreshMode : "DEFAULT",
        randomCandidateN:
          rule && rule.randomCandidateN !== undefined
            ? rule.randomCandidateN
            : 30,
        name: (rule && rule.name) || meta.name || "",
      };
    },
    buildSortRulePayload(option) {
      const meta = this.sortRules.find((item) => item.value === option.val) || {};
      const payload = {
        val: option.val,
        name: meta.name || option.name || "",
        refreshMode:
          option.val === 2 ? option.refreshMode || "DEFAULT" : "DEFAULT",
      };
      if (payload.refreshMode === "RANDOM_TOP_N") {
        payload.randomCandidateN = option.randomCandidateN || 30;
      }
      return payload;
    },
    buildSortRulesPayload() {
      return this.sortRuleSlots.map((option) => this.buildSortRulePayload(option));
    },
    getModuleExtraFields(isEdit) {
      const extra = {
        excludeLatest: this.form.excludeLatest,
        excludeRecommend: this.form.excludeRecommend,
        excludeSearch: this.form.excludeSearch,
        searchOnlyWhenInactive: this.form.searchOnlyWhenInactive,
      };
      // 文档约定：省略 onlineAt/offlineAt 表示保留旧值；清空需显式传 clear*
      if (this.form.onlineAt) {
        extra.onlineAt = this.form.onlineAt;
      } else if (isEdit) {
        extra.clearOnlineAt = true;
      }
      if (this.form.offlineAt) {
        extra.offlineAt = this.form.offlineAt;
      } else if (isEdit) {
        extra.clearOfflineAt = true;
      }
      return extra;
    },
    // 标签封面上传成功回掉
    handleAvatarSuccess(res) {
      this.form.cover = res.data.coverImg;
    },
    typeFilter(v) {
      let item = this.types.find((item) => item.value == v);
      if (item && item.label) return item.label;
      return "";
    },
    commonTypeFilter(v, options) {
      return (options.find((item) => item.value == v) || {}).label;
    },
    // 请求列表
    getModules(type) {
      if (type === "status") {
        this.params.pageNumber = 1;
      }
      API.getModules(this.params)
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.tableData = [];
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 新增标签配置
    addAndEdit(param) {
      this.dialogVisible = true; // 打开新增、编辑对话框
      if (param === "add") {
        this.dialogTitle = "新增";
      } else {
        this.dialogTitle = "编辑";
        // 把数据回显给表单
        this.form.id = param.id;
        this.form.moduleName = param.moduleName;
        this.form.subModuleName = param.subModuleName;
        this.form.sectionLimit = param.sectionLimit;
        this.form.status = param.status;
        this.form.type = param.type;
        this.form.showType = param.showType;
        this.form.defaultTagId = param.defaultTagId || "";
        this.form.cover = param.cover;
        this.form.haiJiaoStyle.showChosenVideo =
          param.haiJiaoStyle.showChosenVideo;
        this.form.haiJiaoStyle.defaultShow = param.haiJiaoStyle.defaultShow;
        this.form.haiJiaoStyle.sortShow = param.haiJiaoStyle.sortShow;
        this.form.haiJiaoStyle.sectionStyle = param.haiJiaoStyle.sectionStyle;
        this.form.aiPlazaStyle = param.aiPlazaStyle;
        this.form.sortNum = param.sortNum ? param.sortNum : undefined;
        if (param.haiJiaoStyle.sortRules) {
          this.sortShowOption1 = this.normalizeSortRuleOption(
            param.haiJiaoStyle.sortRules[0],
            1,
          );
          this.sortShowOption2 = this.normalizeSortRuleOption(
            param.haiJiaoStyle.sortRules[1],
            2,
          );
          this.sortShowOption3 = this.normalizeSortRuleOption(
            param.haiJiaoStyle.sortRules[2],
            7,
          );
          this.sortShowOption4 = this.normalizeSortRuleOption(
            param.haiJiaoStyle.sortRules[3],
            9,
          );
        }
        this.form.onlineAt = param.onlineAt || "";
        this.form.offlineAt = param.offlineAt || "";
        this.form.excludeLatest = !!param.excludeLatest;
        this.form.excludeRecommend = !!param.excludeRecommend;
        this.form.excludeSearch = !!param.excludeSearch;
        this.form.searchOnlyWhenInactive = !!param.searchOnlyWhenInactive;
        this.form.pureVersion = param.pureVersion;
      }
    },
    // 新增、修改提交
    onSubmit() {
      if (this.dialogTitle === "新增") {
        this.add();
      } else {
        this.edit();
      }
    },
    // 新增方法
    add() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.haiJiaoStyle.sortRules = this.buildSortRulesPayload();
          const addData = {
            moduleName: this.form.moduleName,
            subModuleName: this.form.subModuleName,
            sectionLimit: this.form.sectionLimit,
            status: this.form.status,
            type: this.form.type,
            showType: this.form.showType,
            defaultTagId: this.form.defaultTagId,
            haiJiaoStyle: this.form.haiJiaoStyle,
            aiPlazaStyle: this.form.aiPlazaStyle,
            cover: this.form.cover,
            pureVersion: this.form.pureVersion,
            ...this.getModuleExtraFields(false),
          };
          API.addModule(addData, ["defaultTagId"])
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "新增成功",
                });
                this.dialogVisible = false;
                this.getModules();
              } else {
                this.$message({
                  type: "error",
                  message: "新增失败",
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "服务器异常",
              });
            });
        } else {
          return false;
        }
      });
    },
    // 修改方法
    edit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.haiJiaoStyle.sortRules = this.buildSortRulesPayload();
          const editData = {
            ...this.form,
            ...this.getModuleExtraFields(true),
          };
          // 避免空字符串 onlineAt/offlineAt 与 clear* 并存
          if (!this.form.onlineAt) delete editData.onlineAt;
          if (!this.form.offlineAt) delete editData.offlineAt;
          API.editModule(editData, ["defaultTagId"])
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功",
                });
                this.dialogVisible = false;
                this.getModules();
              } else {
                this.$message({
                  type: "error",
                  message: "编辑失败",
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "服务器异常",
              });
            });
        } else {
          return false;
        }
      });
    },
    // 删除方法
    del(param) {
      this.$confirm(
        `确认是否删除<span style='color:blue'>${param.moduleName}</span>, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true,
        },
      )
        .then(() => {
          let delData = {
            id: param.id,
          };
          API.deleteModule(delData)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "success",
                  message: "删除失败!",
                });
              }
              this.getModules();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "服务器异常!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭窗口清除数据
    handleClose() {
      this.form.moduleName = "";
      this.form.subModuleName = "";
      this.form.sectionLimit = undefined;
      this.form.sortNum = undefined;
      this.form.showType = 1;
      this.form.defaultTagId = "";
      (this.form.cover = ""), (this.form.haiJiaoStyle.showChosenVideo = 0);
      this.form.haiJiaoStyle.defaultShow = 0;
      this.form.haiJiaoStyle.sortShow = 0;
      this.form.haiJiaoStyle.sectionStyle = 0;
      this.form.aiPlazaStyle.type = undefined;
      this.form.aiPlazaStyle.select = true;
      this.form.type = 1;
      this.form.status = 1;
      this.form.pureVersion = false;
      this.form.onlineAt = "";
      this.form.offlineAt = "";
      this.form.excludeLatest = false;
      this.form.excludeRecommend = false;
      this.form.excludeSearch = false;
      this.form.searchOnlyWhenInactive = false;
      this.sortShowOption1 = {
        val: 1,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      };
      this.sortShowOption2 = {
        val: 2,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      };
      this.sortShowOption3 = {
        val: 7,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      };
      this.sortShowOption4 = {
        val: 9,
        refreshMode: "DEFAULT",
        randomCandidateN: 30,
      };
      this.dialogVisible = false;
      this.marqueeLoading = false;
      this.marqueeForm.marqueeStr = false;
    },
    // 配置跑马灯
    setMarquee() {
      this.marqueeVisible = true;
      this.marqueeLoading = true;
      API.queryMarquee()
        .then((res) => {
          if (res.code === 200) {
            this.marqueeForm.marqueeStr = res.data.content;
            this.marqueeLoading = false;
          } else {
            this.$message({
              type: "success",
              message: "查询失败!",
            });
            this.marqueeLoading = false;
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "服务器异常!",
          });
          this.marqueeLoading = false;
        });
    },
    // 修改跑马灯
    editMarquee() {
      if (!this.marqueeForm.marqueeStr) return;
      API.modifyMarquee({ marquee: this.marqueeForm.marqueeStr })
        .then((res) => {
          if (res.code === 200) {
            this.marqueeVisible = false;
            this.$message({
              type: "success",
              message: "修改成功",
            });
          } else {
            this.$message({
              type: "success",
              message: "修改失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "服务器异常!",
          });
        });
    },
    // 分页条数改变回调
    changeSize(size) {
      this.params.pageSize = size;
      this.getModules();
    },
    // 分页页码改变回调
    changeCurrent(pageNumber) {
      this.params.pageNumber = pageNumber;
      this.getModules();
    },
    // 更换时间格式
    changeTime(time) {
      return uniteDate(time);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}
::v-deep .el-form-item__content {
  display: flex;
}
</style>