teachcloud-print-web/card/modules/free/components/ElementPropEdit.vue

<template>
  <el-dialog
    class="element-prop-edit edit-dialog"
    :visible.sync="openElementEditDialog"
    :title="title"
    top="10vh"
    width="640px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancel"
    append-to-body
  >
    <component
      :is="curEditComponent"
      :instance="curElement"
      @modified="modified"
      :key="curElement.id"
      ref="ComponentForm"
    ></component>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getElementName, getElementDesc } from "../elements/model";
import EditFillLine from "../elements/fill-line/EditFillLine";
import EditFillQuestion from "../elements/fill-question/EditFillQuestion";
import EditText from "../../../elements/text/EditText";
import EditImage from "../../../elements/image/EditImage";
import EditLine from "../../../elements/line/EditLine";
import EditLines from "../../../elements/lines/EditLines";
import EditGrids from "../../../elements/grids/EditGrids";
import EditPane from "../../../elements/pane/EditPane";
import EditBarcode from "../../../elements/barcode/EditBarcode";
import EditFillNumber from "../../../elements/fill-number/EditFillNumber";
import EditFillField from "../../../elements/fill-field/EditFillField";
import EditFillTable from "../../../elements/fill-table/EditFillTable";
import EditFillPane from "../../../elements/fill-pane/EditFillPane";

export default {
  name: "element-prop-edit",
  components: {
    EditFillLine,
    EditFillQuestion,
    EditFillNumber,
    EditFillField,
    EditFillTable,
    EditFillPane,
    EditText,
    EditImage,
    EditLine,
    EditLines,
    EditGrids,
    EditPane,
    EditBarcode
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("free", ["curElement", "openElementEditDialog"]),
    title() {
      return this.curElement.type
        ? getElementName(this.curElement.type)
        : "属性编辑";
    },
    curEditComponent() {
      if (!this.curElement.type) return;
      let type = this.curElement.type.toLowerCase().replace("_", "-");
      if (type.indexOf("line-") === 0) type = "line";
      return `edit-${type}`;
    }
  },
  methods: {
    ...mapMutations("free", ["setOpenElementEditDialog"]),
    ...mapActions("free", ["modifyElement"]),
    cancel() {
      this.setOpenElementEditDialog(false);
    },
    open() {
      this.setOpenElementEditDialog(true);
    },
    submit() {
      this.$refs.ComponentForm.submit();
    },
    modified(element) {
      element.desc = getElementDesc(element);
      this.modifyElement(element);
      this.cancel();
    }
  }
};
</script>