forestry-wx/src/plant/port/port-harvest-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-24">
            <up-form class="p-rtv" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
                <view class="startline-title pl-24 ml-24 mb-16">管理记录信息</view>
                <view class="bg-#fff pd-24 mb-20">
                    <!-- 操作日期 -->
                    <view class="h-1" id="operationDatepppp"></view>
                    <!-- 采收类型 -->
                    <ut-action-sheet v-model="form.opMethod" :tabs="pt_op_method" title="选择操作类型" mode="custom">
                        <up-form-item borderBottom label="操作类型" required prop="opMethod" id="opMethodpppp">
                            <view v-if="form.opMethod" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_op_method, form.opMethod) }}</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.opMethod" :tabs="pt_op_method" title="选择操作类型" mode="custom">
                        <up-form-item borderBottom label="操作类型" required prop="opMethod" id="opMethodpppp">
                            <view v-if="form.opMethod" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_op_method, form.opMethod) }}</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="cusOp" id="cusOppppp">
                        <up-input v-model="form.cusOp" placeholder="请输入菌种/菌株编号" border="none"></up-input>
                    </up-form-item>
                    <!-- 采收日期 -->
                    <up-form-item :borderBottom="false" label="采收日期">
                        <up-form-item :borderBottom="false" required prop="activityStart">
                            <ut-datetime-picker v-model="form.activityStart" mode="date" dateFields="day" @change="changeStartTime">
                                <view class="d-flex mr-20">
                                    <up-input v-model="form.activityStart" placeholder="请选择采收开始时间" border="bottom" :customStyle="{ paddingLeft: '0rpx' }"></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" required prop="activityEnd">
                            <ut-datetime-picker v-model="form.activityEnd" mode="date" dateFields="day">
                                <view class="d-flex">
                                    <up-input v-model="form.activityEnd" placeholder="请选择采收结束时间" border="bottom" :customStyle="{ paddingLeft: '0rpx' }"></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>
                    <!-- 采收批号 -->
                    <up-form-item borderBottom label="采收批号" required prop="plantationCode" id="plantationCodepppp">
                        <view class="d-flex a-c j-sb w-100%">
                            <view v-if="!form.plantationCode" class="flex1 c-#999">请生成采收批号</view>
                            <view v-else class="flex1 c-#333">{{ form.plantationCode }}</view>
                            <up-button @click="randomCode" class="c-#fff" type="primary" style="height: 50rpx; width: 130rpx">随机生成</up-button>
                        </view>
                    </up-form-item>
                    <!-- 采收量 -->
                    <up-form-item label="采收量" required class="form-item-bottom-padding-0">
                        <div class="flex1 d-flex">
                            <div class="flex1 ov-hd" id="plantingMgAmountpppp">
                                <up-form-item prop="plantingMgAmount" border-bottom class="form-item-top-padding-0">
                                    <up-input v-model="form.plantingMgAmount" placeholder="请输入采收量" border="none" clearable></up-input>
                                </up-form-item>
                            </div>
                            <div class="pd-5" id="plantingMgUnitpppp"></div>
                            <div class="min-w-200">
                                <ut-action-sheet v-model="form.plantingMgUnit" :tabs="pt_planting_mg_unit" title="选择单位">
                                    <up-form-item prop="plantingMgUnit" border-bottom class="form-item-top-padding-0">
                                        <view class="flex1" style="line-height: 24px">
                                            <view v-if="form.plantingMgUnit" class="f-s-30 c-333 f-w-5 text-center">{{ selectDictLabel(pt_planting_mg_unit, form.plantingMgUnit) }}</view>
                                            <view v-else class="f-s-30 c-ccc f-w-4 text-center">单位</view>
                                        </view>
                                        <template #right>
                                            <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                        </template>
                                    </up-form-item>
                                </ut-action-sheet>
                            </div>
                        </div>
                    </up-form-item>
                    <!-- 采收负责人 -->
                    <up-form-item borderBottom label="采收负责人" required prop="mgName" id="namepppp">
                        <view class="d-flex a-c j-sb w-100%">
                            <up-input style="padding-left: 0" v-model="form.mgName" placeholder="请输入采收负责人" border="none"></up-input>
                        </view>
                    </up-form-item>
                    <!-- 采收方式 -->
                    <ut-action-sheet v-model="form.opMethod" :tabs="pt_op_method" title="选择采收方式" mode="custom">
                        <up-form-item borderBottom label="采收方式" required prop="opMethod" id="opMethodpppp">
                            <view v-if="form.opMethod" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_op_method, form.opMethod) }}</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="false" label="操作地块" prop="landIds" id="baseIdpppp">
                        <view v-if="!deawerData" class="w-100% d-flex a-c j-c pd-24 b-radius bg-#FBFDFB border-#AFDDBB" @click="goSelectBase()">
                            <view class=""></view>
                            <view class="f-s-34 c-primary">请选择操作地块</view>
                        </view>
                        <view class="w-100%" v-else>
                            <Baseinfo :modeValue="deawerData" @close="handleBaseinfoClose" :baseType="'1'" />
                        </view>
                    </up-form-item>
                    <!-- 操作方式 -->
                    <up-form-item borderBottom label="操作方式" prop="opRemark" id="opRemarkpppp">
                        <up-input v-model="form.opRemark" placeholder="如:人工锄草、机械中耕、喷雾器叶面喷施等" border="none"></up-input>
                    </up-form-item>
                    <up-form-item label="过程图片" prop="imgs" borderBottom id="imgspppp">
                        <ut-upload v-model="form.imgs" :max-count="9" accept="image"></ut-upload>
                    </up-form-item>
                    <up-form-item label="过程视频" prop="videos" borderBottom id="videospppp">
                        <ut-upload v-model="form.videos" :max-count="9" accept="video"></ut-upload>
                    </up-form-item>
                </view>
            </up-form>
        </view>
    </z-paging>
</template>