巡查任务静态页面展示

src/views/emergency/inspectionTask/index.vue

@@ -1,21 +1,225 @@
 <template>
-  <tablePage >
+  <tablePage>
     <template #search>
-        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px"></el-form>
+      <el-form
+        :model="queryParams"
+        ref="queryRef"
+        :inline="true"
+        label-width="200px"
+      >
+        <el-form-item label="巡检任务标题" prop="taskName">
+          <el-input
+            v-model="queryParams.taskName"
+            placeholder="请输入"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="巡检班组" prop="inspectionGroup">
+          <el-select
+            v-model="queryParams.inspectionGroup"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          >
+            <el-option label="一分公司民工一班组" value="一分公司民工一班组" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务时间" prop="taskTime">
+          <el-date-picker
+            v-model="queryParams.startTime"
+            type="datetime"
+            placeholder="开始时间"
+            style="width: 180px"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+          <span class="date-separator">至</span>
+          <el-date-picker
+            v-model="queryParams.endTime"
+            type="datetime"
+            placeholder="结束时间"
+            style="width: 180px"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item label="巡检状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择"
+            clearable
+            style="width: 240px"
+          >
+            <el-option label="正在巡检" value="正在巡检" />
+            <el-option label="巡检结束" value="巡检结束" />
+          </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>
+    </template>
+    <template #operation>
+      <el-button type="primary" @click="handleAdd">新增巡检任务</el-button>
+      <el-button @click="handleExport">导出</el-button>
     </template>
     <template #table>
-
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        v-loading="loading"
+        :header-cell-style="proxy.getTableHeaderStyle"
+        :cell-style="proxy.getTablerowStyle"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="taskName" label="巡检任务标题" align="center" />
+        <el-table-column
+          prop="inspectionGroup"
+          label="巡检班组"
+          align="center"
+        />
+        <el-table-column prop="taskTime" label="任务时间" align="center" />
+        <el-table-column prop="status" label="巡检状态" align="center">
+          <template #default="scope">
+            <span
+              :class="
+                scope.row.status === '正在巡检'
+                  ? 'status-ongoing'
+                  : 'status-finished'
+              "
+              >{{ scope.row.status }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button type="primary" link @click="handleView(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click="handleEdit(scope.row)"
+              v-if="scope.row.status === '正在巡检'"
+              >数据上报</el-button
+            >
+            <el-button type="danger" link @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </template>
-    <template #add>
-        
+    <template #pagination>
+      <pagination
+        v-model:total="total"
+        v-model:pageSize="queryParams.pageSize"
+        v-model:currentPage="queryParams.pageNum"
+        @pagination="getList"
+      />
     </template>
   </tablePage>
 </template>
 
 <script setup>
-import tablePage from '@/components/tablePage.vue'
+import tablePage from "@/components/tablePage/index.vue";
+import pagination from "@/components/Pagination/index.vue";
+import { ref, reactive, onMounted } from "vue";
+const { proxy } = getCurrentInstance();
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  taskName: "",
+  inspectionGroup: "",
+  startTime: "",
+  endTime: "",
+  status: "",
+});
+
+const loading = ref(false);
+const total = ref(0);
+const tableData = ref([]);
+const queryRef = ref();
+
+// 模拟数据
+const mockData = () => {
+  const data = [];
+  for (let i = 1; i <= 10; i++) {
+    data.push({
+      id: i,
+      taskName: "台风预警应急响应巡检",
+      inspectionGroup: "一分公司民工一班组",
+      taskTime: "2025.07.03—2025.07.06",
+      status: i % 2 === 0 ? "巡检结束" : "正在巡检",
+    });
+  }
+  return data;
+};
+
+// 获取列表数据
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    tableData.value = mockData();
+    total.value = 100;
+    loading.value = false;
+  }, 500);
+};
+
+// 查询操作
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置操作
+const resetQuery = () => {
+  queryRef.value?.resetFields();
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 新增操作
+const handleAdd = () => {
+  console.log("新增巡检任务");
+};
+
+// 导出操作
+const handleExport = () => {
+  console.log("导出");
+};
+
+// 查看操作
+const handleView = (row) => {
+  console.log("查看", row);
+};
+
+// 编辑操作
+const handleEdit = (row) => {
+  console.log("数据上报", row);
+};
+
+// 删除操作
+const handleDelete = (row) => {
+  console.log("删除", row);
+};
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style scoped>
-
+.status-ongoing {
+  color: #67c23a;
+}
+.status-finished {
+  color: #909399;
+}
+.date-separator {
+  margin: 0 5px;
+}
 </style>