物料详情页备注独占一行并自动折行,弹窗加宽,规格标选填

This commit is contained in:
文睿 张 2026-10-14 17:29:24 +08:00
parent 062abcb3d0
commit 75045862e8

View File

@ -90,7 +90,7 @@
</el-table-column> </el-table-column>
</BaseTable> </BaseTable>
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @close="handleDialogClose"> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="750px" @close="handleDialogClose">
<!-- 本公司没有任何可用分类时,建档会卡在“选不出大类/小类”,这里给出明确的配置入口。 --> <!-- 本公司没有任何可用分类时,建档会卡在“选不出大类/小类”,这里给出明确的配置入口。 -->
<el-alert <el-alert
v-if="isCreating && majorCategories.length === 0" v-if="isCreating && majorCategories.length === 0"
@ -116,7 +116,7 @@
<el-input v-model="form.name" /> <el-input v-model="form.name" />
</el-form-item> </el-form-item>
<el-form-item label="规格"> <el-form-item label="规格">
<el-input v-model="form.spec" /> <el-input v-model="form.spec" placeholder="选填" />
</el-form-item> </el-form-item>
<el-form-item label="来源"> <el-form-item label="来源">
<el-select v-model="form.source" clearable placeholder="选填" style="width: 100%"> <el-select v-model="form.source" clearable placeholder="选填" style="width: 100%">
@ -160,7 +160,7 @@
<img v-if="imagePreview" :src="imagePreview" style="max-width:200px;margin-top:10px;" /> <img v-if="imagePreview" :src="imagePreview" style="max-width:200px;margin-top:10px;" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-descriptions v-else-if="detailRow" :column="2" border> <el-descriptions v-else-if="detailRow" :column="2" border label-width="90px">
<el-descriptions-item label="物料编码">{{ detailRow.material_code }}</el-descriptions-item> <el-descriptions-item label="物料编码">{{ detailRow.material_code }}</el-descriptions-item>
<el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item> <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
<el-descriptions-item label="名称">{{ detailRow.name }}</el-descriptions-item> <el-descriptions-item label="名称">{{ detailRow.name }}</el-descriptions-item>
@ -173,7 +173,7 @@
<el-descriptions-item label="制造商">{{ detailRow.manufacturer_name || '-' }}</el-descriptions-item> <el-descriptions-item label="制造商">{{ detailRow.manufacturer_name || '-' }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ formatDate(detailRow.created_at, MATERIAL_DATE_OPTIONS) }}</el-descriptions-item> <el-descriptions-item label="创建时间">{{ formatDate(detailRow.created_at, MATERIAL_DATE_OPTIONS) }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ formatDate(detailRow.updated_at, MATERIAL_DATE_OPTIONS) }}</el-descriptions-item> <el-descriptions-item label="更新时间">{{ formatDate(detailRow.updated_at, MATERIAL_DATE_OPTIONS) }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ detailRow.remark || '-' }}</el-descriptions-item> <el-descriptions-item label="备注" :span="2" class-name="material-remark">{{ detailRow.remark || '-' }}</el-descriptions-item>
<el-descriptions-item label="物料图片" :span="2"> <el-descriptions-item label="物料图片" :span="2">
<el-image <el-image
v-if="detailRow.material_image" v-if="detailRow.material_image"
@ -747,4 +747,10 @@ useOrganizationSwitchGuard(() => hasUnsavedChanges.value)
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
/* 备注可能是没有空格的长 URL(找不到断行点会撑破单元格),也可能是多行文本。
pre-wrap 保留原本的换行与空格,break-all 让长 URL 能在任意字符处折行。 */
:deep(.material-remark) {
white-space: pre-wrap;
word-break: break-all;
}
</style> </style>