zc_saas_admin/src/views/systemManagement/systemConfig/videoConfig/index.vue

<template>
  <div id="videoConfig">
    <div class="boxWs">
      <header class="hedsa">视频播放</header>
      <div class="bigBoxs">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item
            v-for="(item, index) in listitem"
            :key="index"
            :label="item.configName"
          >
            <el-radio-group v-model="item.configValue">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">禁止</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-button @click="submit" v-hasPermi="['system:config:edit']">保存</el-button>
      </div>
    </div>
    <div class="boxWs">
      <header class="hedsa">视频-课程节-拍照</header>
      <div class="bigBoxs">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item :label="videoActive.configName">
            <el-radio-group v-model="videoActive.configValue">
              <el-radio label="1" @change="videoPhotoJG.configValue.push(0)"
                >是</el-radio
              >
              <el-radio label="0" @change="videoPhotoJG.configValue = []"
                >否</el-radio
              >
            </el-radio-group>
            <el-button
              style="margin-left: 12px"
              size="mini"
              v-if="videoActive.configValue === '1'"
              @click="videoPhotoJG.configValue.push(0)"
              >添加</el-button
            >
          </el-form-item>
          <template v-if="videoActive.configValue == 1">
            <el-form-item
              v-for="(item, index) in videoPhotoJG.configValue"
              :key="index"
              label="播放至"
            >
              <el-input-number
                :controls="false"
                v-model="videoPhotoJG.configValue[index]"
                controls-position="right"
                :min="0"
              ></el-input-number
              >分钟
              <el-button type="warning" size="mini" @click="del(index)"
                >删除</el-button
              >
            </el-form-item>
          </template>
        </el-form>
        <el-button @click="submitVideo" >保存</el-button>
      </div>
    </div>
    <div class="boxWs">
      <header class="hedsa">视频-课程章节-关联题卷-拍照</header>
      <div class="bigBoxs">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item :label="bankActive.configName">
            <el-radio-group v-model="bankActive.configValue">
              <el-radio label="1"
                >是</el-radio
              >
              <el-radio label="0" @change="bankPhotoJG.configValue = []"
                >否</el-radio
              >
            </el-radio-group>
            <!-- <el-button
              style="margin-left: 12px"
              size="mini"
              v-if="bankActive.configValue === '1'"
              @click="bankPhotoJG.configValue.push(0)"
              >添加</el-button
            > -->
          </el-form-item>
          <template v-if="bankActive.configValue == 1">
            <el-form-item
              v-for="(item, index) in bankPhotoJG.configValue"
              :key="index"
              label="做题至第"
            >
              <!-- <num-input
                :value="item"
                @changevalues="changeValues(index, $event)"
                message="请输入数值"
                min="1"
              /> -->
              <el-input-number
                :controls="false"
                v-model="bankPhotoJG.configValue[index]"
                controls-position="right"
                :min="0"
                :precision="0"
              ></el-input-number>
              题
              <el-button type="warning" size="mini" @click="delbank(index)"
                >删除</el-button
              >
            </el-form-item>
          </template>
        </el-form>
        <el-button @click="submitBank">保存</el-button>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
import numInput from "@/components/numInput";
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
  exportConfig,
  refreshCache,
} from "@/api/system/config";
export default {
  components: { numInput },
  data() {
    return {
      listitem: [],
      videoActive: {},
      videoPhotoJG: {},
      bankActive: {},
      bankPhotoJG: {},
    };
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    changeValues(int, value) {
      if (value) {
        var ast = this.bankPhotoJG.configValue.some((item) => {
          return item == value;
        });
        if (ast) {
          this.$message.error("存在相同值，请重新输入");
          this.$set(this.bankPhotoJG.configValue, int, "");
        } else {
          this.$set(this.bankPhotoJG.configValue, int, value);
        }
      }else{
        this.$set(this.bankPhotoJG.configValue, int, "");
      }
    },
    del(index) {
      this.videoPhotoJG.configValue.splice(index, 1);
    },
    delbank(index) {
      this.bankPhotoJG.configValue.splice(index, 1);
    },
    getConfig() {
      listConfig().then((res) => {
        var listitems = [];
        res.rows.map((item) => {
          if (
            item.configKey == "sys.play.autoPlay" ||
            item.configKey == "sys.play.drag" ||
            item.configKey == "sys.play.speed"
          ) {
            listitems.push(item);
          }
          if (item.configKey == "sys.course.photograph") {
            this.videoActive = item;
          }
          if (item.configKey == "sys.paper.photograph") {
            this.bankActive = item;
          }
          if (item.configKey == "sys.course.intervalTime") {
            if (item.configValue) {
              item.configValue = item.configValue.split(",");
            } else {
              item.configValue = [];
            }
            this.videoPhotoJG = item;
          }
          if (item.configKey == "sys.paper.intervalNumber") {
            if (item.configValue) {
              item.configValue = item.configValue.split(",");
            } else {
              item.configValue = [];
            }
            this.bankPhotoJG = item;
          }
        });
        this.listitem = listitems;
      });
    },
    async submit() {
      for (let i = 0; i < this.listitem.length; i++) {
        await updateConfig(this.listitem[i]);
      }
      this.$modal.msgSuccess("修改成功");
    },
    async submitVideo() {
      // if (this.videoActive.configValue == 1) {
      if (
        this.videoActive.configValue == 1 &&
        !this.videoPhotoJG.configValue.length
      ) {
        this.$modal.msgError("参数键值不能为空");
        return;
      } else {
        var arr = {};
        for (let k in this.videoPhotoJG) {
          if (k == "configValue") {
            var arrs = this.videoPhotoJG[k];
            if (new Set(arrs).size != arrs.length) {
              this.$message.warning("不允许存在重复值");
              return;
            }
            arr[k] = this.videoPhotoJG[k].toString();
          } else {
            arr[k] = this.videoPhotoJG[k];
          }
        }
        await updateConfig(this.videoActive);
        await updateConfig(arr);
        this.$modal.msgSuccess("修改成功");
        this.getConfig();
      }
      // } else {
      //   await updateConfig(this.videoActive);
      //   this.$modal.msgSuccess("修改成功");
      //   this.getConfig();
      // }
    },
    async submitBank() {
      // if (this.bankActive.configValue == 1) {
      // if (this.bankActive.configValue == 1 && !this.bankPhotoJG.configValue.length) {
      //   this.$modal.msgError("参数键值不能为空");
      //   return;
      // } else {
        // var arr = {};
        // for (let k in this.bankPhotoJG) {
        //   if (k == "configValue") {
        //     var arrs = this.bankPhotoJG[k];
        //     if (new Set(arrs).size != arrs.length) {
        //       this.$message.warning("不允许存在重复值");
        //       return;
        //     }
        //     arr[k] = this.bankPhotoJG[k].toString();
        //   } else {
        //     arr[k] = this.bankPhotoJG[k];
        //   }
        // }
        await updateConfig(this.bankActive);
        // await updateConfig(arr);
        this.$modal.msgSuccess("修改成功");
        this.getConfig();
      // }
      // } else {
      //   await updateConfig(this.bankActive);
      //   this.$modal.msgSuccess("修改成功");
      //   this.getConfig();
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.boxWs {
  margin: 0px 20px 20px 0px;
  float: left;
  width: 450px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  .hedsa {
    background-color: #999;
    padding: 6px;
  }
  .bigBoxs {
    height: 367px;
    padding: 14px;
    overflow-y: auto;
  }
}
</style>