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

<template>
  <a-table
    size="small"
    :loading="fileLoading"
    :data-source="fileTableData"
    :columns="modalColumns"
    :scroll="{ y: 500, x: '100%' }"
    :pagination="false"
    row-key="id"
  >
    <template #bodyCell="{ column, record, index }">
      <!-- 1. 操作列 -->
      <template v-if="column.key === 'action' || column.dataIndex === 'action'">
        <div class="flex">
          <template v-if="editingRowIndex === index">
            <a-button type="link" size="small" @click="saveEdit(index)">保存</a-button>
            <a-button type="link" size="small" @click="cancelEdit">取消</a-button>
          </template>
          <template v-else>
            <a-button type="link" size="small" @click="startEdit(index)">编辑</a-button>
            <a-button type="link" danger size="small" @click="handlePreviewDelete(index)"
              >删除</a-button
            >
          </template>
        </div>
      </template>

      <!-- 2. 警告提示列 (非编辑状态) -->
      <template
        v-else-if="
          !isEditing(index) &&
          record.warnings &&
          record.warnings.includes(column.dataIndexKey)
        "
      >
        <div style="color: red; display: flex; align-items: center">
          <span v-if="record[column.dataIndex]">{{ record[column.dataIndex] }}</span>
          <span v-else> 请添加{{ column.title }}</span>
          <exclamation-circle-outlined style="margin-left: 4px" />
        </div>
      </template>

      <!-- 3. 编辑状态下的单元格 (绑定到 editingData) -->
      <template
        v-else-if="
          isEditing(index) && column.dataIndex != 'picpth' && column.dataIndex != 'vdpth'
        "
      >
        <!-- 基地 -->
        <!-- <template v-if="column.dataIndex === 'baseName'">
          <a-select
            v-model:value="editingData.baseId"
            placeholder="请选择"
            show-search
            allowClear
            :filter-option="filterOption"
            :loading="rowStates[index]?.baseLoading"
            style="width: 100%"
            @change="(val) => handleBaseChange(val, index, 'input')"
          >
            <a-select-option
              v-for="opt in baseOptions"
              :key="opt.baseid"
              :value="opt.baseid"
              :label="opt.basename"
            >
              {{ opt.basename }}
            </a-select-option>
          </a-select>
        </template> -->
        <!-- 流域名称 -->
        <template v-if="column.dataIndex === 'hbrvnm'">
          <a-select
            v-model:value="editingData.hbrvcd"
            placeholder="请选择"
            show-search
            allowClear
            :filter-option="filterOption"
            :loading="rowStates[index]?.hbrvcdLoading"
            style="width: 100%"
            @change="(val) => handleHbrvcdChange(val, index, 'input')"
          >
            <a-select-option
              v-for="opt in hbrvcdOptions"
              :key="opt.hbrvcd"
              :value="opt.hbrvcd"
              :label="opt.hbrvnm"
            >
              {{ opt.hbrvnm }}
            </a-select-option>
          </a-select>
        </template>

        <!-- 电站名称 -->
        <template v-else-if="column.dataIndex === 'ennm'">
          <a-select
            v-model:value="editingData.rstcd"
            placeholder="请选择"
            show-search
            allowClear
            :filter-option="filterOption"
            :loading="rowStates[index]?.engLoading"
            style="width: 100%"
            :disabled="!editingData.hbrvcd"
            @change="(val) => handleEngChange(val, index, 'input')"
          >
            <a-select-option
              v-for="opt in rowStates[index]?.engOptions || []"
              :key="opt.stcd"
              :value="opt.stcd"
              :label="opt.ennm"
            >
              {{ opt.ennm }}
            </a-select-option>
          </a-select>
        </template>

        <!-- 过鱼设施 -->
        <template v-else-if="column.dataIndex === 'stnm'">
          <a-select
            v-model:value="editingData.stcd"
            placeholder="请选择"
            show-search
            allowClear
            :filter-option="filterOption"
            :loading="rowStates[index]?.fpssLoading"
            style="width: 100%"
            :disabled="!editingData.rstcd"
            @change="(val) => handleFpssChange(val, index)"
          >
            <a-select-option
              v-for="opt in rowStates[index]?.fpssOptions || []"
              :key="opt.stcd"
              :value="opt.stcd"
              :label="opt.stnm"
            >
              {{ opt.stnm }}
            </a-select-option>
          </a-select>
        </template>

        <!-- 过鱼时间 -->
        <template v-else-if="column.dataIndex === 'strdt'">
          <a-date-picker
            v-model:value="editingData.strdt"
            show-time
            style="width: 100%"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="(val) => delWarning(val, 'strdt')"
          />
        </template>

        <!-- 鱼种类 -->
        <template v-else-if="column.dataIndex === 'ftpName'">
          <fishSearch
            v-model="editingData.ftp"
            style="width: 100%"
            @update:modelValue="handleFtpChange"
          />
        </template>

        <!-- 游向 -->
        <template v-else-if="column.dataIndex === 'direction'">
          <a-select
            v-model:value="editingData.direction"
            placeholder="请选择"
            style="width: 100%"
            @change="(val) => delWarning(val, 'direction')"
          >
            <a-select-option
              v-for="item in direction"
              :key="item.itemCode"
              :value="item.itemCode"
            >
              {{ item.dictName }}
            </a-select-option>
          </a-select>
        </template>

        <!-- 数字输入框 -->
        <template v-else-if="['fcnt'].includes(column.dataIndex)">
          <a-input-number
            v-model:value="editingData[column.dataIndex]"
            style="width: 100%"
            :step="1"
            :precision="0"
            :min="0"
            @change="(val) => delWarning(val, column.dataIndex)"
          />
        </template>
        <template v-else-if="['wt'].includes(column.dataIndex)">
          <a-input-number
            v-model:value="editingData[column.dataIndex]"
            style="width: 100%"
          />
        </template>

        <!-- 是否鱼苗 -->
        <template v-else-if="column.dataIndex === 'isfs'">
          <a-radio-group
            v-model:value="editingData.isfs"
            @change="(val) => delWarning(val, 'isfs')"
          >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </template>

        <!-- 体长 (编辑态使用 Min/Max) -->
        <template v-else-if="column.dataIndex === 'fsz'">
          <div class="flex">
            <a-input-number
              v-model:value="editingData.bodyLengthMin"
              style="width: 50%"
              :min="0"
            />
            <span class="px-[2px]">~</span>
            <a-input-number
              v-model:value="editingData.bodyLengthMax"
              style="width: 50%"
              :min="0"
            />
          </div>
        </template>

        <!-- 体重 (编辑态使用 Min/Max) -->
        <template v-else-if="column.dataIndex === 'fwet'">
          <div class="flex align-center">
            <a-input-number
              v-model:value="editingData.weightMin"
              style="width: 50%"
              :min="0"
            />
            <span class="px-[2px]">~</span>
            <a-input-number
              v-model:value="editingData.weightMax"
              style="width: 50%"
              :min="0"
            />
          </div>
        </template>
      </template>

      <template v-else-if="column.dataIndex === 'picpth'">
        <div class="preview" v-for="(item, index) in record.picpthList">
          <div
            class="text"
            :class="{ text_warning: record.picpthsWarnings.includes(item.name) }"
            @click="emit('preview-click', record, 'image', index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div v-if="record.picpthList.length == 0">暂无图片</div>
      </template>
      <template v-else-if="column.dataIndex === 'vdpth'">
        <div class="preview" v-for="(item, index) in record.vdpthList">
          <div
            class="text"
            :class="{ text_warning: record.vdpthsWarnings.includes(item.name) }"
            @click="emit('preview-click', record, 'video', index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div v-if="record.vdpthList.length == 0">暂无视频</div>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import _ from "lodash";
import { ref, reactive, onMounted, h } from "vue";
import { message, Tag } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import fishSearch from "@/components/fishSearch/index.vue";
import {
  getSelectForDropdown,
  getEngInfoDropdown,
  getFpssDropdown,
  revalidateAndUpdateRow,
} from "@/api/select";

const props: any = defineProps({
  taskId: { type: String, default: "" },
  fileTableData: { type: Array, default: () => [] },
  fileLoading: { type: Boolean, default: false },
  direction: { type: Array, default: () => [] },
});

const emit = defineEmits(["update:fileTableData", "preview-click", "update:fileLoading"]);

// --- 状态管理 ---
const editingRowIndex = ref<number | null>(null);
const baseOptions = ref<any[]>([]);
const hbrvcdOptions = ref<any[]>([]);
const rowStates = reactive<Record<number, any>>({});

// 【核心】临时编辑数据，只在编辑模式下使用
const editingData = ref<any>(null);

const modalColumns = ref([
  {
    dataIndex: "hbrvnm",
    key: "hbrvnm",
    dataIndexKey: "hbrvcd",
    title: "流域",
    width: 140,
  },
  {
    dataIndex: "ennm",
    key: "ennm",
    dataIndexKey: "rstcd",
    title: "电站名称",
    width: 140,
  },
  {
    dataIndex: "stnm",
    key: "stnm",
    dataIndexKey: "stcd",
    title: "过鱼设施名称",
    width: 150,
  },
  {
    dataIndex: "strdt",
    key: "strdt",
    dataIndexKey: "strdt",
    title: "过鱼时间",
    width: 190,
  },
  {
    dataIndex: "ftpName",
    key: "ftpName",
    dataIndexKey: "ftp",
    title: "鱼种类",
    width: 120,
  },
  {
    dataIndex: "isfs",
    key: "isfs",
    title: "是否鱼苗",
    dataIndexKey: "isfs",
    width: 130,
    customRender: ({ text }: any) => {
      const isYes = text === 1 || text === "1";
      return h(Tag, { color: isYes ? "success" : "error", style: { margin: 0 } }, () =>
        isYes ? "是" : "否"
      );
    },
  },
  {
    dataIndex: "direction",
    dataIndexKey: "direction",
    key: "direction",
    title: "游向",
    width: 120,
    customRender: ({ text }: any) =>
      props.direction.find((item: any) => item.itemCode === text)?.dictName || "-",
  },
  {
    dataIndex: "fcnt",
    key: "fcnt",
    dataIndexKey: "fcnt",
    title: "过鱼数量(尾)",
    width: 120,
  },
  { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 160 },
  { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 160 },
  { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
  { dataIndex: "picpth", key: "picpth", title: "图片", width: 160 },
  { dataIndex: "vdpth", key: "vdpth", title: "视频", width: 160 },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
    fixed: "right",
    width: 100,
    align: "center",
  },
]);

// --- 初始化 ---
onMounted(() => {
  // loadBaseOptions();
  loadHbrvcdOptions();
});

// const loadBaseOptions = async () => {
//   try {
//     const res = await getBaseDropdown({});
//     let list = res.data || [];
//     if (list && list.length > 0) {
//       list = list.filter((item: any) => item.baseid !== "all");
//     }
//     baseOptions.value = list;
//   } catch (e) {
//     console.error("Load base options failed", e);
//   }
// };

const loadHbrvcdOptions = async () => {
  try {
    const res = await getSelectForDropdown({});
    let list = res.data || [];
    if (list && list.length > 0) {
      list = list.filter((item: any) => item.hbrvcd !== "all");
    }
    hbrvcdOptions.value = list;
  } catch (e) {
    console.error("Load hbrvcd options failed", e);
  }
};

const ensureRowState = (index: number) => {
  if (!rowStates[index]) {
    rowStates[index] = {
      engOptions: [],
      fpssOptions: [],
      baseLoading: false,
      hbrvcdLoading: false,
      engLoading: false,
      fpssLoading: false,
    };
  }
  return rowStates[index];
};

// --- 级联逻辑 (操作 editingData) ---
// const handleBaseChange = async (
//   hbrvcd: string,
//   index: number,
//   type: string = "start"
// ) => {
//   const state = ensureRowState(index);
//   editingData.value.baseName = hbrvcdOptions.value.find(
//     (item: any) => item.hbrvcd == hbrvcd
//   )?.basename;
//   delWarning(hbrvcd, "hbrvcd");
//   // 清空后续字段
//   if (type != "start") {
//     editingData.value.rstcd = undefined;
//     editingData.value.stcd = undefined;
//     editingData.value.ennm = undefined;
//     editingData.value.stnm = undefined;
//     state.engOptions = [];
//     state.fpssOptions = [];
//   }
//   state.engLoading = true;
//   try {
//     const res = await getEngInfoDropdown({ hbrvcd });
//     state.engOptions = res.data || [];
//   } catch (e) {
//     message.error("获取电站列表失败");
//   } finally {
//     state.engLoading = false;
//   }
// };
const handleHbrvcdChange = async (
  hbrvcd: string,
  index: number,
  type: string = "start"
) => {
  const state = ensureRowState(index);
  editingData.value.hbrvnm = hbrvcdOptions.value.find(
    (item: any) => item.hbrvcd == hbrvcd
  )?.hbrvnm;
  delWarning(hbrvcd, "hbrvcd");
  if (hbrvcd == null) {
    delWarning(null, "hbrvcd");
    delWarning(null, "stcd");
  }
  // 清空后续字段
  if (type != "start") {
    editingData.value.rstcd = undefined;
    editingData.value.stcd = undefined;
    editingData.value.ennm = undefined;
    editingData.value.stnm = undefined;
    state.engOptions = [];
    state.fpssOptions = [];
  }
  state.engLoading = true;
  try {
    const res = await getEngInfoDropdown({ hbrvcd });
    state.engOptions = res.data || [];
  } catch (e) {
    message.error("获取电站列表失败");
  } finally {
    state.engLoading = false;
  }
};

const handleEngChange = async (rstcd: string, index: number, type: string = "start") => {
  const state = ensureRowState(index);
  editingData.value.ennm = state.engOptions.find(
    (item: any) => item.stcd === rstcd
  )?.ennm;
  delWarning(rstcd, "rstcd");
  if (rstcd == null) {
    delWarning(null, "stcd");
  }
  // 清空后续字段
  if (type != "start") {
    editingData.value.stcd = undefined;
    editingData.value.stnm = undefined;
    state.fpssOptions = [];
  }
  state.fpssLoading = true;
  try {
    const res = await getFpssDropdown({ rstcd, hbrvcd: editingData.value.hbrvcd });
    state.fpssOptions = res.data || [];
  } catch (e) {
    message.error("获取设施列表失败");
  } finally {
    state.fpssLoading = false;
  }
};
const handleFpssChange = (stcd: string, index: number) => {
  const state = ensureRowState(index);
  delWarning(stcd, "stcd");
  editingData.value.stnm = state.fpssOptions.find(
    (item: any) => item.stcd === stcd
  )?.stnm;
};

// 消除警告 / 添加警告
const delWarning = (val: any, key: string) => {
  // 确保 warnings 数组存在
  if (!editingData.value.warnings) {
    editingData.value.warnings = [];
  }

  const warnings = editingData.value.warnings;
  const hasWarning = warnings.includes(key);

  if (val !== null && val !== undefined && val !== "") {
    // 1. 如果有值，且存在警告，则移除警告
    if (hasWarning) {
      editingData.value.warnings = warnings.filter((w: string) => w !== key);
    }
  } else {
    // 2. 如果值为空 (null/undefined/'')，且不存在警告，则添加警告
    if (!hasWarning) {
      editingData.value.warnings.push(key);
    }
  }
};
// --- 编辑控制 ---
const isEditing = (index: number) => editingRowIndex.value === index;
const startEdit = (index: number) => {
  const originalRecord = props.fileTableData[index];

  // 1. 深拷贝原始数据到临时编辑区
  let copiedData = JSON.parse(JSON.stringify(originalRecord));

  editingData.value = copiedData;
  // 2. 预处理：将 fsz/fwet 字符串拆分为 Min/Max 供输入框使用
  processStringToMinMax(editingData.value);

  editingRowIndex.value = index;
  if (editingData.value.warnings.includes("hbrvcd")) {
    editingData.value.hbrvcd = null;
    editingData.value.hbrvnm = null;
    editingData.value.rstcd = null;
    editingData.value.stcd = null;
    delWarning(null, "rstcd");
    delWarning(null, "stcd");
  }
  if (editingData.value.warnings.includes("rstcd")) {
    editingData.value.stcd = null;
    delWarning(null, "stcd");
  }

  // 3. 预加载下拉选项 (基于 editingData 的值)
  if (editingData.value.hbrvcd == "" || editingData.value.hbrvcd == undefined) {
    if (editingData.value.rstcd) {
      handleHbrvcdChange("", index, "start").then(() => {
        handleEngChange(editingData.value.rstcd, index, "start");
      });
    } else {
      handleEngChange("", index, "start");
    }
  } else if (editingData.value.hbrvcd != "" && editingData.value.hbrvcd != undefined) {
    handleHbrvcdChange(editingData.value.hbrvcd, index, "start").then(() => {
      handleEngChange(editingData.value.rstcd, index, "start");
    });
  }
};

// 辅助：字符串转 Min/Max
const processStringToMinMax = (data: any) => {
  if (data.fsz) {
    const sizes = String(data.fsz).split("~");
    data.bodyLengthMin = sizes[0] || "";
    data.bodyLengthMax = sizes[1] || sizes[0] || "";
  } else {
    data.bodyLengthMin = "";
    data.bodyLengthMax = "";
  }
  if (data.fwet) {
    const weights = String(data.fwet).split("~");
    data.weightMin = weights[0] || "";
    data.weightMax = weights[1] || weights[0] || "";
  } else {
    data.weightMin = "";
    data.weightMax = "";
  }
};

// 辅助：Min/Max 转字符串
const processMinMaxToString = (data: any) => {
  // 处理体长
  if (data.bodyLengthMin !== "" || data.bodyLengthMax !== "") {
    if (data.bodyLengthMin == data.bodyLengthMax) {
      data.fsz = data.bodyLengthMin;
    } else {
      data.fsz = `${data.bodyLengthMin}~${data.bodyLengthMax}`;
    }
  } else {
    data.fsz = "";
  }

  // 处理体重
  if (data.weightMin !== "" || data.weightMax !== "") {
    if (data.weightMin == data.weightMax) {
      data.fwet = data.weightMin;
    } else {
      data.fwet = `${data.weightMin}~${data.weightMax}`;
    }
  } else {
    data.fwet = "";
  }

  // 清理临时字段，避免污染原数据
  delete data.bodyLengthMin;
  delete data.bodyLengthMax;
  delete data.weightMin;
  delete data.weightMax;
};

const saveEdit = async (index: number) => {
  // 1. 后处理：将 Min/Max 合并回 fsz/fwet
  processMinMaxToString(editingData.value);

  // 2. 创建新数组，替换对应索引的数据
  const newData = [...props.fileTableData];
  newData[index] = { ...editingData.value };
  emit("update:fileLoading", true);
  try {
    const res: any = await revalidateAndUpdateRow({
      taskId: props.taskId,
      data: newData[index],
    });
    if (res && res?.code == 0) {
      message.success("保存成功");
      emit("update:fileTableData", newData);
      editingRowIndex.value = null;
      editingData.value = null;
      emit("update:fileLoading", false);
    }
  } catch (e) {
    message.error("保存失败");
  } finally {
    emit("update:fileLoading", false);
  }
};

const cancelEdit = () => {
  editingRowIndex.value = null;
  editingData.value = null;
  // 由于我们从未修改过 props.fileTableData，所以不需要恢复操作，直接退出即可
};

const handlePreviewDelete = (index: number) => {
  const newData = [...props.fileTableData];
  newData.splice(index, 1);
  emit("update:fileTableData", newData);

  if (editingRowIndex.value === index) {
    editingRowIndex.value = null;
    editingData.value = null;
  } else if (editingRowIndex.value !== null && editingRowIndex.value > index) {
    editingRowIndex.value--;
  }
  message.success("删除成功");
};
// 鱼种类编辑 修改名称
const handleFtpChange = (val: any, opt: any) => {
  editingData.value.ftpName = opt.name;
  delWarning(val, "ftp");
};

// --- 辅助函数 ---
const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
defineExpose({
  editingRowIndex,
  editingData,
});
</script>
<style lang="scss" scoped>
.preview {
  width: 100%;
  position: relative;
  cursor: pointer;
  color: #1890ff;
  &:hover {
    color: #40a9ff;
  }
  display: flex;
  justify-content: justify-between;
  align-items: center;
  .text {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text_warning {
    color: red;
  }
}
</style>