|
@@ -6,92 +6,117 @@
|
|
|
@close="handleClose"
|
|
|
@confirm="submit"
|
|
|
>
|
|
|
- <div class="position-container">
|
|
|
- <div style="position: relative">
|
|
|
- <div class="box">
|
|
|
- <van-search
|
|
|
- v-model="form.address"
|
|
|
- show-action
|
|
|
- label="详细地址"
|
|
|
- left-icon="none"
|
|
|
- placeholder="请输入"
|
|
|
- @search="handleInput"
|
|
|
- >
|
|
|
- <template #action>
|
|
|
- <div @click="handleInput">搜索</div>
|
|
|
- </template>
|
|
|
- </van-search>
|
|
|
- </div>
|
|
|
- <van-field
|
|
|
- v-model="form.event_title"
|
|
|
- label="灾害事件"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
- <div class="custom-vant-field">
|
|
|
- <div class="van-field__label">事件级别</div>
|
|
|
- <el-select
|
|
|
- v-model="form.event_level"
|
|
|
- :teleported="false"
|
|
|
- placeholder="请选择"
|
|
|
- class="van-style-select"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in mm_event_level"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="custom-line" />
|
|
|
- <div v-if="searchPop" class="scroll_box">
|
|
|
- <div class="scroll-header">
|
|
|
- <span>搜索结果列表</span>
|
|
|
- <i class="close-icon" @click="closeSearchList()" />
|
|
|
+ <van-form ref="formRef">
|
|
|
+ <div class="position-container">
|
|
|
+ <div style="position: relative">
|
|
|
+ <div class="box">
|
|
|
+ <div class="custom-vant-field">
|
|
|
+ <div class="van-field__label">详细地址</div>
|
|
|
+ <van-field
|
|
|
+ v-model="form.address"
|
|
|
+ placeholder="请输入地址"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '地址不能为空',
|
|
|
+ trigger: 'onChange'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ class="address-field"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <template #button>
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ style="height: 28px"
|
|
|
+ @click="handleInput"
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
+ </van-button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="scroll">
|
|
|
- <div
|
|
|
- v-for="(item, index) in searchList"
|
|
|
- v-show="searchList.length"
|
|
|
- :key="index"
|
|
|
- class="item"
|
|
|
- @click="handlePanTo(index)"
|
|
|
+ <van-field
|
|
|
+ v-model="form.event_title"
|
|
|
+ label="灾害事件"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ <div class="custom-vant-field">
|
|
|
+ <div class="van-field__label">事件级别</div>
|
|
|
+ <el-select
|
|
|
+ v-model="form.event_level"
|
|
|
+ :teleported="false"
|
|
|
+ placeholder="请选择"
|
|
|
+ class="van-style-select"
|
|
|
>
|
|
|
- <van-image
|
|
|
- width="50"
|
|
|
- height="50"
|
|
|
- fit="fill"
|
|
|
- :src="item.img"
|
|
|
- style="flex-shrink: 0; margin-right: 8px"
|
|
|
+ <el-option
|
|
|
+ v-for="item in mm_event_level"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
/>
|
|
|
- <div>
|
|
|
- <div class="text">{{ item.name }}</div>
|
|
|
- <div>{{ item.address }}</div>
|
|
|
- </div>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="custom-line" />
|
|
|
+ <div v-if="searchPop" class="scroll_box">
|
|
|
+ <div class="scroll-header">
|
|
|
+ <span>搜索结果列表</span>
|
|
|
+ <i class="close-icon" @click="closeSearchList()" />
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-show="!searchList.length"
|
|
|
- class="empty"
|
|
|
- style="text-align: center"
|
|
|
- >
|
|
|
- 没有搜索到内容
|
|
|
+
|
|
|
+ <div class="scroll">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in searchList"
|
|
|
+ v-show="searchList.length"
|
|
|
+ :key="index"
|
|
|
+ class="item"
|
|
|
+ @click="handlePanTo(index)"
|
|
|
+ >
|
|
|
+ <van-image
|
|
|
+ width="50"
|
|
|
+ height="50"
|
|
|
+ fit="fill"
|
|
|
+ :src="item.img"
|
|
|
+ style="flex-shrink: 0; margin-right: 8px"
|
|
|
+ />
|
|
|
+ <div>
|
|
|
+ <div class="text">{{ item.name }}</div>
|
|
|
+ <div>{{ item.address }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="!searchList.length"
|
|
|
+ class="empty"
|
|
|
+ style="text-align: center"
|
|
|
+ >
|
|
|
+ 没有搜索到内容
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <van-field
|
|
|
+ v-model="form.longitude"
|
|
|
+ label="经       度"
|
|
|
+ placeholder="请输入"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '经度不能为空', trigger: 'onBlur' }
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="form.latitude"
|
|
|
+ label="纬       度"
|
|
|
+ placeholder="请输入"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '纬度不能为空', trigger: 'onBlur' }
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <div id="map" class="map" />
|
|
|
</div>
|
|
|
- <van-field
|
|
|
- v-model="form.longitude"
|
|
|
- label="经       度"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
- <van-field
|
|
|
- v-model="form.latitude"
|
|
|
- label="纬       度"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
- <div id="map" class="map" />
|
|
|
- </div>
|
|
|
+ </van-form>
|
|
|
</van-dialog>
|
|
|
</template>
|
|
|
|
|
@@ -100,11 +125,11 @@ import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { addEvent } from "@/api/emergencyCommandMap/JointDuty";
|
|
|
import { nextTick, onUnmounted, reactive, ref, watch } from "vue";
|
|
|
-import { showFailToast } from "vant";
|
|
|
+import {showFailToast, showSuccessToast} from "vant";
|
|
|
import { ElOption, ElSelect } from "element-plus";
|
|
|
import { getEventDetail } from "@/api/event";
|
|
|
-import {editEvent} from "@/api/duty/eventing";
|
|
|
-import {deepClone} from "@/utils";
|
|
|
+import { editEvent } from "@/api/duty/eventing";
|
|
|
+import { deepClone } from "@/utils";
|
|
|
|
|
|
const props = defineProps({
|
|
|
visible: {
|
|
@@ -128,6 +153,7 @@ let contextMenu = null;
|
|
|
let lnglatPosition = ref([]); //选中的新坐标
|
|
|
let rules = reactive({
|
|
|
address: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
|
|
|
+ event_title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
|
|
longitude: [{ required: true, message: "经度不能为空", trigger: "blur" }],
|
|
|
latitude: [{ required: true, message: "纬度不能为空", trigger: "blur" }]
|
|
|
});
|
|
@@ -366,33 +392,44 @@ let queryFormRef = ref();
|
|
|
|
|
|
function submit() {
|
|
|
if (!!props.id) {
|
|
|
- let temp = {};
|
|
|
- temp.address = form.value.address;
|
|
|
- temp.casualties = form.value.casualties;
|
|
|
- temp.contact = form.value.contact;
|
|
|
- temp.create_time = form.value.create_time;
|
|
|
- temp.deaths = form.value.deaths;
|
|
|
- temp.del_flag = form.value.del_flag;
|
|
|
- temp.eventId = form.value.event_id;
|
|
|
- temp.event_code = temp.eventId;
|
|
|
- temp.description = form.value.description;
|
|
|
- temp.event_level = form.value.event_level;
|
|
|
- temp.event_source = form.value.event_source;
|
|
|
- temp.event_status = form.value.event_status;
|
|
|
- temp.event_time = form.value.event_time;
|
|
|
- temp.event_title = form.value.event_title;
|
|
|
- temp.event_type = form.value.event_type;
|
|
|
- temp.id = form.value.id;
|
|
|
- temp.injuries = form.value.injuries;
|
|
|
- temp.latitude = form.value.latitude;
|
|
|
- temp.longitude = form.value.longitude;
|
|
|
- temp.missing = form.value.missing;
|
|
|
- temp.plan_id = form.value.plan_id;
|
|
|
- temp.recorded_by = form.value.recorded_by;
|
|
|
- temp.region_code = form.value.region_code;
|
|
|
- temp.report_time = form.value.report_time;
|
|
|
- temp.response_level = form.value.response_level;
|
|
|
- editEvent(temp);
|
|
|
+ if (!form.value.address) {
|
|
|
+ showFailToast("详细地址不能为空");
|
|
|
+ } else if (!form.value.longitude) {
|
|
|
+ showFailToast("经度不能为空");
|
|
|
+ } else if (!form.value.latitude) {
|
|
|
+ showFailToast("纬度不能为空");
|
|
|
+ } else {
|
|
|
+ let temp = {};
|
|
|
+ temp.address = form.value.address;
|
|
|
+ temp.casualties = form.value.casualties;
|
|
|
+ temp.contact = form.value.contact;
|
|
|
+ temp.create_time = form.value.create_time;
|
|
|
+ temp.deaths = form.value.deaths;
|
|
|
+ temp.del_flag = form.value.del_flag;
|
|
|
+ temp.eventId = form.value.event_id;
|
|
|
+ temp.event_code = temp.eventId;
|
|
|
+ temp.description = form.value.description;
|
|
|
+ temp.event_level = form.value.event_level;
|
|
|
+ temp.event_source = form.value.event_source;
|
|
|
+ temp.event_status = form.value.event_status;
|
|
|
+ temp.event_time = form.value.event_time;
|
|
|
+ temp.event_title = form.value.event_title;
|
|
|
+ temp.event_type = form.value.event_type;
|
|
|
+ temp.id = form.value.id;
|
|
|
+ temp.injuries = form.value.injuries;
|
|
|
+ temp.latitude = form.value.latitude;
|
|
|
+ temp.longitude = form.value.longitude;
|
|
|
+ temp.missing = form.value.missing;
|
|
|
+ temp.plan_id = form.value.plan_id;
|
|
|
+ temp.recorded_by = form.value.recorded_by;
|
|
|
+ temp.region_code = form.value.region_code;
|
|
|
+ temp.report_time = form.value.report_time;
|
|
|
+ temp.response_level = form.value.response_level;
|
|
|
+ editEvent(temp).then(() => {
|
|
|
+ emits("confirm");
|
|
|
+ showSuccessToast("定位修改成功");
|
|
|
+ });
|
|
|
+ }
|
|
|
} else {
|
|
|
if (!form.value.address) {
|
|
|
showFailToast("详细地址不能为空");
|
|
@@ -504,4 +541,46 @@ function submit() {
|
|
|
.van-style-select {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
+:deep(.van-field__button) {
|
|
|
+ .van-button {
|
|
|
+ background: #fff !important;
|
|
|
+ border-color: #ebedf0;
|
|
|
+ color: #323233;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #f8f8f8 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-vant-field {
|
|
|
+ // 保持原有样式
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ .van-field__label {
|
|
|
+ width: 70px;
|
|
|
+ color: #373738;
|
|
|
+ margin-right: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ // 新增字段统一样式
|
|
|
+ .van-field {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0;
|
|
|
+ :deep(.van-field__body) {
|
|
|
+ input::placeholder {
|
|
|
+ color: #c8c9cc;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 调整搜索按钮对齐方式
|
|
|
+.address-field {
|
|
|
+ :deep(.van-field__button) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|