forestry-wx/src/tools/por-torganism/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#fff" @query="query" :auto="false" safe-area-inset-bottom>
        <template #top>
            <view class="">
                <up-navbar :title="title" @leftClick="navigateBackOrHome()" :fixed="false"></up-navbar>
                <view class="pd-24">
                    <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" @change="changeSeach" margin="0" :border="false" placeholder="可输入药材名称或动植物基原名称搜索" bgColor="#f7f7f7" height="86rpx" borderRadius="16rpx"></ut-search>
                </view>
            </view>
        </template>
        <view class="pd-24" v-if="!showSearch">
            <template v-if="speArray.length">
                <view class="f-s-32 c-#333 f-w-5 mb-20">快捷选择主营品种</view>
                <view class="d-flex a-c f-w-w">
                    <spe-lable class="mr-20 mb-20" v-for="(item, index) in speArray" :key="index" :text="item?.medicineName" size="30rpx" :id="item?.id" @click="changeSpe(item?.medicineName)" />
                </view>
            </template>
            <template>
                <ut-empty text=""></ut-empty>
                <view class="d-flex flex-cln j-c a-c">
                    <view class="c-#ccc f-s-28">您可以<text class="c-primary">直接搜索，</text>或前往<text class="c-primary">基地－主营品种配置</text>页面进行</view>
                    <view class="c-#ccc f-s-28">主营品种配置，配置后下次即可快捷选择。</view>
                </view>
            </template>
        </view>
        <view class="pd-24" v-if="showSearch">
            <view class="f-s-32 c-#333 f-w-5 mb-20">搜索结果</view>
            <view class="pd-30 d-flex bg-#FBFDFB border-#37A954 b-radius mb-20" v-for="(item, index) in list" :key="index">
                <up-radio-group v-model="radiovalue1">
                    <view @click="radiovalue1 = item?.id" class="d-flex w-100%">
                        <view class="">
                            <view class="mb-20 ov-hd tx-ov">
                                <text class="c-#333 f-s-34 f-w-5 mr-5">{{ item?.varietyName }}</text>
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item?.latinName }}</text>
                            </view>
                            <view class="mb-20">
                                <text class="c-#333 f-s-28 f-w-5 mr-5">{{ item?.genusName }}</text>
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item?.genusLatinName }}</text>
                            </view>
                            <view class="">
                                <text class="c-#666 f-s-24">产出：</text>
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item?.medicineName }}</text>
                            </view>
                        </view>
                        <view class="flex1"></view>
                        <view class="d-flex j-c a-c">
                            <view @click.stop class="">
                                <up-radio activeColor="#37A954" label="" :name="item?.id"> </up-radio>
                            </view>
                        </view>
                    </view>
                </up-radio-group>
            </view>
        </view>
        <template #bottom v-if="showSearch">
            <view class="pd-24 d-flex j-c gap-20 base-bottom-wrap">
                <up-button type="primary" @click="save()">确认选择</up-button>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import SpeLable from './models/speLable.vue';
import { recursiveDecodeURIComponentSimple } from '@/utils/ruoyi';
const paging = ref();
const list = ref<any[]>([]);
const form = ref({
    keyword: '',
});
const speArray = ref<any[]>([]);
const showSearch = ref(false);
const query = async (pageNo: number, pageSize: number) => {
    const params = {
        pageNo,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/cpyVariety/pageList', params);
    const { rows } = res;
    paging.value.complete(rows);
};
const changeSeach = () => {
    if (!form.value?.keyword) {
        showSearch.value = false;
    } else {
        showSearch.value = true;
    }
    paging.value.reload();
};
const changeSpe = (data: string) => {
    form.value.keyword = data;
    changeSeach();
};
const getSpecies = async () => {
    console.log('getSpecies');
    if (form.value?.keyword) {
        return;
    }
    const res = await useClientRequest.get('/plt-api/app/cpyVariety/list');
    if (res.code === 200) {
        speArray.value = res.data;
    }
};
const radiovalue1 = ref('苹果');
const save = () => {
    const res = list.value.find((item) => item.id === radiovalue1.value);
    if (!res) return;
    uni.$emit('updateBiologicalname', { msg: res });
    uni.navigateBack({ delta: 1 });
};
const title = ref('选择动植物名称');
onLoad((options) => {
    console.log(options);
    
    const decodedOptions = recursiveDecodeURIComponentSimple(options);
    if (decodedOptions?.title) {
        title.value = decodedOptions?.title || '选择动植物名称';
    }
});
onMounted(() => {
    getSpecies();
});
onUnload(() => {
    console.log('????');
    uni.$off('updateBiologicalname');
});
</script>