<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"; const COLUMN_OPTIONS = [ { value: 1, title: "一栏", label: "one", sizeValid: ["A3", "A4"] }, { value: 2, title: "二栏", label: "two", sizeValid: ["A3", "A4"] }, { value: 3, title: "三栏", label: "three", sizeValid: ["A3"] }, { value: 4, title: "四栏", label: "four", sizeValid: ["A3"] } ]; export default { name: "page-prop-edit", data() { return { columnOptions: [], pageSizeOptions: ["A3"], // pageSizeOptions: ["A3", "A4"], 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>