跟新智慧井盖代码

src/api/ldzh/index.js

@@ -9,3 +9,23 @@ export function getManholeDataAll(query) {
   })
 }
 
+
+// 新增井盖
+export function addSave(data) {
+  return request({
+    url: '/base/devices/save',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 井盖修改
+export function alterManhole(data) {
+  return request({
+    url: 'base/devices/update',
+    method: 'post',
+    data: data
+  })
+}
+

src/views/device/manhole/ldzh/jgkl.vue

@@ -1,108 +1,5 @@
-<script setup>
-import { getManholeDataAll } from "@/api/ldzh/index";
-import { computed, ref } from "vue";
-// 表格数据
-const tableData = ref();
-
-// 搜索条件
-const searchForm = ref({
-  id: "",
-  name: "",
-  district: "",
-  street: "",
-  road: "",
-  location: "",
-});
-
-// 是否显示详情弹窗
-const dialogVisible = ref(false);
-
-// 当前选中的井盖信息
-const selectedCover = ref({});
-
-// 根据搜索条件过滤数据
-const filteredTableData = computed(() => {
-  if (!Object.values(searchForm.value).some((value) => value)) {
-    return tableData.value;
-  }
-
-  return tableData.value.filter((row) => {
-    const matches = [
-      searchForm.value.id && row.id.includes(searchForm.value.id),
-      searchForm.value.name && row.name.includes(searchForm.value.name),
-      searchForm.value.district && row.district.includes(searchForm.value.district),
-      searchForm.value.street && row.street.includes(searchForm.value.street),
-      searchForm.value.road && row.road.includes(searchForm.value.road),
-      searchForm.value.location && row.location.includes(searchForm.value.location),
-    ];
-    return matches.some((match) => match);
-  });
-});
-
-// 搜索逻辑
-function search() {}
-
-// 显示详情
-function showDetail(row) {
-  selectedCover.value = row;
-  dialogVisible.value = true;
-}
-// 新增井盖表单数据
-const addForm = ref({
-  deviceName: "",
-  deviceNumber: "",
-  location: "排水",
-  model: "水务局",
-  remarks: "",
-  type: "",
-});
-
-// 控制新增井盖表单的显示与隐藏
-const addDialogVisible = ref(false);
-
-// 处理新增井盖表单提交
-function handleAddSubmit() {
-  if (
-    addForm.value.id &&
-    addForm.value.name &&
-    addForm.value.installationDate &&
-    addForm.value.district &&
-    addForm.value.street &&
-    addForm.value.road
-  ) {
-    tableData.value.push({ ...addForm.value });
-    addDialogVisible.value = false;
-  }
-}
-
-// 清空新增井盖表单
-function resetAddForm() {
-  addForm.value = {
-    id: "",
-    name: "",
-    purpose: "排水",
-    owner: "水务局",
-    installationDate: "",
-    district: "",
-    street: "",
-    road: "",
-    location: "",
-    status: "正常",
-    enabled: true,
-  };
-}
-
-function test() {
-  getManholeDataAll().then((res) => {
-    console.log(res);
-    tableData.value = res.data;
-  });
-}
-test();
-</script>
-
 <template>
-  <div>
+  <div class="p-5">
     <!-- 搜索表单 -->
     <el-form :model="searchForm" label-width="80px">
       <el-row :gutter="20">
@@ -116,120 +13,173 @@ test();
             <el-input v-model="searchForm.name" placeholder="请输入井盖名称"></el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="区">
-            <el-input v-model="searchForm.district" placeholder="请输入区"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="街道">
-            <el-input v-model="searchForm.street" placeholder="请输入街道"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="道路">
-            <el-input v-model="searchForm.road" placeholder="请输入道路"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="辅助定位">
-            <el-input
-              v-model="searchForm.location"
-              placeholder="请输入辅助定位地址"
-            ></el-input>
-          </el-form-item>
-        </el-col>
         <el-col :span="12">
           <el-form-item>
             <el-button type="primary" @click="search">搜索</el-button>
-            <el-button type="success" @click="addDialogVisible = true"
+            <el-button type="success" @click="addmanholeVisible = true"
               >添加井盖</el-button
             >
-            <el-button type="warning" @click="">导入</el-button>
-            <el-button type="danger" @click="">导出</el-button>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
 
     <!-- 表格 -->
-    <el-table :data="filteredTableData" style="width: 100%">
-      <!-- <el-table-column prop="id" label="井盖编号" width="180"></el-table-column>
-      <el-table-column prop="name" label="井盖名称" width="180"></el-table-column> -->
-      <el-table-column prop="alarmStatus" label="	报警状态"></el-table-column>
-      <el-table-column prop="createTime" label="创建时间"></el-table-column>
-      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
+    <el-table :data="filteredTableData" border>
+      <!-- 设备名称列 -->
+      <el-table-column prop="deviceName" label="设备名称">
+        <template #default="{ row }">
+          <el-input
+            v-if="row.isEditing"
+            v-model="tableData.deviceName"
+            placeholder="请输入设备名称"
+            size="small"
+          />
+          <span v-else>{{ row.deviceName }}</span>
+        </template>
+      </el-table-column>
 
+      <!-- <el-table-column prop="deviceName" label="设备名称"></el-table-column> -->
       <el-table-column prop="deviceNumber" label="设备编号"></el-table-column>
-      <el-table-column prop="id" label="主键"></el-table-column>
-      <el-table-column prop="location" label="位置"></el-table-column>
+      <el-table-column prop="type" label="设备类型"></el-table-column>
       <el-table-column prop="model" label="设备型号"></el-table-column>
+      <el-table-column prop="location" label="位置"></el-table-column>
+      <el-table-column prop="alarmStatus" label="	报警状态"></el-table-column>
       <el-table-column prop="onlineStatus" label="在线状态"></el-table-column>
 
-      <!-- <el-table-column prop="temperatureValue" label="温度值"></el-table-column> -->
+      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
+      <el-table-column prop="updateTime" label="修改时间" width="200"></el-table-column>
       <el-table-column prop="remarks" label="	备注"></el-table-column>
-      <el-table-column prop="type" label="设备类型"></el-table-column>
-      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
 
-      <!-- <el-table-column prop="enabled" label="启用状态">
-        <template #default="scope">
-          <el-tag :type="scope.row.enabled ? 'success' : 'danger'">{{
-            scope.row.enabled ? "启用" : "禁用"
-          }}</el-tag>
+      <!-- 状态列 -->
+      <!-- <el-table-column prop="onlineStatus" label="状态">
+        <template slot-scope="{ row }">
+          <div :class="['status-cell', row.status + '-status']">
+            {{ row.onlineStatus === "0" ? "在线" : "离线" }}
+          </div>
         </template>
       </el-table-column> -->
+
       <!-- <el-table-column label="操作">
-        <template #default="scope">
-          <el-button size="small" type="primary" @click="showDetail(scope.row)"
-            >查看详情</el-button
-          >
+        <template #default="{ row, $index }">
+          <el-button size="small" type="primary" :icon="Edit" circle @click="alterManholePost(row, $index)" />
+          <el-button size="small" type="danger" :icon="Delete" circle />
+          <el-button size="small" :icon="Search" circle @click="showDetail(scope.row)" />
         </template>
       </el-table-column> -->
+
+      <el-table-column label="操作" width="200">
+        <template #default="{ row, $index }">
+          <div class="action-buttons">
+            <template v-if="row.isEditing">
+              <el-button type="success" size="small" @click="handleSave(row, $index)">
+                保存
+              </el-button>
+              <el-button type="info" size="small" @click="handleCancel(row)">
+                取消
+              </el-button>
+            </template>
+            <template v-else>
+              <el-button
+                size="small"
+                type="primary"
+                :icon="Edit"
+                circle
+                @click="alterManholePost(row, $index)"
+              />
+              <el-button size="small" type="danger" :icon="Delete" circle />
+              <el-button
+                size="small"
+                :icon="Search"
+                circle
+                @click="showDetail(scope.row)"
+              />
+            </template>
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
 
     <!-- 查看详情弹窗 -->
     <el-dialog title="井盖详情" v-model="dialogVisible">
       <el-descriptions :column="1">
-        <el-descriptions-item label="井盖编号">{{
-          selectedCover.id
+        <el-descriptions-item label="设备名称">{{
+          selectedCover.deviceName
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备编号">{{
+          selectedCover.deviceNumber
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备类型">{{
+          selectedCover.type
         }}</el-descriptions-item>
-        <el-descriptions-item label="井盖名称">{{
-          selectedCover.name
+        <el-descriptions-item label="设备型号">{{
+          selectedCover.model
         }}</el-descriptions-item>
-        <el-descriptions-item label="井盖用途">{{
-          selectedCover.purpose
+        <el-descriptions-item label="位置">{{
+          selectedCover.location
+        }}</el-descriptions-item>
+        <el-descriptions-item label="报警状态">{{
+          selectedCover.alarmStatus
         }}</el-descriptions-item>
-        <el-descriptions-item label="权属单位">{{
-          selectedCover.owner
+        <el-descriptions-item label="在线状态">{{
+          selectedCover.onlineStatus
         }}</el-descriptions-item>
-        <el-descriptions-item label="安装时间">{{
-          selectedCover.installationDate
+        <el-descriptions-item label="创建时间">{{
+          selectedCover.createTime
         }}</el-descriptions-item>
-        <el-descriptions-item label="区">{{
-          selectedCover.district
+        <el-descriptions-item label="	修改时间">{{
+          selectedCover.updateTime
         }}</el-descriptions-item>
-        <el-descriptions-item label="街道">{{
-          selectedCover.street
+        <el-descriptions-item label="备注">{{
+          selectedCover.remarks
         }}</el-descriptions-item>
-        <el-descriptions-item label="道路">{{ selectedCover.road }}</el-descriptions-item>
-        <el-descriptions-item label="辅助定位地址">{{
+      </el-descriptions>
+    </el-dialog>
+
+    <!-- 修改井盖弹窗 -->
+    <el-dialog title="井盖详情" v-model="alterVisible">
+      <el-descriptions :column="1">
+        <el-descriptions-item label="设备名称">{{
+          selectedCover.deviceName
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备编号">{{
+          selectedCover.deviceNumber
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备类型">{{
+          selectedCover.type
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备型号">{{
+          selectedCover.model
+        }}</el-descriptions-item>
+        <el-descriptions-item label="位置">{{
           selectedCover.location
         }}</el-descriptions-item>
-        <el-descriptions-item label="井盖状态">{{
-          selectedCover.status
+        <el-descriptions-item label="报警状态">{{
+          selectedCover.alarmStatus
         }}</el-descriptions-item>
-        <el-descriptions-item label="启用状态">{{
-          selectedCover.enabled ? "启用" : "禁用"
+        <el-descriptions-item label="在线状态">{{
+          selectedCover.onlineStatus
+        }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{
+          selectedCover.createTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="	修改时间">{{
+          selectedCover.updateTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="备注">{{
+          selectedCover.remarks
         }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
+
     <!-- 添加井盖弹窗 -->
-    <el-dialog title="添加井盖" v-model="addDialogVisible" width="50%">
-      <el-form :model="addForm" label-width="80px">
+    <el-dialog title="添加井盖" v-model="addmanholeVisible" width="50%">
+      <el-form :model="addForm" ref="AddSaveRef" label-width="80px">
         <el-form-item label="设备名称">
-          <el-input v-model="addForm.name" placeholder="请输入井盖设备名称"></el-input>
+          <el-input
+            v-model="addForm.deviceName"
+            placeholder="请输入井盖设备名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="设备编号">
           <el-input
@@ -260,4 +210,166 @@ test();
   </div>
 </template>
 
+<script setup>
+import { getManholeDataAll, addSave, alterManhole } from "@/api/ldzh/index";
+import { computed, ref } from "vue";
+import { Delete, Edit, Search } from "@element-plus/icons-vue";
+// 表格数据
+const tableData = ref();
+const { proxy } = getCurrentInstance();
+
+// 搜索条件
+const searchForm = ref({
+  id: "",
+  name: "",
+  district: "",
+  street: "",
+  road: "",
+  location: "",
+});
+
+// 控制新增井盖表单的显示与隐藏
+const addmanholeVisible = ref(false);
+// 是否显示详情弹窗
+const dialogVisible = ref(false);
+// 是否显示修改弹窗
+const alterVisible = ref(false);
+// 当前选中的井盖信息
+const selectedCover = ref({});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  if (!Object.values(searchForm.value).some((value) => value)) {
+    return tableData.value;
+  }
+
+  return tableData.value.filter((row) => {
+    const matches = [
+      searchForm.value.id && row.id.includes(searchForm.value.id),
+      searchForm.value.name && row.name.includes(searchForm.value.name),
+      searchForm.value.district && row.district.includes(searchForm.value.district),
+      searchForm.value.street && row.street.includes(searchForm.value.street),
+      searchForm.value.road && row.road.includes(searchForm.value.road),
+      searchForm.value.location && row.location.includes(searchForm.value.location),
+    ];
+    return matches.some((match) => match);
+  });
+});
+
+// 搜索逻辑
+function search() {}
+
+// 显示详情
+function showDetail(row) {
+  selectedCover.value = row;
+  dialogVisible.value = true;
+}
+// 新增井盖表单数据
+const addForm = ref({
+  deviceName: "",
+  deviceNumber: "",
+  location: "",
+  model: "",
+  remarks: "",
+  type: "",
+});
+
+// 处理新增井盖表单提交
+function handleAddSubmit() {
+  addSave(addForm.value).then((response) => {
+    proxy.$modal.msgSuccess("新增成功");
+    addmanholeVisible.value = false;
+    getManholeAllData();
+  });
+}
+
+// 修改井盖表单数据
+const editForm = ref({
+  deviceName: "",
+  type: "",
+  location: "",
+  model: "",
+  remarks: "",
+});
+
+// 原始数据备份
+const originalData = ref({});
+// 进入编辑模式
+const alterManholePost = (row) => {
+  // 关闭其他行的编辑状态
+  tableData.value.forEach((item) => (item.isEditing = false));
+  // 备份原始数据
+  originalData.value = { ...row };
+  // 开启当前行编辑
+  row.isEditing = true;
+  console.log(123, editForm);
+
+  Object.assign(editForm, row);
+};
+
+// 保存修改
+const handleSave = (row, index) => {
+  if (!validateForm()) return;
+
+  Object.assign(row, editForm);
+  row.isEditing = false;
+  proxy.$modal.msgSuccess("保存成功");
+};
+
+// 取消修改
+const handleCancel = (row) => {
+  Object.assign(row, originalData.value);
+  row.isEditing = false;
+  proxy.$modal.msgSuccess("修改已取消");
+};
+
+// // 处理修改井盖表单提交
+// function alterManholePost(res) {
+//   console.log(112, res);
+//   selectedCover.value = res;
+
+//   alterVisible.value = true;
+
+//   // alterManhole(addForm.value).then((response) => {
+//   //   proxy.$modal.msgSuccess("修改成功");
+//   //   addmanholeVisible.value = false;
+//   //   getManholeAllData();
+//   // });
+// }
+
+// 表单验证
+const validateForm = () => {
+  if (!editForm.deviceName?.trim()) {
+    proxy.$modal.msgError("设备名称不能为空");
+    return false;
+  }
+
+  return true;
+};
+
+// 清空新增井盖表单
+function resetAddForm() {
+  addForm.value = {
+    deviceName: "",
+    deviceNumber: "",
+    model: "",
+    model: "",
+    remarks: "",
+    type: "",
+  };
+  addmanholeVisible.value = false;
+}
+
+//获取井盖全部信息
+function getManholeAllData() {
+  getManholeDataAll().then((res) => {
+    tableData.value = res.data;
+    for (var i = 0; i < tableData.value.length; i++) {
+      tableData.value[i].isEditing = false;
+    }
+  });
+}
+getManholeAllData();
+</script>
+
 <style scoped lang="scss"></style>