505 lines
12 KiB
Vue
505 lines
12 KiB
Vue
<!--
|
|
filename: dialogForm.vue
|
|
author: liubin
|
|
date: 2023-10-31 15:55:13
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<el-drawer
|
|
ref="drawer"
|
|
:visible.sync="visible"
|
|
:show-close="false"
|
|
:wrapper-closable="isdetail"
|
|
class="drawer"
|
|
size="55%"
|
|
@closed="$emit('destroy')">
|
|
<small-title slot="title" :no-padding="true">
|
|
{{ isdetail ? '查看详情' : !dataForm.id ? '新增' : '编辑' }}
|
|
</small-title>
|
|
|
|
<el-form
|
|
ref="dataForm"
|
|
style="margin: 0 16px; padding: 0 16px"
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
label-width="100px"
|
|
label-position="top"
|
|
v-loading="formLoading">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item
|
|
label="设备大类"
|
|
prop="equipmentCategory"
|
|
:rules="[
|
|
{ required: true, message: '请选择设备大类', trigger: 'blur' },
|
|
]">
|
|
<el-select
|
|
v-model="dataForm.equipmentCategory"
|
|
:disabled="isdetail"
|
|
:placeholder="`请选择设备大类`"
|
|
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="8">
|
|
<el-form-item
|
|
label="设备名称"
|
|
prop="equipmentId"
|
|
:rules="[
|
|
{ required: true, message: '设备不能为空', trigger: 'blur' },
|
|
]">
|
|
<el-select
|
|
v-model="dataForm.equipmentId"
|
|
filterable
|
|
clearable
|
|
:disabled="isdetail"
|
|
style="width: 100%"
|
|
placeholder="请选择设备名称"
|
|
@change="setConfig">
|
|
<el-option
|
|
v-for="dict in equipmentOptions"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- <el-form-item label="物料名称" prop="name">
|
|
<el-input v-model="dataForm.name" :disabled="isdetail" clearable placeholder="请输入物料名称" />
|
|
</el-form-item> -->
|
|
<el-form-item
|
|
label="巡检配置名称"
|
|
prop="configId"
|
|
:rules="[
|
|
{ required: true, message: '巡检配置不能为空', trigger: 'blur' },
|
|
]">
|
|
<el-select
|
|
v-model="dataForm.configId"
|
|
filterable
|
|
clearable
|
|
:disabled="isdetail"
|
|
style="width: 100%"
|
|
placeholder="请选择巡检配置"
|
|
@change="setInspectionContet">
|
|
<el-option
|
|
v-for="dict in configList"
|
|
:key="dict.id"
|
|
:label="dict.name"
|
|
:value="dict.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="设备编码" prop="equipmentCode">
|
|
<el-input
|
|
v-model="dataForm.equipmentCode"
|
|
disabled
|
|
clearable
|
|
placeholder="请输入设备编码" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="巡检人" prop="responsible">
|
|
<el-input
|
|
v-model="dataForm.responsible"
|
|
:disabled="isdetail"
|
|
clearable
|
|
placeholder="请输入巡检人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="巡检时间" prop="actualTime">
|
|
<el-date-picker
|
|
v-model="dataForm.actualTime"
|
|
type="datetime"
|
|
:disabled="isdetail"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
value-format="timestamp"
|
|
placeholder="选择巡检时间" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="数据来源" prop="origin">
|
|
<el-select
|
|
v-model="dataForm.origin"
|
|
filterable
|
|
clearable
|
|
:disabled="isdetail"
|
|
style="width: 100%"
|
|
placeholder="请选择数据来源">
|
|
<el-option key="1" label="手动" :value="1" />
|
|
<el-option key="2" label="PDA" :value="2" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="巡检内容">
|
|
<base-table
|
|
:table-props="tableProps"
|
|
:page="listQuery.pageNo"
|
|
:limit="listQuery.pageSize"
|
|
:table-data="list" />
|
|
</el-form-item>
|
|
<el-form-item label="巡检详情" prop="description">
|
|
<editor
|
|
v-if="!isdetail"
|
|
v-model="dataForm.description"
|
|
:min-height="150" />
|
|
<div
|
|
v-else
|
|
v-html="dataForm.description"
|
|
style="padding: 5px; margin-left: 5px; border: 1px solid #dfdfdf" />
|
|
</el-form-item>
|
|
<el-form-item label="附件">
|
|
<FileUpload
|
|
v-model="file"
|
|
:limit="1"
|
|
:f-name="fileName"
|
|
:disabled="isdetail"
|
|
@name="setFileName" />
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div v-if="!isdetail" class="drawer-body__footer">
|
|
<el-button @click="goback()">取消</el-button>
|
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import SmallTitle from './SmallTitle.vue';
|
|
import {
|
|
createCheckLog,
|
|
updateCheckLog,
|
|
getcheckConfigByEqList,
|
|
getEqCheckLog,
|
|
} from '@/api/equipment/base/inspection/record';
|
|
import { getEquipmentAll } from '@/api/base/equipment';
|
|
import Editor from '@/components/Editor';
|
|
import { getCheckDetPage } from '@/api/equipment/base/inspection/settings';
|
|
// import FileUpload from "@/components/FileUpload";
|
|
// import { parseTime } from '../../../../core/mixins/code-filter';
|
|
// import attrAdd from './attr-add';
|
|
import FileUpload from '@/components/FileUpload';
|
|
|
|
const tableBtn = [
|
|
{
|
|
type: 'delete',
|
|
btnName: '删除',
|
|
},
|
|
];
|
|
|
|
const tableProps = [
|
|
{
|
|
prop: 'program',
|
|
label: '巡检项目',
|
|
},
|
|
{
|
|
prop: 'content',
|
|
label: '巡检内容',
|
|
},
|
|
];
|
|
|
|
export default {
|
|
name: 'AddRecord',
|
|
model: {
|
|
prop: 'dataForm',
|
|
event: 'update',
|
|
},
|
|
emits: ['update'],
|
|
components: { SmallTitle, Editor, FileUpload },
|
|
props: {
|
|
// dataForm: {
|
|
// type: Object,
|
|
// default: () => ({}),
|
|
// },
|
|
// disabled: {
|
|
// type: Boolean,
|
|
// default: false
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
tableBtn,
|
|
tableProps,
|
|
addOrUpdateVisible: false,
|
|
formLoading: true,
|
|
visible: false,
|
|
isdetail: false,
|
|
dataForm: {
|
|
id: undefined,
|
|
configId: undefined,
|
|
equipmentId: undefined,
|
|
actualTime: undefined,
|
|
responsible: undefined,
|
|
description: undefined,
|
|
equipmentCode: undefined,
|
|
equipmentCategory: undefined,
|
|
origin: 1,
|
|
files: [],
|
|
},
|
|
equipmentTypeOptions: [
|
|
{ label: '安全设备', value: 1 },
|
|
{ label: '消防设备', value: 2 },
|
|
{ label: '特种设备', value: 3 },
|
|
],
|
|
list: [],
|
|
eqList: [],
|
|
configList: [],
|
|
listQuery: {
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
total: 0,
|
|
},
|
|
file: '',
|
|
fileName: '',
|
|
dataRule: {
|
|
responsible: [
|
|
{ required: true, message: '巡检人不能为空', trigger: 'blur' },
|
|
],
|
|
actualTime: [
|
|
{ required: true, message: '巡检时间不能为空', trigger: 'blur' },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getDict();
|
|
},
|
|
methods: {
|
|
setFileName(val) {
|
|
this.fileName = val;
|
|
},
|
|
async getDict() {
|
|
const res = await getEquipmentAll();
|
|
this.eqList = res.data;
|
|
this.handleEqTypeChange();
|
|
|
|
const configres = await getcheckConfigByEqList();
|
|
this.configList = configres.data;
|
|
},
|
|
async setConfig() {
|
|
const configres = await getcheckConfigByEqList({
|
|
equipmentId: this.dataForm.equipmentId,
|
|
});
|
|
this.configList = configres.data;
|
|
this.dataForm.configId =
|
|
this.configList.filter((it) => {
|
|
return it.id === this.dataForm.configId;
|
|
})[0]?.id ?? undefined;
|
|
this.dataForm.equipmentCode =
|
|
this.eqList.filter((item) => {
|
|
return item.id === this.dataForm.equipmentId;
|
|
})[0]?.code ?? undefined;
|
|
},
|
|
goback() {
|
|
this.$emit('refreshDataList');
|
|
this.visible = false;
|
|
},
|
|
goEdit() {
|
|
this.isdetail = false;
|
|
},
|
|
/** 模拟透传 ref */
|
|
validate(cb) {
|
|
return this.$refs.dataForm.validate(cb);
|
|
},
|
|
resetFields(args) {
|
|
return this.$refs.dataForm.resetFields(args);
|
|
},
|
|
initData() {
|
|
this.list = [];
|
|
this.file = '';
|
|
this.fileName = '';
|
|
},
|
|
init(id, isdetail) {
|
|
this.initData();
|
|
this.isdetail = isdetail || false;
|
|
this.dataForm.id = id || undefined;
|
|
this.visible = true;
|
|
|
|
// const scrollContainer = this.$refs.dataForm;
|
|
// const scrollPosition = scrollContainer.scrollTop;
|
|
// console.log('12', scrollPosition);
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs['dataForm'].resetFields();
|
|
|
|
if (this.dataForm.id) {
|
|
// 获取巡检记录
|
|
getEqCheckLog(this.dataForm.id).then((response) => {
|
|
this.formLoading = false;
|
|
this.dataForm = response.data;
|
|
if (this.dataForm.files.length > 0) {
|
|
this.file = this.dataForm.files[0].fileUrl;
|
|
this.fileName = this.dataForm.files[0].fileName;
|
|
}
|
|
this.dataForm.description = this.dataForm.description || '无';
|
|
this.setConfig();
|
|
this.setInspectionContet();
|
|
});
|
|
} else {
|
|
// if (this.urlOptions.isGetCode) {
|
|
// this.getCode()
|
|
// }
|
|
}
|
|
});
|
|
this.formLoading = false;
|
|
},
|
|
setInspectionContet() {
|
|
// 根据巡检配置名称获得巡检配置详细对应巡检内容
|
|
getCheckDetPage({
|
|
pageNo: 1,
|
|
pageSize: 99,
|
|
configId: this.dataForm.configId,
|
|
}).then((response) => {
|
|
this.list = response.data.list;
|
|
this.listQuery.total = response.data.total;
|
|
});
|
|
},
|
|
// 新增 / 修改
|
|
addNew(id) {
|
|
this.addOrUpdateVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init(id);
|
|
});
|
|
},
|
|
handleEqTypeChange(type) {
|
|
this.dataForm.equipmentId = null;
|
|
this.dataForm.equipmentCode = null;
|
|
if (type) {
|
|
this.equipmentOptions = this.eqList
|
|
.filter((item) => item.special)
|
|
.filter((item) => item.specialType === type)
|
|
.map((item) => ({ label: item.name, value: item.id }));
|
|
} else
|
|
this.equipmentOptions = this.eqList
|
|
// .filter((item) => item.special)
|
|
.map((item) => ({
|
|
label: item.name,
|
|
value: item.id,
|
|
}));
|
|
// this.$emit('update', this.form)
|
|
},
|
|
// 表单提交
|
|
dataFormSubmit() {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
if (this.file) {
|
|
const temp = this.file.split(','); // 获取文件个数
|
|
let arry = [];
|
|
temp.forEach((item, index) => {
|
|
arry.push({
|
|
fileName: this.fileName,
|
|
fileType: 2,
|
|
fileUrl: item,
|
|
});
|
|
});
|
|
this.dataForm.files = arry;
|
|
} else {
|
|
this.dataForm.files = [];
|
|
}
|
|
|
|
// 修改的提交
|
|
if (this.dataForm.id) {
|
|
updateCheckLog(this.dataForm).then((response) => {
|
|
this.$modal.msgSuccess('修改成功');
|
|
this.visible = false;
|
|
this.$emit('refreshDataList');
|
|
});
|
|
return;
|
|
}
|
|
// 添加的提交
|
|
createCheckLog(this.dataForm).then((response) => {
|
|
this.$modal.msgSuccess('新增成功');
|
|
this.visible = false;
|
|
this.$emit('refreshDataList');
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-date-editor,
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
.drawer-body__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 18px;
|
|
}
|
|
.action_btn {
|
|
float: right;
|
|
margin: 5px 15px;
|
|
font-size: 14px;
|
|
}
|
|
.add {
|
|
color: #0b58ff;
|
|
}
|
|
.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;
|
|
}
|
|
.drawer >>> .el-drawer__body {
|
|
flex: 1;
|
|
height: 1px;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.drawer >>> .content {
|
|
padding: 30px 24px;
|
|
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;
|
|
}
|
|
|
|
.drawer-body__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 18px;
|
|
}
|
|
</style>
|