Quick report form - v0 by Vercel

<div> <van-form ref="quickReportFormRef"> <div class="bg-#fff"> <div class="flex items-center p-2"> <div class="h-6 w-1.5 rounded-r-1.5 bg-#0AB389" /> <div class="ml2 text-4"> 事件核心信息 </div> </div> <a-divider style="margin: 2px 0" /> <van-cell-group>  <van-field v-model="occurrenceTimeDisplay" is-link readonly name="datePicker" label="发生时间" placeholder="点击选择时间" :rules="[{ required: true, message: '请选择发生时间' }]" @click="showPicker = true" /> <van-popup v-model:show="showPicker" destroy-on-close position="bottom"> <DateTimePicker :value="formState.occurrenceTime" title="选择发生时间" @confirm="onDateTimeConfirm" @cancel="showPicker = false" /> </van-popup>  <van-field v-model="formState.occurrenceArea" is-link readonly name="area" label="事发地点" placeholder="点击选择省市区" :rules="[{ required: true, message: '请选择事发地点' }]" @click="showArea = true" /> <van-popup v-model:show="showArea" destroy-on-close position="bottom"> <van-cascader v-model="regionValue" title="请选择所在地区" :options="formattedData.regionCascaderOptions" @close="showArea = false" @finish="onFinish" /> </van-popup>  <van-field v-model="detailedAddressDisplay" name="detailLocation" label="详细地点" placeholder="请输入详细地点" :rules="[{ required: true, message: '请填写详细地点' }]" />  <van-field v-model="formState.incidentType" is-link readonly name="picker" label="事件类型" placeholder="点击选择类型" :rules="[{ required: true, message: '请选择事件类型' }]" @click="showTypePicker = true" /> <van-popup v-model:show="showTypePicker" destroy-on-close position="bottom"> <van-picker :columns="formattedData.accidentTypePickerColumns" @confirm="onTypeConfirm" @cancel="showTypePicker = false" /> </van-popup>  <van-field name="location_type" label="事发校内外"> <template #input> <van-radio-group v-model="formState.isOnCampus" direction="horizontal"> <van-radio :name="true">校内</van-radio> <van-radio :name="false">校外</van-radio> </van-radio-group> </template> </van-field>  <van-field v-model="formState.deathCount" type="number" name="death" label="死亡人数" placeholder="请输入死亡人数" :min="0" />  <van-field v-model="formState.severeInjuryCount" type="number" name="seriousInjury" label="重伤人数" placeholder="请输入重伤人数" :min="0" />  <van-field v-model="formState.minorInjuryCount" type="number" name="minorInjury" label="轻伤人数" placeholder="请输入轻伤人数" :min="0" />  <van-field v-model="formState.incidentLevel" is-link readonly name="levelPicker" label="事件等级(初判)" placeholder="点击选择等级" :rules="[{ required: true, message: '请选择事件等级' }]" @click="showLevelPicker = true" /> <van-popup v-model:show="showLevelPicker" destroy-on-close position="bottom"> <van-picker :columns="formattedData.eventLevelPickerColumns" @confirm="onLevelConfirm" @cancel="showLevelPicker = false" /> </van-popup>  <van-field v-model="formState.incidentTitle" name="title" label="事件标题" placeholder="请输入事件标题" :rules="[{ required: true, message: '请填写事件标题' }]" type="textarea" rows="1" autosize @input="titleEdited = true" />  <van-field v-model="incidentDescriptionDisplay" rows="4" autosize type="textarea" name="description" label="事件简要情况" placeholder="请简要描述具体情况" :rules="[{ required: true, message: '请填写事件简要情况' }]" label-align="top" />  <van-field name="attachment" label="附件上传" label-align="top"> <template #input> <MobileUpload v-model:file-list="attachmentFileView" v-model:value="formState.attachment" :config="{ multiple: true, immediateReturn: true, menu: [FileType.文档, FileType.图片, FileType.视频], fileAttribution: FileAttribution.管理认证, }" />  </template> </van-field> </van-cell-group> </div> <div class="mt-2 bg-#fff"> <div class="flex items-center p-2"> <div class="h-6 w-1.5 rounded-r-1.5 bg-#0AB389" /> <div class="ml2 text-4"> 舆情跟踪 </div> </div> <a-divider style="margin: 2px 0" /> <van-cell-group> <van-field name="applyPublicOpinionTracking" label="是否申请舆情追踪"> <template #input> <van-radio-group v-model="formState.applyPublicOpinionTracking" direction="horizontal"> <van-radio :name="true">是</van-radio> <van-radio :name="false">否</van-radio> </van-radio-group> </template> </van-field> <div class="flex p-4"> <c-icon-question-circle-outlined /> <div class="ml-2 rounded bg-#383838 px-2 py-1 text-xs c-#fff">如本事件有舆情扩散风险，校园安全舆情监测中心将对本事件进行全网监测，辅助了解网络舆情传播情况.</div> </div> </van-cell-group> </div>  <div class="mt-2 bg-#fff"> <div class="flex items-center p-2"> <div class="h-6 w-1.5 rounded-r-1.5 bg-#0AB389" /> <div class="ml2 text-4"> 处置联系人 </div> </div> <a-divider style="margin: 2px 0" /> <van-cell-group> <van-field v-model="formState.departmentName!" name="title" label="处置责任单位" placeholder="请输入处置责任单位" :rules="[{ required: true, message: '请填写处置责任单位' }]" /> <van-field v-model="formState.unitHead!" name="title" label="单位负责人" placeholder="请输入单位负责人" :rules="[{ required: true, message: '请填写单位负责人' }]" /> <van-field v-model="formState.unitContactPhone!" name="title" label="负责人联系电话" placeholder="请输入负责人联系电话" :rules="[{ required: true, message: '请填写联系电话' }]" /> <van-field v-model="formState.handlingContact!" name="title" label="上报负责人" placeholder="请输入上报负责人联系电话" :rules="[{ required: true, message: '请填写上报负责人联系电话' }]" /> <van-field v-model="formState.handlingContactPhone!" name="title" label="负责人联系电话" placeholder="请输入上报负责人联系电话" :rules="[{ required: true, message: '请填写上报负责人' }]" /> </van-cell-group> </div> <div class="m-4 text-center space-x-2"> <van-button type="default" @click="goBack">取消</van-button> <van-button v-if="!isEdit || currentIncidentStatus === IncidentStatus.草稿" type="primary" plain :loading="saveLoading" @click="saveDraft(true)" > 保存草稿 </van-button> <van-button v-if="$auth([_Role.网格联络员]) && canSubmit" type="primary" :loading="saveLoading" @click="saveDraft(false)" > {{ submitButtonText }} </van-button> </div> </van-form> </div>这是一个上报表单，当前操作过于复杂用户不方便使用，你按照我的要求做出以下更改。创建一个新的上报表单1、去除所有必填项2、将事件简要情况作为主要填报内容的第一步该项必填2、将其余表单内容作为非必填的步骤，一步步引导用户根据实质情况去填写，如果没有这些情况则无需填写直接上报

Show full message

126d ago