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="请输入题卡标题"
          :disabled="disabledEditCardName"
          @blur="nameChange"
        >
        </el-input>
        <h1 v-else>{{ data.cardTitle }}</h1>
      </div>
      <div class="card-head-subtitle">
        <div v-if="!preview && !data.isSimple">
          <el-input
            v-model="cardDescLineOne"
            placeholder="请输入题卡描述信息"
            @blur="nameChange"
          >
          </el-input>
          <el-input
            v-model="cardDescLineTwo"
            placeholder="更多题卡描述信息"
            @blur="nameChange"
          >
          </el-input>
        </div>
        <p v-else>{{ data.cardDesc }}</p>
      </div>
    </div>

    <template v-if="!narrowCard">
      <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="narrowCard">
      <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, mapState } 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,
      cardDescLineOne: "",
      cardDescLineTwo: ""
    };
  },
  created() {
    const contents = this.data.cardDesc.split("\n");
    this.cardDescLineOne = contents[0];
    this.cardDescLineTwo = contents[1];
  },
  computed: {
    ...mapState("card", ["cardConfig"]),
    classes() {
      return [
        "page-element",
        "card-head",
        {
          "card-head-narrow": this.narrowCard,
          "card-head-handle": this.data.examNumberStyle === "FILL",
          "card-head-normal":
            this.data.examNumberStyle !== "FILL" && !this.narrowCard
        }
      ];
    },
    narrowCard() {
      return (
        (this.data.pageSize === "A3" && this.data.columnNumber > 2) ||
        (this.data.pageSize === "A4" && this.data.columnNumber === 2)
      );
    },
    hasDynamicArea() {
      const noDynamic =
        this.data.examNumberStyle === "FILL"
          ? !this.data.examAbsent && !this.data.aOrB && !this.data.discipline
          : !this.data.examAbsent &&
            !this.data.writeSign &&
            !this.data.aOrB &&
            !this.data.discipline;

      return !noDynamic;
    },
    disabledEditCardName() {
      // 客服制卡不可修改标题
      return this.cardConfig["makeMethod"] === "CUST";
    }
  },
  methods: {
    ...mapMutations("card", ["setCardConfig"]),
    nameChange() {
      this.setCardConfig({
        cardTitle: this.cardTitle,
        cardDesc: [this.cardDescLineOne, this.cardDescLineTwo].join("\n")
      });
    }
  }
};
</script>