teachcloud-print-web/card/elements/card-head/CardHead.vue

<template>
  <div :class="classes">
    <div class="card-head-top">
      <!-- 高度变化之后会印象内容排版，先固定高度 -->
      <div class="card-head-title">
        <el-input
          v-if="!preview && !data.isSimple"
          id="cardTitleInput"
          v-model="cardTitle"
          size="small"
          placeholder="请输入题卡标题"
          @blur="nameChange"
        >
        </el-input>
        <h1 v-else>{{ data.cardTitle }}</h1>
      </div>
      <div class="card-head-subtitle">
        <el-input
          v-if="!preview && !data.isSimple"
          id="cardDescInput"
          v-model="cardDesc"
          type="textarea"
          resize="none"
          :rows="2"
          placeholder="请输入题卡描述信息"
          @blur="nameChange"
        >
        </el-input>
        <p v-else>{{ data.cardDesc }}</p>
      </div>
    </div>

    <template v-if="data.columnNumber === 2">
      <div class="card-head-body" v-if="data.examNumberStyle !== 'fill'">
        <div class="grid-container">
          <div class="grid-row">
            <div class="grid-col grid-col-dash">
              <head-stdno :data="data"></head-stdno>
            </div>
            <div class="grid-col">
              <head-stdinfo :data="data"></head-stdinfo>
            </div>
          </div>
          <div class="grid-row" v-if="!data.isSimple">
            <div class="grid-col">
              <head-notice :data="data"></head-notice>
            </div>
            <div class="grid-col">
              <head-dynamic :data="data"></head-dynamic>
            </div>
          </div>
        </div>
      </div>
      <div class="card-head-body" v-else>
        <card-head-body-auto-resize>
          <head-stdinfo :data="data" slot="stdinfo"></head-stdinfo>
          <head-notice :data="data" slot="notice"></head-notice>
          <head-stdno :data="data" slot="stdno"></head-stdno>
          <head-dynamic
            :data="data"
            slot="dynamic"
            v-if="!data.isSimple && hasDynamicArea"
          ></head-dynamic>
        </card-head-body-auto-resize>
      </div>
    </template>

    <template v-if="data.columnNumber > 2">
      <div class="card-head-body" v-if="data.examNumberStyle !== 'fill'">
        <head-stdno class="card-head-part" :data="data"></head-stdno>
        <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
        <head-dynamic
          class="card-head-part"
          :data="data"
          v-if="!data.isSimple && hasDynamicArea"
        ></head-dynamic>
        <head-notice
          class="card-head-part"
          :data="data"
          v-if="!data.isSimple"
        ></head-notice>
      </div>
      <div class="card-head-body" v-else>
        <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
        <head-stdno class="card-head-part" :data="data"></head-stdno>
        <head-dynamic
          class="card-head-part"
          :data="data"
          v-if="!data.isSimple && hasDynamicArea"
        ></head-dynamic>
        <head-notice class="card-head-part" :data="data"></head-notice>
      </div>
    </template>
  </div>
</template>

<script>
import HeadDynamic from "./cardHeadSpin/HeadDynamic";
import HeadNotice from "./cardHeadSpin/HeadNotice";
import HeadStdinfo from "./cardHeadSpin/HeadStdinfo";
import HeadStdno from "./cardHeadSpin/HeadStdno";
import CardHeadBodyAutoResize from "./CardHeadBodyAutoResize";
import { mapMutations } from "vuex";

export default {
  name: "card-head",
  components: {
    HeadStdno,
    HeadStdinfo,
    HeadNotice,
    HeadDynamic,
    CardHeadBodyAutoResize
  },
  props: {
    data: {
      type: Object
    },
    preview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardTitle: this.data.cardTitle,
      cardDesc: this.data.cardDesc
    };
  },
  computed: {
    classes() {
      return [
        "page-element",
        "card-head",
        {
          "card-head-narrow": this.data.columnNumber > 2,
          "card-head-handle": this.data.examNumberStyle === "fill",
          "card-head-normal":
            this.data.examNumberStyle !== "fill" && this.data.columnNumber <= 2
        }
      ];
    },
    hasDynamicArea() {
      const noDynamic =
        this.data.examNumberStyle === "fill"
          ? !this.data.missAndFill && !this.data.aOrB
          : !this.data.missAndFill && !this.data.writeSign && !this.data.aOrB;

      return !noDynamic;
    }
  },
  methods: {
    ...mapMutations("card", ["setCardConfig"]),
    nameChange() {
      this.setCardConfig({
        cardTitle: this.cardTitle,
        cardDesc: this.cardDesc
      });
    }
  }
};
</script>