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

<template>
  <div class="guoYuSheShiShuJuTianBao-page">
    <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
    <GuoYuSheShiShuJuTianBaoSearch
      ref="searchRef"
      :guoyuStatus="guoyuStatus"
      :direction="direction"
      :handle-add="handleAdd"
      :batchData="batchData"
      :importBtn="importBtn"
      :batchDelBtn="batchDelBtn"
      :submitBtn="submitBtn"
      :successBtn="successBtn"
      @reset="handleReset"
      @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="handleSubmit([record.id])"
              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
              >提交</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleEdit(record, 'edit')"
              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'|| record.status === 'SUBMITTED'"
              >编辑</a-button
            >
            <a-button
              type="link"
              danger
              size="small"
              @click="handleDelete([record.id])"
              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
              >删除</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleEdit(record, 'view')"
              v-if="record.status === 'SUBMITTED'"
              >查看</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleSuccess([record.id])"
              v-if="record.status === 'SUBMITTED'"
              >审批</a-button
            >
            <a-button
              type="link"
              danger
              size="small"
              @click="handleReject(record.id)"
              v-if="record.status === 'SUBMITTED'"
              >驳回</a-button
            >
          </div>
        </template>
      </template>
    </BasicTable>
    <!-- <BasicTable :columns="columns" :listUrl="getFishDraftPage" /> -->
    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInputRef"
      type="file"
      accept=".zip,application/zip,application/x-zip-compressed"
      style="display: none"
      @change="handleFileSelect"
    />
    <!-- 导入预览 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"
      :is-view="isView"
      :direction="direction"
      :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 BasicTable from "@/components/BasicTable/index.vue";
import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";
import {
  getFishDraftPage,
  addFishDraft,
  editFishDraft,
  delFishDraft,
  submitFishDraft,
  successFishDraft,
  rejectFishDraft,
  importFishZip,
  submitImportTask,
  cancelImportTask,
  getImportTask,
  checkImportStatus
} from "@/api/guoYuSheShiShuJuTianBao";
import { Tag } from "ant-design-vue"; // 确保导入 Tag
import { getDictItemsByCode } from "@/api/dict";
// 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;
  fixed?: string;
  customRender?: (text: any, record: any) => any;
}
const fileInputRef = ref<any>(null);
const tableRef = ref<any>(null);
// 字典项
const direction = ref<any>([]);
const guoyuStatus = ref<any>([]);
// --- 基础配置 ---
const baseColumnsConfig: ColumnConfig[] = [
  {
    dataIndex: "baseName",
    key: "baseName",
    title: "水电基地",
    width: 120,
    fixed: "left",
  },
  { dataIndex: "ennm", key: "ennm", title: "电站名称", width: 120, fixed: "left" },
  { dataIndex: "stnm", key: "stnm", title: "过鱼设施名称", width: 150, fixed: "left" },
  { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 150 },
  { dataIndex: "ftpName", key: "ftpName", 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,
    customRender: ({ text }: any) =>
      direction.value.find((item: any) => item.itemCode === text)?.dictName || "-",
  },
  { 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,
    customRender: ({ text }: any) => {
      let data = guoyuStatus.value.find((item: any) => item.itemCode === text);
      return h(
        Tag,
        {
          color: data?.custom1 || "error", // Antdv Tag 的颜色预设
        },
        () => data?.dictName || "-"
      );
    },
  },
];

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

// 编辑相关状态
const editModalVisible = ref(false);
const isView = 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: 200,
      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, type: string) => {
  if (type == "view") {
    isView.value = true;
  } else {
    isView.value = false;
  }
  currentRecord.value = { ...record };
  editModalVisible.value = true;
};

// 单个/批量 删除过鱼数据
const handleDelete = (ids: any[]) => {
  Modal.confirm({
    title: "是否确认 删除 选中数据吗?",
    onOk: async () => {
      let res: any = await delFishDraft(ids);
      if (res && res?.code == 0) {
        message.success("删除成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量删除 - 按钮
const batchDelBtn = () => {
  handleDelete(batchData.value);
};
//单个/ 批量提交过鱼数据
const handleSubmit = (ids: any[]) => {
  Modal.confirm({
    title: "是否 提交 选中数据吗?",
    onOk: async () => {
      let res: any = await submitFishDraft(ids);
      if (res && res?.code == 0) {
        message.success("提交成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量提交-按钮
const submitBtn = async () => {
  handleSubmit(batchData.value);
};

// 单个/ 批量审批过鱼数据
const handleSuccess = (ids: any[]) => {
  let rejectReason = "";
  Modal.confirm({
    title: "是否确认 审批通过 选中数据?",
    // 使用 h 函数创建内容
    content: h("div", { style: "margin-top: 10px;" }, [
      h("div", { style: "margin-bottom: 8px;" }, [
        h("span", { style: "color: red;" }, "* "),
        h("span", "审批原因："),
      ]),
      h("textarea", {
        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
        placeholder: "请输入审批原因",
        rows: 4,
        style: {
          width: "100%",
          resize: "none",
          border: "1px solid #d9d9d9",
          padding: "8px",
          borderRadius: "4px",
        },
        // 监听输入事件，更新局部变量
        onInput: (e: Event) => {
          rejectReason = (e.target as HTMLTextAreaElement).value;
        },
      }),
    ]),
    okText: "确认审批",
    cancelText: "取消",
    onOk: async () => {
      let res: any = await successFishDraft({ ids: ids, approveComment: rejectReason });
      if (res && res?.code == 0) {
        message.success("审批成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量审批-按钮
const successBtn = async () => {
  handleSuccess(batchData.value);
};

// 批量驳回过鱼数据
const handleReject = (id: any) => {
  let rejectReason = "";

  Modal.confirm({
    title: "是否确认 驳回 选中数据?",
    // 使用 h 函数创建内容
    content: h("div", { style: "margin-top: 10px;" }, [
      h("div", { style: "margin-bottom: 8px;" }, [
        h("span", { style: "color: red;" }, "* "),
        h("span", "驳回原因："),
      ]),
      h("textarea", {
        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
        placeholder: "请输入驳回原因",
        rows: 4,
        style: {
          width: "100%",
          resize: "none",
          border: "1px solid #d9d9d9",
          padding: "8px",
          borderRadius: "4px",
        },
        // 监听输入事件，更新局部变量
        onInput: (e: Event) => {
          rejectReason = (e.target as HTMLTextAreaElement).value;
        },
      }),
    ]),
    okText: "确认驳回",
    cancelText: "取消",
    onOk: async () => {
      // 校验驳回原因不能为空
      if (!rejectReason || rejectReason.trim() === "") {
        message.warning("请输入驳回原因");
        return Promise.reject(); // 阻止 Modal 关闭
      }

      let res: any = await rejectFishDraft({ id: id, rejectReason: rejectReason });
      if (res && res?.code == 0) {
        message.success("驳回成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 多选
const handleSelectionChange = (keys: any) => {
  batchData.value = keys;
};
const editModalCancel = () => {
  editModalVisible.value = false;
};
// 编辑/新增-按钮
const handleEditSubmit = async (values: FormData) => {
  submitLoading.value = true;
  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;
  } else {
    // 新增逻辑
    let res: any = await addFishDraft({
      ...values,
    });
    if (res && res?.code == 0) {
      message.success("新增成功");
      editModalVisible.value = false;
      tableRef.value?.getList();
    }
    submitLoading.value = false;
  }
};

const handleModalOk = () => {
  Modal.confirm({
    title: "是否提交导入数据?",
    onOk: async () => {
      // tableData.value = [...fileTableData.value];
      visible.value = false;
      editingKey.value = "";
      message.success("数据已导入至列表");
      // let res: any = await submitImportTask(ids);
      // if (res && res?.code == 0) {
      //   message.success("审批成功");
      //   tableRef.value?.getList();
      // }
    },
  });
};

const handleModalCancel = () => {
  Modal.confirm({
    title: "是否取消导入数据?",
    onOk: async () => {
      visible.value = false;
      editingKey.value = "";
      // let res: any = await cancelImportTask(ids);
      // if (res && res?.code == 0) {
      //   message.success("审批成功");
      //   tableRef.value?.getList();
      // }
    },
  });
};


const handleFileSelect = (e: Event) => {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;

  // 校验文件大小 (50MB)
  const maxSize = 50 * 1024 * 1024;
  if (file.size > maxSize) {
    message.error("文件大小不能超过50MB");
    resetFileInput();
    return;
  }

  // 校验文件类型
  const isZip =
    file.name.toLowerCase().endsWith(".zip") ||
    file.type === "application/zip" ||
    file.type === "application/x-zip-compressed";

  if (!isZip) {
    message.error("请选择.zip格式的压缩包");
    resetFileInput();
    return;
  }

  // props.importBtn(file);
  resetFileInput();
};

const resetFileInput = () => {
  if (fileInputRef.value) {
    fileInputRef.value.value = "";
  }
};
const importBtn = async (file: File) => {
  let res: any = await checkImportStatus();
  console.log(res)
  // fileInputRef.value?.click();
  // fileLoading.value = true;
  // editingKey.value = "";

  // try {
  //   const formData = new FormData();
  //   formData.append("file", file);
  //   let res: any = await importFishZip(formData);
  //   console.log(res);
  //   visible.value = true;
  // } catch (error) {
  // } finally {
  //   // fileLoading.value = false;
  // }
};
const handleReset = (values) => {
  handleSearchFinish(values);
};
// 搜索-按钮
const handleSearchFinish = (values: any) => {
  const filters = [
    values.ftp && {
      field: "ftp",
      operator: "eq",
      dataType: "string",
      value: values.ftp,
    },
    {
      field: "TM",
      operator: "gte",
      dataType: "date",
      value: values.strdt[0],
    },
    {
      field: "TM",
      operator: "lte",
      dataType: "date",
      value: values.strdt[1],
    },
    values.direction && {
      field: "direction",
      operator: "eq",
      dataType: "string",
      value: values.direction,
    },
    values.status && {
      field: "status",
      operator: "eq",
      dataType: "string",
      value: values.status,
    },
    values.stcd && {
      field: "stcd",
      operator: "eq",
      dataType: "string",
      value: values.stcd,
    },
    values.rstcd && {
      field: "rstcd",
      operator: "eq",
      dataType: "string",
      value: values.rstcd,
    },
    values.baseId !== "all" && {
      field: "baseId",
      operator: "eq",
      dataType: "string",
      value: values.baseId,
    },
  ].filter(Boolean);

  const filter = {
    logic: "and",
    filters: filters,
  };
  tableRef.value?.getList(filter);
};

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

// --- 生命周期 ---
onMounted(() => {
  getDictItemsByCode({ dictCode: "direction" }).then((res) => {
    direction.value = res.data;
  });
  getDictItemsByCode({ dictCode: "guoyuStatus" }).then((res) => {
    guoyuStatus.value = res.data;
  });
});
</script>

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