WholeProcessPlatform/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao.vue

<template>
  <div class="guoYuSheShiShuJuTianBao-page">
    <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
    <GuoYuSheShiShuJuTianBaoSearch
      :import-btn="importBtn"
      :save-btn="saveBtn"
      :handle-add="handleAdd"
      :batchData="batchData"
      :batchDel="batchDel"
      @search-finish="handleSearchFinish"
    />

    <!-- 主表格 -->
    <BasicTable
      ref="tableRef"
      :columns="columns"
      :list-url="getFishDraftPage"
      :search-params="{}"
      :enable-row-selection="true"
      @selection-change="handleSelectionChange"
    >
      <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action' || column.dataIndex === 'action'">
          <div class="flex">
            <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
            <a-button type="link" danger size="small" @click="handleDelete([record.id])"
              >删除</a-button
            >
          </div>
        </template>
      </template>
    </BasicTable>
    <!-- <BasicTable :columns="columns" :listUrl="getFishDraftPage" /> -->

    <!-- 导入预览 Modal -->
    <a-modal
      title="导入数据预览"
      ok-text="提交导入"
      cancel-text="取消"
      :width="1500"
      v-model:open="visible"
      :confirm-loading="fileLoading"
      @cancel="handleModalCancel"
      @ok="handleModalOk"
    >
      <a-table
        size="small"
        :loading="fileLoading"
        :data-source="fileTableData"
        :columns="modalColumns"
        :scroll="{ y: 500, x: '100%' }"
        row-key="index"
      >
        <!-- 如果需要复杂的行内编辑插槽，可在此定义，但目前逻辑主要在 column render 中处理 -->
      </a-table>
    </a-modal>

    <!-- 新增/编辑 Modal (对应 React 的 EditModal) -->
    <!-- 假设已创建对应的 Vue 组件 GuoYuSheShiShuJuTianBaoForm -->
    <EditModal
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      :loading="submitLoading"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />

    <!-- 视频预览 Modal -->
    <a-modal
      title="视频预览"
      v-model:open="videoPreviewVisible"
      :footer="null"
      width="800px"
      @cancel="closeVideoPreview"
    >
      <video
        v-if="currentVideoUrl"
        controls
        autoplay
        style="width: 100%"
        :src="currentVideoUrl"
      >
        您的浏览器不支持视频播放
      </video>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref,  computed, onMounted, h } from "vue";
import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
import JSZip from "jszip";
import * as XLSX from "xlsx";
import BasicTable from "@/components/BasicTable/index.vue";
import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";
import {
  getFishDraftPage,
  addFishDraft,
  editFishDraft,
  delFishDraft,
} from "@/api/guoYuSheShiShuJuTianBao";
import dayjs from "dayjs";
import { Tag } from 'ant-design-vue'; // 确保导入 Tag
// import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'

// --- 类型定义 ---
interface FormData {
  [key: string]: any;
}

interface ColumnConfig {
  dataIndex: string;
  key: string;
  title: string;
  width?: number;
  customRender?: (text: any, record: any) => any;
}
const tableRef = ref<any>(null);
// --- 基础配置 ---
const baseColumnsConfig: ColumnConfig[] = [
  { dataIndex: "engName", key: "engName", title: "水电基地", width: 100 },
  { dataIndex: "baseName", key: "baseName", title: "电站名称", width: 120 },
  { dataIndex: "fpname", key: "fpname", title: "过鱼设施名称", width: 150 },
  { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 150 },
  { dataIndex: "ftp", key: "ftp", title: "鱼种类", width: 120 },
  {
    dataIndex: "isfs",
    key: "isfs",
    title: "是否鱼苗",
    width: 74,
    customRender: ({ text }: any) => {
    const isYes = text === 1 || text === '1';
    return h(
      Tag,
      {
        color: isYes ? 'success' : 'error', // Antdv Tag 的颜色预设
        style: { margin: 0 } // 去除默认 margin，使其在表格中对齐更好
      },
      () => isYes ? '是' : '否'
    );
  },
  },
  { dataIndex: "direction", key: "direction", title: "游向", width: 80 },
  { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
  { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 110 },
  { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 110 },
  { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
  { dataIndex: "picpth", key: "level5", title: "图片", width: 100 },
  { dataIndex: "vdpth", key: "level6", title: "视频", width: 100 },
  { dataIndex: "tm", key: "tm", title: "填报时间", width: 150 },
  { dataIndex: "status", key: "status", title: "状态", width: 100 },
];

// --- 状态定义 ---
const visible = ref(false); // 导入预览 Modal

// 编辑相关状态
const editModalVisible = ref(false);
const currentRecord = ref<FormData | null>(null);
const submitLoading = ref(false);

// 视频预览相关状态
const videoPreviewVisible = ref(false);
const currentVideoUrl = ref<string>("");

// 表格数据
const tableData = ref<any[]>([]);
const fileTableData = ref<any[]>([]);
const batchData = ref<any[]>([]);

const fileLoading = ref(false);

// 行内编辑 Key (用于导入预览表格)
const editingKey = ref<string | number>("");


// --- 辅助函数 ---

// 从 Zip 获取 Blob URL
// const getBlobUrlFromZip = async (zip: JSZip, fileName: string): Promise<string> => {
//   try {
//     const file = zip.file(fileName);
//     if (!file) return "";
//     const blob = await file.async("blob");
//     return URL.createObjectURL(blob);
//   } catch (e) {
//     console.error("Extract file failed", e);
//     return "";
//   }
// };

// 渲染媒体单元格 (返回 VNode 或简单结构，实际在 Antdv columns render 中处理)
// 在 Vue Antdv 中，render 函数接收 (text, record, index)
// const createMediaRender = (type: "image" | "video") => {
//   return (text: string) => {
//     if (!text) return "-";
//     // 这里简化处理，实际项目中可能需要使用 h 函数渲染图标和点击事件
//     // 由于无法直接在这里绑定 click 事件到简单的字符串返回，建议在 columns 定义中使用 slots 或 h 函数
//     // 为了保持逻辑清晰，这里仅返回文本提示，实际 UI 需结合 Antdv 的 customRender
//     return type === "image" ? "查看图片" : "播放视频";
//   };
// };

// --- Columns 定义 ---

// 主表格 Columns
const columns = computed(() => {
  return [
    ...baseColumnsConfig.map((col) => {
      if (col.dataIndex === "level5") {
        return {
          ...col,
          customRender: ({ text }: any) => {
            if (!text) return "-";
            // 实际应渲染 Icon 和点击事件，此处简化
            return `<span style="color:#52c41a; cursor:pointer">查看图片</span>`;
          },
        };
      }
      if (col.dataIndex === "level6") {
        return {
          ...col,
          customRender: ({ text }: any) => {
            if (!text) return "-";
            return `<span style="color:#1890ff; cursor:pointer">播放视频</span>`;
          },
        };
      }
      return { ...col, visible: true };
    }),
    {
      title: "操作",
      key: "action",
      dataIndex: "action",
      fixed: "right",
      width: 100,
      align: "center",
    },
  ];
});

// 导入预览表格 Columns (包含行内编辑逻辑)
const modalColumns = computed(() => {
  const isEditing = (_record: any, index: number) => index === editingKey.value;

  // const save = async (index: number) => {
  //   // 保存逻辑：实际上 fileTableData 是响应式的，input change 时已经更新
  //   editingKey.value = "";
  //   message.success("行数据已更新");
  // };

  // const deleteRow = (index: number) => {
  //   fileTableData.value = fileTableData.value.filter((_, i) => i !== index);
  //   message.success("行数据已删除");
  // };

  return baseColumnsConfig
    .map((col) => ({
      ...col,
      customRender: ({ text, record, index }: any) => {
        const editing = isEditing(record, index);

        // 如果是媒体列
        if (col.dataIndex === "level5" || col.dataIndex === "level6") {
          if (editing) {
            // 返回 Input 组件的 VNode 或标识，实际需用 slot 或 h 函数
            return "Input编辑中";
          }
          return col.dataIndex === "level5" ? "查看图片" : "播放视频";
        }

        // 普通列
        if (editing) {
          // 返回 Input 组件标识
          return "Input编辑中";
        }
        return text;
      },
      // Antdv 支持通过 slots 自定义单元格内容以实现交互
      slots: { customRender: `cell-${col.dataIndex}` },
    }))
    // .concat({
    //   title: "操作",
    //   dataIndex: "operation",
    //   fixed: "right",
    //   width: 140,
    //   align: "center",
    //   customRender: ({ record, index }: any) => {
    //     const editable = isEditing(record, index);
    //     return editable ? "保存/取消" : "修改/删除";
    //   },
    //   slots: { customRender: "cell-operation" },
    // });
});

// --- 业务逻辑方法 ---

const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

const handleEdit = (record: any) => {
  currentRecord.value = { ...record };
  editModalVisible.value = true;
};

// 删除过鱼数据
const handleDelete = (ids: any[]) => {
  console.log(ids)
  Modal.confirm({
    title: "是否确认删除选中数据吗?",
    onOk: async () => {
      let res: any = await delFishDraft(ids);
      if (res && res?.code == 0) {
        message.success("删除成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量删除
const batchDel = () => { 
  handleDelete(batchData.value);
};
// 多选
const handleSelectionChange = (keys: any) => { 
  batchData.value = keys;
};
const editModalCancel = () => {
  editModalVisible.value = false;
};

const handleEditSubmit = async (values: FormData) => {
  submitLoading.value = true;
  console.log(values);
  // 模拟异步请求
  // setTimeout(() => {
  if (currentRecord.value) {
    // 编辑逻辑
    
    let res: any = await editFishDraft({
      ...values
    });
    if (res && res?.code == 0) {
      message.success("编辑成功");
      editModalVisible.value = false;
      tableRef.value?.getList();
    }
    submitLoading.value = false;
    // const newData = tableData.value.map((item) => {
    //   // 简单比较，实际建议用 ID
    //   if (JSON.stringify(item) === JSON.stringify(currentRecord.value)) {
    //     // 注意：浅比较可能不够，需根据实际 ID
    //     return { ...item, ...values };
    //   }
    //   return item;
    // });
    // // 更稳妥的方式是通过 key 查找
    // const targetIndex = tableData.value.findIndex(
    //   (item) => item.key === currentRecord.value?.key
    // );
    // if (targetIndex > -1) {
    //   tableData.value[targetIndex] = { ...tableData.value[targetIndex], ...values };
    // }
  } else {
    // 新增逻辑
    let res: any = await addFishDraft({
      ...values,
      tm: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      stcd: 1,
    });
    if (res && res?.code == 0) {
      message.success("新增成功");
      editModalVisible.value = false;
      tableRef.value?.getList();
    }
    submitLoading.value = false;
  }
  // }, 500);
};

const parseExcelFile = async (fileName: string, arrayBuffer: ArrayBuffer) => {
  try {
    const workbook = XLSX.read(arrayBuffer, {
      type: "array",
      cellDates: true, // 【关键】将日期单元格解析为 JS Date 对象
      dateNF: "yyyy-mm-dd", // 【关键】指定日期输出格式
    });
    const firstSheetName = workbook.SheetNames[0];
    if (!firstSheetName) throw new Error("Excel文件中没有工作表");
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData: any[] = XLSX.utils.sheet_to_json(worksheet);
    return jsonData;
  } catch (error) {
    console.error(`解析文件 ${fileName} 失败:`, error);
    message.error(`文件 ${fileName} 解析失败`);
    return [];
  }
};

const handleModalOk = () => {
  tableData.value = [...fileTableData.value];
  visible.value = false;
  message.success("数据已导入至列表");
};

const handleModalCancel = () => {
  visible.value = false;
  editingKey.value = "";
};

const importBtn = async (file: File) => {
  fileLoading.value = true;
  editingKey.value = "";
  const hideMessage = message.loading("正在解析压缩包...", 0);

  try {
    const zip = await JSZip.loadAsync(file);
    const zipPathMap: Record<string, string> = {};

    // 构建路径映射
    zip.forEach((relativePath, zipEntry) => {
      if (!zipEntry.dir) {
        const lowerPath = relativePath.toLowerCase();
        zipPathMap[lowerPath] = relativePath;
        const pathParts = relativePath.split("/");
        for (let i = 0; i < pathParts.length; i++) {
          const subPath = pathParts.slice(i).join("/");
          if (subPath) zipPathMap[subPath.toLowerCase()] = relativePath;
        }
      }
    });

    const fileNames = Object.keys(zip.files);
    if (fileNames.length === 0) {
      hideMessage();
      message.warning("压缩包为空");
      fileLoading.value = false;
      return;
    }

    let allExcelData: any[] = [];
    for (const fileName of fileNames) {
      const zipEntry = zip.files[fileName];
      if (zipEntry.dir) continue;
      if (!fileName.match(/\.(xls|xlsx)$/i)) continue;

      try {
        const arrayBuffer = await zipEntry.async("arraybuffer");
        const data = await parseExcelFile(fileName, arrayBuffer);
        if (!data || data.length === 0) continue;

        const transformedData = await Promise.all(
          data.map(async (item: any) => {
            const newObj: any = {};
            for (const excelKey in item) {
              if (!Object.prototype.hasOwnProperty.call(item, excelKey)) continue;
              const value = item[excelKey];
              // 模糊匹配列标题
              const matchedCol = baseColumnsConfig.find(
                (col) => excelKey.includes(col.title) || col.title.includes(excelKey)
              );

              if (matchedCol) {
                let finalValue = value;
                // 处理图片和视频路径提取
                if (
                  (matchedCol.dataIndex === "level5" ||
                    matchedCol.dataIndex === "level6") &&
                  value &&
                  typeof value === "string"
                ) {
                  const trimPath = value.trim().replace(/\\/g, "/");
                  if (trimPath) {
                    const searchKey = trimPath.toLowerCase();
                    const realPath = zipPathMap[searchKey];
                    if (realPath) {
                      try {
                        const zipFile = zip.file(realPath);
                        if (zipFile) {
                          const blob = await zipFile.async("blob");
                          finalValue = URL.createObjectURL(blob);
                        }
                      } catch (e) {
                        console.error(`Failed to extract blob for: ${realPath}`, e);
                      }
                    }
                  }
                }
                newObj[matchedCol.dataIndex] = finalValue;
              }
            }
            return newObj;
          })
        );
        allExcelData = [...allExcelData, ...transformedData];
      } catch (err) {
        console.error(`读取文件 ${fileName} 失败`, err);
      }
    }

    fileTableData.value = allExcelData;
    visible.value = true;
    hideMessage();
    message.success(`解析完成，共获取 ${allExcelData.length} 条数据`);
  } catch (error) {
    hideMessage();
    console.error("ZIP 解析失败:", error);
    message.error("文件格式错误或解析失败");
  } finally {
    fileLoading.value = false;
  }
};

const saveBtn = async () => {
  // TODO: 实现保存逻辑
  console.log("Save button clicked");
};

const handleSearchFinish = (values: any) => {
  console.log(values);
  // const newSearchData = { ...searchData.value, ...e };
  // searchData.value = newSearchData;
  // getData(newSearchData, label);
};

const closeVideoPreview = () => {
  videoPreviewVisible.value = false;
  currentVideoUrl.value = "";
};

// --- 生命周期 ---
onMounted(() => {});
</script>

<style lang="scss" scoped>
.guoYuSheShiShuJuTianBao-page {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 20px;
}
</style>