fix 问题

plus-ui-ts/src/api/system/event/index.ts

@@ -43,7 +43,7 @@ export const getEvent = (id: string | number) => {
  * 新增事件
  * @param data
  */
-export const addEvent = (data: EventForm) => {
+export const addEvent = (data) => {
   return request({
     url: '/system/event',
     method: 'post',
@@ -55,7 +55,7 @@ export const addEvent = (data: EventForm) => {
  * 修改事件
  * @param data
  */
-export const updateEvent = (data: EventForm) => {
+export const updateEvent = (data) => {
   return request({
     url: '/system/event',
     method: 'put',

plus-ui-ts/src/components/FileUpload/index.vue

@@ -98,13 +98,14 @@ watch(
           return {
             name: oss.originalName,
             url: oss.url,
-            ossId: oss.ossId
+            ossId: oss.ossId,
+            fileName: oss.fileName
           };
         });
       }
       // 然后将数组转为对象数组
       fileList.value = list.map((item) => {
-        item = { name: item.name, url: item.url, ossId: item.ossId };
+        item = { name: item.name, url: item.url, ossId: item.ossId, fileName: item.fileName };
         item.uid = item.uid || new Date().getTime() + temp++;
         return item;
       });

plus-ui-ts/src/views/device/event/components/fileUpload.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="fileUploadRef"
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :accept="fileAccept"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      v-if="!disabled"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div v-if="showTip && !disabled" class="el-upload__tip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+      </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+        <el-link :href="getFileUrl(file.url)" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.url) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+import { delOss, listByIds } from '@/api/system/oss';
+import { globalHeaders } from '@/utils/request';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Array],
+    default: () => []
+  },
+  // 数量限制
+  limit: propTypes.number.def(5),
+  // 大小限制(MB)
+  fileSize: propTypes.number.def(5),
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
+  // 是否显示提示
+  isShowTip: propTypes.bool.def(true),
+  // 禁用组件（仅查看文件）
+  disabled: propTypes.bool.def(false)
+});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emit = defineEmits(['update:modelValue']);
+const number = ref(0);
+const uploadList = ref<any[]>([]);
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+
+const fileList = ref<any[]>([]);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
+
+const fileUploadRef = ref<ElUploadInstance>();
+
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val) {
+      let temp = 1;
+      // 首先将值转为数组
+      let list: any[] = [];
+      if (Array.isArray(val)) {
+        list = val;
+      }
+      // 然后将数组转为对象数组
+      fileList.value = list.map((item) => {
+        item = { url: item };
+        item.uid = item.uid || new Date().getTime() + temp++;
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 上传前校检格式和大小
+const handleBeforeUpload = (file: any) => {
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件名是否包含特殊字符
+  if (file.name.includes(',')) {
+    proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+// 文件个数超出
+const handleExceed = () => {
+  proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+};
+
+// 上传失败
+const handleUploadError = () => {
+  proxy?.$modal.msgError('上传文件失败');
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file: UploadFile) => {
+  if (res.code === 200) {
+    uploadList.value.push({ url: res.data.purl });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+};
+
+// 删除文件
+const handleDelete = (index: number) => {
+  fileList.value.splice(index, 1);
+  emit('update:modelValue', listToArr(fileList.value));
+};
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit('update:modelValue', listToArr(fileList.value));
+    proxy?.$modal.closeLoading();
+  }
+};
+
+// 获取文件名称
+const getFileName = (name: string) => {
+  // 如果是url那么取最后的名字 如果不是直接返回
+  if (name.lastIndexOf('/') > -1) {
+    return name.slice(name.lastIndexOf('/') + 1);
+  } else {
+    return name;
+  }
+};
+const getFileUrl = (file) => {
+  return `${import.meta.env.VITE_APP_BASE_HOST}/api/oss/local/upload/${file}`;
+};
+const listToArr = (list: any[]) => {
+  return list.map((item) => item.url);
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

plus-ui-ts/src/views/device/event/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="地址" prop="params.key">
+              <el-input v-model="queryParams.params.key" placeholder="请输入地址" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="事件等级" prop="level">
+              <el-select v-model="queryParams.level" clearable placeholder="请选择">
+                <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="eventList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="事件等级" prop="level" align="center">
+          <template #default="{ row }">
+            {{ event_level.filter((item) => item.value == row.level)[0]?.label }}
+          </template>
+        </el-table-column>
+        <el-table-column label="事件类型" prop="ext2.lx" show-overflow-tooltip align="center" />
+        <el-table-column label="地址" prop="addr" show-overflow-tooltip align="center" />
+        <el-table-column label="发生时间" prop="createTimeFormat" align="center" />
+        <el-table-column label="状态" prop="status" align="center">
+          <template #default="{ row }">
+            <span v-if="row.status == 3" style="color: #5f86fd">已上报</span>
+            <span v-else-if="row.status == 1" style="color: #26c768">已解决</span>
+            <span v-else style="color: #ff6124">未解决</span>
+          </template>
+        </el-table-column>
+        <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="Edit" @click="handleUpdate(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改事件对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="eventFormRef" :model="form" label-position="top" label-width="90px" label-suffix=":">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="事件类型" prop="ext2.lx">
+              <el-select v-model="form.ext2.lx" clearable placeholder="请选择">
+                <el-option v-for="dict in eventTypeOptions" :key="dict" :label="dict" :value="dict"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发生时间" prop="createTime">
+              <el-date-picker style="width: 100%" v-model="form.createTime" type="date" placeholder="请选择" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="事件等级" prop="level">
+              <el-select v-model="form.level" clearable placeholder="请选择">
+                <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="桩号" prop="ext2.zh">
+              <el-input v-model="form.ext2.zh" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="form.status" clearable placeholder="请选择">
+                <el-option v-for="dict in event_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地点描述" prop="addr">
+              <el-input v-model="form.addr" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="现场画面" prop="ext1">
+              <uploadCom v-model="form.ext1" ref="fileUploadRef" :fileType="['png', 'jpg', 'jpeg', 'mp4']" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Event" lang="ts">
+import { listEvent, getEvent, delEvent, addEvent, updateEvent, getEventTypes } from '@/api/system/event';
+import { dateFormat } from '@/utils/index';
+import uploadCom from './components/fileUpload.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { event_level } = toRefs(proxy?.useDict('event_level'));
+const { event_status } = toRefs(proxy?.useDict('event_status'));
+const eventList = ref([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const eventFormRef = ref<ElFormInstance>();
+const fileUploadRef = ref({} as any);
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+const initFormData = {
+  id: undefined,
+  addr: undefined,
+  content: undefined,
+  status: undefined,
+  level: undefined,
+  createTime: undefined,
+  ext1: [],
+  ext2: {
+    lx: undefined,
+    zh: undefined
+  }
+};
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    level: undefined,
+    ext1: undefined,
+    ext2: undefined,
+    params: {
+      key: undefined
+    }
+  }
+});
+const { queryParams, form } = toRefs(data);
+const eventTypeOptions = ref([]);
+/** 查询事件列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listEvent(queryParams.value);
+  eventList.value = res.rows.map((item) => ({
+    ...item,
+    status: item.status || '2',
+    createTimeFormat: dateFormat(new Date(item.createTime), 'yyyy-MM-dd'),
+    ext1: item.ext1 ? JSON.parse(item.ext1) : [],
+    ext2: item.ext2 ? JSON.parse(item.ext2) : {}
+  }));
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  eventFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加事件';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getEvent(_id);
+  res.data.ext1 = JSON.parse(res.data.ext1) || [];
+  res.data.ext2 = JSON.parse(res.data.ext2) || {
+    lx: undefined,
+    zh: undefined
+  };
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改事件';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  eventFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      const params = {
+        ...form.value,
+        ext1: JSON.stringify(form.value.ext1),
+        ext2: JSON.stringify(form.value.ext2)
+      };
+      if (form.value.id) {
+        await updateEvent(params).finally(() => (buttonLoading.value = false));
+      } else {
+        await addEvent(params).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除？').finally(() => (loading.value = false));
+  await delEvent(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'system/event/export',
+    {
+      ...queryParams.value
+    },
+    `event_${new Date().getTime()}.xlsx`
+  );
+};
+const getEventTypeOptions = () => {
+  getEventTypes().then(({ code, data }) => {
+    if (code === 200) {
+      eventTypeOptions.value = data;
+    }
+  });
+};
+onMounted(() => {
+  getList();
+  getEventTypeOptions();
+});
+</script>

plus-ui-ts/src/views/index.vue

@@ -173,10 +173,9 @@
             </el-col>
             <el-col :span="8">
               <el-form-item label="事件类型" prop="ext2.lx">
-                <el-input v-model="form.ext2.lx" placeholder="请输入" />
-                <!-- <el-select v-model="form.ext2.lx" clearable placeholder="请选择">
-                <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-              </el-select> -->
+                <el-select v-model="form.ext2.lx" clearable placeholder="请选择">
+                  <el-option v-for="dict in eventTypeOptions" :key="dict" :label="dict" :value="dict"></el-option>
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">

plus-ui-ts/src/views/system/event/index.vue

@@ -1,259 +0,0 @@
-<template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="地址" prop="addr">
-              <el-input v-model="queryParams.addr" placeholder="请输入地址" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="等级" prop="level">
-              <el-input v-model="queryParams.level" placeholder="请输入等级" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="建议处理部门" prop="processingDept">
-              <el-input v-model="queryParams.processingDept" placeholder="请输入建议处理部门" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="建议措施" prop="recomEvent">
-              <el-input v-model="queryParams.recomEvent" placeholder="请输入建议措施" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="应急预案" prop="emergencyPlan">
-              <el-input v-model="queryParams.emergencyPlan" placeholder="请输入应急预案" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
-    <el-card shadow="never">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:event:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:event:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:event:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:event:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="eventList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="编号" align="center" prop="id" v-if="true" />
-        <el-table-column label="地址" align="center" prop="addr" />
-        <el-table-column label="内容" align="center" prop="content" />
-        <el-table-column label="等级" align="center" prop="level" />
-        <el-table-column label="建议处理部门" align="center" prop="processingDept" />
-        <el-table-column label="建议措施" align="center" prop="recomEvent" />
-        <el-table-column label="应急预案" align="center" prop="emergencyPlan" />
-        <el-table-column label="扩展" align="center" prop="ext1" />
-        <el-table-column label="扩展2" align="center" prop="ext2" />
-        <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="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:event:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:event:remove']"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
-    <!-- 添加或修改事件对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="地址" prop="addr">
-            <el-input v-model="form.addr" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="内容">
-          <editor v-model="form.content" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="等级" prop="level">
-          <el-input v-model="form.level" placeholder="请输入等级" />
-        </el-form-item>
-        <el-form-item label="建议处理部门" prop="processingDept">
-          <el-input v-model="form.processingDept" placeholder="请输入建议处理部门" />
-        </el-form-item>
-        <el-form-item label="建议措施" prop="recomEvent">
-            <el-input v-model="form.recomEvent" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="应急预案" prop="emergencyPlan">
-            <el-input v-model="form.emergencyPlan" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="Event" lang="ts">
-import { listEvent, getEvent, delEvent, addEvent, updateEvent } from '@/api/system/event';
-import { EventVO, EventQuery, EventForm } from '@/api/system/event/types';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const eventList = ref<EventVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-
-const queryFormRef = ref<ElFormInstance>();
-const eventFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: EventForm = {
-  id: undefined,
-  addr: undefined,
-  content: undefined,
-  level: undefined,
-  processingDept: undefined,
-  recomEvent: undefined,
-  emergencyPlan: undefined,
-  ext1: undefined,
-  ext2: undefined,
-}
-const data = reactive<PageData<EventForm, EventQuery>>({
-  form: {...initFormData},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    addr: undefined,
-    content: undefined,
-    level: undefined,
-    processingDept: undefined,
-    recomEvent: undefined,
-    emergencyPlan: undefined,
-    ext1: undefined,
-    ext2: undefined,
-    params: {
-    }
-  },
-  rules: {
-    id: [
-      { required: true, message: "编号不能为空", trigger: "blur" }
-    ],
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询事件列表 */
-const getList = async () => {
-  loading.value = true;
-  const res = await listEvent(queryParams.value);
-  eventList.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-}
-
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-}
-
-/** 表单重置 */
-const reset = () => {
-  form.value = {...initFormData};
-  eventFormRef.value?.resetFields();
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-}
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: EventVO[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = "添加事件";
-}
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: EventVO) => {
-  reset();
-  const _id = row?.id || ids.value[0]
-  const res = await getEvent(_id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = "修改事件";
-}
-
-/** 提交按钮 */
-const submitForm = () => {
-  eventFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateEvent(form.value).finally(() =>  buttonLoading.value = false);
-      } else {
-        await addEvent(form.value).finally(() =>  buttonLoading.value = false);
-      }
-      proxy?.$modal.msgSuccess("操作成功");
-      dialog.visible = false;
-      await getList();
-    }
-  });
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row?: EventVO) => {
-  const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除事件编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
-  await delEvent(_ids);
-  proxy?.$modal.msgSuccess("删除成功");
-  await getList();
-}
-
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download('system/event/export', {
-    ...queryParams.value
-  }, `event_${new Date().getTime()}.xlsx`)
-}
-
-onMounted(() => {
-  getList();
-});
-</script>