WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/qiXiDi/EditFhModal.vue

<template>
  <a-modal
    v-model:open="visible"
    :title="isAdd ? '新增栖息地' : '编辑栖息地'"
    width="80vw"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      :rules="formRules"
      class="max-h-[70vh] overflow-y-auto pr-4"
    >
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="栖息地站码" name="stcd">
            <a-input
              v-model:value="formData.stcd"
              placeholder="请输入栖息地站码"
              :disabled="!isAdd"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="栖息地名称" name="stnm">
            <a-input
              v-model:value="formData.stnm"
              placeholder="请输入栖息地名称"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="站址" name="stlc">
            <a-input
              v-model:value="formData.stlc"
              placeholder="请输入站址"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="经度(°)" name="lgtd">
            <a-input-number
              v-model:value="formData.lgtd"
              placeholder="请输入"
              :precision="6"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="纬度(°)" name="lttd">
            <a-input-number
              v-model:value="formData.lttd"
              placeholder="请输入"
              :precision="6"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="水电基地" name="baseId">
            <a-select
              v-model:value="formData.baseId"
              placeholder="请选择水电基地"
              allow-clear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in baseNameOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属电站" name="rstcd">
            <a-select
              v-model:value="formData.rstcd"
              placeholder="请选择所属电站"
              allow-clear
              show-search
              :loading="engLoading"
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in engInfoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护对象" name="bhdx">
            <a-select
              v-model:value="formData.bhdx"
              mode="multiple"
              placeholder="请选择保护对象"
              allow-clear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in fishOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护范围" name="bhfw">
            <a-input
              v-model:value="formData.bhfw"
              placeholder="请输入保护范围"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护核心长度(km)" name="bhhxcd">
            <a-input-number
              v-model:value="formData.bhhxcd"
              placeholder="请输入"
              :precision="2"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护河流" name="bhhl">
            <a-input
              v-model:value="formData.bhhl"
              placeholder="请输入保护河流"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护河段" name="bhhd">
            <a-input
              v-model:value="formData.bhhd"
              placeholder="请输入保护河段"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护措施" name="bhcs">
            <a-input
              v-model:value="formData.bhcs"
              placeholder="请输入保护措施"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保护方式" name="bhfs">
            <a-input
              v-model:value="formData.bhfs"
              placeholder="请输入保护方式"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="投资（亿元）" name="inv">
            <a-input-number
              v-model:value="formData.inv"
              placeholder="请输入"
              :precision="3"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

  <ConfirmModal
    v-model:open="confirmModalVisible"
    :diff-list="diffList"
    :confirm-loading="confirmLoading"
    @confirm="handleConfirmSubmit"
    @cancel="handleConfirmCancel"
  />
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import { addFhInfo, updateFhInfo } from '@/api/DataQueryMenuModule';
import { getEngInfoDropdown, selectForDropdown } from '@/api/select';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import ConfirmModal from '@/components/ConfirmModal/index.vue';
import { useDraggable } from '@/utils/drag';

const props = defineProps<{ open: boolean; record?: any; isAdd?: boolean }>();
const emit = defineEmits(['update:open', 'success']);
const jidiSelectEventStore = useJidiSelectEventStore();

const visible = computed({
  get: () => props.open,
  set: val => emit('update:open', val)
});
useDraggable(visible, { boundary: true, resetOnOpen: true });

const formRef = ref();
const confirmLoading = ref(false);
const formData = ref<any>({});
const originalRecord = ref<any>({});
const originalLabels = ref<Record<string, string>>({});
const confirmModalVisible = ref(false);

const formRules = ref<any>({
  stcd: [{ required: true, message: '请输入栖息地站码', trigger: 'blur' }],
  stnm: [{ required: true, message: '请输入栖息地名称', trigger: 'blur' }]
});

const engInfoOptions = ref<any[]>([]);

const baseNameOptions = computed(() =>
  jidiSelectEventStore.jidiData
    .filter((item: any) => item.wbsCode !== 'all')
    .map((item: any) => ({ label: item.wbsName, value: item.wbsCode }))
);

const engLoading = ref(false);

const fieldLabelMap: Record<string, string> = {
  stcd: '栖息地站码',
  stnm: '栖息地名称',
  stlc: '站址',
  baseId: '水电基地',
  rstcd: '所属电站',
  bhdx: '保护对象',
  bhfw: '保护范围',
  bhhxcd: '保护核心长度(km)',
  bhhl: '保护河流',
  bhhd: '保护河段',
  bhcs: '保护措施',
  bhfs: '保护方式',
  inv: '投资（亿元）',
  lgtd: '经度(°)',
  lttd: '纬度(°)'
};

const selectOptionsMap: Record<string, () => any[]> = {
  baseId: () => baseNameOptions.value,
  rstcd: () => engInfoOptions.value,
  bhdx: () => fishOptions.value
};

const changeOrder = ref<
  { field: string; label: string; oldValue: string; newValue: string }[]
>([]);
const diffList = changeOrder;

const resolveSelectLabel = (field: string, value: any): string => {
  if (value === null || value === undefined || value === '') return '空';
  // bhdx 多选：按逗号分隔，分别解析 label 再合并
  if (field === 'bhdx') {
    const arr = Array.isArray(value) ? value : String(value).split(',');
    return arr
      .map((v: any) => {
        const trimmed = String(v).trim();
        if (!trimmed) return '';
        const opt = fishOptions.value.find(
          (o: any) => String(o.value) === trimmed
        );
        return opt ? opt.label : trimmed;
      })
      .filter(Boolean)
      .join('、');
  }
  const getOptions = selectOptionsMap[field];
  if (getOptions) {
    const opt = getOptions().find(
      (o: any) => String(o.value) === String(value)
    );
    if (opt) return opt.label;
  }
  return String(value);
};

// 解析原始值的显示名：rstcd 直接用 record 自带的电站名称 ennm，不依赖异步选项
const resolveOriginalLabel = (field: string): string => {
  const original = originalRecord.value;
  if (field === 'rstcd') {
    const ennm = original.ennm || original.rstcdName;
    if (ennm) return String(ennm);
  }
  return resolveSelectLabel(field, original[field]);
};

const filterOption = (inputValue: string, option: any) => {
  const label = option.label || option.value;
  return label.includes(inputValue || '');
};
const fishOptions = ref<any[]>([]);
const getFishzy = async () => {
  try {
    const res = await selectForDropdown({
    "select": ["name","id"],
    "filter": {"logic": "and","filters": []}});
    fishOptions.value = (res.data || []).map((item: any) => ({
      label: item.name ,
      value: item.id 
    }));
  } catch (error) {
    console.error('获取保护对象列表失败:', error);
  }
};

watch(
  () => formData.value,
  newData => {
    const original = originalRecord.value;
    for (const key in newData) {
      const oldVal = original[key];
      const newVal = newData[key];
      if (oldVal !== newVal) {
        // bhdx 多选：数组 vs 字符串比较，需标准化
        if (key === 'bhdx') {
          const normalize = (v: any) => {
            if (!v) return '';
            const arr = Array.isArray(v) ? v : String(v).split(',');
            return arr
              .map((s: string) => s.trim())
              .filter(Boolean)
              .sort()
              .join(',');
          };
          if (normalize(oldVal) === normalize(newVal)) continue;
        }
        const existingIdx = changeOrder.value.findIndex(c => c.field === key);
        const oldNorm =
          oldVal === null || oldVal === undefined || oldVal === '-'
            ? null
            : oldVal;
        const newNorm = newVal === null || newVal === undefined ? null : newVal;
        if (oldNorm === newNorm) continue;
        if (
          oldNorm !== null &&
          newNorm !== null &&
          !isNaN(Number(oldNorm)) &&
          !isNaN(Number(newNorm)) &&
          Number(oldNorm) === Number(newNorm)
        )
          continue;
        const isSelect = !!selectOptionsMap[key];
        const oldDisplay = isSelect
          ? originalLabels.value[key] ?? resolveSelectLabel(key, oldNorm)
          : oldNorm === null
          ? '空'
          : String(oldNorm);
        const newDisplay = isSelect
          ? resolveSelectLabel(key, newNorm)
          : newNorm === null
          ? '空'
          : String(newNorm);
        const entry = {
          field: key,
          label: fieldLabelMap[key] || key,
          oldValue: oldDisplay,
          newValue: newDisplay
        };
        if (existingIdx >= 0) changeOrder.value[existingIdx] = entry;
        else changeOrder.value.push(entry);
      } else {
        changeOrder.value = changeOrder.value.filter(c => c.field !== key);
      }
    }
  },
  { deep: true }
);

// 监听 record 变化
const isInitLoading = ref(false);
watch(
  () => props.record,
  newRecord => {
    if (newRecord) {
      isInitLoading.value = true;
      const converted = { ...newRecord };
      // 将 "-" 还原为 null，避免 date-picker 显示 Invalid Date
      for (const key in converted) {
        if (converted[key] === '-') {
          converted[key] = null;
        }
      }
      originalRecord.value = { ...converted };
      // bhdx 多选回显：逗号分隔字符串 → 数组
      const bhdxArr = converted.bhdx
        ? String(converted.bhdx)
            .split(',')
            .map((s: string) => s.trim())
            .filter(Boolean)
        : [];
      formData.value = {
        ...converted,
        bhdx: bhdxArr.length > 0 ? bhdxArr : undefined
      };
      changeOrder.value = [];
      // 编辑时必定加载电站选项，保证 rstcd 回显与 diff 解析
      loadEngOptions(converted.baseId || undefined);
      // 提前解析 select 字段的原始显示名，防止联动刷新选项后丢失 label
      const labels: Record<string, string> = {};
      for (const key in converted) {
        if (selectOptionsMap[key]) {
          labels[key] = resolveOriginalLabel(key);
        }
      }
      originalLabels.value = labels;
      // 表单填充完成后自动复位标志，避免残留 true 导致后续切换流域不清空电站
      nextTick(() => {
        isInitLoading.value = false;
      });
    }
  },
  { deep: true }
);

// 选项加载完成后重新解析原始显示名，避免 record 加载时选项未就绪导致存成 code
watch([baseNameOptions, engInfoOptions, fishOptions], () => {
  const original = originalRecord.value;
  if (!original || Object.keys(original).length === 0) return;
  const labels: Record<string, string> = {};
  for (const key in original) {
    if (selectOptionsMap[key]) {
      labels[key] = resolveOriginalLabel(key);
    }
  }
  originalLabels.value = labels;
});

const loadEngOptions = async (baseId?: string) => {
  engLoading.value = true;
  try {
    const params = baseId ? { baseId } : {};
    const res = await getEngInfoDropdown(params);
    engInfoOptions.value = (res.data || []).map((item: any) => ({
      label: item.ennm,
      value: item.stcd
    }));
  } catch (error) {
    console.error('获取电站列表失败:', error);
  } finally {
    engLoading.value = false;
  }
};

watch(
  () => formData.value?.baseId,
  newBaseId => {
    // record 加载时已在 record watch 中加载过电站选项，这里仅跳过清空
    if (isInitLoading.value) {
      return;
    }
    formData.value.rstcd = undefined;
    loadEngOptions(newBaseId || undefined);
  }
);

watch(
  () => props.open,
  val => {
    if (val) {
      if (props.isAdd) {
        formData.value = {};
        originalRecord.value = {};
        changeOrder.value = [];
        loadEngOptions();
      }
      getFishzy();
    }
  }
);

const handleOk = async () => {
  try {
    await formRef.value?.validateFields();
    if (!props.isAdd && changeOrder.value.length === 0) {
      message.info('未检测到任何修改');
      return;
    }
    confirmModalVisible.value = true;
  } catch (error) {
    console.error('验证失败:', error);
  }
};

const handleConfirmSubmit = async (source: string) => {
  confirmLoading.value = true;
  try {
    const engInfo: Record<string, any> = {};
    let res: any;
    if (props.isAdd) {
      Object.assign(engInfo, formData.value);
      // bhdx 多选：数组 → 逗号分隔字符串
      if (Array.isArray(engInfo.bhdx)) engInfo.bhdx = engInfo.bhdx.join(',');
      res = await addFhInfo({ engInfo, source: source.trim() || '新增' });
    } else {
      engInfo.stcd = formData.value.stcd;
      changeOrder.value.forEach(item => {
        engInfo[item.field] = formData.value[item.field];
      });
      // bhdx 多选：数组 → 逗号分隔字符串
      if (Array.isArray(engInfo.bhdx)) engInfo.bhdx = engInfo.bhdx.join(',');
      res = await updateFhInfo({ engInfo, source: source.trim() || '编辑' });
    }
    if (res?.code == 0 || res?.success) {
      message.success(props.isAdd ? '新增成功' : '编辑成功');
      confirmModalVisible.value = false;
      visible.value = false;
      emit('success');
    } else {
      message.error(res?.msg || (props.isAdd ? '新增失败' : '编辑失败'));
    }
  } catch (error) {
    message.error('提交失败，请重试');
  } finally {
    confirmLoading.value = false;
  }
};

const handleConfirmCancel = () => {
  confirmModalVisible.value = false;
};
const handleCancel = () => {
  visible.value = false;
  confirmModalVisible.value = false;
  formRef.value?.resetFields();
};
</script>