kuailelunwen_new_houtai/src/components/clientSet/clientForm.vue

<template>
    <div class="client_form " id="">
        <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" />

            <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.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>
            <!-- 行距部分 -->
            <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>


            <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: '封面信息'
        },
        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;
}

.client_form {
    width: 440px;
}

.grayLabel ::v-deep .label-text {
    color: #8A9099;
}

.grayLabel ::v-deep .el-form-item {
    margin-bottom: 10px;
}

.mt20 {
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}
.grayUnit ::v-deep .unit{
    color: #8A9099;
}
</style>