You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
781 lines
27 KiB
781 lines
27 KiB
<template>
|
|
<div class="quality-issue-detail">
|
|
<!-- 编辑模式 -->
|
|
<div v-if="isEditMode" class="edit-form">
|
|
<!-- 基础信息区 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">反馈单号：</div>
|
|
<div class="value disabled">{{ detailData.issueNo }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">问题日期：</div>
|
|
<el-date-picker
|
|
v-model="editData.issueDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
size="small"
|
|
class="edit-input"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">供应商编码：</div>
|
|
<div class="value disabled">{{ detailData.supplierNo }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">供应商名称：</div>
|
|
<div class="value disabled">{{ detailData.supplierName }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">供应商负责人：</div>
|
|
<el-input v-model="editData.supplierResponsible" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">Plant：</div>
|
|
<el-input v-model="editData.plant" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">Claim No：</div>
|
|
<el-input v-model="editData.claimNo" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">Product Category：</div>
|
|
<el-input v-model="editData.productCategory" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">Part No：</div>
|
|
<el-input v-model="editData.partNo" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">批次数量：</div>
|
|
<el-input-number v-model="editData.batchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">拒收批次数量：</div>
|
|
<el-input-number v-model="editData.rejectBatchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">投诉接收日期：</div>
|
|
<el-date-picker
|
|
v-model="editData.receiveComplaintDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">样品接收日期：</div>
|
|
<el-date-picker
|
|
v-model="editData.receiveSampleDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<div class="form-item">
|
|
<div class="label">问题简述：</div>
|
|
<el-input v-model="editData.issueSummary" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<div class="form-item textarea-item">
|
|
<div class="label">问题详细描述：</div>
|
|
<el-input type="textarea" v-model="editData.issueDescription" :rows="3" placeholder="请输入"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="form-item">
|
|
<div class="label">Level：</div>
|
|
<el-input v-model="editData.levelNo" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="form-item">
|
|
<div class="label">Mode 1：</div>
|
|
<el-input v-model="editData.mode1" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="form-item">
|
|
<div class="label">Mode 2：</div>
|
|
<el-input v-model="editData.mode2" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="form-item">
|
|
<div class="label">Mode 3：</div>
|
|
<el-input v-model="editData.mode3" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="form-item">
|
|
<div class="label">Inspector：</div>
|
|
<el-input v-model="editData.inspector" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入人：</div>
|
|
<div class="value disabled">{{ detailData.createBy }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入时间：</div>
|
|
<div class="value disabled">{{ detailData.createDate }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">要求回复日期：</div>
|
|
<el-date-picker
|
|
v-model="editData.requireReplyDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">状态：</div>
|
|
<div class="value disabled">{{ detailData.status }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<div class="form-item textarea-item">
|
|
<div class="label">Why Escape：</div>
|
|
<el-input type="textarea" v-model="editData.whyEscape" :rows="2" placeholder="请输入"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<div class="form-item textarea-item">
|
|
<div class="label">原因分析：</div>
|
|
<el-input type="textarea" v-model="editData.analysis" :rows="3" placeholder="请输入"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<div class="form-item textarea-item">
|
|
<div class="label">后续措施：</div>
|
|
<el-input type="textarea" v-model="editData.correctiveAction" :rows="3" placeholder="请输入"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">回复人：</div>
|
|
<el-input v-model="editData.replyBy" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">回复时间：</div>
|
|
<el-date-picker
|
|
v-model="editData.replyTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入人(回复)：</div>
|
|
<el-input v-model="editData.entryBy" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入时间(回复)：</div>
|
|
<el-date-picker
|
|
v-model="editData.entryDate"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 索赔信息区块 -->
|
|
<div class="claim-section">
|
|
<div class="claim-title">索赔信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">是否被索赔：</div>
|
|
<el-select v-model="editData.claimFlag" placeholder="请选择" size="small" style="width: 100%">
|
|
<el-option label="是" value="Y"></el-option>
|
|
<el-option label="否" value="N"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">被索赔金额：</div>
|
|
<el-input-number v-model="editData.claimAmount" :min="0" :precision="2" size="small" controls-position="right" style="width: 100%"></el-input-number>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="form-item">
|
|
<div class="label">处置备注：</div>
|
|
<el-input v-model="editData.disposalRemark" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入人(索赔)：</div>
|
|
<el-input v-model="editData.entryByClaim" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">录入时间(索赔)：</div>
|
|
<el-date-picker
|
|
v-model="editData.entryDateClaim"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">关闭人：</div>
|
|
<el-input v-model="editData.closeBy" placeholder="请输入" size="small"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="form-item">
|
|
<div class="label">关闭时间：</div>
|
|
<el-date-picker
|
|
v-model="editData.closeTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<!-- 编辑模式按钮列 -->
|
|
<el-col :span="12">
|
|
<div class="form-item btn-form-item"> <!-- 新增 btn-form-item 类 -->
|
|
<div class="label" style="opacity: 0;">占位</div> <!-- 透明占位，保持与左侧标签高度一致 -->
|
|
<div class="btn-area">
|
|
<el-button type="primary" size="small" @click="handleSave">保存</el-button>
|
|
<el-button size="small" @click="handleCancelEdit">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 查看模式 -->
|
|
<div v-else>
|
|
<!-- 保持原有的只读展示布局，但使用相同的栅格结构更整洁 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">反馈单号：</div><div class="value">{{ detailData.issueNo }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">问题日期：</div><div class="value">{{ formatDate(detailData.issueDate) }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">供应商负责人：</div><div class="value">{{ detailData.supplierResponsible }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">Plant：</div><div class="value">{{ detailData.plant }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">Claim No：</div><div class="value">{{ detailData.claimNo }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">Product Category：</div><div class="value">{{ detailData.productCategory }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">Part No：</div><div class="value">{{ detailData.partNo }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">批次数量：</div><div class="value">{{ detailData.batchQty }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">拒收批次数量：</div><div class="value">{{ detailData.rejectBatchQty }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">投诉接收日期：</div><div class="value">{{ formatDate(detailData.receiveComplaintDate) }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">样品接收日期：</div><div class="value">{{ formatDate(detailData.receiveSampleDate) }}</div></div></el-col>
|
|
<el-col :span="18"><div class="form-item"><div class="label">问题简述：</div><div class="value">{{ detailData.issueSummary }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24"><div class="form-item textarea-item"><div class="label">问题详细描述：</div><div class="value textarea-content">{{ detailData.issueDescription }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4"><div class="form-item"><div class="label">Level：</div><div class="value">{{ detailData.levelNo }}</div></div></el-col>
|
|
<el-col :span="5"><div class="form-item"><div class="label">Mode 1：</div><div class="value">{{ detailData.mode1 }}</div></div></el-col>
|
|
<el-col :span="5"><div class="form-item"><div class="label">Mode 2：</div><div class="value">{{ detailData.mode2 }}</div></div></el-col>
|
|
<el-col :span="5"><div class="form-item"><div class="label">Mode 3：</div><div class="value">{{ detailData.mode3 }}</div></div></el-col>
|
|
<el-col :span="5"><div class="form-item"><div class="label">Inspector：</div><div class="value">{{ detailData.inspector }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">要求回复日期：</div><div class="value">{{ formatDate(detailData.requireReplyDate) }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24"><div class="form-item textarea-item"><div class="label">Why Escape：</div><div class="value textarea-content">{{ detailData.whyEscape }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24"><div class="form-item textarea-item"><div class="label">原因分析：</div><div class="value textarea-content">{{ detailData.analysis }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24"><div class="form-item textarea-item"><div class="label">后续措施：</div><div class="value textarea-content">{{ detailData.correctiveAction }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">回复人：</div><div class="value">{{ detailData.replyBy }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">回复时间：</div><div class="value">{{ detailData.replyTime }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入人(回复)：</div><div class="value">{{ detailData.entryBy }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入时间(回复)：</div><div class="value">{{ detailData.entryDate }}</div></div></el-col>
|
|
</el-row>
|
|
<div class="claim-section">
|
|
<div class="claim-title">索赔信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">是否被索赔：</div><div class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">被索赔金额：</div><div class="value">{{ detailData.claimAmount }}</div></div></el-col>
|
|
<el-col :span="12"><div class="form-item"><div class="label">处置备注：</div><div class="value">{{ detailData.disposalRemark }}</div></div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入人(索赔)：</div><div class="value">{{ detailData.entryByClaim }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">录入时间(索赔)：</div><div class="value">{{ detailData.entryDateClaim }}</div></div></el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6"><div class="form-item"><div class="label">关闭人：</div><div class="value">{{ detailData.closeBy }}</div></div></el-col>
|
|
<el-col :span="6"><div class="form-item"><div class="label">关闭时间：</div><div class="value">{{ detailData.closeTime }}</div></div></el-col>
|
|
<el-col :span="12">
|
|
<div class="form-item btn-form-item">
|
|
<div class="label" style="opacity: 0;">占位</div>
|
|
<div class="btn-area">
|
|
<el-button type="primary" size="small" @click="handleEdit" v-if="canEdit">修改</el-button>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'QualityIssueDetail',
|
|
props: {
|
|
detailData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
canEdit: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isEditMode: false,
|
|
editData: {},
|
|
saveLoading: false
|
|
}
|
|
},
|
|
watch: {
|
|
detailData: {
|
|
handler(newVal) {
|
|
if (newVal && Object.keys(newVal).length) {
|
|
this.initEditData()
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
// 如果包含时分秒，截取前10位
|
|
return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
|
|
},
|
|
initEditData() {
|
|
this.editData = {
|
|
issueDate: this.detailData.issueDate,
|
|
supplierResponsible: this.detailData.supplierResponsible,
|
|
plant: this.detailData.plant,
|
|
claimNo: this.detailData.claimNo,
|
|
productCategory: this.detailData.productCategory,
|
|
partNo: this.detailData.partNo,
|
|
batchQty: this.detailData.batchQty,
|
|
rejectBatchQty: this.detailData.rejectBatchQty,
|
|
receiveComplaintDate: this.detailData.receiveComplaintDate,
|
|
receiveSampleDate: this.detailData.receiveSampleDate,
|
|
issueSummary: this.detailData.issueSummary,
|
|
issueDescription: this.detailData.issueDescription,
|
|
levelNo: this.detailData.levelNo,
|
|
mode1: this.detailData.mode1,
|
|
mode2: this.detailData.mode2,
|
|
mode3: this.detailData.mode3,
|
|
inspector: this.detailData.inspector,
|
|
requireReplyDate: this.detailData.requireReplyDate,
|
|
whyEscape: this.detailData.whyEscape,
|
|
analysis: this.detailData.analysis,
|
|
correctiveAction: this.detailData.correctiveAction,
|
|
replyBy: this.detailData.replyBy,
|
|
replyTime: this.detailData.replyTime,
|
|
entryBy: this.detailData.entryBy,
|
|
entryDate: this.detailData.entryDate,
|
|
claimFlag: this.detailData.claimFlag,
|
|
claimAmount: this.detailData.claimAmount,
|
|
disposalRemark: this.detailData.disposalRemark,
|
|
entryByClaim: this.detailData.entryByClaim,
|
|
entryDateClaim: this.detailData.entryDateClaim,
|
|
closeBy: this.detailData.closeBy,
|
|
closeTime: this.detailData.closeTime
|
|
}
|
|
},
|
|
handleEdit() {
|
|
this.isEditMode = true
|
|
this.initEditData()
|
|
},
|
|
handleCancelEdit() {
|
|
this.isEditMode = false
|
|
this.initEditData()
|
|
},
|
|
handleSave() {
|
|
this.saveLoading = true
|
|
// 触发父组件的保存事件，传递修改后的数据
|
|
this.$emit('save', this.editData, (success) => {
|
|
this.saveLoading = false
|
|
if (success !== false) {
|
|
this.isEditMode = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.quality-issue-detail {
|
|
padding: 10px 15px;
|
|
background: #fff;
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-item .label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
margin-bottom: 6px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* 查看模式下的只读字段 */
|
|
.form-item .value {
|
|
min-height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
background: #fff;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
color: #303133;
|
|
font-size: 13px;
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-item .value.disabled {
|
|
background: #f5f7fa;
|
|
color: #909399;
|
|
}
|
|
|
|
.form-item.textarea-item .value.textarea-content {
|
|
min-height: 60px;
|
|
line-height: 1.5;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
/* 统一编辑模式输入框样式 */
|
|
/deep/ .el-input--small .el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 文本域样式 */
|
|
/deep/ .el-textarea__inner {
|
|
height: auto;
|
|
line-height: 1.5;
|
|
padding: 8px 10px;
|
|
min-height: 60px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 下拉选择框 */
|
|
/deep/ .el-select .el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 日期选择器容器 */
|
|
/deep/ .el-date-editor {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/deep/ .el-date-editor.el-input,
|
|
/deep/ .el-date-editor.el-input__inner {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 日期选择器输入框 */
|
|
/deep/ .el-date-editor .el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 30px 0 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 日期时间选择器输入框 */
|
|
/deep/ .el-date-editor--datetime .el-input__inner {
|
|
padding: 0 40px 0 10px;
|
|
}
|
|
|
|
/* 修复图标垂直居中 - 关键 */
|
|
/deep/ .el-input {
|
|
line-height: 32px;
|
|
}
|
|
|
|
/deep/ .el-input__prefix,
|
|
/deep/ .el-input__suffix {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
height: 32px !important;
|
|
top: 0 !important;
|
|
bottom: auto !important;
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
/deep/ .el-input__suffix {
|
|
right: 5px;
|
|
}
|
|
|
|
/deep/ .el-input__prefix {
|
|
left: 5px;
|
|
}
|
|
|
|
/deep/ .el-input__suffix-inner,
|
|
/deep/ .el-input__prefix-inner {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
height: 100% !important;
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
/deep/ .el-input__icon {
|
|
line-height: 32px !important;
|
|
height: 32px !important;
|
|
width: 25px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
top: 0 !important;
|
|
}
|
|
|
|
/* 带后缀的输入框右侧留空间 */
|
|
/deep/ .el-input--suffix .el-input__inner {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
/* 带前缀的输入框左侧留空间 */
|
|
/deep/ .el-input--prefix .el-input__inner {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
/* 数字输入框 */
|
|
/deep/ .el-input-number--small {
|
|
width: 100%;
|
|
}
|
|
|
|
/deep/ .el-input-number--small .el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 40px 0 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
}
|
|
|
|
/deep/ .el-input-number--small .el-input-number__increase,
|
|
/deep/ .el-input-number--small .el-input-number__decrease {
|
|
height: 15px;
|
|
line-height: 15px;
|
|
width: 28px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.quality-issue-detail .el-button--small,
|
|
.quality-issue-detail .el-button--default {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 15px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
min-width: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.quality-issue-detail .el-button + .el-button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* 索赔信息区域 */
|
|
.claim-section {
|
|
border: 1px solid #dcdfe6;
|
|
padding: 10px 12px;
|
|
margin: 10px 0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.claim-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 12px;
|
|
padding-left: 8px;
|
|
border-left: 3px solid #409eff;
|
|
}
|
|
|
|
.btn-area {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-area .el-button {
|
|
width: auto !important;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.claim-section /deep/ .el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.claim-section /deep/ .el-input-number {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 日期时间选择器图标样式增强 */
|
|
/deep/ .el-date-editor--datetime {
|
|
.el-input__prefix,
|
|
.el-input__suffix {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
.el-input__icon {
|
|
line-height: 32px !important;
|
|
height: 32px !important;
|
|
}
|
|
}
|
|
</style>
|