@@ -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> | |||
<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> | |||
<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 { | |||
name: 'SpecialEquipmentRepair', | |||
components: {}, | |||
props: {}, | |||
components: { CustomDialogForm, DialogForm }, | |||
mixins: [basicPageMixin], | |||
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> | |||
@@ -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> |