|
|
@@ -1,37 +1,136 @@
|
|
|
<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 title="请选择任务所使用的种源信息" :fixed="false"></ut-navbar>
|
|
|
+ <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.taskType" :tabs="[{ label: '全部', value: '' }, ...pt_seed_instore_type]" @change="changeSeach" title="选择原料类型">
|
|
|
+ <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.taskType) || '全部' }}</view>
|
|
|
+ <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" margin="0" :border="false" placeholder="搜批次号、品种名、基地名" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
|
|
|
+ <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 />
|
|
|
+ <info-card :item="item" :selected="selectedItems.has(item.id)" @click="toggleSelection(item)" />
|
|
|
+ </template>
|
|
|
+ <template #bottom>
|
|
|
+ <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" placeholder="默认种养殖开始时间但可修改" border="bottom"></up-input>
|
|
|
+ <up-icon size="22rpx" color="#2A6D52" 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'));
|
|
|
-const list = ref([]);
|
|
|
+interface SeedItem {
|
|
|
+ id: number | string;
|
|
|
+ [key: string]: any;
|
|
|
+}
|
|
|
+
|
|
|
+const list = ref<SeedItem[]>([]);
|
|
|
const paging = ref();
|
|
|
const form = ref({
|
|
|
keyword: '',
|
|
|
- taskType: '',
|
|
|
+ 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,
|
|
|
@@ -45,6 +144,125 @@ const query = async (pageNo: number, pageSize: number) => {
|
|
|
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: '',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.search-select-item {
|