xuqiuyun/cattleTransportation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

集成百度鹰眼服务AK

Browse Source
This commit is contained in:
xuqiuyun
2025-11-21 17:22:20 +08:00
parent 73051df002
commit 0f963bf535
57 changed files with 6036 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
pc-cattle-transportation/src/views/system/addOrEditPost.vue
View File

@@ -1,12 +1,25 @@
<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="100">
<el-form-item label="岗位名称" prop="name">
<el-input v-model="form.data.name" placeholder="请输入岗位名称" style="width: 320px" />
<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 maxlength="100" v-model="form.data.description" placeholder="请输入岗位描述" style="width: 320px" />
<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>
@@ -19,7 +32,8 @@
</el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { reactive, ref, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { sysPositionSave } from '~/api/sys.js';
const dialogVisible = ref(false);
@@ -29,6 +43,31 @@ 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: '',
@@ -48,6 +87,8 @@ const onShowDialog = (val, page) => {
userId.value = val.id;
form.data = val;
}
// 修复标签宽度
fixLabelWidth();
};
const onClickSave = () => {
@@ -83,4 +124,72 @@ defineExpose({
onShowDialog,
});
</script>
<style lang="scss" scoped></style>
<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>