forestry-wx/src/plant/storage/seed-source/info-edit/index.vue

<template>
    <z-paging class="" ref="paging" bgColor="#fff" paging-class="paging-btm-shadow" safe-area-inset-bottom
        scroll-with-animation>
        <template #top>
            <ut-navbar :title="did ? '编辑种源入库信息' : '添加种源入库信息'" :fixed="false" border></ut-navbar>
        </template>
        <view class="pd-24">
            <up-form class="p-rtv" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
                <!-- 基本信息 -->
                <ut-action-sheet :tabs="pt_seed_type" mode="custom" title="种源类型" v-model="form.seedType">
                    <up-form-item borderBottom label="种源类型" required prop="seedType">
                        <view v-if="form.seedType" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_seed_type,
                            form.seedType) }}</view>
                        <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择基地类型</view>
                        <template #right>
                            <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                        </template>
                    </up-form-item>
                </ut-action-sheet>
                <up-form-item borderBottom label="物种基原" required prop="varietyId">
                    <view class="flex1">
                        <up-button v-if="!form.varietyId" @click="selectVarietyId" type="primary" plain>
                            <image class="w-36 h-36 mr-10" src="@/static/images/common/select_push_icon.png"
                                mode="widthFix" />
                            <span>请选择物种基原</span>
                        </up-button>
                        <view v-else class="bg-#FBFDFB card-info-block pd-24 p-rtv">
                            <view class="mb-16">
                                <span class="f-s-34 c-#333 f-w-5 mr-16">{{ form?.varietyInfo?.varietyName }}</span>
                                <span class="f-s-24 c-#666">{{ form?.varietyInfo?.latinName }}</span>
                            </view>
                            <view class="mb-16">
                                <span class="f-s-28 c-#333 f-w-5 mr-16">{{ form?.varietyInfo?.genusName }}</span>
                                <span class="f-s-24 c-#666">{{ form?.varietyInfo?.genusLatinName }}</span>
                            </view>
                            <view class="f-s-24 c-#666">产出：{{ form?.varietyInfo?.medicineName }}</view>
                            <view class="close-icon pd-16" @click="form.varietyId = ''; form.varietyInfo = null;">
                                <up-icon color="#F81242" name="close" size="32rpx"></up-icon>
                            </view>
                        </view>
                    </view>
                </up-form-item>
                <up-form-item borderBottom label="具体品种/品系名称" prop="seedName">
                    <up-input v-model="form.seedName" placeholder="请输入具体品种/品系名称" border="none" clearable></up-input>
                </up-form-item>
                <ut-action-sheet :tabs="pt_seed_source" mode="custom" title="种源来源" v-model="form.seedSource">
                    <up-form-item borderBottom label="种源来源" required prop="seedSource">
                        <view v-if="form.seedSource" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_seed_source,
                            form.seedSource) }}</view>
                        <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择种源来源</view>
                        <template #right>
                            <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                        </template>
                    </up-form-item>
                </ut-action-sheet>
                <ut-action-sheet :tabs="pt_mother_father_flag" mode="custom" title="父母本情况"
                    v-model="form.instoreBizInfo.motherFatherFlag">
                    <up-form-item borderBottom label="父母本情况" prop="motherFatherFlag">
                        <view v-if="form.instoreBizInfo.motherFatherFlag" class="f-s-30 c-333 f-w-5 flex1">{{
                            selectDictLabel(pt_mother_father_flag, form.instoreBizInfo.motherFatherFlag) }}</view>
                        <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择父母本情况</view>
                        <template #right>
                            <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                        </template>
                    </up-form-item>
                </ut-action-sheet>
                <template>
                    <!-- 父本品种 -->
                    <up-form-item v-if="form?.instoreBizInfo?.motherFatherFlag == '2'" borderBottom label="父本品种" prop="fatherVarietyId">
                        <view class="flex1">
                            <up-button v-if="!form.instoreBizInfo.fatherVarietyId" @click="selectFatherVarietyId"
                                type="primary" plain>
                                <image class="w-36 h-36 mr-10" src="@/static/images/common/select_push_icon.png"
                                    mode="widthFix" />
                                <span>请选择父本品种</span>
                            </up-button>
                            <view v-else class="bg-#FBFDFB card-info-block pd-24 p-rtv">
                                <view class="mb-16">
                                    <span class="f-s-34 c-#333 f-w-5 mr-16">{{
                                        form?.instoreBizInfo?.fatherVarietyInfo?.varietyName }}</span>
                                    <span class="f-s-24 c-#666">{{ form?.instoreBizInfo?.fatherVarietyInfo?.latinName
                                        }}</span>
                                </view>
                                <view class="mb-16">
                                    <span class="f-s-28 c-#333 f-w-5 mr-16">{{
                                        form?.instoreBizInfo?.fatherVarietyInfo?.genusName
                                        }}</span>
                                    <span class="f-s-24 c-#666">{{
                                        form?.instoreBizInfo?.fatherVarietyInfo?.genusLatinName }}</span>
                                </view>
                                <view class="f-s-24 c-#666">产出：{{ form?.instoreBizInfo?.fatherVarietyInfo?.medicineName
                                    }}</view>
                                <view class="close-icon pd-16"
                                    @click="form.instoreBizInfo.fatherVarietyId = ''; form.instoreBizInfo.fatherVarietyInfo = null;">
                                    <up-icon color="#F81242" name="close" size="32rpx"></up-icon>
                                </view>
                            </view>
                        </view>
                    </up-form-item>
                    <!-- 母本品种 -->
                    <up-form-item borderBottom label="母本品种" prop="instoreBizInfo.motherVarietyId">
                        <view class="flex1">
                            <up-button v-if="!form.instoreBizInfo.motherVarietyId" @click="selectMotherVarietyId"
                                type="primary" plain>
                                <image class="w-36 h-36 mr-10" src="@/static/images/common/select_push_icon.png"
                                    mode="widthFix" />
                                <span>请选择母本品种</span>
                            </up-button>
                            <view v-else class="bg-#FBFDFB card-info-block pd-24 p-rtv mt-16">
                                <view class="mb-16">
                                    <span class="f-s-34 c-#333 f-w-5 mr-16">{{
                                        form?.instoreBizInfo?.motherVarietyInfo?.varietyName }}</span>
                                    <span class="f-s-24 c-#666">{{ form?.instoreBizInfo?.motherVarietyInfo?.latinName }}</span>
                                </view>
                                <view class="mb-16">
                                    <span class="f-s-28 c-#333 f-w-5 mr-16">{{ form?.instoreBizInfo?.motherVarietyInfo?.genusName }}</span>
                                    <span class="f-s-24 c-#666">{{ form?.instoreBizInfo?.motherVarietyInfo?.genusLatinName }}</span>
                                </view>
                                <view class="f-s-24 c-#666">产出：{{ form?.instoreBizInfo?.motherVarietyInfo?.medicineName }}</view>
                                <view class="close-icon pd-16" @click="form.instoreBizInfo.motherVarietyId = ''; form.instoreBizInfo.motherVarietyInfo = null;">
                                    <up-icon color="#F81242" name="close" size="32rpx"></up-icon>
                                </view>
                            </view>
                        </view>
                    </up-form-item>
                </template>
                <up-form-item label="繁衍世代" prop="instoreBizInfo.genCount">
                    <up-input v-model="form.instoreBizInfo.genCount" placeholder="请输入繁衍世代" border="none" clearable />
                    <template #right>
                        <view @click.stop>
                            <ut-action-sheet v-model="form.unit" :tabs="pt_materail_unit" mode="custom" title="选择单位">
                                <!-- 可点击选择单位 -->
                                <view class="d-flex pd-10" style="">
                                    <span>{{ form.unit || '代' }}</span>
                                    <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                </view>
                            </ut-action-sheet>
                        </view>
                    </template>
                </up-form-item>
                <up-form-item borderBottom label="受托单位" prop="entrustId">
                    <up-input v-model="form.entrustId" placeholder="请输入受托单位" border="none" clearable></up-input>
                </up-form-item>

                <!-- 入库数量与单位 -->

                <up-form-item label="入库量" prop="capacity" required borderBottom>
                    <up-input v-model="form.capacity" placeholder="请输入入库量" border="none" clearable />
                    <template #right>
                        <view @click.stop>
                            <ut-action-sheet v-model="form.unit" :tabs="pt_seed_unit" mode="custom" title="选择单位">
                                <!-- 可点击选择单位 -->
                                <view class="d-flex pd-10" style="">
                                    <span>{{ form.unit || '株' }}</span>
                                    <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                </view>
                            </ut-action-sheet>
                        </view>
                    </template>
                </up-form-item>

                <!-- 检验报告与供应商信息 -->
                <up-form-item borderBottom label="检验报告" prop="examinReport">
                    <up-input v-model="form.examinReport" placeholder="请输入检验报告编号或说明" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="供应商" prop="supplierId">
                    <up-input v-model="form.supplierId" placeholder="请输入供应商" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="供应商名称" prop="supplier">
                    <up-input v-model="form.supplier" placeholder="请输入供应商名称" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="生产商" prop="producer">
                    <up-input v-model="form.producer" placeholder="请输入生产商名称" border="none" clearable></up-input>
                </up-form-item>

                <!-- 菌种编码信息 -->
                <up-form-item borderBottom label="菌种/菌株编号" prop="fungusCode">
                    <up-input v-model="form.fungusCode" placeholder="请输入菌种/菌株编号" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="菌种编码类型" prop="fungusCodeType">
                    <up-input v-model="form.fungusCodeType" placeholder="请输入菌种编码类型" border="none" clearable></up-input>
                </up-form-item>

                <!-- 个体标识：此处仅占位，后续可改为多选列表 -->
                <up-form-item borderBottom label="是否有个体标识" prop="instoreBizInfo.idFlag" required>
                    <up-radio-group v-model="form.instoreBizInfo.idFlag">
                        <up-radio :customStyle="{ marginRight: '60rpx' }" v-for="(item, index) in yes_no" :key="index"
                            :label="item.label" :name="item.value"></up-radio>
                    </up-radio-group>
                </up-form-item>
                <!-- 个体标识：此处仅占位，后续可改为多选列表 -->
                <template v-if="+form?.instoreBizInfo?.idFlag">
                    <up-form-item borderBottom label="个体标识号" prop="instoreBizInfo.animals" required>
                        <AnimalsInput v-model="form.instoreBizInfo.animals"></AnimalsInput>
                    </up-form-item>
                </template>
                <!-- 媒体与附件 -->
                <up-form-item borderBottom label="种源图片" prop="imgs">
                    <ut-upload v-model="form.imgs" :max-count="9"></ut-upload>
                </up-form-item>
                <up-form-item borderBottom label="种源视频" prop="vedios">
                    <ut-upload v-model="form.vedios" :max-count="3" accept="video" valueType="array"></ut-upload>
                </up-form-item>

                <!-- 产地与繁殖信息 -->
                <up-form-item borderBottom label="种源产地" prop="adcode">
                    <up-input v-model="form.adcode" placeholder="请输入种源产地行政编码" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="繁殖材料" prop="generationMaterial">
                    <up-input v-model="form.generationMaterial" placeholder="请输入繁殖材料" border="none"
                        clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="繁殖地点/采集地点" prop="generationAdcode">
                    <up-input v-model="form.generationAdcode" placeholder="请输入繁殖/采集地点编码或名称" border="none"
                        clearable></up-input>
                </up-form-item>

                <!-- 资质证明附件（暂按上传控件处理，可后续细化） -->
                <up-form-item borderBottom label="物种鉴定证书" prop="spCert">
                    <ut-upload v-model="form.spCert" :max-count="9" valueType="array" accept="file"></ut-upload>
                </up-form-item>
                <up-form-item borderBottom label="新品种证书" prop="newSpCert">
                    <ut-upload v-model="form.newSpCert" :max-count="9" valueType="array" accept="file"></ut-upload>
                </up-form-item>
                <up-form-item borderBottom label="引种证明" prop="importCert">
                    <ut-upload v-model="form.importCert" :max-count="9" valueType="array" accept="file"></ut-upload>
                </up-form-item>

                <!-- 检疫信息 -->
                <up-form-item borderBottom label="种源检疫证号" prop="seedCheckSn">
                    <up-input v-model="form.seedCheckSn" placeholder="请输入种源检疫证号" border="none" clearable></up-input>
                </up-form-item>
                <up-form-item borderBottom label="种源检疫证书" prop="seedCheckCert">
                    <ut-upload v-model="form.seedCheckCert" :max-count="9" valueType="array" accept="file"></ut-upload>
                </up-form-item>
            </up-form>
        </view>
        <template #bottom>
            <view class="pd-20 d-flex">
                <up-button @click="submitForm" type="primary">保存</up-button>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { seedInfoListType } from '../models/type';
import AnimalsInput from '../models/animals-input.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_seed_type, pt_seed_source, pt_materail_unit, pt_mother_father_flag, pt_seed_unit, pt_fungus_code_type, pt_breeding_materials, yes_no } = toRefs<any>(proxy?.useDict('pt_seed_type', 'pt_seed_source', 'pt_materail_unit', 'pt_mother_father_flag', 'pt_op_method', 'pt_seed_unit', 'pt_fungus_code_type', 'pt_breeding_materials', 'yes_no'));
const paging = ref<any>(null);
const upFormRef = ref<any>(null);
const form = ref<seedInfoListType>({
    imgs: [],
    spCert: [],
    newSpCert: [],
    importCert: [],
    seedCheckCert: [],
    unit: '株',
    instoreBizInfo: {
        motherFatherFlag: '',
        idFlag: '1',
    },
});
const rules = reactive({});

const submitForm = async () => {
    uni.$u.debounce(
        async () => {
            try {
                await upFormRef.value?.validate();
            } catch (error: any) {
                // 滚动到第一个错误字段
                const firstErrorField = error && error[0].prop + 'pppp';
                paging.value?.scrollIntoViewById(firstErrorField, 30, true);
                return;
            }
            // 提交表单
            uni.showLoading({
                title: '提交中...',
            });
            try {
            } catch (error) {
                uni.hideLoading();
            }
        },
        500,
        true,
    );
};
// 去选择物种基原
const selectVarietyId = () => {
    uni.$once('updateBiologicalname', function (data) {
        console.log(data);

        form.value.varietyId = data.msg.id;
        form.value.varietyInfo = data.msg;
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/tools/por-torganism/index',
        params: {
            title: '选择物种基原',
        },
    });
};
const selectFatherVarietyId = () => {
    uni.$once('updateBiologicalname', function (data) {
        form.value.instoreBizInfo.fatherVarietyId = data.msg.id;
        form.value.instoreBizInfo.fatherVarietyInfo = data.msg;
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/tools/por-torganism/index',
        params: {
            title: '选择父本品种',
        },
    });
};
const selectMotherVarietyId = () => {
    uni.$once('updateBiologicalname', function (data) {
        form.value.instoreBizInfo.motherVarietyId = data.msg.id;
        form.value.instoreBizInfo.motherVarietyInfo = data.msg;
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/tools/por-torganism/index',
        params: {
            title: '选择母本品种',
        },
    });
};
const did = ref('');
onLoad((optins: any) => {
    if (optins.id) {
        // 编辑加载详情
        did.value = optins.id;
    } else {
    }
});
</script>
<style lang="scss" scoped>
.card-info-block {
    border: 1rpx solid #afddbb;
    border-radius: 10rpx;
}

.close-icon {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
}
</style>