WholeProcessPlatform/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue

<template>
  <div class="guoYuSheShiShuJuHistory-page">
    <GuoYuSheShiShuJuHistorySearch ref="searchRef" class="search-container" :guoyuStatus="guoyuStatus"
      :direction="direction" @reset="handleReset" @search-finish="handleSearchFinish" />

    <div class="table-container" ref="tableContainerRef">
      <BasicTable ref="tableRef" :columns="columns" :scroll-y="tableScrollY" :list-url="getFishDraftPage"
        :search-params="{}" :transform-data="customTransform">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action' || column.dataIndex === 'action'">
            <div class="flex">
              <a-button type="link" size="small" @click="handleView(record)">查看</a-button>
            </div>
          </template>
        </template>
      </BasicTable>
    </div>

    <a-modal v-model:open="mediaPreviewVisible" :title="videoPreviewTitle" :footer="null" width="900px"
      @cancel="closeMediaPreview" :zIndex="2000">
      <div class="flex h-[60vh] gap-4">
        <div class="w-1/4 overflow-y-auto border-r pr-2 media-list-container">
          <div v-for="(item, index) in previewList" :key="index" class="mb-2 cursor-pointer list-item"
            :class="{ select: index === currentMediaIndex }" @click="currentMediaIndex = index">
            <span class="file-name">{{ item.name }}</span>
          </div>
        </div>

        <div class="w-3/4 flex flex-col items-center justify-center bg-gray-100 relative p-4">
          <a-image v-if="
            currentMediaItem &&
            currentMediaItem.url != '' &&
            (currentMediaItem.type === 'image' || currentMediaItem.type === 'formImage')
          " :src="currentMediaItem.url" class="max-w-full max-h-full object-contain" />
          <div v-else-if="
            currentMediaItem &&
            currentMediaItem.url == '' &&
            (currentMediaItem.type === 'image' || currentMediaItem.type === 'formImage')
          " class="text-gray-400">
            暂无图片预览
          </div>

          <video v-else-if="
            currentMediaItem &&
            currentMediaItem.url != '' &&
            (currentMediaItem.type === 'video' || currentMediaItem.type === 'formVideo')
          " :src="currentMediaItem.url" controls autoplay class="max-w-full max-h-[50vh]">
            您的浏览器不支持视频播放
          </video>
          <div v-else-if="
            currentMediaItem &&
            currentMediaItem.url == '' &&
            (currentMediaItem.type === 'video' || currentMediaItem.type === 'formVideo')
          " class="text-gray-400">
            暂无视频预览
          </div>

          <div class="absolute bottom-4 flex gap-4 z-10">
            <a-button shape="circle" :icon="h(LeftOutlined)" @click="prevMedia" :disabled="currentMediaIndex === 0" />
            <span class="self-center text-gray-600 bg-white px-2 rounded shadow-sm">
              {{ currentMediaIndex + 1 }} / {{ previewList.length }}
            </span>
            <a-button shape="circle" :icon="h(RightOutlined)" @click="nextMedia"
              :disabled="currentMediaIndex === previewList.length - 1" />
          </div>
        </div>
      </div>
    </a-modal>

    <EditModal ref="editModalRef" v-model:visible="editModalVisible" :is-view="true" :direction="direction"
      :initial-values="currentRecord" @cancel="editModalCancel" @preview-click="handlePreviewClick" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, h, nextTick } from "vue";
import { message } from "ant-design-vue";
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import BasicTable from "@/components/BasicTable/index.vue";
import GuoYuSheShiShuJuHistorySearch from "./guoYuSheShiShuJuHistorySearch.vue";
import EditModal from "../guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue";
import { getFishDraftPage } from "@/api/guoYuSheShiShuJuTianBao";
import { Tag } from "ant-design-vue";
import { getDictItemsByCode } from "@/api/dict";

const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL;
const baseUrlPreview = import.meta.env.VITE_APP_BASE_URL;

interface FormData {
  [key: string]: any;
}

interface ColumnConfig {
  dataIndex: string;
  key: string;
  title: string;
  width?: number;
  fixed?: string;
  customRender?: (text: any, record: any) => any;
}

const tableRef = ref<any>(null);
const searchRef = ref<any>(null);
const editModalRef = ref<any>(null);

const direction = ref<any>([]);
const guoyuStatus = ref<any>([]);

const baseColumnsConfig: ColumnConfig[] = [
  {
    dataIndex: "hbrvnm",
    key: "hbrvnm",
    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",
          style: { margin: 0 },
        },
        () => (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: "tm", key: "tm", title: "填报时间", width: 150 },
  {
    dataIndex: "status",
    key: "status",
    title: "状态",
    width: 74,
    customRender: ({ text }: any) => {
      let data = guoyuStatus.value.find((item: any) => item.itemCode === text);
      return h(
        Tag,
        {
          color: data?.custom1 || "error",
        },
        () => data?.dictName || "-"
      );
    },
  },
];

const editModalVisible = ref(false);
const currentRecord = ref<FormData | null>(null);

const mediaPreviewVisible = ref(false);
const videoPreviewTitle = ref("视频预览");

interface MediaItem {
  id: string;
  type: "image" | "video" | "formVideo" | "formImage";
  name: string;
  url: string;
}

const previewList = ref<MediaItem[]>([]);
const currentMediaIndex = ref(0);
const tablePreviewRecord = ref<any>({});

const currentMediaItem = computed(() => previewList.value[currentMediaIndex.value]);

const columns = computed(() => {
  return [
    ...baseColumnsConfig.map((col) => {
      if (col.dataIndex === "level5") {
        return {
          ...col,
          customRender: ({ text }: any) => {
            if (!text) return "-";
            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",
    },
  ];
});

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

const editModalCancel = () => {
  editModalVisible.value = false;
};

const handlePreviewClick = (record: any, type: string, index: number) => {
  const mixedList: MediaItem[] = [];
  if (type === "image") {
    tablePreviewRecord.value = record;
    videoPreviewTitle.value = "图片预览";
    const nameList = record.picpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        id: record.id,
        type: "image",
        name: item.name,
        url:
          baseUrlPreview +
          "/data/fishDraft/previewFile?filename=" +
          item.name +
          "&taskId=" +
          "" +
          "&type=1",
      });
    });
  } else if (type === "video") {
    tablePreviewRecord.value = record;
    videoPreviewTitle.value = "视频预览";
    const nameList = record.vdpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        id: record.id,
        type: "video",
        name: item.name,
        url:
          baseUrlPreview +
          "/data/fishDraft/previewFile?filename=" +
          item.name +
          "&taskId=" +
          "" +
          "&type=2",
      });
    });
  } else if (type === "formImage") {
    videoPreviewTitle.value = "图片预览";
    const nameList = JSON.parse(JSON.stringify(record)).picpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        id: record.id,
        type: "formImage",
        name: item.name,
        url: item.url,
      });
    });
  } else if (type === "formVideo") {
    videoPreviewTitle.value = "视频预览";
    const nameList = JSON.parse(JSON.stringify(record)).vdpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        id: record.id,
        type: "formVideo",
        name: item.name,
        url: item.url,
      });
    });
  }

  mediaPreviewVisible.value = true;
  currentMediaIndex.value = index;
  nextTick(() => {
    previewList.value = mixedList;
  });
};

const prevMedia = () => {
  if (currentMediaIndex.value > 0) {
    currentMediaIndex.value--;
  }
};

const nextMedia = () => {
  if (currentMediaIndex.value < previewList.value.length - 1) {
    currentMediaIndex.value++;
  }
};

const closeMediaPreview = () => {
  mediaPreviewVisible.value = false;
  nextTick(() => {
    previewList.value = [];
    currentMediaIndex.value = 0;
  });
};

const customTransform = (res: any) => {
  const rawRecords = res?.data?.records || [];
  const modifiedRecords = rawRecords.map((item: any) => {
    return {
      ...item,
      picpthList: item.picpth
        ? item.picpth.split(",").map((item: string) => baseUrl + "/?" + item) || []
        : [],
    };
  });
  return {
    records: modifiedRecords,
    total: res?.data?.total || 0,
  };
};

const handleReset = (values) => {
  handleSearchFinish(values);
};

const handleSearchFinish = (values: any) => {
  const filters = [
    values.ftp && {
      field: "ftp",
      operator: "eq",
      dataType: "string",
      value: values.ftp,
    },
    {
      field: "strdt",
      operator: "gte",
      dataType: "date",
      value: values.strdt[0] + ' 00:00:00',
    },
    {
      field: "strdt",
      operator: "lte",
      dataType: "date",
      value: values.strdt[1] + ' 23:59:59',
    },
    values.direction && {
      field: "direction",
      operator: "eq",
      dataType: "string",
      value: values.direction,
    },
    {
      field: "status",
      operator: "eq",
      dataType: "string",
      value: 'APPROVED',
    },
    values.stcd && {
      field: "stcd",
      operator: "eq",
      dataType: "string",
      value: values.stcd,
    },
    values.rstcd && {
      field: "rstcd",
      operator: "eq",
      dataType: "string",
      value: values.rstcd,
    },
    values.hbrvcd !== "all" && {
      field: "hbrvcd",
      operator: "eq",
      dataType: "string",
      value: values.hbrvcd,
    },
  ].filter(Boolean);

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

const tableContainerRef = ref<HTMLElement | null>(null);
const tableScrollY = ref<number | undefined>(undefined);

const calcTableScrollY = () => {
  if (!tableContainerRef.value) return;
  const containerHeight = tableContainerRef.value.clientHeight;
  const otherHeight = 112;
  const y = containerHeight - otherHeight;
  tableScrollY.value = y > 0 ? y : undefined;
};

const observer = new ResizeObserver(() => {
  calcTableScrollY();
});

onMounted(() => {
  nextTick(() => {
    calcTableScrollY();
    if (tableContainerRef.value) {
      observer.observe(tableContainerRef.value);
    }
  });

  getDictItemsByCode({ dictCode: "direction" }).then((res) => {
    direction.value = res.data;
  });

  getDictItemsByCode({ dictCode: "approvalStatus" }).then((res) => {
    guoyuStatus.value.length = 0;
    res.data.forEach((item: any) => {
      if (item.itemCode == "APPROVED") {
        guoyuStatus.value.push(item);
      }
    });
  });
});
</script>

<style lang="scss" scoped>
.guoYuSheShiShuJuHistory-page {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.search-container {
  flex-shrink: 0;
}

.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.media-list-container {
  background-color: rgb(234, 241, 251);
  padding: 10px;

  .list-item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }

    .file-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    &.select {
      color: #ffffff;
      background-color: rgb(37, 93, 138);
    }
  }
}
</style>