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> |
<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> |
</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