kev/Drawer/drawer-htmlroot/pages/smartWellRecommend.vue

<template>
  <div class="container">

    <div class="data-tree">
      <div class="oper">
        <el-button type="primary" :icon="Refresh" @click="loadData">刷新</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
      </div>
      <el-table :data="fileDatas" style="width: 100%; height: 100%; border: 1px solid #dcdfe6"
        @selection-change="handleSelectionChange" row-key="Id">
        <el-table-column type="selection" width="28" />
        <el-table-column prop="Fracture_FileName" label="文件名" width="230px">
          <template #default="scope">
            <el-link @click="handleOpenFile(scope.row)">{{ scope.row.Fracture_FileName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" style="margin: 0;padding: 0;">
          <template #default="scope">
            <el-tooltip content="删除" placement="top">
              <el-button :icon="Delete" type="danger" size="small" circle @click="handelDeleteRow(scope.row)"
                style="margin-right: 5px;padding: 0;" />
            </el-tooltip>
            <el-tooltip content="二次布井" placement="top">
              <el-button :icon="Switch" type="primary" size="small" circle @click="reCalc(scope.row)"
                style="margin: 0;padding: 0;" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main">
      <WellRecommend />
    </div>
  </div>
</template>
<script setup>
definePageMeta({
  requiresAuth: true
});
import { ref, onMounted } from 'vue'
import { Refresh, Delete, Switch } from "@element-plus/icons-vue";
import { getWellRecommendList, deleteWellRecommendRecords } from '~/services/wellRecommandService'
import { emitter } from "~/utils/eventBus";
import { ElMessageBox } from 'element-plus';
const { $toastMessage } = useNuxtApp();
import { generateGUID } from "~/utils/common";

const selectedRows = ref([]);

const fileDatas = ref(null);

const loadData = async () => {
  try {
    selectedRows.value = [];
    const response = await getWellRecommendList();
    if (!response) {
      $toastMessage.error("获取井推荐列表失败");
      return;
    }
    console.log("得到图件列表：", response);
    fileDatas.value = response;
  } catch (error) {
    console.error('获取井推荐列表异常：', error);
    $toastMessage.error('获取井推荐列表失败！');
  }
};

// 获取选中项
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
  console.log(selection);
}

// 单行删除
const handelDeleteRow = async (item) => {
  selectedRows.value.push(item);
  await handleDelete();
}

// 二次布井
const reCalc = (item) => {
  // console.log("二次布井", item);
  // 先打开文件
  handleOpenFile(item);
  emitter.emit("reCalc", item);
}

// 删除数据
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    $toastMessage.warning("请选择要删除的文件！");
    return;
  }

  ElMessageBox.confirm(`您确定要删除选中的数据吗?`, "删除确认", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      const selectKeys = selectedRows.value.map(item => item.Id);
      try {
        const response = await deleteWellRecommendRecords(generateGUID(), selectKeys.join(','));
        console.log("删除结果：", response);
        if (response > 0) {
          await loadData();
          $toastMessage.info("删除数据成功！");
          selectedRows.value = [];
        } else {
          $toastMessage.error("删除失败！");
        }
      } catch (error) {
        $toastMessage.error("删除异常！");
        console.error("删除异常：", error);
      }
    })
    .catch(() => {
      console.log("已取消删除！");
    });
};

// 打开文件操作（点击操作）
const handleOpenFile = (item) => {
  console.log("打开文件：", item);
  emitter.emit("evtType", { type: 'openFile', data: JSON.stringify({ fileName: item.Fracture_FileName }) });
  emitter.emit("calcPropery", item);
};

onMounted(async () => {
  await nextTick();
  await loadData();
});
</script>
<style scoped>
.data-tree {
  width: 340px;
  /* height: calc(100vh - 55px); */
  height: 100%;
  border: none;
}

.main {
  width: 100%;
}

.file-links {
  display: flex;
  list-style: none;
  gap: 0.1rem;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  padding-left: 10px;
}

.file-links a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem;
  transition: color 0.3s;
}

.file-links a:hover {
  color: #42b983;
  cursor: pointer;
}

.file-links a.active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
  font-weight: bold;
}

.oper {
  width: 100%;
  height: 40px;
  margin: 0;
  padding-left: 10px;
}
</style>