zq
3 days ago
6 changed files with 540 additions and 446 deletions
@ -0,0 +1,390 @@ |
|||
<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="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 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> |
|||
|
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|||
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); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.client_flex-common .el-form-item__label { |
|||
width: 100px; |
|||
} |
|||
.client_form{ |
|||
width: 440px; |
|||
} |
|||
.grayLabel ::v-deep .label-text{ |
|||
color: #8A9099; |
|||
} |
|||
.mt20{ |
|||
margin-bottom: 20px; |
|||
} |
|||
.el-form-item{ |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -1,6 +1,107 @@ |
|||
|
|||
<template> |
|||
<div class="mainTextPage"> |
|||
|
|||
<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="false" |
|||
: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" |
|||
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')" |
|||
@submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" /> |
|||
</div> |
|||
<div class="flex-between flex-common mt12" id="mainTextContent"> |
|||
<ClientForm ref="mainRef" title="正文内容" :titlePosFlag="false" :fontDetailflag="false" |
|||
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')" |
|||
@submit="(data) => handleSubmitEvent(data, 'mainRef')" /> |
|||
</div> |
|||
<div class="flex-between flex-common mt12" id="mainTextTableImage"> |
|||
<ClientForm ref="tableRef" title="表格标题" :titlePosFlag="true" :fontDetailflag="true" |
|||
:init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'tableRef')" |
|||
@submit="(data) => handleSubmitEvent(data, 'tableRef')" /> |
|||
<ClientForm ref="imagesRef" title="图片标题" :imgPosFlag="true" :fontDetailflag="true" :init-data="initFormData" |
|||
@cancel="(data) => handleCancelEvent(data, 'imagesRef')" |
|||
@submit="(data) => handleSubmitEvent(data, 'imagesRef')" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</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; |
|||
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; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue