yjdp-web/src/views/routineCommandMap/EventManage.vue

<template>
  <div v-if="modelValue" class="dialog-wrap">
    <div class="overlay" @click="closeDialog"></div>
    <div class="dialog" :style="{ height: height }">
      <div class="dialog-header">
        <div class="dialog-title">{{ title }}</div>
        <div class="icon-close" @click="closeDialog">
          <el-icon size="100px"><Close /></el-icon>
        </div>
      </div>
      <div class="dialog-content">
        <slot />
        <transition name="fade">
          <div v-show="showSearch" class="mb-[20px]">
            <el-form ref="queryFormRef" :model="queryParams">
              <el-row :gutter="10">
                <!-- 第一行 -->
                <el-col :span="6">
                  <el-form-item label="事件类型" prop="event_type">
                    <el-select v-model="queryParams.event_type" placeholder="全部" clearable>
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="事件等级" prop="event_level">
                    <el-select v-model="queryParams.event_level" placeholder="全部" clearable>
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="事件状态" prop="event_status">
                    <el-select v-model="queryParams.event_status" placeholder="全部" clearable>
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="行政区划" prop="region_code">
                    <el-select v-model="queryParams.region_code" placeholder="全部" clearable>
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="mt-[10px]">
                <el-col :span="6">
                  <el-form-item label="事发时间" prop="event_time">
                    <el-date-picker
                      v-model="queryParams.event_time"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="选择事发时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="keyword">
                    <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
                  </el-form-item>
                </el-col>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-row>
            </el-form>
          </div>
        </transition>
        <!-- 表格组件 -->
        <el-table v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="事件编号" align="center" prop="event_id" />
          <el-table-column label="事件标题" align="center" prop="event_title" />
          <el-table-column label="事件类型" align="center" prop="event_type">
            <template #default="scope">
              <dict-tag :options="mm_event_type" :value="scope.row.event_type" />
            </template>
          </el-table-column>
          <el-table-column label="事件等级" align="center" prop="event_level">
            <template #default="scope">
              <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
            </template>
          </el-table-column>
          <el-table-column label="事件地点" align="center" prop="address" />
          <el-table-column label="事件状态" align="center" prop="event_status">
            <template #default="scope">
              <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
            </template>
          </el-table-column>
          <el-table-column label="事件时间" align="center" prop="event_time" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="查看" placement="top">
                <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
              </el-tooltip>
              <!--              <el-tooltip content="编辑" placement="top">-->
              <!--                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>-->
              <!--              </el-tooltip>-->
              <el-tooltip content="关闭事件" placement="top">
                <el-button link type="primary" icon="Close" @click="handleClose(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <eventDetails
          v-model="eventDetailsState.show"
          :title="eventDetailsState.title"
          :event-id="eventId"
          @update:model-value="getList"
        ></eventDetails>
        <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :event-id="eventId" @update:model-value="getList" />
        <CloseEventDialog
          v-model="closeDialogState.show"
          :data="closeDialogState.form"
          :event-id="eventId"
          @update:model-value="handleCloseEventDialog"
        />

        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { getEvent } from '@/api/duty/eventing';

import EventEditDialog from './eventing/EventEditDialog.vue';
import CloseEventDialog from './eventing/CloseEventDialog.vue';
import eventDetails from './eventing/eventDetails.vue';
const proxy = getCurrentInstance()?.proxy;
const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
  proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
);
const router = useRouter();
const eventList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const selectedRow = ref(null);
const eventId = ref('');
const queryFormRef = ref();

const initFormData = {
  event_id: '', // 事件标题
  event_title: '', // 事件标题
  event_type: '', // 事件类型
  event_level: '', // 事件等级
  event_status: '', // 事件状态
  address: '', // 事件地点
  longitude: '', // 经度
  latitude: '', // 纬度
  event_time: '', // 事发时间
  report_time: '', // 上报时间
  deaths: '',
  injuries: '',
  missing: '',
  event_source: '', // 事件来源
  event_description: '', // 事件描述
  contact: '' // 联系方式
};
// 表单数据
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    page: 1,
    page_size: 10,
    event_type: '',
    event_level: '',
    event_status: '',
    event_time: '',
    region_code: '',
    keyword: ''
  },
  event_levelSelection: [],
  event_statusSelection: [],
  regionSelection: []
});

const { queryParams, form } = toRefs(data);
// 监听 modelValue 的变化
/*watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      getList();
    }
  }
);*/
const getList = () => {
  loading.value = true;
  getEvent(queryParams.value)
    .then((res) => {
      eventList.value = res.data;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleQuery = () => {
  queryParams.value.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  queryParams.value = { page: 1, page_size: 10, event_type: '', event_level: '', event_status: '', event_time: '', region_code: '', keyword: '' };
  handleQuery();
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.eventId);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

const eventEditDialogState = reactive({
  show: false,
  title: ''
});
const eventDetailsState = reactive({
  show: false,
  title: ''
});

// const handleAdd = () => {
//   eventId.value = '';
//   eventEditDialogState.title = '新增事件';
//   eventEditDialogState.show = true;
// };

// 修改事件
// const handleUpdate = (row) => {
//   if (row) {
//     eventId.value = row.event_id;
//     eventEditDialogState.title = '修改事件';
//     eventEditDialogState.show = true;
//   }
// };
//查看事件详情
const handleView = (row) => {
  // 查看事件详情逻辑
  eventId.value = row.event_id;
  eventDetailsState.title = '查看事件';
  eventDetailsState.show = true;
};

// const handleDelete = (row) => {
//   if (row) {
//     ElMessageBox.confirm('确认删除事件吗?', '提示', {
//       confirmButtonText: '确定',
//       cancelButtonText: '取消',
//       type: 'info'
//     }).then(() => {
//       eventList.value = eventList.value.filter((item) => item.eventId !== row.event_id);
//       deleteEvent({ eventId: row.event_id }).then((res) => {
//         proxy?.$modal.msgSuccess(res.msg);
//         setTimeout(() => {
//           getList();
//         }, 500);
//       });
//     });
//   }
// };

// 关闭事件
const closeDialogState = reactive({
  show: false,
  form: {
    eventId: '',
    deaths: '',
    injuries: '',
    missing: '',
    fileNames: []
  }
});

const handleClose = (row) => {
  if (row) {
    console.log(row);
    closeDialogState.form.eventId = row.event_id;
    closeDialogState.form.deaths = row.deaths;
    closeDialogState.form.injuries = row.injuries;
    closeDialogState.form.missing = row.missing;
    closeDialogState.show = true;
  }
};

const handleCloseEventDialog = (b) => {
  console.log('handleCloseEventDialog', b);
};
/*interface Props {
  modelValue: boolean;
  title?: string;
  height?: string;
}*/
/*const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});*/
const props = defineProps<{
  modelValue?: boolean;
  title?: string;
  height?: string;
}>();
const emit = defineEmits(['update:modelValue']);

// 将props转换
const { modelValue } = toRefs(props);

// 监听props的modelValue变化
watch(modelValue, (newValue) => {
  if (newValue) {
    getList();
  }
});

// 关闭弹窗
const closeDialog = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.dialog-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer;
  }
  .dialog {
    width: 5000px;
    height: 2000px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
  }
}
.dialog {
  padding: 0 50px;
  .dialog-header {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-close {
      cursor: pointer;
    }
  }
}
</style>