feat:维护计划周期弹窗

shuishen

2026-01-20 cf5a678acbff5cdf55b22f632ed0f23c2dd63d33

feat:维护计划周期弹窗

 applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue

@@ -58,8 +58,9 @@
                确定
            </el-button>
        </template>
    </el-dialog>

        <el-dialog class="command-page-map-view-dialog" v-model="visible1" :show-close="false"
    <el-dialog class="command-page-map-view-dialog" v-model="visible1" :show-close="false"
            :close-on-click-modal="false" destroy-on-close @closed="positionClosed">
            <div class="dialog-container">
                <div class="left-container">
@@ -80,7 +81,6 @@
                <el-button color="#284FE3" type="primary" @click="handleMapConfirm">确定</el-button>
            </template>
        </el-dialog>
    </el-dialog>
</template>

<script setup>

 applications/drone-command/src/views/basicManage/maintainRecord/FormDiaLog.vue

@@ -1,3 +1,13 @@
<!--
 * @Author       : yuan
 * @Date         : 2026-01-20 14:04:02
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-20 14:19:54
 * @FilePath     : \applications\drone-command\src\views\basicManage\maintainRecord\FormDiaLog.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
 * 2026-01-20 14:04:02
-->
<template>
    <el-dialog class="command-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed"
        destroy-on-close :close-on-click-modal="false">
@@ -81,7 +91,7 @@
                    <el-form-item label="维护计划周期" prop="planCycleType">
                        <el-select class="command-select" popper-class="command-select-popper"
                            v-model="formData.planCycleType" placeholder="请选择" clearable
                            @change="formData.planCycleValue = []">
                            @change="formData.planCycleValue = ''">
                            <el-option v-for="item in planCycleOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
@@ -89,12 +99,10 @@
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维护计划时间" prop="planCycleValue">
                        <el-select class="command-select" popper-class="command-select-popper"
                            v-model="formData.planCycleValue" placeholder="请选择" clearable multiple
                            :disabled="!formData.planCycleType">
                            <el-option v-for="item in planCycleValueOptions" :key="item.value" :label="item.value"
                                :value="item.value" />
                        </el-select>
                        <el-date-picker class="command-date-picker" popper-class="command-date-picker-popper"
                            v-model="formData.planCycleValue" type="date" placeholder="请选择" clearable
                            value-format="YYYY-MM-DD" :format="planCycleDateFormat" :disabled="!formData.planCycleType"
                            :disabled-date="getPlanCycleDisabledDate" :editable="false" />
                    </el-form-item>
                </el-col>
            </el-row>
@@ -111,6 +119,8 @@

<script setup>
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { ElMessage } from 'element-plus'
import { fieldRules, getDictLabel } from '@ztzf/utils'
import { fwDeviceMaintainRecordPageApi } from '@/views/basicManage/maintainRecord/fwDeviceMaintainRecord'
@@ -123,11 +133,12 @@
const initForm = () => ({
    deviceId: '',
    planCycleType: '',
    planCycleValue: [],
    planCycleValue: '',
})

dayjs.locale('zh-cn')

const planCycleOptions = inject('planCycleOptions')
const planCycleValueOptions = ref([])

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
@@ -141,10 +152,14 @@
const dialogReadonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '维护计划' })

const planCycleLabel = computed(() => {
    const item = planCycleOptions.find(option => option.value === formData.value.planCycleType)
    return item?.label || formData.value.planCycleType || '-'
const planCycleDateFormat = computed(() => {
    const type = formData.value.planCycleType
    if (type === '1') return 'M\u6708D\u53f7'
    if (type === '2') return 'D\u53f7'
    if (type === '3') return 'dddd'
    return 'YYYY-MM-DD'
})


const rules = {
    deviceId: fieldRules(true),
@@ -170,7 +185,14 @@
    if (!isValid) return
    submitting.value = true
    try {
        await fwDeviceMaintainPlanSubmitApi(formData.value)
        const payload = {
            ...formData.value,
            planCycleValue: [formatPlanCycleValue(
                formData.value.planCycleValue,
                formData.value.planCycleType
            )],
        }
        await fwDeviceMaintainPlanSubmitApi(payload)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
        emit('success')
@@ -183,7 +205,11 @@
async function loadDetail() {
    if (!formData.value.id) return
    const res = await fwDeviceMaintainPlanDetailApi({ id: formData.value.id })
    formData.value = res?.data?.data ?? {}
    const data = res?.data?.data ?? {}
    if (dialogMode.value !== 'view' && data?.planCycleType && data.planCycleValue) {
        data.planCycleValue = normalizePlanCycleValue(data.planCycleValue, data.planCycleType)
    }
    formData.value = data
    console.log(formData.value, 66)
}

@@ -226,28 +252,88 @@
    }
}

function toDateString(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}

function formatPlanCycleValue(value, type) {
    if (typeof value !== 'string') return value
    if (!value.includes('-')) return value
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return value
    if (type === '1') return `${date.getMonth() + 1}\u6708${date.getDate()}\u53f7`
    if (type === '2') return `${date.getDate()}\u53f7`
    if (type === '3') {
        const day = date.getDay()
        const week = day === 0 ? 7 : day
        return `\u661f\u671f${week}`
    }
    return value
}

function normalizePlanCycleValue(value, type) {
    if (!value) return ''
    const now = new Date()
    if (typeof value !== 'string') return ''
    if (value.includes('-')) return value
    if (type === '1') {
        const match = value.match(/(\d{1,2})\u6708(\d{1,2})\u53f7/)
        if (!match) return ''
        const month = Number.parseInt(match[1], 10) - 1
        const day = Number.parseInt(match[2], 10)
        return toDateString(new Date(now.getFullYear(), month, day))
    }
    if (type === '2') {
        const match = value.match(/(\d{1,2})\u53f7/)
        if (!match) return ''
        const day = Number.parseInt(match[1], 10)
        return toDateString(new Date(now.getFullYear(), now.getMonth(), day))
    }
    if (type === '3') {
        const match = value.match(/\u661f\u671f(\d)/)
        if (!match) return ''
        const week = Number.parseInt(match[1], 10)
        const { start } = getWeekRange(now)
        const date = new Date(start)
        date.setDate(start.getDate() + Math.min(Math.max(week, 1), 7) - 1)
        return toDateString(date)
    }
    return value
}

function getWeekRange(date) {
    const base = new Date(date.getFullYear(), date.getMonth(), date.getDate())
    const day = base.getDay()
    const diff = day === 0 ? -6 : 1 - day
    const start = new Date(base)
    start.setDate(base.getDate() + diff)
    start.setHours(0, 0, 0, 0)
    const end = new Date(start)
    end.setDate(start.getDate() + 6)
    end.setHours(23, 59, 59, 999)
    return { start, end }
}

function getPlanCycleDisabledDate(date) {
    const type = formData.value.planCycleType
    if (!type) return false
    const now = new Date()
    if (type === '1') {
        return date.getFullYear() !== now.getFullYear()
    }
    if (type === '2') {
        return date.getFullYear() !== now.getFullYear() || date.getMonth() !== now.getMonth()
    }
    if (type === '3') {
        const { start, end } = getWeekRange(now)
        return date < start || date > end
    }
    return false
}

defineExpose({ open })

watch(
    () => formData.value?.planCycleType,
    type => {
        planCycleValueOptions.value = []
        if (!type) return
        if (type === '1') {
            ;[...Array(12)].forEach((item, index) => {
                ;[...Array(31)].forEach((item1, index1) => {
                    planCycleValueOptions.value.push({ value: `${index + 1}月${index1 + 1}号` })
                })
            })
        } else if (type === '2') {
            ;[...Array(31)].forEach((item, index) => {
                planCycleValueOptions.value.push({ value: `${index + 1}号` })
            })
        } else if (type === '3') {
            ;[...Array(7)].forEach((item, index) => {
                planCycleValueOptions.value.push({ value: `星期${index + 1}` })
            })
        }
    }
)
</script>