WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/rescueStation/EditVaModal.vue

<template>
  <a-modal
    v-model:open="visible"
    :title="isAdd ? '新增动物救助站' : '编辑动物救助站'"
    width="60vw"
    :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="12">
          <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="12">
          <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="12">
          <a-form-item label="测站类型" name="sttp">
            <a-select
              v-model:value="formData.sttp"
              placeholder="请选择测站类型"
              allow-clear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in sttpOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <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="12">
          <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="12">
          <a-form-item label="所属电站" name="rstcd">
            <a-select
              v-model:value="formData.rstcd"
              placeholder="请选择所属电站"
              allow-clear
              show-search
              :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="12">
          <a-form-item label="地点" name="place">
            <a-input
              v-model:value="formData.place"
              placeholder="请输入地点"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="面积(km²)" name="area">
            <a-input-number
              v-model:value="formData.area"
              placeholder="请输入面积"
              style="width: 100%"
              :min="0"
              :precision="4"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <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="12">
          <a-form-item label="保护原因" name="bhyy">
            <a-select
              v-model:value="formData.bhyy"
              placeholder="请选择保护原因"
              allow-clear
            >
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="0">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="保护对象" name="bhdx">
            <a-input
              v-model:value="formData.bhdx"
              placeholder="请输入保护对象"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否启用" name="usfl">
            <a-select
              v-model:value="formData.usfl"
              placeholder="请选择是否启用"
              allow-clear
            >
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="建成日期" name="jcdt">
            <a-date-picker
              v-model:value="formData.jcdt"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择建成日期"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="投资(亿元)" name="inv">
            <a-input-number
              v-model:value="formData.inv"
              placeholder="请输入投资"
              style="width: 100%"
              :min="0"
              :precision="4"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="简介" name="introduce" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea
              v-model:value="formData.introduce"
              placeholder="请输入简介"
              :rows="2"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea
              v-model:value="formData.remark"
              placeholder="请输入备注"
              :rows="2"
            />
          </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 } from 'vue';
import { message } from 'ant-design-vue';
import { addVaInfo, updateVaInfo } from '@/api/DataQueryMenuModule';
import { getEngInfoDropdown } from '@/api/select';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { sttpGetKendoList } from '@/api/system/map/ConfigManagement';
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 confirmModalVisible = ref(false);

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

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

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

const fieldLabelMap: Record<string, string> = {
  stcd: '救助站编码',
  stnm: '救助站名称',
  sttp: '测站类型',
  stlc: '站址',
  baseId: '水电基地',
  rstcd: '所属电站',
  place: '地点',
  area: '面积',
  bhfs: '保护方式',
  bhyy: '保护原因',
  bhdx: '保护对象',
  usfl: '是否启用',
  jcdt: '建成日期',
  inv: '投资',
  introduce: '简介',
  remark: '备注'
};

const selectOptionsMap: Record<string, () => any[]> = {
  sttp: () => sttpOptions.value,
  usfl: () => [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 }
  ],
  bhyy: () => [
    { label: '是', value: 1 },
    { label: '否', value: 0 }
  ],
  baseId: () => baseNameOptions.value,
  rstcd: () => engInfoOptions.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 '空';
  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);
};

const filterOption = (inputValue: string, option: any) => {
  const label = option.label || option.value;
  const keyword = inputValue || '';
  return label.includes(keyword);
};

watch(
  () => formData.value,
  newData => {
    const original = originalRecord.value;
    for (const key in newData) {
      const oldVal = original[key];
      const newVal = newData[key];
      if (oldVal !== newVal) {
        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 ? 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 }
);

watch(() => props.record, newRecord => {
  if (newRecord) {
    const converted = { ...newRecord };
    originalRecord.value = { ...converted };
    formData.value = { ...converted };
    changeOrder.value = [];
  }
}, { deep: true });

const loadDropdownData = () => {
  sttpGetKendoList({
    filter: {
      logic: 'and',
      filters: [{ field: 'sttpCode', operator: 'in', dataType: 'string', value: ['VA'] }]
    }
  }).then(res => {
    sttpOptions.value = (res.data?.data || []).map((item: any) => ({ label: item.sttpName, value: item.sttpCode }));
  });
  baseNameOptions.value = jidiSelectEventStore.jidiData.filter((item: any) => item.wbsCode !== 'all').map((item: any) => ({ label: item.wbsName, value: item.wbsCode }));
  getEngInfoDropdown({}).then(res => {
    engInfoOptions.value = (res.data || []).map((item: any) => ({ label: item.ennm, value: item.stcd }));
  });
};

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

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);
      res = await addVaInfo({ engInfo, source: source.trim() || '新增' });
    } else {
      engInfo.stcd = formData.value.stcd;
      changeOrder.value.forEach(item => { engInfo[item.field] = formData.value[item.field]; });
      res = await updateVaInfo({ 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>