zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加其余页面、补充组件内容

clientSet-zq-1128
zq 2 days ago
parent
7df357ef6b
commit
83157c73e3
10 changed files with 1014 additions and 365 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 852
      src/components/clientSet/clientForm.vue
  2. 6
      src/style/theme/common.scss
  3. 87
      src/views/clientSet/catalogPage.vue
  4. 5
      src/views/clientSet/coverInfoPage.vue
  5. 81
      src/views/clientSet/headerPage.vue
  6. 5
      src/views/clientSet/mainTextPage.vue
  7. 78
      src/views/clientSet/referencePage.vue
  8. 106
      src/views/clientSet/summaryPage.vue
  9. 80
      src/views/clientSet/switchPage.vue
  10. 79
      src/views/clientSet/thanksPage.vue

852
src/components/clientSet/clientForm.vue
View File

@ -1,65 +1,116 @@
<template>
<div class="client_form " id="">
<div class="before_h_title mb24">{{ title }}</div>
<el-form :model="coverInfo">
<GuipRadio :options="titlePosList" v-if="titlePosFlag" v-model="coverInfo.titlePos" :client-form-flex="true" label="标题位置" />
<GuipRadio :options="imgPosList" v-if="imgPosFlag" v-model="coverInfo.imgPos" :client-form-flex="true" label="图片位置" />
<div class="before_h_title mb24">{{ title }} <span class="desc" v-if="desc">{{ desc }}</span></div>
<el-form :model="coverInfo">
<!-- 中英文关键词-前缀 -->
<div class="flex mt20" v-if="eng_keywords || ch_keywords">
<div class="flex-label">
<div class="label-text">前缀</div>
<span class="colon">：</span>
</div>
<span class="desc" v-if="ch_keywords">指“关键词”三个字</span>
<span class="desc" v-if="eng_keywords">指“key word”单词</span>
</div>
<GuipRadio :options="titlePosList" v-if="titlePosFlag" v-model="coverInfo.titlePos" :client-form-flex="true"
label="标题位置" />
<GuipRadio :options="imgPosList" v-if="imgPosFlag" v-model="coverInfo.imgPos" :client-form-flex="true"
label="图片位置" />
<div class="fontWrap" v-if="fontDetailflag">
<div class="flex-between">
<GuipSelect v-model="coverInfo.ch_font" :options="chFontList" :client-form-flex="true"
placeholder="请选择" label="中文字体" width="127px" />
<GuipSelect v-model="coverInfo.ch_f_weight" :options="chFontWeightList" :client-form-flex="true"
placeholder="请选择" label="中文字重" width="127px" />
</div>
<div class="flex-between">
<GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true"
placeholder="请选择" label="英文字体" width="127px" />
<GuipSelect v-model="coverInfo.eng_f_weight" :options="engFontWeightList" :client-form-flex="true"
placeholder="请选择" label="英文字重" width="127px" />
</div>
</div>
<div v-if="!fontDetailflag" :class="(eng_keywords || ch_keywords) ? 'grayLabel' : ''">
<div class="flex-between">
<GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true"
placeholder="请选择" label="字体" width="127px" />
<GuipInput v-model="coverInfo.fontSize" :client-form-flex="true" placeholder="请填写" label="字号"
unit="pt" width="127px" />
</div>
<GuipRadio v-if="fontWeightflag || (eng_keywords || ch_keywords)" :options="boldList"
v-model="coverInfo.bold" :client-form-flex="true" label="字重" />
</div>
<GuipInput v-model="coverInfo.fontSize" v-if="fontDetailflag" :client-form-flex="true" placeholder="请填写"
label="字号" unit="pt" />
<div class="fontWrap" v-if="fontDetailflag">
<GuipRadio :options="alignList" v-if="!(eng_keywords || ch_keywords)" v-model="coverInfo.align"
:client-form-flex="true" label="对齐" />
<GuipRadio v-if="showIndentation" :options="indentationList" v-model="coverInfo.indentation"
:client-form-flex="true" label="缩进" />
<div v-if="computedShowIndentation" class="grayLabel showIndentation">
<div class="flex-between">
<GuipSelect v-model="coverInfo.spe_format" :options="speFormatList" :client-form-flex="true"
placeholder="请选择" label="特殊格式" width="127px" />
<GuipSelect :options="indentationUnitList" v-model="coverInfo.indentationUnit" placeholder="请选择"
:client-form-flex="true" label="缩进单位" width="127px" />
</div>
<div class="flex-between">
<GuipInput v-model="coverInfo.text_before" :client-form-flex="true" placeholder="请填写" label="文本之前"
width="127px" />
<GuipInput v-model="coverInfo.text_after" :client-form-flex="true" placeholder="请填写" label="文本之后"
width="127px" />
</div>
</div>
<!-- 中英文关键词 -->
<div class="mt20" v-if="eng_keywords || ch_keywords">
<div class="flex-label mt20">
<div class="label-text">关键词</div>
<span class="colon">：</span>
</div>
<div class="grayLabel">
<div class="flex-between">
<GuipSelect v-model="coverInfo.ch_font" :options="chFontList" :client-form-flex="true" placeholder="请选择" label="中文字体" width="127px" />
<GuipSelect v-model="coverInfo.ch_f_weight" :options="chFontWeightList" :client-form-flex="true" placeholder="请选择" label="中文字重" width="127px" />
</div>
<div class="flex-between">
<GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true" placeholder="请选择" label="英文字体" width="127px" />
<GuipSelect v-model="coverInfo.eng_f_weight" :options="engFontWeightList" :client-form-flex="true" placeholder="请选择" label="英文字重" width="127px" />
<GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true"
placeholder="请选择" label="字体" width="127px" />
<GuipInput v-model="coverInfo.fontSize" :client-form-flex="true" placeholder="请填写" label="字号"
unit="pt" width="127px" />
</div>
<GuipRadio :options="boldList" v-model="coverInfo.bold" :client-form-flex="true" label="字重" />
<GuipInput class="grayUnit" v-model="delimiter" :client-form-flex="true" placeholder="请填写" label="分隔符"
@blur="checkGrammar" :unit="grammarCheck" />
</div>
<div class="flex-between" v-else>
<GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true" placeholder="请选择" label="字体" width="127px" />
<GuipInput v-model="coverInfo.fontSize" :client-form-flex="true" placeholder="请填写" label="字号" unit="pt" width="127px"/>
</div>
<!-- 行距部分 -->
<div v-if="lineSpaceShow">
<div class="flex-label mt20">
<div class="label-text">行距</div>
<span class="colon">：</span>
</div>
<div class="grayLabel">
<div class="flex-between">
<GuipInput v-model="coverInfo.paragraph_before" label="段前" placeholder="请填写"
:client-form-flex="true" width="127px" unit="行" />
<GuipInput v-model="coverInfo.paragraph_after" label="段后" placeholder="请填写" :client-form-flex="true"
width="127px" unit="行" />
</div>
<div class="flex-between">
<GuipInput v-model="coverInfo.lineSpace" label="行间距" placeholder="请填写" :client-form-flex="true"
width="127px" />
<GuipSelect v-model="coverInfo.lineSpaceUnit" :options="lineSpaceUnitList" placeholder="请选择"
label="行距单位" :client-form-flex="true" width="127px" />
</div>
</div>
</div>
<GuipRadio v-if="!fontDetailflag" :options="boldList" v-model="coverInfo.bold" :client-form-flex="true" label="加粗" />
<GuipInput v-model="coverInfo.fontSize" v-if="fontDetailflag" :client-form-flex="true" placeholder="请填写" label="字号" unit="pt"/>
<GuipRadio :options="alignList" v-model="coverInfo.align" :client-form-flex="true" label="对齐" />
<GuipRadio :options="indentationList" v-model="coverInfo.indentation" :client-form-flex="true" label="缩进" />
<div v-if="computedShowIndentation" class="grayLabel showIndentation">
<div class="flex-between">
<GuipSelect v-model="coverInfo.spe_format" :options="speFormatList" :client-form-flex="true" placeholder="请选择" label="特殊格式" width="127px" />
<GuipSelect :options="indentationUnitList" v-model="coverInfo.indentationUnit" placeholder="请选择" :client-form-flex="true" label="缩进单位" width="127px" />
</div>
<div class="flex-between">
<GuipInput v-model="coverInfo.text_before" :client-form-flex="true" placeholder="请填写" label="文本之前" width="127px" />
<GuipInput v-model="coverInfo.text_after" :client-form-flex="true" placeholder="请填写" label="文本之后" width="127px" />
</div>
</div>
<div class="flex-label mt20">
<div class="label-text">行距</div>
<span class="colon">：</span>
</div>
<div class="grayLabel">
<div class="flex-between">
<GuipInput v-model="coverInfo.paragraph_before" label="段前" placeholder="请填写" :client-form-flex="true" width="127px" unit="行"/>
<GuipInput v-model="coverInfo.paragraph_after" label="段后" placeholder="请填写" :client-form-flex="true" width="127px" unit="行"/>
</div>
<div class="flex-between">
<GuipInput v-model="coverInfo.lineSpace" label="行间距" placeholder="请填写" :client-form-flex="true" width="127px" />
<GuipSelect v-model="coverInfo.lineSpaceUnit" :options="lineSpaceUnitList" placeholder="请选择" label="行距单位" :client-form-flex="true" width="127px" />
</div>
</div>
<GroupFormBtns
cancelText="重置"
@cancel="cancelClick"
flex="start"
@confirm="submitDoctorBaseInfo"
/>
</el-form>
</div>
<GroupFormBtns cancelText="重置" @cancel="cancelClick" flex="start" @confirm="submitDoctorBaseInfo" />
</el-form>
</div>
</template>
<script>
@ -69,322 +120,399 @@ import GuipRadio from '@/components/GuipRadio.vue';
import GuipSelect from '@/components/GuipSelect.vue';
export default {
name: 'CoverInfoPage',
props: {
title: {
type: String,
default: '封面信息'
},
titlePosFlag: {
type: Boolean,
default: false
},
imgPosFlag: {
type: Boolean,
default: false
},
fontDetailflag: {
type: Boolean,
default: false
},
// 外部传入的数据
initData: {
type: Object,
default: () => ({})
},
// 外部传入的选项列表
alignOptions: {
type: Array,
default: () => []
},
indentationOptions: {
type: Array,
default: () => []
},
indentationUnitOptions: {
type: Array,
default: () => []
},
lineSpaceUnitOptions: {
type: Array,
default: () => []
},
// 是否显示缩进区域（外部可控制）
showIndentation: {
type: Boolean,
default: null // 默认null表示使用内部逻辑
},
// 重置和提交方法是否由外部提供
externalCancelMethod: {
type: Function,
default: null
},
externalSubmitMethod: {
type: Function,
default: null
}
},
components: {
GroupFormBtns,
GuipInput,
GuipRadio,
GuipSelect
},
data() {
return {
coverInfo: {
lineSpaceUnit: '',
lineSpace: '',
indentationUnit: '',
indentation: '',
align: '',
fontSize: '',
eng_f_weight: '',
ch_f_weight: '',
spe_format: '',
text_before: '',
text_after: '',
paragraph_before: '',
paragraph_after: '',
eng_font: '',
ch_font: ''
},
// 内部默认选项，如果外部没有传入则使用这些
internalAlignList: [
{ label: '左', value: 1 },
{ label: '右', value: 2 },
{ label: '居中', value: 3 },
{ label: '两端', value: 4 },
],
internalIndentationList: [
{ label: '有', value: '1' },
{ label: '无', value: '0' },
],
internalIndentationUnitList: [
{ label: '字符', value: '1' },
{ label: '无', value: '0' },
],
internalLineSpaceUnitList: [
{ label: '行', value: '1' },
{ label: '磅', value: '2' },
{ label: '厘米', value: '3' },
],
chFontList:[
{ label: '宋体', value: 1 },
{ label: '黑体', value: 2 },
{ label: '仿宋_GB2312', value: 3 }
],
engFontList:[
{ label: 'Arial', value: 1 },
{ label: 'Times New Roman', value: 2 },
{ label: 'Courier New', value: 3 }
],
speFormatList:[
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
engFontWeightList:[
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
chFontWeightList:[
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
titlePosList:[
{ label: '表格之上', value: 1 },
{ label: '表格之下', value: 2 },
],
imgPosList:[
{ label: '图片之上', value: 1 },
{ label: '图片之下', value: 2 },
],
boldList:[
{ label: '加粗', value: 1 },
{ label: '不加粗', value: 2 }
]
};
},
computed: {
// 计算属性：优先使用外部传入的选项
alignList() {
return this.alignOptions.length > 0 ? this.alignOptions : this.internalAlignList;
},
indentationList() {
return this.indentationOptions.length > 0 ? this.indentationOptions : this.internalIndentationList;
},
indentationUnitList() {
return this.indentationUnitOptions.length > 0 ? this.indentationUnitOptions : this.internalIndentationUnitList;
},
lineSpaceUnitList() {
return this.lineSpaceUnitOptions.length > 0 ? this.lineSpaceUnitOptions : this.internalLineSpaceUnitList;
},
// 计算是否显示缩进区域
computedShowIndentation() {
if (this.showIndentation !== null) {
return this.showIndentation; // 外部控制
}
// 内部逻辑：当indentation为'1'时显示
return this.coverInfo.indentation === '1';
}
},
watch: {
// 监听外部传入的数据变化
initData: {
handler(newData) {
if (newData && Object.keys(newData).length > 0) {
this.setFormData(newData);
}
},
immediate: true,
deep: true
}
},
methods: {
/**
* 取消/重置按钮点击
* 如果外部提供了方法，则调用外部方法；否则使用内部方法
*/
cancelClick() {
if (this.externalCancelMethod) {
this.externalCancelMethod(this.coverInfo);
} else {
this.internalCancel();
}
// 触发事件供外部监听
this.$emit('cancel', this.coverInfo);
},
/**
* 提交按钮点击
* 如果外部提供了方法，则调用外部方法；否则使用内部方法
*/
submitDoctorBaseInfo() {
if (this.externalSubmitMethod) {
this.externalSubmitMethod(this.coverInfo);
} else {
this.internalSubmit();
}
// 触发事件供外部监听
this.$emit('submit', this.coverInfo);
},
/**
* 内部重置方法
*/
internalCancel() {
// 重置表单数据
Object.keys(this.coverInfo).forEach(key => {
this.coverInfo[key] = '';
});
},
/**
* 内部提交方法
*/
internalSubmit() {
console.log('内部提交:', this.coverInfo);
// 这里可以添加内部提交逻辑，如验证等
},
/**
* 获取表单数据（供外部调用）
*/
getFormData() {
return { ...this.coverInfo };
},
/**
* 设置表单数据（供外部调用）
* @param {Object} data 表单数据
*/
setFormData(data) {
Object.keys(data).forEach(key => {
if (key in this.coverInfo) {
this.coverInfo[key] = data[key];
}
});
},
/**
* 重置表单（供外部调用）
*/
resetForm() {
this.internalCancel();
},
/**
* 验证表单（供外部调用）
* @returns {Object} 验证结果 {valid: Boolean, errors: Array}
*/
validateForm() {
const errors = [];
// 示例验证规则
if (!this.coverInfo.fontSize) {
errors.push('字号不能为空');
}
if (!this.coverInfo.align) {
errors.push('请选择对齐方式');
}
return {
valid: errors.length === 0,
errors: errors
};
},
/**
* 获取特定字段值（供外部调用）
* @param {String} field 字段名
* @returns {*} 字段值
*/
getFieldValue(field) {
return this.coverInfo[field];
},
/**
* 设置特定字段值（供外部调用）
* @param {String} field 字段名
* @param {*} value 字段值
*/
setFieldValue(field, value) {
if (field in this.coverInfo) {
this.coverInfo[field] = value;
}
},
/**
* 显示缩进区域（供外部调用）
*/
showIndentationArea() {
this.$emit('update:showIndentation', true);
},
/**
* 隐藏缩进区域（供外部调用）
*/
hideIndentationArea() {
this.$emit('update:showIndentation', false);
}
}
name: 'CoverInfoPage',
props: {
title: {
type: String,
default: '封面信息'
},
desc: {
type: String,
default: ''
},
titlePosFlag: {// 标题位置是否显示
type: Boolean,
default: false
},
imgPosFlag: {// 图片位置是否显示
type: Boolean,
default: false
},
eng_keywords: {// 是否有英文关键词字段
type: Boolean,
default: false
},
ch_keywords: {// 是否有中文关键词字段
type: Boolean,
default: false
},
fontDetailflag: {// 字体详情是否显示
type: Boolean,
default: false
},
fontWeightflag: {// 字重是否显示
type: Boolean,
default: true
},
// 外部传入的数据
initData: {
type: Object,
default: () => ({})
},
// 外部传入的选项列表
alignOptions: {
type: Array,
default: () => []
},
indentationOptions: {
type: Array,
default: () => []
},
indentationUnitOptions: {
type: Array,
default: () => []
},
lineSpaceUnitOptions: {
type: Array,
default: () => []
},
// 是否显示缩进区域（外部可控制）
showIndentation: {
type: Boolean,
default: true // 默认null表示使用内部逻辑
},
lineSpaceShow: {
type: Boolean,
default: true
},
// 重置和提交方法是否由外部提供
externalCancelMethod: {
type: Function,
default: null
},
externalSubmitMethod: {
type: Function,
default: null
}
},
components: {
GroupFormBtns,
GuipInput,
GuipRadio,
GuipSelect
},
data() {
return {
coverInfo: {
lineSpaceUnit: '',// 行距单位
lineSpace: '',// 行距
indentationUnit: '',// 缩进单位
indentation: '',// 缩进
align: '',// 对齐方式
fontSize: '',// 字号
eng_f_weight: '',// 英文字重
ch_f_weight: '',// 中文字重
spe_format: '',// 特殊格式
text_before: '',// 文本之前
text_after: '',// 文本之后
paragraph_before: '',// 段前段后间距（行）
paragraph_after: '',// 段前段后间距（行）
eng_font: '',// 英文字体
ch_font: '',// 中文字体
bold: '',// 字重
title_pos: '',// 标题位置
img_pos: '',// 图片位置
},
delimiter: '',// 分隔符
grammarCheck: '',// 分隔符校验结果
// 内部默认选项，如果外部没有传入则使用这些
internalAlignList: [
{ label: '左', value: 1 },
{ label: '右', value: 2 },
{ label: '居中', value: 3 },
{ label: '两端', value: 4 },
],
internalIndentationList: [
{ label: '有', value: '1' },
{ label: '无', value: '0' },
],
internalIndentationUnitList: [
{ label: '字符', value: '1' },
{ label: '无', value: '0' },
],
internalLineSpaceUnitList: [
{ label: '行', value: '1' },
{ label: '磅', value: '2' },
{ label: '厘米', value: '3' },
],
chFontList: [
{ label: '宋体', value: 1 },
{ label: '黑体', value: 2 },
{ label: '仿宋_GB2312', value: 3 }
],
engFontList: [
{ label: 'Arial', value: 1 },
{ label: 'Times New Roman', value: 2 },
{ label: 'Courier New', value: 3 }
],
speFormatList: [
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
engFontWeightList: [
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
chFontWeightList: [
{ label: '常规', value: 1 },
{ label: '加粗', value: 2 }
],
titlePosList: [
{ label: '表格之上', value: 1 },
{ label: '表格之下', value: 2 },
],
imgPosList: [
{ label: '图片之上', value: 1 },
{ label: '图片之下', value: 2 },
],
boldList: [
{ label: '加粗', value: 1 },
{ label: '不加粗', value: 2 }
]
};
},
computed: {
// 计算属性：优先使用外部传入的选项
alignList() {
return this.alignOptions.length > 0 ? this.alignOptions : this.internalAlignList;
},
indentationList() {
return this.indentationOptions.length > 0 ? this.indentationOptions : this.internalIndentationList;
},
indentationUnitList() {
return this.indentationUnitOptions.length > 0 ? this.indentationUnitOptions : this.internalIndentationUnitList;
},
lineSpaceUnitList() {
return this.lineSpaceUnitOptions.length > 0 ? this.lineSpaceUnitOptions : this.internalLineSpaceUnitList;
},
// 计算是否显示缩进区域
computedShowIndentation() {
if (this.showIndentation !== null) {
return this.showIndentation && this.coverInfo.indentation === '1'; // 外部控制
}
return false;
}
},
watch: {
// 监听外部传入的数据变化
initData: {
handler(newData) {
if (newData && Object.keys(newData).length > 0) {
this.setFormData(newData);
}
},
immediate: true,
deep: true
},
},
methods: {
checkGrammar(e) {
// 英文字符（自动检测）
// const reg = /[\u4e00-\u9fa5]/;
this.grammarCheck = this.checkSymbolType(e)
},
// 检测单个字符类型
checkSymbolType(char) {
// 中文符号正则（已修复）
const chineseSymbols = /[，。；：！？「」『』【】（）《》﹁﹂…—～、·]/;
const englishSymbols = new RegExp("[,.;:!?()\\[\\]{}'\"`~\\-_=+<>/\\\\|]");
if (!char || char.length === 0) return 'empty';
// 检查是否为中文符号
if (chineseSymbols.test(char)) {
return '中文字符（自动检测）';
}
// 检查是否为英文符号
if (englishSymbols.test(char)) {
return '英文字符（自动检测）';
}
// 检查Unicode范围
const code = char.charCodeAt(0);
// 中文标点符号的Unicode范围
if ((code >= 0x3000 && code <= 0x303F) || // CJK符号和标点
(code >= 0xFF00 && code <= 0xFFEF)) { // 全角符号
return '中文字符（自动检测）';
}
// 英文标点符号的ASCII范围
if ((code >= 0x20 && code <= 0x2F) || // 标点符号
(code >= 0x3A && code <= 0x40) || // 标点符号
(code >= 0x5B && code <= 0x60) || // 标点符号
(code >= 0x7B && code <= 0x7E)) { // 标点符号
return '英文字符（自动检测）';
}
return '未知字符类型';
},
/**
* 取消/重置按钮点击
* 如果外部提供了方法，则调用外部方法；否则使用内部方法
*/
cancelClick() {
if (this.externalCancelMethod) {
this.externalCancelMethod(this.coverInfo);
} else {
this.internalCancel();
}
// 触发事件供外部监听
this.$emit('cancel', this.coverInfo);
},
/**
* 提交按钮点击
* 如果外部提供了方法，则调用外部方法；否则使用内部方法
*/
submitDoctorBaseInfo() {
if (this.externalSubmitMethod) {
this.externalSubmitMethod(this.coverInfo);
} else {
this.internalSubmit();
}
// 触发事件供外部监听
this.$emit('submit', this.coverInfo);
},
/**
* 内部重置方法
*/
internalCancel() {
// 重置表单数据
Object.keys(this.coverInfo).forEach(key => {
this.coverInfo[key] = '';
});
},
/**
* 内部提交方法
*/
internalSubmit() {
console.log('内部提交:', this.coverInfo);
// 这里可以添加内部提交逻辑，如验证等
},
/**
* 获取表单数据（供外部调用）
*/
getFormData() {
return { ...this.coverInfo };
},
/**
* 设置表单数据（供外部调用）
* @param {Object} data 表单数据
*/
setFormData(data) {
Object.keys(data).forEach(key => {
if (key in this.coverInfo) {
this.coverInfo[key] = data[key];
}
});
},
/**
* 重置表单（供外部调用）
*/
resetForm() {
this.internalCancel();
},
/**
* 验证表单（供外部调用）
* @returns {Object} 验证结果 {valid: Boolean, errors: Array}
*/
validateForm() {
const errors = [];
// 示例验证规则
if (!this.coverInfo.fontSize) {
errors.push('字号不能为空');
}
if (!this.coverInfo.align) {
errors.push('请选择对齐方式');
}
return {
valid: errors.length === 0,
errors: errors
};
},
/**
* 获取特定字段值（供外部调用）
* @param {String} field 字段名
* @returns {*} 字段值
*/
getFieldValue(field) {
return this.coverInfo[field];
},
/**
* 设置特定字段值（供外部调用）
* @param {String} field 字段名
* @param {*} value 字段值
*/
setFieldValue(field, value) {
if (field in this.coverInfo) {
this.coverInfo[field] = value;
}
},
/**
* 显示缩进区域（供外部调用）
*/
showIndentationArea() {
this.$emit('update:showIndentation', true);
},
/**
* 隐藏缩进区域（供外部调用）
*/
hideIndentationArea() {
this.$emit('update:showIndentation', false);
}
}
};
</script>
<style scoped lang="scss">
.client_flex-common .el-form-item__label {
width: 100px;
width: 100px;
}
.client_form {
width: 440px;
}
.grayLabel ::v-deep .label-text {
color: #8A9099;
}
.client_form{
width: 440px;
.grayLabel ::v-deep .el-form-item {
margin-bottom: 10px;
}
.grayLabel ::v-deep .label-text{
color: #8A9099;
.mt20 {
margin-bottom: 20px;
}
.mt20{
margin-bottom: 20px;
.el-form-item {
margin-bottom: 20px;
}
.el-form-item{
margin-bottom: 20px;
.grayUnit ::v-deep .unit{
color: #8A9099;
}
</style>

6
src/style/theme/common.scss
View File

@ -1241,6 +1241,12 @@ body {
border-radius: 12px;
}
.desc{
font-size: 12px;
font-weight: normal;
color: #626573;
margin-left: 8px;
}
}

87
src/views/clientSet/catalogPage.vue
View File

@ -0,0 +1,87 @@
<template>
<div class="mainTextPage main-content12">
<h3 class="pageTitle">目录</h3>
<div class="flex-between flex-common" id="mainTextTitle">
<ClientForm ref="oneLevelRef" title="一级标题" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="true" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="二级标题" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
<div class="flex-between flex-common mt12" id="">
<ClientForm ref="threeLevelRef" title="三级标题" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
@submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
</div>
</div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
components: {
ClientForm,
},
data() {
return {
initFormData: {
fontSize: '12',
align: 1,
indentation: '1'
},
};
},
methods: {
// 外部重置方法
handleCancelEvent(formData, refName) {
console.log('外部重置方法:', formData);
// 根据 refName 执行不同的重置逻辑
switch (refName) {
case 'oneLevel':
console.log('执行一级标题重置逻辑');
// 这里可以调用对应的 ref 方法
this.$refs[refName + 'Ref']?.someMethod();
break;
case 'twoLevel':
console.log('执行二级标题重置逻辑');
break;
case 'threeLevel':
console.log('执行三级标题重置逻辑');
break;
default:
console.log('默认重置逻辑');
}
},
// 外部提交方法
handleSubmitEvent(formData, refName) {
console.log('外部提交方法:', formData);
// 根据 refName 调用不同的 API
switch (refName) {
case 'oneLevel':
this.submitOneLevel(formData);
break;
case 'twoLevel':
this.submitTwoLevel(formData);
break;
}
},
submitOneLevel(data) {
// 调用一级标题的 API
console.log('提交一级标题数据:', data);
},
submitTwoLevel(data) {
// 调用二级标题的 API
console.log('提交二级标题数据:', data);
}
},
};
</script>
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

5
src/views/clientSet/coverInfoPage.vue
View File

@ -123,5 +123,8 @@ export default {
</script>
<style scoped lang="scss">
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

81
src/views/clientSet/headerPage.vue
View File

@ -0,0 +1,81 @@
<template>
<div class="mainTextPage main-content12">
<h3 class="pageTitle">页眉页码</h3>
<div class="flex-between flex-common" id="mainTextTitle">
<ClientForm ref="oneLevelRef" title="页眉" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="false" :showIndentation="false" :fontWeightflag="false" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="页码" :titlePosFlag="false" :fontDetailflag="false" :lineSpaceShow="false" :showIndentation="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
</div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
components: {
ClientForm,
},
data() {
return {
initFormData: {
fontSize: '12',
align: 1,
indentation: '1'
},
};
},
methods: {
// 外部重置方法
handleCancelEvent(formData, refName) {
console.log('外部重置方法:', formData);
// 根据 refName 执行不同的重置逻辑
switch (refName) {
case 'oneLevel':
console.log('执行一级标题重置逻辑');
// 这里可以调用对应的 ref 方法
this.$refs[refName + 'Ref']?.someMethod();
break;
case 'twoLevel':
console.log('执行二级标题重置逻辑');
break;
case 'threeLevel':
console.log('执行三级标题重置逻辑');
break;
default:
console.log('默认重置逻辑');
}
},
// 外部提交方法
handleSubmitEvent(formData, refName) {
console.log('外部提交方法:', formData);
// 根据 refName 调用不同的 API
switch (refName) {
case 'oneLevel':
this.submitOneLevel(formData);
break;
case 'twoLevel':
this.submitTwoLevel(formData);
break;
}
},
submitOneLevel(data) {
// 调用一级标题的 API
console.log('提交一级标题数据:', data);
},
submitTwoLevel(data) {
// 调用二级标题的 API
console.log('提交二级标题数据:', data);
}
},
};
</script>
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

5
src/views/clientSet/mainTextPage.vue
View File

@ -5,12 +5,12 @@
<ClientForm ref="oneLevelRef" title="一级标题" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="true" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="二级标题" :titlePosFlag="false" :fontDetailflag="false"
<ClientForm ref="twoLevelRef" title="二级标题" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
<div class="flex-between flex-common mt12" id="">
<ClientForm ref="threeLevelRef" title="三级标题" :titlePosFlag="false" :fontDetailflag="false"
<ClientForm ref="threeLevelRef" title="三级标题" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
@submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
</div>
@ -103,5 +103,6 @@ export default {
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

78
src/views/clientSet/referencePage.vue
View File

@ -0,0 +1,78 @@
<template>
<div class="mainTextPage main-content12">
<h3 class="pageTitle">参考文献</h3>
<div class="flex-between flex-common" id="mainTextTitle">
<ClientForm ref="oneLevelRef" title="参考文献标题" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="参考文献正文" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
</div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
components: {
ClientForm,
},
data() {
return {
initFormData: {
fontSize: '12',
align: 1,
indentation: '1'
},
};
},
methods: {
// 外部重置方法
handleCancelEvent(formData, refName) {
console.log('外部重置方法:', formData);
// 根据 refName 执行不同的重置逻辑
switch (refName) {
case 'oneLevel':
console.log('执行一级标题重置逻辑');
// 这里可以调用对应的 ref 方法
this.$refs[refName + 'Ref']?.someMethod();
break;
case 'twoLevel':
console.log('执行二级标题重置逻辑');
break;
default:
console.log('默认重置逻辑');
}
},
// 外部提交方法
handleSubmitEvent(formData, refName) {
console.log('外部提交方法:', formData);
// 根据 refName 调用不同的 API
switch (refName) {
case 'oneLevel':
this.submitOneLevel(formData);
break;
case 'twoLevel':
this.submitTwoLevel(formData);
break;
}
},
submitOneLevel(data) {
// 调用一级标题的 API
console.log('提交一级标题数据:', data);
},
submitTwoLevel(data) {
// 调用二级标题的 API
console.log('提交二级标题数据:', data);
}
},
};
</script>
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

106
src/views/clientSet/summaryPage.vue
View File

@ -0,0 +1,106 @@
<template>
<div class="mainTextPage main-content12">
<h3 class="pageTitle">摘要</h3>
<div class="flex-between flex-common" id="summaryTitle">
<ClientForm ref="oneLevelRef" title="中文摘要标题" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="英文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
<div class="flex-between flex-common mt12" id="summaryContent">
<ClientForm ref="threeLevelRef" title="中文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
@submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
<ClientForm ref="threeLevelRef" title="英文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
@submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
</div>
<div class="flex-between flex-common mt12" id="summaryKeyWords">
<ClientForm ref="mainRef" title="中文关键词" :titlePosFlag="false" :fontDetailflag="false" :ch_keywords="true" :showIndentation="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')"
@submit="(data) => handleSubmitEvent(data, 'mainRef')" />
<ClientForm ref="mainRef" title="英文关键词" :titlePosFlag="false" :fontDetailflag="false" :eng_keywords="true" :showIndentation="false"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')"
@submit="(data) => handleSubmitEvent(data, 'mainRef')" />
</div>
</div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
components: {
ClientForm,
},
data() {
return {
initFormData: {
fontSize: '12',
align: 1,
indentation: '0'
},
};
},
methods: {
// 外部重置方法
handleCancelEvent(formData, refName) {
console.log('外部重置方法:', formData);
// 根据 refName 执行不同的重置逻辑
switch (refName) {
case 'oneLevel':
console.log('执行一级标题重置逻辑');
// 这里可以调用对应的 ref 方法
this.$refs[refName + 'Ref']?.someMethod();
break;
case 'twoLevel':
console.log('执行二级标题重置逻辑');
break;
case 'threeLevel':
console.log('执行三级标题重置逻辑');
break;
case 'main':
console.log('执行正文内容重置逻辑');
break;
case 'table':
console.log('执行表格标题重置逻辑');
break;
case 'images':
console.log('执行图片标题重置逻辑');
break;
default:
console.log('默认重置逻辑');
}
},
// 外部提交方法
handleSubmitEvent(formData, refName) {
console.log('外部提交方法:', formData);
// 根据 refName 调用不同的 API
switch (refName) {
case 'oneLevel':
this.submitOneLevel(formData);
break;
case 'twoLevel':
this.submitTwoLevel(formData);
break;
}
},
submitOneLevel(data) {
// 调用一级标题的 API
console.log('提交一级标题数据:', data);
},
submitTwoLevel(data) {
// 调用二级标题的 API
console.log('提交二级标题数据:', data);
}
},
};
</script>
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>

80
src/views/clientSet/switchPage.vue
View File

@ -0,0 +1,80 @@
<template>
<div class="mainTextPage main-content12">
<h3 class="pageTitle">启用开关</h3>
<div class="flex-between flex-common" id="mainTextTitle">
<el-form>
<div class="left-pay-list ">
<div class="left-pay-item flex-between">
<div class="column">
<span>模板启用</span>
<p>中国人民大学-硕士-通用</p>
</div>
<GuipSwitch v-model="is_use_templete" :active-value="1" :inactive-value="0" activeText="开启" inactiveText="关闭" @change="updatePayAutoRefund"></GuipSwitch>
</div>
</div>
</el-form>
</div>
</div>
</template>
<script>
import GuipSwitch from '@/components/GuipSwitch.vue';
export default {
components: {
GuipSwitch
},
data() {
return {
is_use_templete:1
};
},
methods: {
updatePayAutoRefund() {
this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
status: this.is_use_templete,
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
},
};
</script>
<style lang="scss" scoped>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
.left-pay-list {
width: 438px;
border-radius: 4px;
opacity: 1;
.left-pay-item {
padding: 24px;
color: #23242B;
background: #FAFAFA;
p {
text-align: left;
margin-top: 9px;
/* caption/caption_regular */
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #626573;
}
.el-form-item {
margin-bottom: 0;
}
}
}
</style>

79
src/views/clientSet/thanksPage.vue
View File

@ -0,0 +1,79 @@
<template>
<!-- 致谢页面、参考文献页面应该能公用、后续根据实际情况克以直接合并页面-->
<div class="mainTextPage main-content12">
<h3 class="pageTitle">致谢</h3>
<div class="flex-between flex-common" id="mainTextTitle">
<ClientForm ref="oneLevelRef" title="致谢标题" :init-data="initFormData" :titlePosFlag="false"
:fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
@submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
<ClientForm ref="twoLevelRef" title="致谢正文" desc="自动继承正文数据，可修改" :titlePosFlag="false" :fontDetailflag="true"
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
@submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
</div>
</div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
components: {
ClientForm,
},
data() {
return {
initFormData: {
fontSize: '12',
align: 1,
indentation: '0'
},
};
},
methods: {
// 外部重置方法
handleCancelEvent(formData, refName) {
console.log('外部重置方法:', formData);
// 根据 refName 执行不同的重置逻辑
switch (refName) {
case 'oneLevel':
console.log('执行一级标题重置逻辑');
// 这里可以调用对应的 ref 方法
this.$refs[refName + 'Ref']?.someMethod();
break;
case 'twoLevel':
console.log('执行二级标题重置逻辑');
break;
default:
console.log('默认重置逻辑');
}
},
// 外部提交方法
handleSubmitEvent(formData, refName) {
console.log('外部提交方法:', formData);
// 根据 refName 调用不同的 API
switch (refName) {
case 'oneLevel':
this.submitOneLevel(formData);
break;
case 'twoLevel':
this.submitTwoLevel(formData);
break;
}
},
submitOneLevel(data) {
// 调用一级标题的 API
console.log('提交一级标题数据:', data);
},
submitTwoLevel(data) {
// 调用二级标题的 API
console.log('提交二级标题数据:', data);
}
},
};
</script>
<style>
.flex-common {
align-items: flex-start;
padding: 24px 32px;
}
</style>
Write Preview
Loading…
Cancel
Save