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
          placeholder="请输入主标题"
          size="small"
          @blur="nameChange"
          v-model="cardTitle"
          id="cardTitleInput"
          v-if="!preview && !data.isSimple"
        >
        </el-input>
        <h1 v-else>{{ data.schoolName }}</h1>
      </div>
      <div class="card-head-subtitle">
        <el-input
          placeholder="请输入题卡标题"
          @blur="nameChange"
          v-model="cardName"
          id="cardNameInput"
          v-if="!preview && !data.isSimple"
        >
        </el-input>
        <p v-else>{{ data.cardName }}</p>
      </div>
      <div class="card-head-title-desc">
        <el-input
          placeholder="请输入内容"
          @blur="nameChange"
          v-model="cardTitleDesc"
          id="cardTileDescInput"
          v-if="!preview && !data.isSimple"
        >
        </el-input>
        <p v-else>{{ data.cardTitleDesc }}</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 {
      cardName: this.data.cardName,
      cardTitle: this.data.schoolName,
      cardTitleDesc: this.data.cardTitleDesc
    };
  },
  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;
    }
  },
  mounted() {},
  methods: {
    ...mapMutations("card", ["setCardConfig"]),
    nameChange() {
      this.setCardConfig({
        cardName: this.cardName,
        schoolName: this.cardTitle,
        cardTitleDesc: this.cardTitleDesc
      });
    }
  }
};
</script>