cattleTransportation/pc-cattle-transportation/src/views/system/addOrEditPost.vue

<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" style="width: 700px; padding-bottom: 20px">
        <div class="global_dialog_content">
            <el-form ref="FormDataRef" :model="form.data" :rules="form.rules" label-width="120px" class="post-form">
                <el-form-item label="岗位名称" prop="name" class="post-name-form-item">
                    <el-input 
                        v-model="form.data.name" 
                        placeholder="请输入岗位名称" 
                        clearable
                        class="post-name-input"
                    />
                </el-form-item>
                <el-form-item label="岗位描述" prop="description">
                    <el-input 
                        v-model="form.data.description" 
                        type="textarea"
                        :rows="4"
                        maxlength="100"
                        placeholder="请输入岗位描述" 
                        show-word-limit
                        class="post-description-input"
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="submitting" type="primary" @click="onClickSave">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { sysPositionSave } from '~/api/sys.js';

const dialogVisible = ref(false);
const FormDataRef = ref(null);
const submitting = ref(false);
const title = ref('');
const userId = ref('');

const emits = defineEmits();

// 修复标签宽度问题：覆盖内联样式
const fixLabelWidth = () => {
    nextTick(() => {
        const label = document.querySelector('.post-name-form-item .el-form-item__label');
        if (label) {
            // 直接设置样式属性，覆盖内联样式
            label.style.width = '120px';
            label.style.minWidth = '120px';
            label.style.maxWidth = '120px';
            label.style.whiteSpace = 'nowrap';
            label.style.overflow = 'visible';
            label.style.wordBreak = 'keep-all';
        }
    });
};

// 监听对话框打开，修复标签宽度
watch(dialogVisible, (newVal) => {
    if (newVal) {
        fixLabelWidth();
        // 延迟再次修复，确保 DOM 完全渲染
        setTimeout(fixLabelWidth, 100);
    }
});
const form = reactive({
    data: {
        name: '',
        description: '',
        type: '',
    },
    rules: {
        name: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '岗位描述不能为空', trigger: 'blur' }],
    },
});

const onShowDialog = (val, page) => {
    title.value = !val ? '新增岗位' : '编辑岗位';
    dialogVisible.value = true;
    if (val) {
        userId.value = val.id;
        form.data = val;
    }
    // 修复标签宽度
    fixLabelWidth();
};

const onClickSave = () => {
    FormDataRef.value.validate((valid) => {
        if (valid) {
            submitting.value = true;
            const params = { ...form.data };
            if (!userId.value) {
                params.id = userId.value;
            }
            sysPositionSave(params)
                .then(() => {
                    ElMessage.success('操作成功');
                    handleClose();
                    emits('success');
                    submitting.value = false;
                })
                .catch(() => {
                    submitting.value = false;
                });
        }
    });
};

const handleClose = () => {
    form.data = {};
    dialogVisible.value = false;
    if (FormDataRef.value) {
        FormDataRef.value.clearValidate();
    }
};
defineExpose({
    onShowDialog,
});
</script>
<style lang="scss" scoped>
.post-form {
    // 针对岗位名称表单项的标签，确保不换行
    // 使用更具体的选择器来覆盖内联样式
    :deep(.post-name-form-item) {
        .el-form-item__label {
            // 使用 !important 覆盖内联样式
            width: 120px !important;
            min-width: 120px !important;
            max-width: 120px !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: clip !important;
            padding-right: 12px !important;
            line-height: 32px !important;
            word-break: keep-all !important;
            word-wrap: normal !important;
            display: inline-block !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            // 强制覆盖任何内联样式
            &[style*="width"] {
                width: 120px !important;
            }
        }
        
        // 确保表单项内容区域不会挤压标签
        .el-form-item__content {
            flex: 1;
            min-width: 0;
        }
    }
    
    // 全局覆盖所有标签的内联样式
    :deep(.el-form-item__label[style*="width: 65px"]) {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    // 所有标签的通用样式
    :deep(.el-form-item__label) {
        width: 120px !important;
        min-width: 120px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        word-break: keep-all !important;
        word-wrap: normal !important;
    }
    
    // 优化输入框宽度
    .post-name-input {
        width: 100%;
        max-width: 500px;
    }
    
    .post-description-input {
        width: 100%;
        max-width: 500px;
    }
    
    // 确保表单项布局正常
    :deep(.el-form-item) {
        margin-bottom: 22px;
        display: flex;
        align-items: flex-start;
    }
}
</style>