|
|
|
@ -1,16 +1,20 @@ |
|
|
|
<template> |
|
|
|
<div class="client_form" id=""> |
|
|
|
<div class="before_h_title mb24">{{ title }} <span class="desc" v-if="desc">{{ desc }}</span></div> |
|
|
|
<div class="client_form" id="" :key="dataKey"> |
|
|
|
<div class="before_h_title mb24" v-if="title">{{ title }} <span class="desc" v-if="desc">{{ desc }}</span></div> |
|
|
|
<el-form :model="coverInfo" v-if="coverInfo"> |
|
|
|
<!-- 中英文关键词-前缀 --> |
|
|
|
<div class="flex mt20" v-if="eng_keywords || ch_keywords"> |
|
|
|
<div class="flex mt20" v-if="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> |
|
|
|
<!-- <span class="desc" v-if="eng_keywords">指"key word"单词</span> --> |
|
|
|
</div> |
|
|
|
<div class="flex-label mt20" v-if="eng_keywords"> |
|
|
|
<div class="label-text">关键词</div> |
|
|
|
<span class="colon">：</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<GuipRadio :options="titlePosList" v-if="titlePosFlag" v-model="coverInfo.title_pos" :client-form-flex="true" |
|
|
|
label="标题位置" /> |
|
|
|
@ -68,7 +72,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 中英文关键词 --> |
|
|
|
<div class="mt20" v-if="eng_keywords || ch_keywords"> |
|
|
|
<div class="mt20" v-if="false"> |
|
|
|
<div class="flex-label mt20"> |
|
|
|
<div class="label-text">关键词</div> |
|
|
|
<span class="colon">：</span> |
|
|
|
@ -81,7 +85,7 @@ |
|
|
|
label="字号" :unit="coverInfo.font.en.font_size.unit" width="127px" /> |
|
|
|
</div> |
|
|
|
<GuipRadio :options="boldList" v-model="coverInfo.font.en.bold" :client-form-flex="true" label="字重" /> |
|
|
|
<GuipInput class="grayUnit" v-model="delimiter" :client-form-flex="true" placeholder="请填写" label="分隔符" |
|
|
|
<GuipInput v-if="false" class="grayUnit" v-model="delimiter" :client-form-flex="true" placeholder="请填写" label="分隔符" |
|
|
|
@blur="checkGrammar" :unit="grammarCheck" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -140,7 +144,7 @@ export default { |
|
|
|
props: { |
|
|
|
title: { |
|
|
|
type: String, |
|
|
|
default: '封面信息' |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
desc: { |
|
|
|
type: String, |
|
|
|
@ -218,10 +222,12 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
targetOriginalData: null, |
|
|
|
dataKey:Date.now(), |
|
|
|
// 主数据结构 - 对齐目标JSON格式 |
|
|
|
// title_pos: '', // 标题位置 |
|
|
|
// img_pos: '', // 图片位置 |
|
|
|
indentation: '1', // 缩进选项 |
|
|
|
indentation: '0', // 缩进选项 |
|
|
|
// spe_format: '', // 特殊格式 |
|
|
|
// delimiter: '', // 分隔符 |
|
|
|
coverInfo: { |
|
|
|
@ -308,7 +314,7 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['client_tpl_options']), |
|
|
|
...mapState(['client_tpl_options','client_tpl_type']), |
|
|
|
|
|
|
|
// 从client_tpl_options获取字体选项 |
|
|
|
zhFontOptions() { |
|
|
|
@ -368,7 +374,6 @@ export default { |
|
|
|
// 监听外部传入的数据变化 |
|
|
|
initData: { |
|
|
|
handler(newData) { |
|
|
|
console.log(newData,'newData====000'); |
|
|
|
if (newData && Object.keys(newData).length > 0) { |
|
|
|
this.setFormData(newData); |
|
|
|
} |
|
|
|
@ -446,97 +451,125 @@ export default { |
|
|
|
* 取消/重置按钮点击 |
|
|
|
*/ |
|
|
|
cancelClick() { |
|
|
|
if (this.externalCancelMethod) { |
|
|
|
this.externalCancelMethod(this.coverInfo); |
|
|
|
} else { |
|
|
|
// if (this.externalCancelMethod) { |
|
|
|
// this.externalCancelMethod(this.coverInfo); |
|
|
|
// } else { |
|
|
|
this.internalCancel(); |
|
|
|
} |
|
|
|
this.$emit('cancel', this.coverInfo); |
|
|
|
// } |
|
|
|
// this.$emit('cancel', this.coverInfo); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 提交按钮点击 |
|
|
|
*/ |
|
|
|
submitDoctorBaseInfo() { |
|
|
|
// 同步中文字体设置到英文字体（如果只选择了字体） |
|
|
|
// if (!this.fontDetailflag && this.coverInfo.font.en.font) { |
|
|
|
// this.coverInfo.font.zh.font = this.coverInfo.font.en.font; |
|
|
|
// this.coverInfo.font.zh.font_size.value = this.coverInfo.font.en.font_size.value; |
|
|
|
// this.coverInfo.font.zh.bold = this.coverInfo.font.en.bold; |
|
|
|
// } |
|
|
|
|
|
|
|
// if (this.externalSubmitMethod) { |
|
|
|
// this.externalSubmitMethod(this.coverInfo); |
|
|
|
// } else { |
|
|
|
// this.internalSubmit(); |
|
|
|
// } |
|
|
|
console.log(this.getFormData(),'====--000'); |
|
|
|
this.$emit('submit', this.getFormData()); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* 内部重置方法 |
|
|
|
*/ |
|
|
|
internalCancel() { |
|
|
|
// 重置到初始状态 |
|
|
|
this.coverInfo = { |
|
|
|
title_pos: '', |
|
|
|
img_pos: '', |
|
|
|
indentation: '', |
|
|
|
spe_format: '', |
|
|
|
delimiter: '', |
|
|
|
content: { |
|
|
|
font: { |
|
|
|
zh: { |
|
|
|
font: '', |
|
|
|
font_size: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
bold: 'False' |
|
|
|
}, |
|
|
|
en: { |
|
|
|
font: '', |
|
|
|
font_size: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
bold: 'False' |
|
|
|
} |
|
|
|
}, |
|
|
|
alignment: '', |
|
|
|
indentation: { |
|
|
|
first_line_indent: { |
|
|
|
unit: 'character', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
text_before_indent: { |
|
|
|
unit: 'character', |
|
|
|
// 如果是编辑状态且有存储的目标数据，恢复目标数据 |
|
|
|
if (this.client_tpl_type === 'edit' && this.targetOriginalData) { |
|
|
|
// 只恢复从 initData 中提取的那部分数据 |
|
|
|
this.restoreTargetOriginalData(); |
|
|
|
} else { |
|
|
|
// 创建状态或没有目标数据，使用默认重置 |
|
|
|
this.defaultReset(); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 恢复目标原始数据 |
|
|
|
*/ |
|
|
|
restoreTargetOriginalData() { |
|
|
|
console.log('zoudaozhelide '); |
|
|
|
// 重置到默认状态 |
|
|
|
this.coverInfo = this.getDefaultCoverInfo(); |
|
|
|
console.log('this.targetOriginalData===',this.targetOriginalData); |
|
|
|
// 用存储的目标数据覆盖默认值 |
|
|
|
this.processLevelData(this.targetOriginalData); |
|
|
|
this.dataKey= Date.now(); |
|
|
|
|
|
|
|
// 重置其他UI相关字段 |
|
|
|
this.delimiter = ''; |
|
|
|
this.grammarCheck = ''; |
|
|
|
|
|
|
|
// 根据目标数据设置缩进选项 |
|
|
|
if (this.targetOriginalData.indentation && |
|
|
|
this.targetOriginalData.indentation.first_line_indent?.value && |
|
|
|
parseInt(this.targetOriginalData.indentation.first_line_indent.value) > 0) { |
|
|
|
this.indentation = '1'; |
|
|
|
} else { |
|
|
|
this.indentation = '0'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 默认重置（创建状态） |
|
|
|
*/ |
|
|
|
defaultReset() { |
|
|
|
console.log('这里'); |
|
|
|
this.coverInfo = this.getDefaultCoverInfo(); |
|
|
|
this.indentation = '1'; // 默认有缩进 |
|
|
|
this.delimiter = ''; |
|
|
|
this.grammarCheck = ''; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 获取默认的 coverInfo 结构 |
|
|
|
*/ |
|
|
|
getDefaultCoverInfo() { |
|
|
|
return { |
|
|
|
font: { |
|
|
|
zh: { |
|
|
|
font: '', |
|
|
|
font_size: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
text_end_indent: { |
|
|
|
unit: 'character', |
|
|
|
value: '' |
|
|
|
} |
|
|
|
bold: 'True' |
|
|
|
}, |
|
|
|
spacing: { |
|
|
|
line_spacing: { |
|
|
|
unit: 'multiple', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
paragraph_before_spacing: { |
|
|
|
en: { |
|
|
|
font: '', |
|
|
|
font_size: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
paragraph_end_spacing: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
} |
|
|
|
bold: 'True' |
|
|
|
} |
|
|
|
}, |
|
|
|
alignment: '', |
|
|
|
indentation: { |
|
|
|
first_line_indent: { |
|
|
|
unit: 'character', |
|
|
|
value: '0' |
|
|
|
}, |
|
|
|
text_before_indent: { |
|
|
|
unit: 'character', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
text_end_indent: { |
|
|
|
unit: 'character', |
|
|
|
value: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
spacing: { |
|
|
|
line_spacing: { |
|
|
|
unit: 'multiple', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
paragraph_before_spacing: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
}, |
|
|
|
paragraph_end_spacing: { |
|
|
|
unit: 'pt', |
|
|
|
value: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
this.delimiter = ''; |
|
|
|
this.grammarCheck = ''; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
@ -609,15 +642,15 @@ export default { |
|
|
|
indentation: { |
|
|
|
first_line_indent: { |
|
|
|
unit: this.coverInfo.indentation.first_line_indent.unit, |
|
|
|
value: this.coverInfo.indentation.first_line_indent.value |
|
|
|
value: this.coverInfo.indentation.first_line_indent.value |
|
|
|
}, |
|
|
|
text_before_indent: { |
|
|
|
unit: this.coverInfo.indentation.text_before_indent.unit, |
|
|
|
value: this.coverInfo.indentation.text_before_indent.value |
|
|
|
value: this.indentation == '1' ? this.coverInfo.indentation.text_before_indent.value : '' |
|
|
|
}, |
|
|
|
text_end_indent: { |
|
|
|
unit: this.coverInfo.indentation.text_end_indent.unit, |
|
|
|
value: this.coverInfo.indentation.text_end_indent.value |
|
|
|
value: this.indentation == '1' ? this.coverInfo.indentation.text_end_indent.value : '' |
|
|
|
} |
|
|
|
}, |
|
|
|
spacing: { |
|
|
|
@ -642,9 +675,33 @@ export default { |
|
|
|
* @param {Object} data 表单数据 |
|
|
|
*/ |
|
|
|
setFormData(data) { |
|
|
|
// 支持两种格式：完整格式或简化格式 |
|
|
|
// 根据 outputStructure 提取目标数据 |
|
|
|
// const extractedData = this.extractDataByStructure(data, this.outputStructure); |
|
|
|
// console.log(extractedData,'extractedData====',this.outputStructure); |
|
|
|
// 存储提取后的目标数据 |
|
|
|
this.targetOriginalData = JSON.parse(JSON.stringify(data)); |
|
|
|
this.processLevelData(data) |
|
|
|
}, |
|
|
|
extractDataByStructure(data, structure) { |
|
|
|
if (!structure || structure.length === 0) { |
|
|
|
return data; |
|
|
|
} |
|
|
|
|
|
|
|
let result = data; |
|
|
|
for (const key of structure) { |
|
|
|
if (result && typeof result === 'object' && key in result) { |
|
|
|
result = result[key]; |
|
|
|
} else { |
|
|
|
// 如果找不到对应的键，返回空对象 |
|
|
|
console.log(result,'====8888'); |
|
|
|
return {}; |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(result,'====000'); |
|
|
|
|
|
|
|
return result || {}; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 处理包含数组的层级数据 |
|
|
|
* @param {Object} levelData level_1_heading数据 |
|
|
|
@ -831,102 +888,10 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 重置表单（供外部调用） |
|
|
|
*/ |
|
|
|
resetForm() { |
|
|
|
this.internalCancel(); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 验证表单 |
|
|
|
*/ |
|
|
|
validateForm() { |
|
|
|
const errors = []; |
|
|
|
|
|
|
|
if (!this.coverInfo.font.en.font_size.value) { |
|
|
|
errors.push('字号不能为空'); |
|
|
|
} |
|
|
|
if (!this.coverInfo.alignment) { |
|
|
|
errors.push('请选择对齐方式'); |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
valid: errors.length === 0, |
|
|
|
errors: errors |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取特定字段值 |
|
|
|
*/ |
|
|
|
getFieldValue(field) { |
|
|
|
const keys = field.split('.'); |
|
|
|
let value = this.coverInfo; |
|
|
|
|
|
|
|
for (const key of keys) { |
|
|
|
if (value && typeof value === 'object' && key in value) { |
|
|
|
value = value[key]; |
|
|
|
} else { |
|
|
|
return undefined; |
|
|
|
} |
|
|
|
} |
|
|
|
return value; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 设置特定字段值 |
|
|
|
*/ |
|
|
|
setFieldValue(field, value) { |
|
|
|
const keys = field.split('.'); |
|
|
|
let obj = this.coverInfo; |
|
|
|
|
|
|
|
for (let i = 0; i < keys.length - 1; i++) { |
|
|
|
if (!(keys[i] in obj)) { |
|
|
|
this.$set(obj, keys[i], {}); |
|
|
|
} |
|
|
|
obj = obj[keys[i]]; |
|
|
|
} |
|
|
|
|
|
|
|
const lastKey = keys[keys.length - 1]; |
|
|
|
this.$set(obj, lastKey, value); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<!-- |
|
|
|
<style scoped> |
|
|
|
.grayLabel { |
|
|
|
background-color: #f5f5f5; |
|
|
|
padding: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.showIndentation { |
|
|
|
margin-top: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-between { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-between:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.mt20 { |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.mb24 { |
|
|
|
margin-bottom: 24px; |
|
|
|
} |
|
|
|
</style> --> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.client_flex-common .el-form-item__label { |
|
|
|
width: 100px; |
|
|
|
|
zq
3 days ago