This commit is contained in:
helloDy
2023-11-29 16:53:51 +08:00
parent 904350a4d8
commit fa5a303c08
13 changed files with 306 additions and 274 deletions

View File

@@ -9,166 +9,168 @@
<el-drawer
:visible.sync="visible"
:show-close="false"
:wrapper-closable="false"
:wrapper-closable="disabled"
class="drawer"
size="60%">
custom-class="mes-drawer"
size="65%"
@closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
{{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }}
</small-title>
<el-form
ref="form"
:model="dataForm"
label-width="100px"
label-position="top"
v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="维修单号" prop="repairOrderNumber">
<span>{{ dataForm.repairOrderNumber }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备名称" prop="equipmentName">
<span>{{ dataForm.equipmentName }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修工" prop="repairman">
<span>{{ dataForm.repairman }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="故障发生时间" prop="faultTime">
<span>{{ parseTime(dataForm.faultTime) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="故障级别" prop="faultLevel">
<span>{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式" prop="repairmanPhone">
<span>{{ dataForm.repairmanPhone }}</span>
</el-form-item>
</el-col>
</el-row>
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
{{ '可编辑信息' }}
</small-title>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item
label="维修开始时间"
prop="maintenanceStartTime"
:rules="[{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]">
<el-date-picker
v-model="dataForm.maintenanceStartTime"
type="datetime"
:disabled="disabled"
placeholder="请选择维修开始时间"
value-format="timestamp" />
</el-form-item>
</el-col>
<div class="drawer-body flex">
<div class="drawer-body__content">
<el-form
ref="form"
:model="dataForm"
label-width="100px"
label-position="top"
v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="维修单号" prop="repairOrderNumber">
<span>{{ dataForm.repairOrderNumber }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备名称" prop="equipmentName">
<span>{{ dataForm.equipmentName }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修工" prop="repairman">
<span>{{ dataForm.repairman }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="故障发生时间" prop="faultTime">
<span>{{ parseTime(dataForm.faultTime) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="故障级别" prop="faultLevel">
<span>{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式" prop="repairmanPhone">
<span>{{ dataForm.repairmanPhone }}</span>
</el-form-item>
</el-col>
</el-row>
<el-col :span="8">
<el-form-item
label="维修结束时间"
prop="maintenanceFinishTime"
:rules="[{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]">
<el-date-picker
v-model="dataForm.maintenanceFinishTime"
type="datetime"
:disabled="disabled"
placeholder="请选择维修开始时间"
value-format="timestamp" />
</el-form-item>
</el-col>
<el-divider style="margin-top: -10px" />
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
{{ '设备维修信息' }}
</small-title>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item
label="维修开始时间"
prop="maintenanceStartTime"
:rules="[{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]">
<el-date-picker
v-model="dataForm.maintenanceStartTime"
type="datetime"
:disabled="disabled"
placeholder="请选择维修开始时间"
value-format="timestamp" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="维修结束时间"
prop="maintenanceFinishTime"
:rules="[{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]">
<el-date-picker
v-model="dataForm.maintenanceFinishTime"
type="datetime"
:disabled="disabled"
placeholder="请选择维修开始时间"
value-format="timestamp" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="维修方式"
prop="repairMode"
:rules="[{ required: true, message: '维修方式不能为空', trigger: 'blur' }]">
<el-select
:disabled="disabled"
v-model="dataForm.repairMode"
placeholder="请选择维修方式">
<el-option
v-for="opt in getDictDatas('repair-mode')"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="故障类型" prop="faultType">
<el-select
:disabled="disabled"
v-model="dataForm.faultType"
placeholder="请选择故障类型">
<el-option
v-for="opt in getDictDatas('fault-type')"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-col :span="8">
<el-form-item
label="维修方式"
prop="repairMode"
:rules="[{ required: true, message: '维修方式不能为空', trigger: 'blur' }]">
<el-select
:disabled="disabled"
v-model="dataForm.repairMode"
placeholder="请选择维修方式">
<el-option
v-for="opt in getDictDatas('repair-mode')"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="故障类型" prop="faultType">
<el-select
:disabled="disabled"
v-model="dataForm.faultType"
placeholder="请选择故障类型">
<el-option
v-for="opt in getDictDatas('fault-type')"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item
label="故障明细"
prop="faultDetail"
:rules="[{ required: true, message: '故障明细不能为空', trigger: 'blur' }]">
<!-- // 富文本 -->
<editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="150"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item
label="故障明细"
prop="faultDetail"
:rules="[{ required: true, message: '故障明细不能为空', trigger: 'blur' }]">
<!-- // 富文本 -->
<editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="380"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="维修记录" prop="maintenanceDetail">
<!-- // 富文本 -->
<editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="150"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="维修记录" prop="maintenanceDetail">
<!-- // 富文本 -->
<editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="380"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="维修附件" prop="file">
<FileUpload v-model="file" :limit="1" :f-name="fileName" :disabled="disabled" @name="setFileName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="维修附件" prop="file">
<FileUpload v-model="file" :limit="1" :f-name="fileName" :disabled="disabled" @name="setFileName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
:placeholder="`请输入备注`"
:disabled="disabled" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="20">
<el-col>
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
:placeholder="`请输入备注`"
:disabled="disabled" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="drawer-body__footer">
<el-button style="" @click="goback()">{{ disabled ? '返回' : '取消' }}</el-button>
<!-- <el-button v-if="disabled" type="primary" @click="goEdit()">
编辑
</el-button> -->
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>
<div v-if="!disabled" class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</div>
</div>
</div>
</el-drawer>
</template>
@@ -300,56 +302,39 @@ export default {
</script>
<style scoped>
.el-date-editor,
.el-select {
width: 100%;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
}
.drawer >>> .el-form-item__label {
padding: 0;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 0px;
}
.drawer >>> .el-drawer__body {
flex: 1;
height: 1px;
.small-title::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: 22px;
border-radius: 1px;
margin-right: 8px;
background-color: #0b58ff;
}
.drawer-body {
display: flex;
flex-direction: column;
height: 100%;
}
.drawer >>> .content {
padding: 30px 24px;
.drawer-body__content {
flex: 1;
display: flex;
flex-direction: column;
/* height: 100%; */
}
.drawer >>> .visual-part {
flex: 1 auto;
max-height: 76vh;
overflow: hidden;
overflow-y: scroll;
padding-right: 10px; /* 调整滚动条样式 */
}
.drawer >>> .el-form,
.drawer >>> .attr-list {
padding: 0 16px;
/* background: #eee; */
padding: 20px 30px;
overflow-y: auto;
}
.drawer-body__footer {