zksy-device-management/src/views/device/manhole/ldzh/jgkl.vue

<template>
  <div class="p-5">
    <!-- 搜索表单 -->
    <el-form :model="searchForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="井盖编号">
            <el-input v-model="searchForm.id" placeholder="请输入井盖编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="井盖名称">
            <el-input v-model="searchForm.name" 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="addmanholeVisible = true"
              >添加井盖</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <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="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="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="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="{ 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.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.alarmStatus
        }}</el-descriptions-item>
        <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="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.alarmStatus
        }}</el-descriptions-item>
        <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="addmanholeVisible" width="50%">
      <el-form :model="addForm" ref="AddSaveRef" label-width="80px">
        <el-form-item label="设备名称">
          <el-input
            v-model="addForm.deviceName"
            placeholder="请输入井盖设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input
            v-model="addForm.deviceNumber"
            placeholder="请输入井盖设备编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="位置">
          <el-input v-model="addForm.location" placeholder="请输入井盖位置"></el-input>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="addForm.model" placeholder="请输入井盖设备型号"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remarks" placeholder="请输入井盖备注"></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input v-model="addForm.type" placeholder="请输入井盖设备类型"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAddForm">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </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>