GitBucket
Newer
<!-- 周维护、月保养详情公共组件 -->
<script lang="ts" setup name="EquipementResumeWeekMonthDetail">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from '../week-interface'
import useUserStore from '@/store/modules/user'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { addResumeWeekMonthList, getInfo, updateResumeWeekMonthList } from '@/api/equipment/resume/week-month'
const props = defineProps({
title: {
type: String,
default: '周维护',
},
pageType: {
type: String,
default: 'detail',
},
maintainType: { // 保养类型(1 周维护/2 月保养)
type: String,
default: '1',
},
infoId: String, // id
})
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
logNo: '', // 记录编号
logName: '', // 记录名称
labCodeName: '', // 实验室
labCode: '', // 实验室
groupCode: '', // 部门
groupCodeName: '', // 部门名称
createUserId: '', // 记录人id
equipmentName: '', // 设备名称
createUserName: '', // 记录人
createTime: '', // 记录时间
remark: '', // 备注
checkResult: '', // 检查结果
})
// 校验规则
const formRules = ref({
groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }],
})
const loading = ref(false)
// ------------------------------------------字典----------------------------------------------
const useDeptList = ref<deptType[]>([]) // 所属部门列表
const useDeptDict = ref([]) as any // 所属部门字典
const labNameList = ref<deptType[]>([]) // 实验室列表
const labNameDict = ref([]) as any // 实验室字典
/**
* 获取字典
*/
async function getDict() {
// 实验室
const responseLab = await getDictByCode('bizGroupCodeEquipment')
labNameList.value = responseLab.data
labNameList.value.forEach((item) => {
labNameDict.value[item.value] = item.name
})
// 部门
const responseDept = await getDictByCode('bizGroupCode')
useDeptList.value = responseDept.data
responseDept.data.forEach((item: any) => {
useDeptDict.value[item.value] = item.name
})
}
// -------------------------------------------表格----------------------------------------------
const columns = ref([ // 表头
{ text: '维护项目', value: 'item', align: 'center', required: true },
{ text: '检查结果', value: 'result', align: 'center', required: true, width: '180' },
{ text: '备注', value: 'remark', align: 'center', required: true },
])
const list = ref([]) as any // 表格数据
const checkoutList = ref([]) as any // 多选表格数据
// 选中
const handleSelectionChange = (e: any) => {
checkoutList.value = e
}
// 增加行
const addRow = () => {
list.value.push({
item: '',
result: '1',
remark: '',
customer: true,
})
}
// 删除行
const deleteRow = () => {
if (!checkoutList.value.length) {
ElMessage({
message: '请选中要删除的行',
type: 'warning',
})
return false
}
list.value = list.value.filter((item: any) => {
return !checkoutList.value.includes(item)
})
}
// --------------------------------------选择设备-------------------------------------------------
const selectEquipmentDialogRef = ref()
// 批量添加
const selectEquipment = () => {
selectEquipmentDialogRef.value.initDialog()
}
// 确定选择设备
const confirmSelectEquipment = (list = []) => {
if (Array.isArray(list) && list.length) {
form.value.equipmentName = list[0].equipmentName + list[0].model + list[0].manufactureNo
}
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
$router.back()
}
// 导出pdf
const exportPdf = () => {
ElMessage.info('敬请期待')
}
// 保存
const save = () => {
if (!list.value.length) {
ElMessage.warning('维护保养信息不能为空')
return false
}
if (!useCheckList(list.value, columns.value, '维护保养信息', 'remark', 'result', '0')) {
return false
}
ElMessage.info('敬请期待')
// ruleFormRef.value!.validate((valid: boolean) => {
// if (valid) {
// const loading = ElLoading.service({
// lock: true,
// background: 'rgba(255, 255, 255, 0.8)',
// })
// let checkResult // 检查结果
// const index = list.value.findIndex(item => item.result === '0')
// if (index !== -1) {
// checkResult = '2'
// }
// else {
// checkResult = '1'
// }
// const params = {
// ...form.value,
// id: props.infoId,
// checkResult, // 检查结果，1全部正常、2不正常
// maintainType: props.maintainType, // 类型 1周维护、2月保养
// dustAbnormalReason: list.value[0].result === '0' ? list.value[0].reason : '', // 除尘除潮不正常原因
// appearanceAbnormalReason: list.value[1].result === '0' ? list.value[1].reason : '', // 外观检查不正常原因
// workAbnormalReason: list.value[2].result === '0' ? list.value[2].reason : '', // 工作正常性检查不正常原因
// performanceAbnormalReason: list.value[3].result === '0' ? list.value[3].reason : '', // 性能测试不正常原因
// attachmentAbnormalReason: list.value[4].result === '0' ? list.value[4].reason : '', // 备附件和资料检查不正常原因
// }
// // 新建
// if (pageType.value === 'add') { // 新建
// addResumeWeekMonthList(params).then((res) => {
// ElMessage.success('保存成功')
// form.value.logNo = res.data.logNo // 记录表单号
// pageType.value = 'detail'
// loading.close()
// }).catch(() => {
// loading.close()
// })
// }
// // 保存
// else if (pageType.value === 'edit') { // 编辑
// updateResumeWeekMonthList(params).then((res) => {
// ElMessage.success('保存成功')
// pageType.value = 'detail'
// loading.close()
// }).catch(() => {
// loading.close()
// })
// }
// }
// else {
// console.log('表单校验不通过')
// }
// })
}
// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
getInfo({ id: props.infoId! }).then((res) => {
form.value = res.data
loading.close()
})
}
watch(() => props.pageType, (newVal) => {
pageType.value = newVal
}, { immediate: true })
onMounted(async () => {
await getDict()
form.value.createUserId = user.id// 创建人
form.value.createUserName = user.name // 创建人名字
form.value.deptId = user.deptId // 记录人部门id
form.value.deptName = user.deptName // 记录人部门
form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 记录时间
form.value.logName = props.title // 文件名称
form.value.labCode = user.bizLabCode // 实验室
form.value.labCodeName = user.labCodeName // 实验室名称
form.value.groupCode = user.groupNo // 部门名称
form.value.groupCodeName = user.groupName // 部门名称
if (pageType.value !== 'add') {
// fetchInfo()
}
else { // 新建
// 在这里，如果是从待维护跳转过来，则渲染从列表页带来的默认配置
list.value = [
{
id: '1',
item: '清理卫生',
result: '1',
remark: '', // 备注
},
{
id: '2',
item: '外观检查',
result: '1',
remark: '', // 备注
}, {
id: '3',
item: '外观检查',
result: '1',
remark: '', // 备注
}, {
id: '4',
item: '功能性检查',
result: '1',
remark: '', // 备注
}, {
id: '5',
item: '油液检查',
result: '1',
remark: '', // 备注
}, {
id: '6',
item: '软件病毒查杀、系统升级',
result: '1',
remark: '', // 备注
}, {
id: '7',
item: '备附件和资料齐全',
result: '1',
remark: '', // 备注
},
] // 维护保养信息
}
})
</script>
<template>
<div class="week-month-tenplate-detail">
<app-container v-loading="loading">
<detail-page :title="`${props.title}-${textMap[pageType]}`">
<template #btns>
<el-button v-if="pageType === 'detail'" type="primary" @click="exportPdf">
导出
</el-button>
<el-button v-if="pageType !== 'detail'" type="primary" @click="save">
保存
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<el-form
ref="ruleFormRef"
:model="form"
label-width="120"
label-position="right"
:rules="formRules"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="记录编号:" prop="logNo">
<el-input v-model="form.logNo" class="full-width-input" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="记录名称:" prop="logName">
<el-input v-model="form.logName" class="full-width-input" disabled placeholder="请输入记录名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="实验室" prop="labCode">
<el-select
v-model.trim="form.labCode"
placeholder="请选择实验室"
filterable
:disabled="pageType === 'detail'"
class="full-width-input"
@change="changeLabName"
>
<el-option v-for="item in labNameList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="部门" prop="groupCode">
<el-select
v-model.trim="form.groupCode"
placeholder="请选择部门"
filterable
:disabled="pageType === 'detail'"
class="full-width-input"
@change="changeGroupCode"
>
<el-option v-for="item in useDeptList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="记录人:" prop="createUserName">
<el-input
v-model="form.createUserName"
class="full-width-input"
:placeholder="pageType === 'detail' ? '' : '记录人'"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="记录时间:" prop="createTime">
<el-date-picker
v-model="form.createTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
class="full-width-input"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注:" prop="remark">
<el-input
v-model="form.remark"
class="full-width-input"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入备注'"
type="textarea"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col v-if="pageType === 'detail'" :span="12">
<el-form-item label="设备名称:" prop="equipmentName">
<el-input
v-model="form.remark"
class="full-width-input"
autosize
type="textarea"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col v-if="pageType !== 'detail' && $route.query.fromTab !== 'toBeMaintained'" :span="12">
<el-form-item label="设备名称" prop="equipmentName">
<el-input
v-model="form.equipmentName"
:placeholder="pageType === 'detail' ? '' : '请选择'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
>
<template v-if="pageType !== 'detail'" #append>
<el-button size="small" @click="selectEquipment">
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检查结果:" prop="checkResult">
<el-input
v-model="form.checkResult"
class="full-width-input"
:placeholder="pageType === 'detail' ? '' : '检查结果'"
disabled
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
<detail-block title="维护保养信息">
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow">
增加行
</el-button>
<el-button type="info" @click="deleteRow">
删除行
</el-button>
</template>
<el-table
ref="techRef"
:data="list"
border
style="width: 100%;"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in columns"
:key="item.value"
:prop="item.value"
:label="item.text"
:width="item.width"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<el-radio-group v-if="pageType !== 'detail' && item.value === 'result'" v-model="scope.row[item.value]" :disabled="pageType === 'detail'">
<el-radio label="1">
正常
</el-radio>
<el-radio label="0">
不正常
</el-radio>
</el-radio-group>
<span v-if="pageType === 'detail' && item.value === 'result'">{{ scope.row.result === '1' ? '正常' : scope.row.result === '0' ? '不正常' : '未知' }}</span>
<span v-if="scope.row.result === '1' && item.value === 'remark'">/</span>
<el-input v-if="pageType !== 'detail' && ((scope.row.result === '0' && item.value === 'remark') || (item.value === 'item' && scope.row.customer === true))" v-model="scope.row[item.value]" autosize type="textarea" :autofocus="true" :placeholder="`${item.text}`" class="input" />
</template>
</el-table-column>
</el-table>
</detail-block>
</app-container>
<!-- 选择设备台账 -->
<select-equipment-dialog ref="selectEquipmentDialogRef" :is-multi="false" @confirm="confirmSelectEquipment" />
</div>
</template>
<style lang="scss" scoped>
.step {
line-height: 28px;
font-size: 20px;
color: #3d7eff;
font-weight: bold;
margin-bottom: 5px;
width: fit-content;
}
</style>
<style lang="scss">
.week-month-tenplate-detail {
.el-radio__label {
display: block !important;
}
}
</style>