|
@@ -1,120 +1,46 @@
|
|
|
<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 class="card-head-title">
|
|
|
+ <h1>{{ data.cardTitle }}</h1>
|
|
|
</div>
|
|
|
-
|
|
|
- <template v-if="!narrowCard">
|
|
|
- <div v-if="data.examNumberStyle !== 'FILL'" class="card-head-body">
|
|
|
- <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 v-if="!data.isSimple" class="grid-row">
|
|
|
- <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 class="card-head-info">
|
|
|
+ <div v-for="(info, index) in fields" :key="index" class="info-item">
|
|
|
+ <span>{{ info }}</span>
|
|
|
+ <span>:</span>
|
|
|
+ <span></span>
|
|
|
</div>
|
|
|
- <div v-else class="card-head-body">
|
|
|
- <card-head-body-auto-resize>
|
|
|
- <head-stdinfo slot="stdinfo" :data="data"></head-stdinfo>
|
|
|
- <head-notice slot="notice" :data="data"></head-notice>
|
|
|
- <head-stdno slot="stdno" :data="data"></head-stdno>
|
|
|
- <head-dynamic
|
|
|
- v-if="!data.isSimple && hasDynamicArea"
|
|
|
- slot="dynamic"
|
|
|
- :data="data"
|
|
|
- ></head-dynamic>
|
|
|
- </card-head-body-auto-resize>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
|
|
|
- <template v-if="narrowCard">
|
|
|
- <div v-if="data.examNumberStyle !== 'FILL'" class="card-head-body">
|
|
|
- <head-stdno class="card-head-part" :data="data"></head-stdno>
|
|
|
- <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
|
|
|
- <head-dynamic
|
|
|
- v-if="!data.isSimple && hasDynamicArea"
|
|
|
- class="card-head-part"
|
|
|
- :data="data"
|
|
|
- ></head-dynamic>
|
|
|
- <head-notice
|
|
|
- v-if="!data.isSimple"
|
|
|
- class="card-head-part"
|
|
|
- :data="data"
|
|
|
- ></head-notice>
|
|
|
+ <div class="card-head-notice">
|
|
|
+ <h4>注意事项:</h4>
|
|
|
+ <div
|
|
|
+ v-for="(cont, index) in notices"
|
|
|
+ :key="index"
|
|
|
+ class="head-notice-cont"
|
|
|
+ >
|
|
|
+ <span>{{ index + 1 }}、</span>
|
|
|
+ <span>{{ cont }}</span>
|
|
|
</div>
|
|
|
- <div v-else class="card-head-body">
|
|
|
- <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
|
|
|
- <head-stdno class="card-head-part" :data="data"></head-stdno>
|
|
|
- <head-dynamic
|
|
|
- v-if="!data.isSimple && hasDynamicArea"
|
|
|
- class="card-head-part"
|
|
|
- :data="data"
|
|
|
- ></head-dynamic>
|
|
|
- <head-notice class="card-head-part" :data="data"></head-notice>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <div class="card-head-dynamic">
|
|
|
+ <p><span>正确填涂:</span><i></i></p>
|
|
|
+ <p>
|
|
|
+ <span>错误填涂:</span>
|
|
|
+ <i>√</i>
|
|
|
+ <i>×</i>
|
|
|
+ <i></i>
|
|
|
+ <i></i>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</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";
|
|
|
-
|
|
|
+/**
|
|
|
+ * TODO:默认MODEL_ONE,后续扩展其他类型
|
|
|
+ */
|
|
|
export default {
|
|
|
name: "CardHead",
|
|
|
- components: {
|
|
|
- HeadStdno,
|
|
|
- HeadStdinfo,
|
|
|
- HeadNotice,
|
|
|
- HeadDynamic,
|
|
|
- CardHeadBodyAutoResize,
|
|
|
- },
|
|
|
props: {
|
|
|
data: {
|
|
|
type: Object,
|
|
@@ -122,69 +48,20 @@ export default {
|
|
|
return {};
|
|
|
},
|
|
|
},
|
|
|
- preview: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- cardTitle: this.data.cardTitle,
|
|
|
- cardDesc: this.data.cardDesc,
|
|
|
- cardDescLineOne: "",
|
|
|
- cardDescLineTwo: "",
|
|
|
+ fields: ["招生单位代码及名称", "考试科目代码及名称"],
|
|
|
};
|
|
|
},
|
|
|
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;
|
|
|
+ return ["page-element", "card-head"];
|
|
|
},
|
|
|
- disabledEditCardName() {
|
|
|
- // 客服制卡不可修改标题
|
|
|
- return this.cardConfig["makeMethod"] === "CUST";
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- const contents = this.data.cardDesc.split("\n");
|
|
|
- this.cardDescLineOne = contents[0];
|
|
|
- this.cardDescLineTwo = contents[1];
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- ...mapMutations("card", ["setCardConfig"]),
|
|
|
- nameChange() {
|
|
|
- this.setCardConfig({
|
|
|
- cardTitle: this.cardTitle,
|
|
|
- cardDesc: [this.cardDescLineOne, this.cardDescLineTwo].join("\n"),
|
|
|
- });
|
|
|
+ notices() {
|
|
|
+ return this.data.attention.split("\n") || [];
|
|
|
},
|
|
|
},
|
|
|
+ methods: {},
|
|
|
};
|
|
|
</script>
|