forestry-wx/src/tools/species-info/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_seed_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_seed_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.has(item.id)" @click="toggleSelection(item)" />
        </template>
        <template #bottom>
            <view v-if="formDate.inputs.length > 0" class="bg-#EBF6EE c-primary f-s-24 pd-10 pl-24">
                已选择种源：
                <template v-for="(item, index) in formDate.inputs" :key="index">
                    <text v-if="index !== 0">、</text>
                    {{ item.variety }}
                </template>
            </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>
        <scroll-view style="height: 80vh" scroll-y>
            <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" required label="种源投入时间" prop="useDate" id="useDatepppp">
                        <ut-datetime-picker v-model="formDate.useDate" mode="date" dateFields="day" style="width: 100%">
                            <view class="d-flex">
                                <up-input v-model="formDate.useDate" readonly placeholder="默认种养殖开始时间但可修改" border="bottom"></up-input>
                                <up-icon size="22rpx" color="#37A954" name="arrow-down-fill" style="margin-left: -20rpx"></up-icon>
                            </view>
                        </ut-datetime-picker>
                    </up-form-item>
                    <up-form-item :borderBottom="false" prop="inputs" id="inputspppp">
                        <view class="d-flex flex-cln" style="width: 100%">
                            <template v-for="(item, index) in Array.from(selectedItems.values())" :key="index">
                                <souceinfo showClose :data="item" :index="index" v-model:inputs="formDate.inputs[index]" @close="handleSourceClose" />
                            </template>
                        </view>
                    </up-form-item>
                    <up-form-item :borderBottom="false" label="备注/说明" prop="remark">
                        <up-textarea v-model="formDate.remark" placeholder="请输入备注/说明" border="bottom"></up-textarea>
                    </up-form-item>
                </up-form>
            </view>
            <view class="pd-20 d-flex">
                <up-button type="primary" @click="saveSeedInfo">确认添加</up-button>
            </view>
        </scroll-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_seed_instore_type } = toRefs<any>(proxy?.useDict('pt_seed_instore_type'));
interface SeedItem {
    id: number | string;
    [key: string]: any;
}

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

// 自定义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 { seedId, amount } = item;
        console.log(item, 'item');

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

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

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

    callback();
};
// 表单验证规则
const rules = ref({
    useDate: [{ required: true, message: '请选择种源投入时间' }],
    inputs: [{ validator: validateInputs, trigger: 'blur' }],
    remark: [{ required: false, message: '请填写备注/说明' }],
});

const selectedItems = ref(new Map<string | number, SeedItem>());
const query = async (pageNo: number, pageSize: number) => {
    const params = {
        pageNo,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/storageSeed/page', params);
    const { rows } = res;
    paging.value.complete(rows);
};
const changeSeach = () => {
    paging.value.reload();
};

const toggleSelection = (item: SeedItem) => {
    const newMap = new Map(selectedItems.value);
    if (newMap.has(item.id)) {
        // 取消选择
        newMap.delete(item.id);
        formDate.value.inputs = formDate.value.inputs.filter((inputItem: any) => inputItem.seedId !== item.id);
    } else {
        // 防止重复添加
        if (!formDate.value.inputs.some((inputItem: any) => inputItem.seedId === item.id)) {
            formDate.value.inputs.push({
                taskId: taskId.value,
                seedId: item.id,
                amount: '',
                variety: item?.variety,
            });
        }
        newMap.set(item.id, item);
    }

    selectedItems.value = newMap;
    console.log('当前选中的种子:', Array.from(newMap.keys()));
    console.log('表单数据:', formDate.value.inputs);
};

// 创建响应式数据
const show = ref(false);
// 定义方法
const open = () => {
    // 打开逻辑，比如设置 show 为 true
    show.value = true;
    // 获取所有选中的完整对象
    const selectedArray = Array.from(selectedItems.value.values());
    console.log('选中的完整项目:', selectedArray);
    // 这里可以使用 selectedArray 进行后续处理
};

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

// 处理种源信息关闭事件
const handleSourceClose = (index: number) => {
    // 根据索引找到对应的项目
    const selectedArray = Array.from(selectedItems.value.values());
    if (index >= 0 && index < selectedArray.length) {
        const item = selectedArray[index];
        console.log(item, 'item');

        const newMap = new Map(selectedItems.value);

        // 从 selectedItems 中删除对应的项目
        newMap.delete(item.id);
        selectedItems.value = newMap;

        // 从 formDate.inputs 中删除对应的数据
        // 注意：由于删除后数组索引会变化，我们需要根据 seedId 来过滤
        formDate.value.inputs = formDate.value.inputs.filter((input: any) => input.seedId !== item.id);
    }
};
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('校验完成');

                formDate.value.inputs.forEach((item: any) => {
                    // 正确赋值方式
                    item.taskId = taskId.value;
                    item.remark = formDate.value.remark;
                    item.useDate = formDate.value.useDate;
                });
                console.log(formDate.value.inputs);

                const params = [...formDate.value.inputs];

                console.log('提交参数:', params);

                // 这里需要根据实际 API 进行调整
                const res = await useClientRequest.post('/plt-api/app/seedInfo/saveSeedInfoBatch', params);
                if (res.code == 200) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000,
                    });
                    setTimeout(() => {
                        //发送emit
                        uni.$emit('updatesuperviselist');
                        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 taskId = ref('');
onLoad((options: any) => {
    taskId.value = options?.taskId;
});
//卸载监听
onUnload(() => {
    uni.$off('updatesuperviselist');
});
</script>
<style lang="scss" scoped>
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
</style>