teachcloud-print-web/card/components/PagePropEdit.vue

<template>
  <div class="page-prop-edit">
    <el-form ref="form" :model="form" label-width="70px">
      <el-form-item label="纸张规格">
        <el-select
          v-model="form.pageSize"
          placeholder="请选择"
          @change="modifyPageSize"
          :disabled="pageSizeOptions.length < 2"
        >
          <el-option
            v-for="item in pageSizeOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏位布局">
        <el-button
          v-for="(item, index) in columnOptions"
          :key="index"
          :class="[
            'column-btn',
            { 'btn-act': form.columnNumber == item.value }
          ]"
          :title="item.title"
          :disabled="item.disabled"
          @click="modifyColumnNum(item)"
        >
          <i
            :class="[
              'icon',
              form.columnNumber == item.value
                ? `icon-${item.label}-white`
                : `icon-${item.label}-gray`
            ]"
          ></i>
        </el-button>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-checkbox v-model="form.aOrB" disabled>启用A/B卷</el-checkbox>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-checkbox
          v-model="form.showForbidArea"
          @change="showForbidAreaChange"
          >启用禁答区</el-checkbox
        >
      </el-form-item>
      <el-form-item label="大题数">
        <ul class="topicno-list" v-if="topicSeries.length">
          <li>{{ topicSeries.length }}</li>
        </ul>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { objAssign } from "../plugins/utils";

export default {
  name: "page-prop-edit",
  data() {
    return {
      columnOptions: [
        {
          value: 2,
          icon: "el-icon-menu",
          title: "二栏",
          label: "two",
          disabled: false
        },
        {
          value: 3,
          icon: "el-icon-s-grid",
          title: "三栏",
          label: "three",
          disabled: false
        },
        {
          value: 4,
          icon: "el-icon-menu",
          title: "四栏",
          label: "four",
          disabled: false
        }
      ],
      pageSizeOptions: ["A3"],
      form: {
        pageSize: "A3",
        columnNumber: 2,
        columnGap: 4,
        aOrB: false,
        showForbidArea: false
      },
      prePageSize: "A3"
    };
  },
  computed: {
    ...mapState("card", ["curPageNo", "pages", "cardConfig", "topicSeries"]),
    curPage() {
      return this.pages[this.curPageNo];
    }
    // aOrBDisabled() {
    //   return this.cardConfig.hasOwnProperty("aOrBSystem");
    // }
  },
  watch: {
    cardConfig: {
      immediate: true,
      handler(val) {
        this.form = objAssign(this.form, val);
        this.prePageSize = this.form.pageSize;
        this.columnOptions[2].disabled = val.examNumberStyle === "fill";
      }
    }
  },
  mounted() {},
  methods: {
    ...mapMutations("card", [
      "setPages",
      "setTopics",
      "setCurElement",
      "setCardConfig",
      "setTopicNos"
    ]),
    ...mapActions("card", ["rebuildPages", "resetElementProp"]),
    modifyColumnNum(item) {
      this.$confirm(
        "此操作会导致当前题卡编辑的所有元素清空, 是否继续?",
        "提示",
        {
          cancelButtonClass: "el-button--danger is-plain",
          confirmButtonClass: "el-button--primary",
          type: "warning"
        }
      )
        .then(() => {
          this.columnNumChange(item.value);
        })
        .catch(() => {});
    },
    columnNumChange(val) {
      this.form.columnNumber = val;
      this.setCardConfig(this.form);
      this.setPages([]);
      this.setTopics([]);
      this.setTopicNos([]);
      this.$emit("init-page");
    },
    showForbidAreaChange() {
      this.setCardConfig(this.form);
    },
    configChange() {
      this.setCardConfig(this.form);
      this.$nextTick(() => {
        this.rebuildPages();
        this.setCurElement({});
        this.$nextTick(() => {
          this.resetElementProp(true);
        });
      });
    },
    modifyPageSize() {
      this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
        cancelButtonClass: "el-button--danger is-plain",
        confirmButtonClass: "el-button--primary",
        type: "warning"
      })
        .then(() => {
          // TODO:A4
          this.configChange();
        })
        .catch(() => {
          this.form.pageSize = this.prePageSize;
        });
    }
  }
};
</script>