baoman / Ezquiz_Platform

  <template>

    <div class="page-container">
      <back-box>
        <template slot="title">
          <span>授课端下载</span>
        </template>
      </back-box>
      <div class="page-content">
        <div class="content-top">
          <div class="cont-info">

            <img v-if="info.appImage" class="logo" :src="info.appImage" alt="" />

            <div>

              <p class="name">
                {{ `${info.appName || ""} ${info.versionName || ""}` }}
              </p>

              <p class="txt">文件大小：{{ `${info.fileSize}` }}M</p>
              <p class="txt">最近更新：{{ info.modifiedTime }}</p>
            </div>
          </div>
          <div class="down-box">
            <p class="txt">默认参数配置</p>

            <el-button class="down-btn" type="primary"  v-loading="downClientLoading"
              @click="getAppDownloadUrl(false)">立即下载</el-button>

          </div>
        </div>

        <!-- <ul class="down-ul">

          <li class="down-li" v-for="item in tableData" :key="item.id">

            <span class="p1 ellipsis" @click="setConfigForm(item)">{{
              item.configName
            }}</span>

            <el-button plan round @click="getAppDownloadUrl(item.id)"
              >下载</el-button
            >
          </li>
          <li class="down-li">
            <span>自定义软件功能</span>

            <el-button
              plan
              round
              icon="el-icon-plus"
              @click="setDefaultForm(), (dialogVis = true), (type = 1)"
              >参数设置</el-button
            >

          </li>

        </ul> -->

      </div>

      <div class="edit-dia" ref="editDia" v-show="dialogVis" height="100%">

        <div class="back">
          <div class="back-l" @click="dialogVis = false">
            <i class="fa fa-mail-reply-all"></i>

            <p>

              {{

              `${type == 1 ? "参数设置" : formData.configName}`
            }}

            </p>

          </div>
        </div>
        <div class="form-box">

          <el-form ref="forms" :model="formData" :rules="ruleForm" label-width="180px">

            <el-form-item label="配置名称：" prop="configName" v-if="type == 1">

              <el-col :span="12">

                <el-input v-model.trim="formData.configName" placeholder="请填写配置名称"></el-input>

              </el-col>
            </el-form-item>

            <el-form-item label="主菜单设置：" prop="mainMenu">
              <el-checkbox-group v-model="formData.mainMenu" :max="4">
                <el-checkbox v-for="item in menuList" :label="item" :key="item">{{

              item
            }}</el-checkbox>

              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="弹出菜单组：" prop="popupMenu">
              <el-radio-group v-model="formData.popupMenu">
                <p class="popup-menu">

                  <el-radio :label="1"><span>1：签到点名</span> <span> 2：导入导出</span>
                    <span>3：班级管理</span> <span>4：系统设置</span></el-radio>

                </p>
                <p class="popup-menu popup-menu1">
                  <el-radio :label="2">
                    <span>1：签到点名</span> <span> 2：导入导出</span>

                    <span>3：考试任务</span> <span>4：系统设置</span></el-radio>

                </p>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="成绩等级设置：">
              <el-col :span="12">

                <div class="silde-box">
                  <p class="silde-p">

                    <span class="num" :style="{ left: formData.failedSet + '%' }">{{ formData.failedSet }}%</span>
                    <el-slider v-model="formData.failedSet" :show-tooltip="false"></el-slider><span class="txt"
                      :style="{ left: formData.failedSet + '%' }">不及格</span>

                  </p>
                  <p class="silde-p">

                    <span class="num" :style="{ left: formData.passSet + '%' }">{{ formData.passSet }}%</span>
                    <el-slider v-model="formData.passSet" :show-tooltip="false"></el-slider><span class="txt"
                      :style="{ left: formData.passSet + '%' }">及格</span>

                  </p>
                  <p class="silde-p">

                    <span class="num" :style="{ left: formData.goodSet + '%' }">{{ formData.goodSet }}%</span>
                    <el-slider v-model="formData.goodSet" :show-tooltip="false"></el-slider><span class="txt"
                      :style="{ left: formData.goodSet + '%' }">良好</span>

                  </p>
                  <p class="silde-p">

                    <span class="num" :style="{ left: formData.excellenSet + '%' }">{{ formData.excellenSet }}%</span>
                    <el-slider v-model="formData.excellenSet" :show-tooltip="false"></el-slider><span class="txt"
                      :style="{ left: formData.excellenSet + '%' }">优秀</span>

                  </p>
                </div>

              </el-col>
            </el-form-item>
            <el-form-item label="抢答设置：" prop="viesAnswerSet">

              <el-radio-group v-model="formData.viesAnswerSet">

                <el-radio :label="0">倒计时抢答</el-radio>
                <el-radio :label="1">即时抢答</el-radio>
                <el-radio :label="2">老师选择</el-radio>
              </el-radio-group>

              <el-input-number v-show="formData.viesAnswerSet === 0" size="small" class="count-down"
                v-model="formData.countdown" :step="1" :step-strictly="true"></el-input-number>

              <span v-show="formData.viesAnswerSet == 0">秒</span>

            </el-form-item>

            <el-form-item label="抽答设置：" prop="ballotAnswerSet">

              <el-radio-group v-model="formData.ballotAnswerSet">
                <el-radio :label="0">点名抽答</el-radio>
                <el-radio :label="1">随机抽答</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="单选题选项默认个数：" prop="singleChoiceNum">

              <el-input-number size="small" class="count-down count-down2" v-model="formData.singleChoiceNum" :min="2"
                :max="7" :step="1" :step-strictly="true"></el-input-number>个

            </el-form-item>

            <el-form-item label="多选题选项默认个数：" prop="multipleChoiceNum">

              <el-input-number size="small" class="count-down count-down2" v-model="formData.multipleChoiceNum" :min="2"
                :max="7" :step="1" :step-strictly="true"></el-input-number>个

            </el-form-item>
            <el-form-item label="测—单题型默认题数：" prop="singleTypeNum">

              <el-input-number size="small" class="count-down count-down2" v-model="formData.singleTypeNum" :min="2"
                :max="25" :step="1" :step-strictly="true"></el-input-number>个

            </el-form-item>
            <el-form-item label="问—倒计时：" prop="askCountdown">
              <el-switch v-model="askCount" @change="askCountChange"> </el-switch>

              <el-input-number v-show="askCount" size="small" class="count-down" v-model="formData.askCountdown" :min="0"
                :step="1" :step-strictly="true"></el-input-number>

              {{ askCount ? "秒" : "" }}
            </el-form-item>
            <el-form-item label="测—倒计时：" prop="viesAnswerSet">
              <el-switch v-model="examsDuration" @change="examsDurationChange">
              </el-switch>

              <el-input-number v-show="examsDuration" size="small" class="count-down" v-model="formData.examsDuration"
                :min="0" :step="1" :step-strictly="true"></el-input-number>

              {{ examsDuration ? "分" : "" }}

            </el-form-item>
            <el-form-item label="答题结构展示：" prop="displayModel">
              <el-radio-group v-model="formData.displayModel">
                <el-radio :label="0">极简模式</el-radio>
                <el-radio :label="1">全屏模式</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="语言设置：" prop="languageSet">
              <el-radio-group v-model="formData.languageSet">
                <el-radio :label="0">中文</el-radio>
                <el-radio :label="1">英文</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="其他设置：">
              <el-checkbox-group v-model="formData.otherSet">
                <p>
                  <el-checkbox :label="0">答题结束自动显示答题统计</el-checkbox>
                </p>
                <p><el-checkbox :label="1">答题结束自动保存截屏</el-checkbox></p>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" round @click="saveForm">保存</el-button>
              <el-button round @click="setDefaultForm">恢复默认设置</el-button>
              <el-button round @click="dialogVis = false">取消</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>

  </template>
  
  <script>

  const defaultForm = {
    configName: "",
    mainMenu: ["问"],
    popupMenu: 1,
    failedSet: 60,
    passSet: 80,
    goodSet: 90,
    excellenSet: 98,
    viesAnswerSet: 0,
    countdown: 5,
    ballotAnswerSet: 0,
    singleChoiceNum: 4,
    multipleChoiceNum: 4,

    singleTypeNum: 25,

    askCountdown: 30,

    examsDuration: 90,

    displayModel: 0,
    languageSet: 0,
    otherSet: [],
  };

  export default {

    watch: {
      "formData.askCountdown": function (val) {
        if (val == 0) {
          this.askCount = false;
        }
      },
      "formData.examsDuration": function (val) {
        if (val == 0) {
          this.examsDuration = false;
        }
      },
    },

    data() {
      return {
        page: 1,
        size: 20,

        type: 1, //1-添加；2-修改

        info: {
          appName: "",
          appImage: "",
          versionName: "",
          fileSize: "",
          modifiedTime: "",
        },
        tableData: [],

        dialogVis: false,
        askCount: true,
        examsDuration: true,

        downClientLoading: false,

        configId: "",

        formData: {

          configName: "",

          mainMenu: ["问"],
          popupMenu: 1,
          failedSet: 60,
          passSet: 80,
          goodSet: 90,
          excellenSet: 98,
          viesAnswerSet: 0,
          countdown: 5,
          ballotAnswerSet: 0,

          singleChoiceNum: 4,
          multipleChoiceNum: 4,

          singleTypeNum: 25,

          askCountdown: 30,

          examsDuration: 90,

          displayModel: 0,
          languageSet: 0,
          otherSet: [],

        },
        ruleForm: {

          configName: [
            { required: true, message: "请填写配置名称", trigger: "blur" },
          ],

          // mainMenu: [
          //   { required: true, message: "请选择主菜单", trigger: "blur" },
          // ],
          // popupMenu: [
          //   { required: true, message: "请选择弹出菜单", trigger: "blur" },
          // ],
          // viesAnswerSet: [
          //   { required: true, message: "请选择抢答类型", trigger: "blur" },
          // ],
          // countdown: [
          //   { required: true, message: "请输入抢答倒计时", trigger: "blur" },
          // ],
          // ballotAnswerSet: [
          //   { required: true, message: "请选择抽答类型", trigger: "blur" },
          // ],
          // singleChoiceNum: [
          //   {
          //     required: true,
          //     message: "请输入单选题选项默认个数",
          //     trigger: "blur",
          //   },
          // ],
          // multipleChoiceNum: [
          //   {
          //     required: true,
          //     message: "请输入多选题选项默认个数",
          //     trigger: "blur",
          //   },
          // ],
          // singleTypeNum: [
          //   {
          //     required: true,
          //     message: "请输入测—单题型默认题数",
          //     trigger: "blur",
          //   },
          // ],
          // displayModel: [
          //   {
          //     required: true,
          //     message: "请选择答题结构",
          //     trigger: "blur",
          //   },
          // ],
          // languageSet: [
          //   {
          //     required: true,
          //     message: "请选择语言",
          //     trigger: "blur",
          //   },
          // ],

        },
        menuList: ["问", "测", "析"],
      };
    },
    created() {
      this.latestVersion();

      // this.appConfigList();

    },
    methods: {

      setConfigForm(obj) {

        let content = JSON.parse(obj.content);

        this.formData.configName = obj.configName;

        for (let key in this.formData) {
          content[key] ? (this.formData[key] = content[key]) : "";
        }

        this.formData.examsDuration = (this.formData.examsDuration / 60).toFixed(
          0
        );

        this.type = 2;

        (this.configId = obj.id), (this.dialogVis = true);

        this.$nextTick(function () {
          this.$refs.editDia.scrollTop = 0;
        });

      },
      setDefaultForm() {
        for (let key in this.formData) {
          this.formData[key] = defaultForm[key];
        }
      },
      askCountChange(val) {
        if (val) {
          this.formData.askCountdown = 30;
        } else {
          this.formData.askCountdown = 0;
        }
      },
      examsDurationChange(val) {
        if (val) {

          this.formData.examsDuration = 90;

        } else {
          this.formData.examsDuration = 0;
        }
      },
      async saveForm() {
        let content = {};
        for (let key in this.formData) {
          if (key != "configName") {
            content[key] = this.formData[key];
          }
        }

        content.examsDuration = content.examsDuration * 60;

        this.$refs.forms.validate((valid) => {
          if (valid) {
            if (this.type == 1) {
              this.addAppConfig({
                configName: this.formData.configName,
                content: { ...content },
              });
            } else {
              this.updateAppConfig({
                configId: this.configId,
                content: { ...content },
              });
            }
          } else {
            this.$message.warning("配置名称输入有误请检查！");
            return false;
          }
        });

      },
  
      async addAppConfig(params) {
        const { data, status, info } = await this.$request.addAppConfig({
          ...params,
        });
        if (status == 0) {
          this.$message.success("配置成功");
          this.dialogVis = false;
          this.appConfigList();
        } else {
          this.$message.error(info);
        }
      },
      async updateAppConfig(params) {
        const { data, status, info } = await this.$request.updateAppConfig({
          ...params,
        });
        if (status == 0) {
          this.$message.success("配置成功");
          this.dialogVis = false;
          this.appConfigList();
        } else {
          this.$message.error(info);
        }
      },
  

      async latestVersion() {
        const { data, status, info } = await this.$request.latestVersion();
        if (status == 0) {
          this.info = { ...data };
          this.info.fileSize =

            (this.info.fileSize &&
              (this.info.fileSize / 1024 / 1024).toFixed(2)) ||

            "--";
        } else {
          this.$message.error(info);
        }
      },
      async appConfigList() {
        const { data, status, info } = await this.$request.appConfigList({
          page: this.page,
          size: this.size,
        });
        if (status == 0) {
          this.tableData = [...data.list] || [];
        } else {
          this.$message.error(info);
        }
      },

      async getAppDownloadUrl(configId) {
        if (this.downClientLoading) return;
        this.downClientLoading = true;

        const { data, status, info } = await this.$request.getAppDownloadUrl({
          configId: configId || "",
        });
        if (status == 0) {

          this.downClientLoading = false;

          // this.tableData = [...data.list] || [];

          const a = document.createElement("a");
          a.href = data.downloadUrl;
          document.body.appendChild(a);
          a.click();
          a.remove();

        } else {

          this.downClientLoading = false;

          this.$message.error(info);
        }
      },
    },
  };

  </script>
  

  <style lang="scss" scoped>
  .page-container {

    width: 100%;

    position: relative;
  }

  .page-content {
    padding: 30px;

    .content-top {
      padding: 20px 50px 20px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .cont-info {
        flex: 1;
        display: flex;
        align-items: center;

        .logo {
          width: 140px;
          margin-right: 16px;
        }

        .name {
          font-size: 20px;
          color: #333;
          line-height: 24px;
          padding-bottom: 12px;
        }

        .txt {
          font-size: 15px;
          color: #7f7f7f;
          line-height: 25px;
        }
      }

      .down-box {
        width: 200px;
        text-align: center;

        .txt {
          font-size: 16px;
          padding-bottom: 8px;
        }

        .down-btn {
          font-size: 20px;
        }
      }
    }

    .down-ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;

      .down-li {
        width: calc(50% - 12px);
        height: 72px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 24px 30px 0;
        border-radius: 10px;
        background: #f8f8f8;
        box-shadow: 2px 2px 5px #ccc;

        &:nth-child(2n) {
          margin-right: 0;
        }

        font-size: 16px;
        color: #667ffd;

        .p1 {
          cursor: pointer;
        }

      }
    }
  }

  :deep(.el-button.is-round) {
    width: 120px;
    text-align: center;
    padding: 10px 0;
  }

  .edit-dia {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: #fff;
    overflow-y: auto;

    .back {
      width: 100%;
      height: 56px;
      border-bottom: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;

      .back-l {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
        font-size: 18px;
        font-weight: 500;
      }

      .fa-mail-reply-all {
        font-size: 28px;
        color: #b3b3b3;
        margin-right: 12px;
      }
    }

    .form-box {
      padding: 20px;

      .popup-menu {
        padding-bottom: 16px;

        span {
          padding-right: 12px;
        }
      }

      .popup-menu1 {
        padding-bottom: 0;
      }

      .count-down {
        width: 48px;
        margin: 0 8px 0 20px;

        :deep(.el-input__inner) {
          width: 48px;
          height: 32px;
          line-height: 32px;
          border-radius: 20px;
          border-color: #667ffd;
          padding: 0;
        }

        :deep(.el-input-number__decrease) {
          display: none;
        }

        :deep(.el-input-number__increase) {
          display: none;
        }
      }

      .count-down2 {
        margin-left: 0;
      }

      .silde-box {
        position: relative;
        width: 100%;
        height: 60px;

        .silde-p {
          width: 100%;
          position: absolute;
          padding-top: 20px;

  
          &>span {

            position: absolute;
            width: 48px;
            text-align: center;
            line-height: 18px;
            flex-shrink: 0;
            font-size: 12px;
          }

          :deep(.el-slider) {
            flex: 1;
          }

          :deep(.el-slider__runway) {
            margin: 5px 0;
          }

          :deep(.el-slider__runway) {
            background-color: #409eff;
          }

          .num {
            top: 0;
            transform: translateX(-24px);
          }

          .txt {
            bottom: -20px;
            transform: translateX(-24px);
          }

        }
      }
    }
  }

  </style>