kuailelunwen_new_houtai/src/components/clientSet/clientForm.vue

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