forestry-wx/src/plant/port/port-create/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="创建种养殖任务" :fixed="false"></ut-navbar>
        </template>
        <view class="pt-26">
            <up-form class="p-rtv" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
                <view class="startline-title pl-24 ml-26 mb-16">基地信息</view>
                <view class="bg-#fff pd-26">
                    <view class="b-radius bg-#EBF6EE c-primary f-s-24 pd-26"> 注意：关联时请确保已添加到地块；关联时必须选到地块/圈 舍/组培架。</view>
                </view>
                <view class="bg-#fff pd-26 mb-20">
                    <up-form-item :borderBottom="false" label="种养殖所在基地" required prop="plantBase">
                        <view class="w-100% d-flex a-c j-c pd-26 b-radius bg-#FBFDFB border-#AFDDBB" @click="openDrawer">
                            <view class=""></view>
                            <view class="f-s-34 c-primary">请选择种养殖所在的基地</view>
                        </view>
                    </up-form-item>
                </view>
                <view class="startline-title pl-24 ml-26 mb-16">种养殖信息</view>
                <view class="bg-#fff pd-26 mb-20">
                    <ut-action-sheet v-model="form.queryType" :tabs="pt_task_type" title="选择任务类型">
                        <up-form-item borderBottom label="任务类型" required prop="baseType">
                            <view v-if="form.queryType1" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_org_type, form.queryType1) }}</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 v-model="form.queryType1" :tabs="pt_org_type" title="选择溯源级别">
                        <up-form-item borderBottom label="溯源级别" required prop="orgType">
                            <view v-if="form.queryType1" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_org_type, form.queryType1) }}</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="gapFlag">
                        <view v-if="form.queryType2" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_org_type, form.queryType1) }}</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>
                    <up-form-item borderBottom label="动物名称" required prop="plantBase">
                        <view class="w-100% d-flex a-c j-c pd-26 b-radius bg-#FBFDFB border-#AFDDBB">
                            <view class=""></view>
                            <view class="f-s-34 c-primary">请选择养植的动物名称</view>
                        </view>
                    </up-form-item>
                    <up-form-item borderBottom label="养殖批号" required prop="plantBase">
                        <view class="d-flex a-c j-sb w-100%">
                            <up-input v-model="form.queryType3" placeholder="请输入养殖批号" border="none"></up-input>
                            <up-button class="c-#fff" type="primary" style="height: 50rpx; width: 130rpx">随机生成</up-button>
                        </view>
                    </up-form-item>
                    <up-form-item label="请选择养殖技术规程文件" prop="environmentInfo.report" borderBottom>
                        <ut-upload v-model="form.queryType4" :max-count="9" valueType="array" accept="file"></ut-upload>
                    </up-form-item>
                    <ut-action-sheet v-model="form.queryType5" :tabs="pt_task_type" title="选择任务类型">
                        <up-form-item borderBottom label="任务类型" required prop="baseType">
                            <view v-if="form.queryType1" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_org_type, form.queryType1) }}</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="queryType6">
                        <ut-datetime-picker v-model="form.queryType6.startDate" mode="date" dateFields="month">
                            <view class="d-flex mr-20">
                                <up-input v-model="form.queryType6.startDate" placeholder="请选择养殖开始时间" border="none"></up-input>
                                <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                            </view>
                        </ut-datetime-picker>
                        <ut-datetime-picker v-model="form.queryType6.endDate" mode="date" dateFields="month">
                            <view class="d-flex">
                                <up-input v-model="form.queryType6.endDate" placeholder="请选择养殖结束时间" border="none"></up-input>
                                <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                            </view>
                        </ut-datetime-picker>
                    </up-form-item>
                </view>
            </up-form>
        </view>
    </z-paging>

    <!-- 添加drawer组件 -->
    <Drawer v-if="drawerVisible" v-model="drawerVisible" @open="onDrawerOpen" @close="onDrawerClose" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Drawer from './models/drawer.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_task_type, pt_org_type, yes_no } = toRefs<any>(proxy?.useDict('pt_task_type', 'pt_org_type', 'yes_no'));
const form = ref({
    queryType: '',
    queryType1: '',
    queryType2: '',
    queryType3: '',
    queryType4: '',
    queryType5: '',
    queryType6: {
        startDate: '',
        endDate: '',
    },
});
const paging = ref<unknown>('paging');
const list = ref<unknown>([]);

// 控制抽屉显示状态
const drawerVisible = ref(false);

// 打开抽屉
function openDrawer() {
    drawerVisible.value = true;
}

// 关闭抽屉
function closeDrawer() {
    drawerVisible.value = false;
}

// 处理抽屉打开事件
function onDrawerOpen() {
    console.log('抽屉打开了');
}

// 处理抽屉关闭事件
function onDrawerClose() {
    console.log('抽屉关闭了');
}

onLoad((options) => {
    console.log(options);
});
</script>