|
|
@@ -5,64 +5,78 @@
|
|
|
<el-form :model="q" :inline="true" size="default" class="search-form">
|
|
|
<el-form-item label="所在河湖">
|
|
|
<el-select
|
|
|
- v-model="q.objectType"
|
|
|
- placeholder="全部"
|
|
|
- clearable
|
|
|
- style="width: 130px"
|
|
|
- @change="getList"
|
|
|
+ v-model="q.objectType"
|
|
|
+ placeholder="全部"
|
|
|
+ clearable
|
|
|
+ style="width: 130px"
|
|
|
+ @change="getList"
|
|
|
>
|
|
|
- <el-option label="太湖" value="0" /><el-option
|
|
|
- label="望虞河"
|
|
|
- value="1"
|
|
|
- /><el-option label="太浦河" value="2" />
|
|
|
+ <el-option label="太湖" value="LKS"/>
|
|
|
+ <el-option
|
|
|
+ label="望虞河"
|
|
|
+ value="REA"
|
|
|
+ />
|
|
|
+ <el-option label="太浦河" value="RER"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="处理状态">
|
|
|
<el-select
|
|
|
- v-model="q.status"
|
|
|
- placeholder="全部"
|
|
|
- clearable
|
|
|
- style="width: 110px"
|
|
|
- @change="getList"
|
|
|
+ v-model="q.status"
|
|
|
+ placeholder="全部"
|
|
|
+ clearable
|
|
|
+ style="width: 110px"
|
|
|
+ @change="getList"
|
|
|
>
|
|
|
- <el-option label="待处理" value="0" /><el-option
|
|
|
- label="处理中"
|
|
|
- value="1"
|
|
|
- /><el-option label="完成" value="2" /><el-option
|
|
|
- label="完结"
|
|
|
- value="3"
|
|
|
+ <el-option label="待处理" value="0"/>
|
|
|
+ <el-option
|
|
|
+ label="处理中"
|
|
|
+ value="1"
|
|
|
+ />
|
|
|
+ <el-option label="完成" value="2"/>
|
|
|
+ <el-option
|
|
|
+ label="完结"
|
|
|
+ value="3"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="事件类型">
|
|
|
<el-select
|
|
|
- v-model="q.evType"
|
|
|
- placeholder="全部"
|
|
|
- clearable
|
|
|
- style="width: 110px"
|
|
|
- @change="getList"
|
|
|
+ v-model="q.evType"
|
|
|
+ placeholder="全部"
|
|
|
+ clearable
|
|
|
+ style="width: 110px"
|
|
|
+ @change="getList"
|
|
|
>
|
|
|
- <el-option label="乱占" value="1" /><el-option
|
|
|
- label="乱采"
|
|
|
- value="2"
|
|
|
- /><el-option label="乱堆" value="3" /><el-option
|
|
|
- label="乱建"
|
|
|
- value="4"
|
|
|
- /><el-option label="其他" value="5" />
|
|
|
+ <el-option label="乱占" value="1"/>
|
|
|
+ <el-option
|
|
|
+ label="乱采"
|
|
|
+ value="2"
|
|
|
+ />
|
|
|
+ <el-option label="乱堆" value="3"/>
|
|
|
+ <el-option
|
|
|
+ label="乱建"
|
|
|
+ value="4"
|
|
|
+ />
|
|
|
+ <el-option label="其他" value="5"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="关键词">
|
|
|
<el-input
|
|
|
- v-model="q.keyWord"
|
|
|
- placeholder="河段名/描述"
|
|
|
- clearable
|
|
|
- style="width: 160px"
|
|
|
- @keyup.enter="getList"
|
|
|
+ v-model="q.keyWord"
|
|
|
+ placeholder="河段名/描述"
|
|
|
+ clearable
|
|
|
+ style="width: 160px"
|
|
|
+ @keyup.enter="getList"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
+ <el-button type="success" icon="Plus" @click="openAdd"
|
|
|
+ >新增
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
<el-button type="primary" icon="Search" @click="getList"
|
|
|
- >搜索</el-button
|
|
|
+ >搜索
|
|
|
+ </el-button
|
|
|
>
|
|
|
<el-button icon="Refresh" @click="resetQ">重置</el-button>
|
|
|
</el-form-item>
|
|
|
@@ -72,28 +86,40 @@
|
|
|
<!-- 表格区域 -->
|
|
|
<div class="table-wrapper">
|
|
|
<el-table
|
|
|
- :data="list"
|
|
|
- border
|
|
|
- stripe
|
|
|
- size="default"
|
|
|
- v-loading="loading"
|
|
|
- :header-cell-style="headerCellStyle"
|
|
|
- class="data-table"
|
|
|
- @row-click="showDetail"
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ size="default"
|
|
|
+ v-loading="loading"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ class="data-table"
|
|
|
+ @row-click="showDetail"
|
|
|
>
|
|
|
- <el-table-column type="index" label="序号" width="55" align="center" />
|
|
|
+ <el-table-column type="index" label="序号" width="55" align="center"/>
|
|
|
+ <el-table-column label="所在河湖" width="90" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag
|
|
|
+ v-if="row.objType"
|
|
|
+ :type="objTypeTag(row.objType)"
|
|
|
+ size="small"
|
|
|
+ effect="plain"
|
|
|
+ >
|
|
|
+ {{ objTypeMap[row.objType] || row.objType || "-" }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="objectName"
|
|
|
- label="河段名称"
|
|
|
- show-overflow-tooltip
|
|
|
- width="140"
|
|
|
- align="center"
|
|
|
+ prop="objName"
|
|
|
+ label="河段名称"
|
|
|
+ show-overflow-tooltip
|
|
|
+ width="140"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="adName"
|
|
|
- label="所属地区"
|
|
|
- width="100"
|
|
|
- align="center"
|
|
|
+ prop="adName"
|
|
|
+ label="所属地区"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
<el-table-column label="事件类型" width="90" align="center">
|
|
|
<template #default="{ row }">
|
|
|
@@ -103,11 +129,11 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="eventDesc"
|
|
|
- label="问题描述"
|
|
|
- show-overflow-tooltip
|
|
|
- min-width="200"
|
|
|
- align="center"
|
|
|
+ prop="eventDesc"
|
|
|
+ label="问题描述"
|
|
|
+ show-overflow-tooltip
|
|
|
+ min-width="180"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
<el-table-column label="状态" width="90" align="center">
|
|
|
<template #default="{ row }">
|
|
|
@@ -117,43 +143,43 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="dealDesc"
|
|
|
- label="整改情况"
|
|
|
- show-overflow-tooltip
|
|
|
- width="160"
|
|
|
- align="center"
|
|
|
+ prop="dealDesc"
|
|
|
+ label="整改情况"
|
|
|
+ show-overflow-tooltip
|
|
|
+ width="160"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="findTs"
|
|
|
- label="发现时间"
|
|
|
- width="120"
|
|
|
- align="center"
|
|
|
+ prop="findTs"
|
|
|
+ label="发现时间"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="userName"
|
|
|
- label="上报人"
|
|
|
- width="100"
|
|
|
- align="center"
|
|
|
+ prop="userName"
|
|
|
+ label="上报人"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
/>
|
|
|
</el-table>
|
|
|
<div class="pagination-wrap" v-show="total > 0">
|
|
|
<pagination
|
|
|
- :total="total"
|
|
|
- v-model:page="pageNum"
|
|
|
- v-model:limit="pageSize"
|
|
|
- @pagination="getList"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="pageNum"
|
|
|
+ v-model:limit="pageSize"
|
|
|
+ @pagination="getList"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 详情弹窗 -->
|
|
|
<el-dialog
|
|
|
- v-model="dlg"
|
|
|
- :title="cur?.objectName || '事件详情'"
|
|
|
- width="950px"
|
|
|
- top="3vh"
|
|
|
- :close-on-click-modal="false"
|
|
|
- class="detail-dialog"
|
|
|
+ v-model="dlg"
|
|
|
+ :title="cur?.objName || '事件详情'"
|
|
|
+ width="950px"
|
|
|
+ top="3vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ class="detail-dialog"
|
|
|
>
|
|
|
<div class="detail-grid" v-if="cur">
|
|
|
<!-- 左侧信息 -->
|
|
|
@@ -162,7 +188,7 @@
|
|
|
<div class="info-grid">
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">河段名称</span
|
|
|
- ><span class="info-value">{{ cur.objectName }}</span>
|
|
|
+ ><span class="info-value">{{ cur.objName }}</span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">问题描述</span
|
|
|
@@ -184,12 +210,20 @@
|
|
|
<span class="info-label">所属省份</span
|
|
|
><span class="info-value">{{ cur.adName }}</span>
|
|
|
</div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">所在河湖</span>
|
|
|
+ <span class="info-value">
|
|
|
+ <el-tag :type="objTypeTag(cur.objType)" size="small">{{
|
|
|
+ objTypeMap[cur.objType] || cur.objType || "-"
|
|
|
+ }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">事件类型</span
|
|
|
><span class="info-value">
|
|
|
<el-tag :type="evTypeTag(cur.evType)" size="small">{{
|
|
|
- evTypeMap[cur.evType]
|
|
|
- }}</el-tag>
|
|
|
+ evTypeMap[cur.evType]
|
|
|
+ }}</el-tag>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
@@ -214,12 +248,12 @@
|
|
|
<div class="section-title" style="margin-top: 16px">现场图片</div>
|
|
|
<div v-if="cur.images?.length" class="image-carousel">
|
|
|
<el-carousel
|
|
|
- height="240px"
|
|
|
- indicator-position="outside"
|
|
|
- arrow="always"
|
|
|
+ height="240px"
|
|
|
+ indicator-position="outside"
|
|
|
+ arrow="always"
|
|
|
>
|
|
|
<el-carousel-item v-for="(img, i) in cur.images" :key="i">
|
|
|
- <img :src="img" class="carousel-img" @click="previewImg(img)" />
|
|
|
+ <img :src="img" class="carousel-img" @click="previewImg(img)"/>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
@@ -238,37 +272,201 @@
|
|
|
<div class="check-state">{{ c.cState }}</div>
|
|
|
<div v-if="c.files?.length" class="check-files">
|
|
|
<img
|
|
|
- v-for="(f, j) in c.files"
|
|
|
- :key="j"
|
|
|
- :src="f"
|
|
|
- class="check-img"
|
|
|
- @click="previewImg(f)"
|
|
|
+ v-for="(f, j) in c.files"
|
|
|
+ :key="j"
|
|
|
+ :src="f"
|
|
|
+ class="check-img"
|
|
|
+ @click="previewImg(f)"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-empty v-else description="暂无检查记录" :image-size="60" />
|
|
|
+ <el-empty v-else description="暂无检查记录" :image-size="60"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 新增弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="addDlg"
|
|
|
+ title="新增清四乱事件"
|
|
|
+ width="640px"
|
|
|
+ top="5vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @closed="resetForm"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="90px"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所在河湖" prop="objType">
|
|
|
+ <el-select v-model="form.objType" style="width: 100%" @change="onObjTypeChange">
|
|
|
+ <el-option label="太湖" value="LKS"/>
|
|
|
+ <el-option label="望虞河" value="REA"/>
|
|
|
+ <el-option label="太浦河" value="RER"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="河段名称" prop="objCode">
|
|
|
+ <el-select v-model="form.objCode" style="width: 100%" placeholder="请先选择所在河湖,输入关键词搜索" :disabled="!form.objType"
|
|
|
+ filterable remote reserve-keyword clearable
|
|
|
+ :remote-method="remoteSections">
|
|
|
+ <el-option v-for="o in sectionOptions" :key="o.code" :label="o.name" :value="o.code"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所属地区" prop="adCode">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="form.adCode"
|
|
|
+ :props="{ value: 'adCode', label: 'adName', children: 'children' }"
|
|
|
+ value-key="adCode"
|
|
|
+ node-key="adCode"
|
|
|
+ lazy
|
|
|
+ :load="loadAdNode"
|
|
|
+ check-strictly
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="选择所属地区"
|
|
|
+ @change="onAdChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上报人" prop="userName">
|
|
|
+ <el-input v-model="form.userName" placeholder="上报人"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件类型" prop="evType">
|
|
|
+ <el-select v-model="form.evType" style="width: 100%">
|
|
|
+ <el-option label="乱占" value="1"/>
|
|
|
+ <el-option label="乱采" value="2"/>
|
|
|
+ <el-option label="乱堆" value="3"/>
|
|
|
+ <el-option label="乱建" value="4"/>
|
|
|
+ <el-option label="其他" value="5"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="form.status" style="width: 100%">
|
|
|
+ <el-option label="待处理" value="0"/>
|
|
|
+ <el-option label="处理中" value="1"/>
|
|
|
+ <el-option label="完成" value="2"/>
|
|
|
+ <el-option label="完结" value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发现时间" prop="findTs">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.findTs"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="完成日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.doneDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="位置" prop="eventAddress">
|
|
|
+ <el-input v-model="form.eventAddress" placeholder="事件位置"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="问题描述" prop="eventDesc">
|
|
|
+ <el-input
|
|
|
+ v-model="form.eventDesc"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入问题描述"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="整改情况">
|
|
|
+ <el-input
|
|
|
+ v-model="form.dealDesc"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="请输入整改情况"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="addDlg = false">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="saving" @click="submitAdd"
|
|
|
+ >保存
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
-import { listEventClear } from "@/api/hzz/eventclear";
|
|
|
+import {onMounted, reactive, ref} from "vue";
|
|
|
+import {ElMessage} from "element-plus";
|
|
|
+import {listEventClear, saveEventClear, listRiverSection} from "@/api/hzz/eventclear";
|
|
|
+import {getChildren} from "@/api/hzz/adtree";
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const list = ref([]);
|
|
|
const total = ref(0);
|
|
|
const pageNum = ref(1);
|
|
|
const pageSize = ref(10);
|
|
|
-const q = ref({ objectType: "", status: "", evType: "", keyWord: "" });
|
|
|
+const q = ref({objectType: "", status: "", evType: "", keyWord: ""});
|
|
|
const dlg = ref(false);
|
|
|
const cur = ref(null);
|
|
|
|
|
|
-const evTypeMap = { 1: "乱占", 2: "乱采", 3: "乱堆", 4: "乱建", 5: "其他" };
|
|
|
-const statusMap = { 0: "待处理", 1: "处理中", 2: "完成", 3: "完结" };
|
|
|
+const addDlg = ref(false);
|
|
|
+const saving = ref(false);
|
|
|
+const formRef = ref(null);
|
|
|
+const form = reactive({
|
|
|
+ objType: "",
|
|
|
+ objCode: "",
|
|
|
+ adCode: "",
|
|
|
+ adName: "",
|
|
|
+ userName: "",
|
|
|
+ evType: "1",
|
|
|
+ status: "0",
|
|
|
+ findTs: "",
|
|
|
+ doneDate: "",
|
|
|
+ eventAddress: "",
|
|
|
+ eventDesc: "",
|
|
|
+ dealDesc: "",
|
|
|
+});
|
|
|
+const rules = {
|
|
|
+ objType: [{required: true, message: "请选择所在河湖", trigger: "change"}],
|
|
|
+ objCode: [{required: true, message: "请选择河段名称", trigger: "change"}],
|
|
|
+ adCode: [{required: true, message: "请输入所属地区", trigger: "blur"}],
|
|
|
+ evType: [{required: true, message: "请选择事件类型", trigger: "change"}],
|
|
|
+ status: [{required: true, message: "请选择状态", trigger: "change"}],
|
|
|
+ findTs: [{required: true, message: "请选择发现时间", trigger: "change"}],
|
|
|
+ eventDesc: [{required: true, message: "请输入问题描述", trigger: "blur"}],
|
|
|
+};
|
|
|
+
|
|
|
+const evTypeMap = {1: "乱占", 2: "乱采", 3: "乱堆", 4: "乱建", 5: "其他"};
|
|
|
+const statusMap = {0: "待处理", 1: "处理中", 2: "完成", 3: "完结"};
|
|
|
+const objTypeMap = {REA: "望虞河", LKS: "太湖", RER: "太浦河"};
|
|
|
|
|
|
const headerCellStyle = {
|
|
|
background: "#f5f7fa",
|
|
|
@@ -290,10 +488,55 @@ const evTypeTag = (type) => {
|
|
|
};
|
|
|
|
|
|
const statusTag = (status) => {
|
|
|
- const map = { 0: "info", 1: "warning", 2: "primary", 3: "success" };
|
|
|
+ const map = {0: "info", 1: "warning", 2: "primary", 3: "success"};
|
|
|
return map[status] || "info";
|
|
|
};
|
|
|
|
|
|
+const objTypeTag = (type) => {
|
|
|
+ const map = {REA: "success", LKS: "primary", RER: "warning"};
|
|
|
+ return map[type] || "info";
|
|
|
+};
|
|
|
+
|
|
|
+const adNameMap = reactive({});
|
|
|
+const loadAdNode = async (node, resolve) => {
|
|
|
+ const code = node.level === 0 ? "000000000000" : node.data.adCode;
|
|
|
+ try {
|
|
|
+ const res = await getChildren(code);
|
|
|
+ const children = (res.data || []).map((i) => {
|
|
|
+ adNameMap[i.adCode] = i.adName;
|
|
|
+ return {...i, leaf: String(i.adGrad) >= "5"};
|
|
|
+ });
|
|
|
+ resolve(children);
|
|
|
+ } catch {
|
|
|
+ resolve([]);
|
|
|
+ }
|
|
|
+};
|
|
|
+const onAdChange = (val) => {
|
|
|
+ form.adCode = val;
|
|
|
+ form.adName = adNameMap[val] || "";
|
|
|
+};
|
|
|
+
|
|
|
+const sectionOptions = ref([]);
|
|
|
+const loadSections = async (name) => {
|
|
|
+ if (!form.objType) {
|
|
|
+ sectionOptions.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res = await listRiverSection(form.objType, name);
|
|
|
+ sectionOptions.value = res.data || [];
|
|
|
+ } catch {
|
|
|
+ sectionOptions.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+const remoteSections = (query) => {
|
|
|
+ loadSections(query);
|
|
|
+};
|
|
|
+const onObjTypeChange = () => {
|
|
|
+ form.objCode = "";
|
|
|
+ sectionOptions.value = [];
|
|
|
+};
|
|
|
+
|
|
|
const getList = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
@@ -310,12 +553,41 @@ const getList = async () => {
|
|
|
};
|
|
|
|
|
|
const resetQ = () => {
|
|
|
- q.value = { objectType: "", status: "", evType: "", keyWord: "" };
|
|
|
+ q.value = {objectType: "", status: "", evType: "", keyWord: ""};
|
|
|
getList();
|
|
|
};
|
|
|
|
|
|
+const openAdd = () => {
|
|
|
+ const d = new Date();
|
|
|
+ const pad = (n) => String(n).padStart(2, "0");
|
|
|
+ form.findTs = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
|
+ addDlg.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = () => {
|
|
|
+ Object.keys(form).forEach((k) => (form[k] = ""));
|
|
|
+ form.evType = "1";
|
|
|
+ form.status = "0";
|
|
|
+ formRef.value?.clearValidate();
|
|
|
+};
|
|
|
+
|
|
|
+const submitAdd = async () => {
|
|
|
+ await formRef.value.validate();
|
|
|
+ saving.value = true;
|
|
|
+ try {
|
|
|
+ await saveEventClear({...form});
|
|
|
+ ElMessage.success("保存成功");
|
|
|
+ addDlg.value = false;
|
|
|
+ getList();
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error("保存失败");
|
|
|
+ } finally {
|
|
|
+ saving.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const showDetail = (row) => {
|
|
|
- cur.value = { ...row, images: row.images || [], checks: row.checks || [] };
|
|
|
+ cur.value = {...row, images: row.images || [], checks: row.checks || []};
|
|
|
dlg.value = true;
|
|
|
};
|
|
|
|
|
|
@@ -345,18 +617,22 @@ onMounted(() => getList());
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.search-form {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
+
|
|
|
.search-form :deep(.el-form-item) {
|
|
|
margin-bottom: 0;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.search-form :deep(.el-input__wrapper) {
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
+
|
|
|
.search-form :deep(.el-button) {
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
@@ -372,18 +648,22 @@ onMounted(() => getList());
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.data-table {
|
|
|
flex: 1;
|
|
|
border-radius: 6px;
|
|
|
overflow: hidden;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.data-table :deep(.el-table__body-wrapper) .el-table__row:hover {
|
|
|
background-color: #f0f7ff !important;
|
|
|
}
|
|
|
+
|
|
|
.data-table :deep(.el-tooltip__popper) {
|
|
|
max-width: 200px !important;
|
|
|
}
|
|
|
+
|
|
|
.pagination-wrap {
|
|
|
padding-top: 12px;
|
|
|
flex-shrink: 0;
|
|
|
@@ -394,27 +674,33 @@ onMounted(() => getList());
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__header) {
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
padding: 16px 24px;
|
|
|
margin: 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__title) {
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__headerbtn) {
|
|
|
top: 16px;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__close) {
|
|
|
color: #fff;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__close:hover) {
|
|
|
color: #f0f0f0;
|
|
|
}
|
|
|
+
|
|
|
.detail-dialog :deep(.el-dialog__body) {
|
|
|
padding: 20px 24px;
|
|
|
max-height: 70vh;
|
|
|
@@ -426,16 +712,19 @@ onMounted(() => getList());
|
|
|
display: flex;
|
|
|
gap: 24px;
|
|
|
}
|
|
|
+
|
|
|
.detail-left {
|
|
|
flex: 6;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
+
|
|
|
.detail-right {
|
|
|
flex: 4;
|
|
|
min-width: 0;
|
|
|
border-left: 1px solid #eee;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
+
|
|
|
.section-title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
@@ -451,6 +740,7 @@ onMounted(() => getList());
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 8px 16px;
|
|
|
}
|
|
|
+
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
@@ -458,12 +748,14 @@ onMounted(() => getList());
|
|
|
background: #fafbfc;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
+
|
|
|
.info-label {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
flex-shrink: 0;
|
|
|
min-width: 56px;
|
|
|
}
|
|
|
+
|
|
|
.info-value {
|
|
|
font-size: 13px;
|
|
|
color: #333;
|
|
|
@@ -475,6 +767,7 @@ onMounted(() => getList());
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.carousel-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -489,6 +782,7 @@ onMounted(() => getList());
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
+
|
|
|
.check-card {
|
|
|
background: #fafbfc;
|
|
|
border-radius: 8px;
|
|
|
@@ -496,35 +790,42 @@ onMounted(() => getList());
|
|
|
border: 1px solid #f0f0f0;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
+
|
|
|
.check-card:hover {
|
|
|
border-color: #d6e4ff;
|
|
|
background: #f5f9ff;
|
|
|
}
|
|
|
+
|
|
|
.check-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
+
|
|
|
.check-person {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
.check-date {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.check-state {
|
|
|
font-size: 13px;
|
|
|
color: #666;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
+
|
|
|
.check-files {
|
|
|
display: flex;
|
|
|
gap: 6px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
+
|
|
|
.check-img {
|
|
|
width: 80px;
|
|
|
height: 60px;
|
|
|
@@ -533,9 +834,11 @@ onMounted(() => getList());
|
|
|
cursor: pointer;
|
|
|
transition: transform 0.2s;
|
|
|
}
|
|
|
+
|
|
|
.check-img:hover {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
+
|
|
|
.empty-block {
|
|
|
text-align: center;
|
|
|
color: #bbb;
|