teachcloud-print-web/card/modules/free/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="请选择"
          :disabled="pageSizeOptions.length < 2"
          @change="modifyPageSize"
        >
          <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-checkbox
          v-model="form.showForbidArea"
          @change="showForbidAreaChange"
          >启用</el-checkbox
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { objAssign } from "../../../plugins/utils";
import { getModel as getPageModel } from "../../../elements/page/model";
import { CARD_SIZE_TYPE } from "@/constants/enumerate";

const COLUMN_OPTIONS = [
  {
    value: 1,
    title: "一栏",
    label: "one",
    sizeValid: ["A3", "A4", "8K"],
  },
  {
    value: 2,
    title: "二栏",
    label: "two",
    sizeValid: ["A3", "A4", "8K"],
  },
  {
    value: 3,
    title: "三栏",
    label: "three",
    sizeValid: ["A3", "8K"],
  },
  {
    value: 4,
    title: "四栏",
    label: "four",
    sizeValid: ["A3", "8K"],
  },
];

export default {
  name: "page-prop-edit",
  data() {
    return {
      columnOptions: [],
      pageSizeOptions: CARD_SIZE_TYPE,
      form: {
        pageSize: "A3",
        columnNumber: 2,
        showForbidArea: false,
      },
      prePageSize: "A3",
    };
  },
  computed: {
    ...mapState("free", ["curPageNo", "pages", "cardConfig"]),
    curPage() {
      return this.pages[this.curPageNo];
    },
  },
  watch: {
    cardConfig: {
      immediate: true,
      handler(val) {
        this.form = objAssign(this.form, val);
        this.prePageSize = this.form.pageSize;
        this.columnOptions = COLUMN_OPTIONS.filter((item) =>
          item.sizeValid.includes(this.form.pageSize)
        );
      },
    },
  },
  methods: {
    ...mapMutations("free", [
      "setPages",
      "setCurElement",
      "setCardConfig",
      "setCurPageNo",
    ]),
    ...mapActions("free", ["modifyAllPageShowForbidArea"]),
    showForbidAreaChange() {
      this.setCardConfig(this.form);
      this.modifyAllPageShowForbidArea(this.form.showForbidArea);
    },
    configChange() {
      this.setCardConfig(this.form);
      const page = getPageModel(this.form);
      this.setPages([page]);
      this.setCurPageNo(0);
      this.setCurElement({});
    },
    modifyPageSize() {
      this.$confirm("此操作将会重置所有页面, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.columnOptions = COLUMN_OPTIONS.filter((item) =>
            item.sizeValid.includes(this.form.pageSize)
          );
          this.form.columnNumber = this.columnOptions[0].value;
          this.configChange();
        })
        .catch(() => {
          this.form.pageSize = this.prePageSize;
        });
    },
  },
};
</script>