优化设备保养表单：新增保养人选择器，确保保养人必填，加载保养人列表

yyb

8 天以前 a8ebfcbec49fb628fa2fa1a66bc1950125bc0786

优化设备保养表单：新增保养人选择器，确保保养人必填，加载保养人列表

 src/pages/equipmentManagement/upkeep/add.vue

@@ -41,12 +41,17 @@
                </template>
            </u-form-item>

            <u-form-item label="保养人" prop="maintenancePerson" border-bottom>
            <u-form-item label="保养人" prop="maintenancePerson" required border-bottom>
                <u-input
                    v-model="form.maintenancePerson"
                    placeholder="请输入保养人"
                    placeholder="请选择保养人"
                    readonly
                    @click="showPersonPicker"
                    clearable
                />
                <template #right>
                    <u-icon name="arrow-right" @click="showPersonPicker" />
                </template>
            </u-form-item>
            
            <u-form-item label="保养项目" prop="maintenanceItems" border-bottom>
@@ -72,6 +77,14 @@
            @select="onDeviceConfirm"
            @close="showDevice = false"
        />
        <!-- 保养人选择器 -->
        <up-action-sheet
            :show="showPerson"
            :actions="personActions"
            title="选择保养人"
            @select="onPersonConfirm"
            @close="showPerson = false"
        />
<up-datetime-picker
            :show="showDate"
            v-model="pickerDateValue"
@@ -89,6 +102,7 @@
import PageHeader from '@/components/PageHeader.vue';
import { getDeviceLedger } from '@/api/equipmentManagement/ledger';
import { addUpkeep, editUpkeep, getUpkeepById } from '@/api/equipmentManagement/upkeep';
import { userListNoPageByTenantId } from '@/api/system/user';
import useUserStore from '@/store/modules/user';
import dayjs from "dayjs";
import { formatDateToYMD } from '@/utils/ruoyi';
@@ -117,6 +131,7 @@
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const showPerson = ref(false);
const showDate = ref(false);
const pickerDateValue = ref(Date.now());
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
@@ -124,12 +139,20 @@
// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
// 保养人选项
const userOptions = ref([]);
// 转换为 action-sheet 需要的格式
const deviceActions = computed(() => {
    return deviceOptions.value.map(item => ({
        text: item.deviceName,
        value: item.id,
        data: item
    }));
});
const personActions = computed(() => {
    return userOptions.value.map(item => ({
        name: item.nickName,
        value: item.userId,
    }));
});

@@ -141,6 +164,7 @@
const formRules = {
    deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
    maintenancePlanTime: [{ required: true, trigger: "change", message: "请选择计划保养日期" }],
    maintenancePerson: [{ required: true, trigger: "change", message: "请选择保养人" }],
};

// 使用 ref 声明表单数据
@@ -159,6 +183,16 @@
        deviceOptions.value = data || [];
    } catch (e) {
        showToast('获取设备列表失败');
    }
};

// 加载保养人列表
const loadUserOptions = async () => {
    try {
        const { data } = await userListNoPageByTenantId();
        userOptions.value = data || [];
    } catch (e) {
        showToast('获取保养人列表失败');
    }
};

@@ -254,6 +288,22 @@
    showDevice.value = true;
};

// 显示保养人选择器
const showPersonPicker = () => {
    if (!userOptions.value.length) {
        showToast('暂无可选保养人');
        return;
    }
    showPerson.value = true;
};

// 确认保养人选择
const onPersonConfirm = (selected) => {
    const user = userOptions.value.find(item => item.userId === selected.value);
    form.value.maintenancePerson = user?.nickName || selected.name || '';
    showPerson.value = false;
};

// 确认设备选择
const onDeviceConfirm = (selected) => {
    // selected 返回的是选中项
@@ -283,8 +333,9 @@
});

onMounted(() => {
    // 页面加载时获取设备列表和参数
    // 页面加载时获取设备列表、保养人列表和参数
    loadDeviceName();
    loadUserOptions();
    getPageParams();
});