forestry-wx/src/tools/species-info-process/index.vue

<template>
    <z-paging ref="paging" v-model="list" paging-class="paging-btm-shadow" bgColor="#f7f7f7" safe-area-inset-bottom @query="query">
        <template #top>
            <ut-navbar leftText="请选择任务所使用的种子信息" :fixed="false"></ut-navbar>
        </template>
        <view class="d-flex a-c pd-24 pb-0 bg-#f7f7f7">
            <view class="min-w-170 flex1">
                <ut-action-sheet v-model="form.instoreType" :tabs="[{ label: '全部', value: '' }, ...pt_fresh_instore_type]" @change="changeSeach" title="选择原料类型">
                    <view class="d-flex search-select-item a-c">
                        <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_fresh_instore_type, form.instoreType) || '全部' }}</view>
                        <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                    </view>
                </ut-action-sheet>
            </view>
            <view class="h-86 pl-20 w-100%">
                <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" @change="changeSeach" margin="0" :border="false" placeholder="搜批次号、品种名、基地名" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </view>
        <template v-for="(item, index) in list" :key="index">
            <info-card :item="item" :selected="selectedItems?.id === item.id" @click="toggleSelection(item)" />
        </template>
        <template #bottom>
            <view v-if="selectedItems" class="bg-#EBF6EE c-primary f-s-24 pd-10 pl-24"> 已选择种源：{{ selectedItems.variety }} </view>
            <view class="pd-20 d-flex">
                <up-button type="primary" @click="open">确认选择</up-button>
            </view>
        </template>
    </z-paging>
    <up-popup v-if="show" :show="show" :round="10" mode="bottom" @close="close" @open="open" closeable>
        <view>
            <view class="d-flex a-c pd-24">
                <view class="f-s-34 f-w-5 c-#333">关联种源信息</view>
                <view class="bg-#37A954 radius-10 pd4-10-20-10-20 d-flex a-c" style="width: max-content">
                    <up-icon name="plus" color="#fff" size="24rpx"></up-icon>
                    <view class="c-#fff f-s-22">添加种源关联信息</view>
                </view>
            </view>
            <view class="pd-24">
                <up-form class="p-rtv" labelPosition="top" :model="formDate" :rules="rules" labelWidth="auto" ref="upFormRef">
                    <up-form-item :borderBottom="false" prop="inputs" id="inputspppp">
                        <view class="d-flex flex-cln" style="width: 100%">
                            <souceinfo v-if="selectedItems" :data="selectedItems" :index="0" v-model:inputs="formDate.inputs[0]" @close="handleSourceClose" />
                        </view>
                    </up-form-item>
                </up-form>
            </view>
            <view class="pd-20 d-flex">
                <up-button type="primary" @click="saveSeedInfo">确认添加</up-button>
            </view>
        </view>
    </up-popup>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import InfoCard from './models/info-card.vue';
import Souceinfo from './models/souceinfo.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_fresh_instore_type } = toRefs<any>(proxy?.useDict('pt_fresh_instore_type'));
interface SeedItem {
    id: number | string;
    [key: string]: any;
}

const list = ref<SeedItem[]>([]);
const paging = ref();
const form = ref({
    keyword: '',
    instoreType: '',
    storageType: '4',
    part: '',
    notIncludePart: '',
});
//表单
const formDate = ref({
    inputs: [] as any,
});

// 自定义inputs校验函数
const validateInputs = (rule: any, value: any, callback: any) => {
    // value 应该是 inputs 数组
    if (!value || !Array.isArray(value) || value.length === 0) {
        callback(new Error('请至少添加一个种源并填写用量'));
        return;
    }

    // 检查每个物料
    for (const item of value) {
        if (!item || typeof item !== 'object') {
            callback(new Error('种源数据格式错误'));
            return;
        }

        const { storageId, inputAmount } = item;
        console.log(item, 'item');

        if (!storageId) {
            callback(new Error('种源ID缺失'));
            return;
        }

        if (inputAmount === undefined || inputAmount === null || inputAmount === '') {
            callback(new Error('请填写种源用量'));
            return;
        }

        const amounts = Number(inputAmount);
        if (isNaN(amounts) || amounts <= 0) {
            callback(new Error('种源用量必须大于0'));
            return;
        }
    }

    callback();
};
// 表单验证规则
const rules = ref({
    inputs: [{ validator: validateInputs, trigger: 'blur' }],
});

// 单选模式：存储当前选中的单个项目
const selectedItems = ref<SeedItem | null>(null);
const query = async (pageNo: number, pageSize: number) => {
    const params = {
        pageNo,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/storage/list', params);
    const { rows } = res;
    paging.value.complete(rows);
};
const changeSeach = () => {
    paging.value.reload();
};

const toggleSelection = (item: SeedItem) => {
    if (selectedItems.value?.id === item.id) {
        // 如果点击的是已选项，则取消选择
        selectedItems.value = null;
        formDate.value.inputs = [];
    } else {
        // 选择新项（自动取消之前的选择）
        selectedItems.value = item;
        formDate.value.inputs = [
            {
                storageId: item.id,
                inputAmount: '',
                variety: item?.variety,
            },
        ];
    }
    console.log('当前选中的种子:', selectedItems.value);
    console.log('表单数据:', formDate.value.inputs);
};

// 创建响应式数据
const show = ref(false);
// 定义方法
const open = () => {
    // 打开逻辑，比如设置 show 为 true
    show.value = true;
    // 获取当前选中的单个对象
    console.log('选中的项目:', selectedItems.value);
};

const close = () => {
    // 关闭逻辑，设置 show 为 false
    show.value = false;
    // console.log('close');
};

// 处理种源信息关闭事件（单选模式：直接取消选择）
const handleSourceClose = (index: number) => {
    selectedItems.value = null;
    formDate.value.inputs = [];
};
const upFormRef = ref();
//校验表单然后提交
const saveSeedInfo = async () => {
    uni.$u.debounce(
        async () => {
            try {
                console.log('开始校验');
                console.log(formDate.value, 'formDate.value');
                await upFormRef.value?.validate();
                console.log('校验完成');
                const params = {
                    processId: processId.value,
                    inputList: formDate.value.inputs,
                };
                console.log('提交参数:', params);

                // 这里需要根据实际 API 进行调整
                const res = await useClientRequest.post('/plt-api/app/processInputMaterial/batchInput', params);
                if (res.code == 200) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000,
                    });
                    setTimeout(() => {
                        //发送emit
                        uni.$emit(`updatesupervise-${processId.value}`, res?.data);
                        uni.navigateBack({
                            delta: 1,
                        });
                    }, 1000);
                }
            } catch (error: any) {
                console.log('表单验证错误:', error);
                // 滚动到第一个错误字段
                if (error && error[0]?.field) {
                    const firstErrorField = error[0].field + 'pppp';
                    paging.value?.scrollIntoViewById(firstErrorField, 30, true);
                }
                return;
            }
        },
        1000,
        true,
    );
};
const processId = ref('');
onLoad((options: any) => {
    processId.value = options?.id;
    if (+options?.processMedType == 1) {
        form.value.part = 'PL-FR-05';
    } else if (+options?.processMedType == 2) {
        form.value.notIncludePart = 'PL-FR-05';
    }
});
//卸载监听
onUnload(() => {
    uni.$off(`updatesupervise-${processId.value}`);
});
</script>
<style lang="scss" scoped>
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
</style>