|
@@ -0,0 +1,242 @@
|
|
|
|
+<template>
|
|
|
|
+ <Dialog v-model="dialogVisible"
|
|
|
|
+ title="保养BOM明细"
|
|
|
|
+ style="width: 1500px; max-height: 800px" @close="handleClose" >
|
|
|
|
+ <ContentWrap>
|
|
|
|
+ <el-table
|
|
|
|
+ v-loading="loading"
|
|
|
|
+ :data="list"
|
|
|
|
+ :stripe="true"
|
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column label="设备编码" align="center" prop="deviceCode" />
|
|
|
|
+ <el-table-column label="设备名称" align="center" prop="deviceName" />
|
|
|
|
+ <el-table-column label="累计运行时间(H)" align="center" prop="totalRunTime" />
|
|
|
|
+ <el-table-column label="累计运行公里数(KM)" align="center" prop="totalMileage" />
|
|
|
|
+ <el-table-column label="保养项" align="center" prop="name" />
|
|
|
|
+ <el-table-column label="运行里程" align="center" prop="mileageRule" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-switch
|
|
|
|
+ v-model="scope.row.mileageRule"
|
|
|
|
+ :active-value="0"
|
|
|
|
+ :inactive-value="1"
|
|
|
|
+ :disabled="true"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="运行时间" align="center" prop="runningTimeRule" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-switch
|
|
|
|
+ v-model="scope.row.runningTimeRule"
|
|
|
|
+ :active-value="0"
|
|
|
|
+ :inactive-value="1"
|
|
|
|
+ :disabled="true"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="自然日期" align="center" prop="naturalDateRule" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-switch
|
|
|
|
+ v-model="scope.row.naturalDateRule"
|
|
|
|
+ :active-value="0"
|
|
|
|
+ :inactive-value="1"
|
|
|
|
+ :disabled="true"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <template v-if="showTimeColumns">
|
|
|
|
+ <el-table-column label="上次保养运行时间(H)" align="center" prop="lastRunningTime" />
|
|
|
|
+ <el-table-column label="运行时间周期(H)" align="center" prop="nextRunningTime" />
|
|
|
|
+ <el-table-column label="运行时间周期-提前量(H)" align="center" prop="timePeriodLead" />
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <template v-if="showMileageColumns">
|
|
|
|
+ <el-table-column label="上次保养里程数(KM)" align="center" prop="lastRunningKilometers" />
|
|
|
|
+ <el-table-column label="运行里程周期(KM)" align="center" prop="nextRunningKilometers" />
|
|
|
|
+ <el-table-column label="运行里程周期-提前量(KM)" align="center" prop="kiloCycleLead" />
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <template v-if="showNaturalDateColumns">
|
|
|
|
+ <el-table-column label="上次保养自然日期" align="center" prop="lastNaturalDate" width="220">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="scope.row.lastNaturalDate"
|
|
|
|
+ type="date"
|
|
|
|
+ placeholder="选择日期"
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
|
+ style="width: 60%"
|
|
|
|
+ :disabled="true"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="自然日周期(D)" align="center" prop="nextNaturalDate" />
|
|
|
|
+ <el-table-column label="自然日周期-提前量(D)" align="center" prop="naturalDatePeriodLead" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table>
|
|
|
|
+ <!-- 分页
|
|
|
|
+ <Pagination
|
|
|
|
+ :total="total"
|
|
|
|
+ v-model:page="queryParams.pageNo"
|
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
|
+ @pagination="getList"
|
|
|
|
+ /> -->
|
|
|
|
+ </ContentWrap>
|
|
|
|
+ </Dialog>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import { DictDataVO } from '@/api/system/dict/dict.data'
|
|
|
|
+import * as ModelApi from '@/api/pms/model'
|
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
|
+import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
+import { IotMainWorkOrderBomApi, IotMainWorkOrderBomVO } from '@/api/pms/iotmainworkorderbom'
|
|
|
|
+import { IotMaintenanceBomApi, IotMaintenanceBomVO } from '@/api/pms/iotmaintenancebom'
|
|
|
|
+import {propTypes} from "@/utils/propTypes";
|
|
|
|
+
|
|
|
|
+const emit = defineEmits(['close']) // 定义 success 事件,用于操作成功后的回调
|
|
|
|
+const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
|
+const queryFormRef = ref() // 搜索的表单
|
|
|
|
+const list = ref<IotMaintenanceBomVO[]>([]) // 列表的数据
|
|
|
|
+const total = ref(0) // 列表的总页数
|
|
|
|
+const queryParams = reactive({
|
|
|
|
+ pageNo: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ workOrderId: undefined,
|
|
|
|
+ planId: undefined,
|
|
|
|
+ deviceId: undefined
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const props = defineProps({
|
|
|
|
+ flag: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const selectedRow = ref(null)
|
|
|
|
+
|
|
|
|
+// 处理单选逻辑
|
|
|
|
+const selectRow = (row) => {
|
|
|
|
+ selectedRow.value = selectedRow.value?.id === row.id ? null : row
|
|
|
|
+ emit('choose', row)
|
|
|
|
+ dialogVisible.value = false
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 点击整行选中
|
|
|
|
+const handleRowClick = (row) => {
|
|
|
|
+ selectRow(row)
|
|
|
|
+}
|
|
|
|
+const open = async (id?: number, flag?: string, deviceId?: number) => {
|
|
|
|
+ await nextTick() // 确保DOM更新完成
|
|
|
|
+ queryParams.deviceId = deviceId
|
|
|
|
+ if('workOrder' === flag) {
|
|
|
|
+ // 加载保养工单 BOM
|
|
|
|
+ queryParams.workOrderId = id
|
|
|
|
+ queryParams.planId = undefined
|
|
|
|
+ await getWorkOrderList()
|
|
|
|
+ } else if ('plan' === flag) {
|
|
|
|
+ queryParams.planId = id
|
|
|
|
+ queryParams.workOrderId = undefined
|
|
|
|
+ await getPlanList()
|
|
|
|
+ }
|
|
|
|
+ dialogVisible.value = true
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
|
|
|
+
|
|
|
|
+const getWorkOrderList = async () => {
|
|
|
|
+ loading.value = true
|
|
|
|
+ try {
|
|
|
|
+ const data = await IotMainWorkOrderBomApi.getWorkOrderBOMs(queryParams)
|
|
|
|
+ // 格式化日期字段 - 新增代码
|
|
|
|
+ data.forEach(item => {
|
|
|
|
+ if (item.lastNaturalDate) {
|
|
|
|
+ // 将时间戳转换为 YYYY-MM-DD 格式
|
|
|
|
+ item.lastNaturalDate = dayjs(item.lastNaturalDate).format('YYYY-MM-DD')
|
|
|
|
+ } else {
|
|
|
|
+ // 处理空值情况
|
|
|
|
+ item.lastNaturalDate = ''
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ list.value = data
|
|
|
|
+ total.value = data.total
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const getPlanList = async () => {
|
|
|
|
+ loading.value = true
|
|
|
|
+ try {
|
|
|
|
+ const data = await IotMaintenanceBomApi.getMainPlanBOMs(queryParams)
|
|
|
|
+ // 格式化日期字段 - 新增代码
|
|
|
|
+ data.forEach(item => {
|
|
|
|
+ if (item.lastNaturalDate) {
|
|
|
|
+ // 将时间戳转换为 YYYY-MM-DD 格式
|
|
|
|
+ item.lastNaturalDate = dayjs(item.lastNaturalDate).format('YYYY-MM-DD')
|
|
|
|
+ } else {
|
|
|
|
+ // 处理空值情况
|
|
|
|
+ item.lastNaturalDate = ''
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ list.value = data
|
|
|
|
+ total.value = data.total
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const handleClose = () => {
|
|
|
|
+ // 重置状态避免多个弹窗出现
|
|
|
|
+ dialogVisible.value = false
|
|
|
|
+ loading.value = false
|
|
|
|
+ list.value = []
|
|
|
|
+
|
|
|
|
+ // 通知父组件弹窗已关闭
|
|
|
|
+ emit('close')
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 新增计算属性:控制时间相关列的显示
|
|
|
|
+const showTimeColumns = computed(() => {
|
|
|
|
+ return list.value.some(item => item.runningTimeRule === 0);
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// 新增计算属性:控制里程相关列的显示
|
|
|
|
+const showMileageColumns = computed(() => {
|
|
|
|
+ return list.value.some(item => item.mileageRule === 0);
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// 新增计算属性:自然日期相关列的显示
|
|
|
|
+const showNaturalDateColumns = computed(() => {
|
|
|
|
+ return list.value.some(item => item.naturalDateRule === 0);
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+/** 搜索按钮操作 */
|
|
|
|
+const handleQuery = () => {
|
|
|
|
+ queryParams.pageNo = 1
|
|
|
|
+ // getList()
|
|
|
|
+}
|
|
|
|
+const choose = (row: DictDataVO) => {
|
|
|
|
+ emit('choose', row)
|
|
|
|
+ dialogVisible.value = false
|
|
|
|
+}
|
|
|
|
+/** 重置按钮操作 */
|
|
|
|
+const resetQuery = () => {
|
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
|
+ handleQuery()
|
|
|
|
+}
|
|
|
|
+/** 初始化 **/
|
|
|
|
+// onMounted(async () => {
|
|
|
|
+// await getList()
|
|
|
|
+// // 查询字典(精简)列表
|
|
|
|
+// })
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+.no-label-radio .el-radio__label {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.no-label-radio .el-radio__inner {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+}
|
|
|
|
+</style>
|