@@ -0,0 +1,347 @@ | |||||
<!-- | |||||
filename: dialogForm.vue | |||||
author: liubin | |||||
date: 2023-10-31 15:55:13 | |||||
description: | |||||
--> | |||||
<template> | |||||
<el-drawer | |||||
:visible.sync="visible" | |||||
:show-close="false" | |||||
:wrapper-closable="disabled" | |||||
class="drawer" | |||||
custom-class="mes-drawer" | |||||
size="65%" | |||||
@closed="$emit('destroy')"> | |||||
<small-title slot="title" :no-padding="true"> | |||||
{{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }} | |||||
</small-title> | |||||
<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-divider /> | |||||
<div v-if=" disabled && dataForm.maintenanceStatus === 1 ? true : !disabled ? true : false"> | |||||
<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-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="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="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> | |||||
</div> | |||||
</el-form> | |||||
<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> | |||||
<script> | |||||
import SmallTitle from './SmallTitle.vue'; | |||||
import { getEqRepair, updateEqRepair } from '@/api/equipment/base/repair' | |||||
import Editor from "@/components/Editor"; | |||||
import FileUpload from "@/components/FileUpload"; | |||||
import { getDictDatas } from "@/utils/dict"; | |||||
import { parseTime } from '@/utils/ruoyi' | |||||
import { getDictDataLabel } from '@/utils/dict'; | |||||
export default { | |||||
name: 'DialogForm', | |||||
model: { | |||||
prop: 'dataForm', | |||||
event: 'update', | |||||
}, | |||||
emits: ['update'], | |||||
components: { SmallTitle, Editor, FileUpload }, | |||||
props: { | |||||
// dataForm: { | |||||
// type: Object, | |||||
// default: () => ({}), | |||||
// }, | |||||
// disabled: { | |||||
// type: Boolean, | |||||
// default: false | |||||
// }, | |||||
}, | |||||
data() { | |||||
return { | |||||
formLoading: true, | |||||
visible: false, | |||||
disabled: false, | |||||
dataForm: {}, | |||||
file: '', | |||||
fileName: '' | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
setFileName(val) { | |||||
this.fileName = val | |||||
}, | |||||
goback() { | |||||
this.$emit('refreshDataList'); | |||||
this.visible = false; | |||||
}, | |||||
goEdit() { | |||||
this.disabled = false; | |||||
}, | |||||
/** 模拟透传 ref */ | |||||
validate(cb) { | |||||
return this.$refs.form.validate(cb); | |||||
}, | |||||
resetFields(args) { | |||||
return this.$refs.form.resetFields(args); | |||||
}, | |||||
initData() { | |||||
this.file = '' | |||||
this.fileName = '' | |||||
}, | |||||
init(row, isdetail) { | |||||
this.initData(); | |||||
this.disabled = isdetail || false; | |||||
this.dataForm.id = row.id || undefined; | |||||
this.visible = true; | |||||
this.$nextTick(() => { | |||||
this.$refs['form'].resetFields(); | |||||
if (this.dataForm.id) { | |||||
// 获取设备维修 | |||||
getEqRepair(this.dataForm.id).then(response => { | |||||
this.formLoading = false | |||||
this.dataForm = response.data; | |||||
this.dataForm.maintenanceStatus = this.dataForm.maintenanceStatus || 0 | |||||
if (this.dataForm.files.length > 0) { | |||||
this.file = this.dataForm.files[0].fileUrl | |||||
this.fileName = this.dataForm.files[0].fileName | |||||
} | |||||
}); | |||||
} else { | |||||
// if (this.urlOptions.isGetCode) { | |||||
// this.getCode() | |||||
// } | |||||
} | |||||
}); | |||||
}, | |||||
// 表单提交 | |||||
dataFormSubmit() { | |||||
this.$refs["form"].validate((valid) => { | |||||
if (!valid) { | |||||
return false; | |||||
} | |||||
// 修改的提交 | |||||
if (this.file) { | |||||
const temp = this.file.split(',') // 获取文件个数 | |||||
let arry = [] | |||||
temp.forEach(item => { | |||||
arry.push({ | |||||
fileName: this.fileName, | |||||
fileType: 2, | |||||
fileUrl: item | |||||
}) | |||||
}) | |||||
this.dataForm.files = arry | |||||
} | |||||
if (this.dataForm.id) { | |||||
updateEqRepair(this.dataForm).then(response => { | |||||
this.$modal.msgSuccess("修改成功"); | |||||
this.visible = false; | |||||
this.$emit("refreshDataList"); | |||||
}); | |||||
return; | |||||
} | |||||
// 添加的提交 | |||||
// this.urlOptions.createURL(this.dataForm).then(response => { | |||||
// this.$modal.msgSuccess("新增成功"); | |||||
// this.visible = false; | |||||
// this.$emit("refreshDataList"); | |||||
// }); | |||||
}); | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.drawer >>> .el-drawer { | |||||
border-radius: 8px 0 0 8px; | |||||
} | |||||
.drawer >>> .el-drawer__header { | |||||
margin: 0; | |||||
padding: 32px 32px 24px; | |||||
border-bottom: 1px solid #dcdfe6; | |||||
margin-bottom: 0px; | |||||
} | |||||
.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-body__content { | |||||
flex: 1; | |||||
/* background: #eee; */ | |||||
padding: 20px 30px; | |||||
overflow-y: auto; | |||||
} | |||||
.drawer-body__footer { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
padding: 18px; | |||||
} | |||||
</style> |
@@ -0,0 +1,402 @@ | |||||
<!-- | |||||
filename: dialogForm.vue | |||||
author: liubin | |||||
date: 2023-08-15 10:32:36 | |||||
description: 弹窗的表单组件 | |||||
--> | |||||
<template> | |||||
<el-form | |||||
ref="form" | |||||
:model="form" | |||||
:label-position="labelPosition" | |||||
v-loading="formLoading"> | |||||
<el-row :gutter="20"> | |||||
<!-- 维修单号 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="维修单号" | |||||
prop="repairOrderNumber" | |||||
:rules="[ | |||||
{ required: true, message: '维修单号不能为空', trigger: 'blur' }, | |||||
]"> | |||||
<el-input | |||||
v-model="form.repairOrderNumber" | |||||
@change="$emit('update', form)" | |||||
placeholder="请输入维修单号" | |||||
:disabled="disabled" /> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 维修工 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="维修工" | |||||
prop="repairman" | |||||
:rules="[ | |||||
{ required: true, message: '维修工不能为空', trigger: 'blur' }, | |||||
]"> | |||||
<el-input | |||||
v-model="form.repairman" | |||||
@change="$emit('update', form)" | |||||
placeholder="请输入维修工" | |||||
:disabled="disabled" /> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 设备大类 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="设备大类" | |||||
prop="equipmentCategory" | |||||
:rules="[ | |||||
{ required: true, message: '设备大类不能为空', trigger: 'blur' }, | |||||
]"> | |||||
<el-select | |||||
v-model="form.equipmentCategory" | |||||
:placeholder="`请选择设备大类`" | |||||
:disabled="disabled" | |||||
clearable | |||||
filterable | |||||
@change="handleEqTypeChange"> | |||||
<el-option | |||||
v-for="opt in equipmentTypeOptions" | |||||
:key="opt.value" | |||||
:label="opt.label" | |||||
:value="opt.value" /> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 设备名称 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="设备名称" | |||||
prop="equipmentId" | |||||
:rules="[ | |||||
{ required: true, message: '设备不能为空', trigger: 'blur' }, | |||||
]"> | |||||
<el-select | |||||
v-model="form.equipmentId" | |||||
:placeholder="`请选择设备`" | |||||
:disabled="disabled" | |||||
filterable | |||||
clearable | |||||
@change="$emit('update', form)"> | |||||
<el-option | |||||
v-for="opt in equipmentOptions" | |||||
:key="opt.value" | |||||
:label="opt.label" | |||||
:value="opt.value" /> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 故障发生时间 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="故障发生时间" | |||||
prop="faultTime" | |||||
:rules="[ | |||||
{ | |||||
required: true, | |||||
message: '故障发生时间不能为空', | |||||
trigger: 'blur', | |||||
}, | |||||
]"> | |||||
<el-date-picker | |||||
v-model="form.faultTime" | |||||
type="datetime" | |||||
:disabled="disabled" | |||||
:placeholder="`请选择故障发生时间`" | |||||
value-format="timestamp" | |||||
format="yyyy-MM-dd HH:mm:ss" | |||||
clearable | |||||
@change="$emit('update', form)" /> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 故障级别 --> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="故障级别" | |||||
prop="faultLevel" | |||||
:rules="[ | |||||
{ | |||||
required: true, | |||||
message: '故障级别不能为空', | |||||
trigger: 'blur', | |||||
}, | |||||
]"> | |||||
<el-select | |||||
v-model="form.faultLevel" | |||||
placeholder="故障级别" | |||||
:disabled="disabled" | |||||
@change="$emit('update', form)"> | |||||
<el-option | |||||
v-for="opt in getDictDatas(DICT_TYPE.FAULT_LEVEL)" | |||||
:key="opt.value" | |||||
:label="opt.label" | |||||
:value="opt.value" /> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<!-- 联系方式 --> | |||||
<el-col :span="24"> | |||||
<el-form-item | |||||
label="联系方式" | |||||
prop="repairmanPhone" | |||||
:rules="[ | |||||
{ required: true, message: '联系方式不能为空', trigger: 'blur' }, | |||||
]"> | |||||
<el-input | |||||
v-model="form.repairmanPhone" | |||||
@change="$emit('update', form)" | |||||
placeholder="请输入联系方式" | |||||
:disabled="disabled" /> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</el-form> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'DialogForm', | |||||
model: { | |||||
prop: 'dataForm', | |||||
event: 'update', | |||||
}, | |||||
emits: ['update'], | |||||
components: {}, | |||||
props: { | |||||
dataForm: { | |||||
type: Object, | |||||
default: () => ({}), | |||||
}, | |||||
disabled: { | |||||
type: Boolean, | |||||
default: false, | |||||
}, | |||||
labelPosition: { | |||||
type: String, | |||||
default: 'top', | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
allSpeicalEquipments: [], | |||||
uploadOpen: false, | |||||
form: {}, | |||||
formLoading: true, | |||||
dataLoaded: false, | |||||
equipmentList: [], | |||||
equipmentOptions: [], | |||||
equipmentTypeOptions: [ | |||||
{ label: '安全设备', value: 1 }, | |||||
{ label: '消防设备', value: 2 }, | |||||
{ label: '特种设备', value: 3 }, | |||||
], | |||||
workerOptions: [], | |||||
planOptions: [], | |||||
}; | |||||
}, | |||||
watch: { | |||||
dataForm: { | |||||
handler(val) { | |||||
this.form = JSON.parse(JSON.stringify(val)); | |||||
if (this.form.equipmentCategory != null) { | |||||
setTimeout(() => { | |||||
this.equipmentOptions = this.equipmentList | |||||
.filter((item) => item.special) | |||||
.filter( | |||||
(item) => item.specialType === this.form.equipmentCategory | |||||
) | |||||
.map((item) => ({ label: item.name, value: item.id })); | |||||
}, 1000); | |||||
} | |||||
if (this.hasFiles) { | |||||
if (typeof this.hasFiles == 'boolean' && this.hasFiles) { | |||||
this.form.files = this.form.files ?? []; | |||||
} else if (Array.isArray(this.hasFiles)) { | |||||
this.hasFiles.forEach((prop) => { | |||||
this.form[prop] = this.form[prop] ?? []; | |||||
}); | |||||
} | |||||
} | |||||
}, | |||||
deep: true, | |||||
immediate: true, | |||||
}, | |||||
}, | |||||
mounted() { | |||||
this.initOptions(); | |||||
// this.getCode('/base/equipment-maintain-plan/getCode'); | |||||
}, | |||||
methods: { | |||||
/** 模拟透传 ref */ | |||||
validate(cb) { | |||||
return this.$refs.form.validate(cb); | |||||
}, | |||||
resetFields(args) { | |||||
return this.$refs.form.resetFields(args); | |||||
}, | |||||
// getCode | |||||
// async getCode(url) { | |||||
// this.formLoading = true; | |||||
// const response = await this.$axios(url); | |||||
// this.formLoading = false; | |||||
// this.form.code = response.data || ''; | |||||
// }, | |||||
// initialize | |||||
async initOptions() { | |||||
this.initEquipment(); | |||||
// this.initWorker(); | |||||
// this.initPlan(); | |||||
}, | |||||
async initEquipment(type = 'special-equipment') { | |||||
this.formLoading = true; | |||||
const response = await this.$axios('/base/core-equipment/listAll'); | |||||
this.equipmentList = response.data || []; | |||||
const equipmentOptions = (response.data || []) | |||||
.filter((item) => (type == 'special-equipment' ? item.special : true)) | |||||
.map((item) => ({ | |||||
label: item.name, | |||||
value: item.id, | |||||
})); | |||||
this.equipmentOptions = equipmentOptions; | |||||
this.allSpeicalEquipments = equipmentOptions; | |||||
this.formLoading = false; | |||||
}, | |||||
// async initWorker() { | |||||
// this.formLoading = true; | |||||
// const response = await this.$axios({ | |||||
// url: '/base/core-worker/listAll', | |||||
// }); | |||||
// this.workerOptions = (response.data || []).map((item) => ({ | |||||
// label: item.name, | |||||
// value: item.id, | |||||
// })); | |||||
// this.formLoading = false; | |||||
// }, | |||||
// async initPlan() { | |||||
// this.formLoading = true; | |||||
// const response = await this.$axios({ | |||||
// url: '/base/equipment-maintain-plan/page', | |||||
// params: { pageNo: 1, pageSize: 100, speical: true }, | |||||
// }); | |||||
// this.planOptions = (response.data?.list || []).map((item) => ({ | |||||
// label: item.name, | |||||
// value: item.id, | |||||
// })); | |||||
// this.formLoading = false; | |||||
// }, | |||||
// handlers | |||||
handleEqTypeChange(type) { | |||||
this.form.equipmentId = null; | |||||
if (type) { | |||||
this.equipmentOptions = this.equipmentList | |||||
.filter((item) => item.special) | |||||
.filter((item) => item.specialType === type) | |||||
.map((item) => ({ label: item.name, value: item.id })); | |||||
} else | |||||
this.equipmentOptions = this.equipmentList.map((item) => ({ | |||||
label: item.name, | |||||
value: item.id, | |||||
})); | |||||
// this.$emit('update', this.form) | |||||
}, | |||||
handleEqChange() { | |||||
this.$emit('update', this.form); | |||||
}, | |||||
// 修改 是否计划保养 时 | |||||
handlePlanChange(val) { | |||||
console.log('handlePlanChange', val); | |||||
this.form.equipmentCategory = null; | |||||
this.form.equipmentId = null; | |||||
this.$emit('update', { ...this.form, relatePlan: val }); | |||||
this.initEquipment(val == 1 ? 'special-equipment' : null); | |||||
}, | |||||
handleEditorInput(html) { | |||||
this.$emit('update', { | |||||
...this.form, | |||||
maintenanceDes: html, | |||||
}); | |||||
}, | |||||
// upload | |||||
handleFilesOpen() {}, | |||||
beforeUpload() {}, | |||||
handleUploadSuccess(response, file) { | |||||
this.$modal.msgSuccess('上传成功'); | |||||
console.log('file', file); | |||||
this.form.files.push({ | |||||
fileName: file.name, | |||||
fileUrl: response.data, | |||||
}); | |||||
this.$emit('update', this.form); | |||||
}, | |||||
handleDeleteFile(file) {}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.el-date-editor, | |||||
.el-select { | |||||
width: 100%; | |||||
} | |||||
.upload-area { | |||||
position: relative; | |||||
overflow: hidden; | |||||
transition: height 0.3s ease-out; | |||||
} | |||||
.upload-in-dialog { | |||||
margin-right: 24px; | |||||
position: relative; | |||||
float: left; | |||||
} | |||||
.close-icon { | |||||
position: absolute; | |||||
top: 0; | |||||
right: 12px; | |||||
z-index: 100; | |||||
transition: transform 0.3s ease-out; | |||||
} | |||||
.close-icon.open { | |||||
transform: rotateZ(90deg); | |||||
} | |||||
.dialog__upload_component__close { | |||||
color: #ccc; | |||||
} | |||||
.dialog__upload_component__close:hover { | |||||
/* color: #777; */ | |||||
color: red; | |||||
} | |||||
.height-48 { | |||||
height: 35px !important; | |||||
} | |||||
:deep(.record-add__editor) { | |||||
.ql-picker-label { | |||||
display: flex; | |||||
} | |||||
} | |||||
</style> |
@@ -6,19 +6,468 @@ | |||||
--> | --> | ||||
<template> | <template> | ||||
<div class="SpecialEquipmentRepair"></div> | |||||
<div class="app-container SpecialEquipmentRepair"> | |||||
<!-- 搜索工作栏 --> | |||||
<SearchBar | |||||
:formConfigs="searchBarFormConfig" | |||||
ref="search-bar" | |||||
@select-changed="handleSearchBarChange" | |||||
@headBtnClick="handleSearchBarBtnClick" /> | |||||
<!-- 列表 --> | |||||
<base-table | |||||
:table-props="tableProps" | |||||
:page="queryParams.pageNo" | |||||
:limit="queryParams.pageSize" | |||||
:table-data="list" | |||||
@emitFun="handleEmitFun"> | |||||
<method-btn | |||||
v-if="tableBtn.length" | |||||
slot="handleBtn" | |||||
label="操作" | |||||
:width="120" | |||||
:method-list="tableBtn" | |||||
@clickBtn="handleTableBtnClick" /> | |||||
</base-table> | |||||
<!-- 分页组件 --> | |||||
<pagination | |||||
v-show="total > 0" | |||||
:total="total" | |||||
:page.sync="queryParams.pageNo" | |||||
:limit.sync="queryParams.pageSize" | |||||
@pagination="getList" /> | |||||
<!-- 对话框(添加 / 修改) --> | |||||
<base-dialog | |||||
:dialogTitle="title" | |||||
:dialogVisible="open" | |||||
@close="cancel" | |||||
@cancel="cancel" | |||||
@confirm="submitForm"> | |||||
<DialogForm | |||||
v-if="open" | |||||
ref="form" | |||||
v-model="form" | |||||
:disabled="mode == 'detail'" /> | |||||
</base-dialog> | |||||
<CustomDialogForm | |||||
v-if="addOrUpdateVisible" | |||||
ref="addOrUpdate" | |||||
@refreshDataList="getList" | |||||
@destroy="addOrUpdateVisible = false" /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import basicPageMixin from '@/mixins/lb/basicPageMixin'; | |||||
import CustomDialogForm from './CustomDialogForm.vue'; | |||||
import { | |||||
deleteRepair, | |||||
exportRepairLogExcel, | |||||
} from '@/api/equipment/base/repair'; | |||||
import { parseTime } from '@/utils/ruoyi'; | |||||
import htmls from './htmls.vue'; | |||||
import DialogForm from './Repair--add.vue'; | |||||
export default { | export default { | ||||
name: 'SpecialEquipmentRepair', | name: 'SpecialEquipmentRepair', | ||||
components: {}, | |||||
props: {}, | |||||
components: { CustomDialogForm, DialogForm }, | |||||
mixins: [basicPageMixin], | |||||
data() { | data() { | ||||
return {}; | |||||
return { | |||||
addOrUpdateVisible: false, | |||||
searchBarKeys: [ | |||||
'maintenanceStatus', | |||||
'createTime', | |||||
'equipmentId', | |||||
'specialType', | |||||
], | |||||
tableBtn: [ | |||||
this.$auth.hasPermi('equipment:repair:finish') | |||||
? { | |||||
type: 'finish', | |||||
btnName: '完成', | |||||
} | |||||
: undefined, | |||||
this.$auth.hasPermi('equipment:repair:update') | |||||
? { | |||||
type: 'detail', | |||||
btnName: '详情', | |||||
} | |||||
: undefined, | |||||
// this.$auth.hasPermi('equipment:repair:update') | |||||
// ? { | |||||
// type: 'edit', | |||||
// btnName: '修改', | |||||
// } | |||||
// : undefined, | |||||
this.$auth.hasPermi('equipment:repair:delete') | |||||
? { | |||||
type: 'delete', | |||||
btnName: '删除', | |||||
} | |||||
: undefined, | |||||
].filter((v) => v), | |||||
tableProps: [ | |||||
{ | |||||
prop: 'createTime', | |||||
label: '添加时间', | |||||
fixed: true, | |||||
width: 150, | |||||
filter: parseTime, | |||||
}, | |||||
{ | |||||
prop: 'repairOrderNumber', | |||||
label: '设备维修单号', | |||||
minWidth: 120, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'maintenanceStartTime', | |||||
label: '开始时间', | |||||
filter: parseTime, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'maintenanceFinishTime', | |||||
label: '结束时间', | |||||
filter: parseTime, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'maintenanceStatus', | |||||
label: '维修状态', | |||||
filter: (v) => (v != null ? ['未完成', '完成', '进行中'][v] : ''), | |||||
}, | |||||
{ prop: 'maintenanceDuration', label: '维修时长(h)', width: 110 }, | |||||
{ prop: 'lineName', label: '产线' }, | |||||
{ prop: 'sectionName', label: '工段' }, | |||||
{ | |||||
prop: 'equipmentName', | |||||
label: '设备名称', | |||||
minWidth: 100, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'maintenanceDetail', | |||||
label: '维修明细', | |||||
subcomponent: htmls, | |||||
minWidth: 100, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'repairman', | |||||
label: '维修工', | |||||
minWidth: 100, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'repairmanPhone', | |||||
label: '联系方式', | |||||
minWidth: 100, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'remark', | |||||
label: '备注', | |||||
minWidth: 120, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
], | |||||
searchBarFormConfig: [ | |||||
{ | |||||
type: 'select', | |||||
label: '设备大类', | |||||
placeholder: '请选择设备大类', | |||||
param: 'specialType', | |||||
onchange: true, | |||||
selectOptions: [ | |||||
{ id: 1, name: '安全设备' }, | |||||
{ id: 2, name: '消防设备' }, | |||||
{ id: 3, name: '特种设备' }, | |||||
], | |||||
filterable: true, | |||||
}, | |||||
{ | |||||
type: 'select', | |||||
label: '设备', | |||||
placeholder: '请选择设备', | |||||
param: 'equipmentId', | |||||
filterable: true, | |||||
}, | |||||
{ | |||||
type: 'select', | |||||
label: '状态', | |||||
placeholder: '请选择状态', | |||||
param: 'maintenanceStatus', | |||||
selectOptions: [ | |||||
{ name: '未完成', id: '0' }, | |||||
{ name: '完成', id: '1' }, | |||||
{ name: '进行中', id: '2' }, | |||||
], | |||||
}, | |||||
// 时间段 | |||||
{ | |||||
type: 'datePicker', | |||||
label: '时间段', | |||||
dateType: 'daterange', // datetimerange | |||||
format: 'yyyy-MM-dd', | |||||
valueFormat: 'yyyy-MM-dd HH:mm:ss', | |||||
// valueFormat: 'timestamp', | |||||
rangeSeparator: '-', | |||||
startPlaceholder: '开始日期', | |||||
endPlaceholder: '结束日期', | |||||
defaultTime: ['00:00:00', '23:59:59'], | |||||
param: 'createTime', | |||||
}, | |||||
{ | |||||
type: 'button', | |||||
btnName: '查询', | |||||
name: 'search', | |||||
color: 'primary', | |||||
}, | |||||
{ | |||||
type: 'separate', | |||||
}, | |||||
{ | |||||
type: this.$auth.hasPermi('equipment:repair:export') ? 'button' : '', | |||||
btnName: '导出', | |||||
name: 'export', | |||||
plain: true, | |||||
color: 'primary', | |||||
}, | |||||
{ | |||||
type: this.$auth.hasPermi('equipment:repair:create') ? 'button' : '', | |||||
btnName: '新增', | |||||
name: 'add', | |||||
plain: true, | |||||
color: 'success', | |||||
}, | |||||
], | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
maintenanceStatus: null, | |||||
createTime: null, | |||||
equipmentId: null, | |||||
special: true, | |||||
specialType: null, | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
basePath: '/base/equipment-repair-log', | |||||
mode: null, | |||||
allSpecialEquipments: [], | |||||
}; | |||||
}, | |||||
created() { | |||||
this.initSearchBar(); | |||||
this.getList(); | |||||
}, | |||||
methods: { | |||||
initSearchBar() { | |||||
this.http('/base/core-equipment/listAll', 'get').then(({ data }) => { | |||||
this.allSpecialEquipments = data.filter((item) => item.special); | |||||
this.setSearchBarEquipmentList(data.filter((item) => item.special)); | |||||
}); | |||||
}, | |||||
/** 查询列表 */ | |||||
getList() { | |||||
this.loading = true; | |||||
// 执行查询 | |||||
this.recv(this.queryParams).then((response) => { | |||||
this.list = response.data.list; | |||||
this.total = response.data.total; | |||||
this.loading = false; | |||||
}); | |||||
}, | |||||
/** 取消按钮 */ | |||||
cancel() { | |||||
this.open = false; | |||||
this.mode = null; | |||||
this.reset(); | |||||
}, | |||||
/** 表单重置 */ | |||||
reset() { | |||||
this.form = { | |||||
id: null, | |||||
repairOrderNumber: null, | |||||
equipmentId: null, | |||||
repairman: null, | |||||
repairmanPhone: null, | |||||
faultTime: null, | |||||
faultLevel: null, | |||||
maintenanceStartTime: null, | |||||
maintenanceFinishTime: null, | |||||
faultType: null, | |||||
repairMode: null, | |||||
maintenanceStatus: null, | |||||
faultDetail: null, | |||||
maintenanceDetail: null, | |||||
remark: null, | |||||
files: [ | |||||
// { | |||||
// fileName: '', | |||||
// fileType: '', | |||||
// fileUrl: '', | |||||
// }, | |||||
], | |||||
}; | |||||
this.resetForm('form'); | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNo = 1; | |||||
this.getList(); | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm('queryForm'); | |||||
this.handleQuery(); | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset(); | |||||
this.open = true; | |||||
this.title = '添加维修记录'; | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
// this.reset(); | |||||
// const id = row.id; | |||||
// this.info({ id }).then((response) => { | |||||
// this.form = response.data; | |||||
// // this.form.repairman = this.form.repairman.split(',') | |||||
// this.open = true; | |||||
// this.title = '修改维修记录'; | |||||
// }); | |||||
this.addOrUpdateVisible = true; | |||||
this.$nextTick(() => { | |||||
this.$refs.addOrUpdate.init({ id: row.id }); | |||||
}); | |||||
}, | |||||
/** 完成按钮操作 */ | |||||
handlFinish(row) { | |||||
this.addOrUpdateVisible = true; | |||||
const params = { | |||||
id: row.id, | |||||
maintenanceStatus: 1, | |||||
}; | |||||
this.$nextTick(() => { | |||||
this.$refs.addOrUpdate.init(params); | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs['form'].validate((valid) => { | |||||
if (!valid) { | |||||
return; | |||||
} | |||||
// if (this.form.repairman) { | |||||
// this.form.repairman = this.form.repairman.join(',') | |||||
// } | |||||
// 修改的提交 | |||||
if (this.form.id != null) { | |||||
this.put(this.form).then((response) => { | |||||
this.$modal.msgSuccess('修改成功'); | |||||
this.open = false; | |||||
this.getList(); | |||||
}); | |||||
return; | |||||
} | |||||
// 添加的提交 | |||||
this.post(this.form).then((response) => { | |||||
this.$modal.msgSuccess('新增成功'); | |||||
this.open = false; | |||||
this.getList(); | |||||
}); | |||||
}); | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const id = row.id; | |||||
this.$modal | |||||
.confirm('是否确认删除维修单号为"' + row.repairOrderNumber + '"的数据?') | |||||
.then(() => { | |||||
return deleteRepair(id); | |||||
}) | |||||
.then(() => { | |||||
this.getList(); | |||||
this.$modal.msgSuccess('删除成功'); | |||||
}) | |||||
.catch(() => {}); | |||||
}, | |||||
handleDetail({ id }) { | |||||
this.addOrUpdateVisible = true; | |||||
this.$nextTick(() => { | |||||
this.$refs.addOrUpdate.init({ id: id }, true); | |||||
}); | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
// 处理查询参数 | |||||
let params = { ...this.queryParams }; | |||||
params.pageNo = undefined; | |||||
params.pageSize = undefined; | |||||
this.$modal | |||||
.confirm('是否确认导出所有维修记录?') | |||||
.then(() => { | |||||
this.exportLoading = true; | |||||
return exportRepairLogExcel(params); | |||||
}) | |||||
.then((response) => { | |||||
this.$download.excel(response, '设备维修.xls'); | |||||
this.exportLoading = false; | |||||
}) | |||||
.catch(() => {}); | |||||
}, | |||||
// 处理表格按钮 | |||||
handleTableBtnClick({ data, type }) { | |||||
console.log('nihc', data, type); | |||||
switch (type) { | |||||
case 'edit': | |||||
this.handleUpdate(data); | |||||
break; | |||||
case 'delete': | |||||
this.handleDelete(data); | |||||
break; | |||||
case 'detail': | |||||
this.handleDetail(data); | |||||
break; | |||||
case 'finish': | |||||
this.handlFinish(data); | |||||
break; | |||||
} | |||||
}, | |||||
// 设备大类改变 | |||||
handleSearchBarChange({ param, value }) { | |||||
if ('specialType' === param) { | |||||
if (!value) { | |||||
this.setSearchBarEquipmentList(this.allSpecialEquipments); | |||||
return; | |||||
} | |||||
this.setSearchBarEquipmentList( | |||||
this.allSpecialEquipments.filter((item) => item.specialType == value) | |||||
); | |||||
} | |||||
}, | |||||
setSearchBarEquipmentList(eqList) { | |||||
this.$set( | |||||
this.searchBarFormConfig[1], | |||||
'selectOptions', | |||||
eqList.map((item) => ({ | |||||
name: item.name, | |||||
id: item.id, | |||||
})) | |||||
); | |||||
}, | |||||
}, | }, | ||||
computed: {}, | |||||
methods: {}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -0,0 +1,65 @@ | |||||
<!-- | |||||
* @Author: zwq | |||||
* @Date: 2023-08-01 15:27:31 | |||||
* @LastEditors: zwq | |||||
* @LastEditTime: 2023-08-01 16:25:54 | |||||
* @Description: | |||||
--> | |||||
<template> | |||||
<div :class="[className, { 'p-0': noPadding }]"> | |||||
<slot /> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
size: { | |||||
// 取值范围: xl lg md sm | |||||
type: String, | |||||
default: 'de', | |||||
validator: function (val) { | |||||
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1; | |||||
}, | |||||
}, | |||||
noPadding: { | |||||
type: Boolean, | |||||
default: false, | |||||
}, | |||||
}, | |||||
computed: { | |||||
className: function () { | |||||
return `${this.size}-title`; | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px); | |||||
$mgr: 8px; | |||||
@each $size, $height in $pxls { | |||||
.#{$size}-title { | |||||
font-size: 18px; | |||||
line-height: $height; | |||||
color: #000; | |||||
font-weight: 500; | |||||
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | |||||
&::before { | |||||
content: ''; | |||||
display: inline-block; | |||||
vertical-align: top; | |||||
width: 4px; | |||||
height: $height + 2px; | |||||
border-radius: 1px; | |||||
margin-right: $mgr; | |||||
background-color: #0b58ff; | |||||
} | |||||
} | |||||
} | |||||
.p-0 { | |||||
padding: 0; | |||||
} | |||||
</style> |
@@ -0,0 +1,35 @@ | |||||
<!-- | |||||
* @Author: zhp | |||||
* @Date: 2023-11-08 14:00:52 | |||||
* @LastEditTime: 2023-12-01 10:12:27 | |||||
* @LastEditors: DY | |||||
* @Description: | |||||
--> | |||||
<template> | |||||
<div v-html="content" /> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
injectData: { | |||||
type: Object, | |||||
default: () => ({}) | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
content: '' | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.getContent() | |||||
}, | |||||
methods: { | |||||
getContent() { | |||||
this.content = this.injectData[this.injectData.prop] ?? '' | |||||
} | |||||
} | |||||
} | |||||
</script> |