WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/shuiShengShengTaiDiaoCha/index.vue

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
    <!-- 搜索组件 -->
    <WeSearch
      @search-finish="onSearchFinish"
      @reset="onReset"
      @add="handleAdd"
      @seeEdit="handleSeeEdit"
      ref="searchRef"
    />

    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :enableEllipsis="true"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :list-url="getWePageList"
    >
      <template #action="{ record }">
        <a-button
          type="link"
          class="text-[#2f6b98]"
          size="small"
          @click="handleEdit(record)"
          >编辑</a-button
        >
        <a-button type="link" danger size="small" @click="handleDelete(record)"
          >删除</a-button
        >
      </template>
    </BasicTable>

    <!-- 编辑/新增 Modal -->
    <EditWeModal
      v-model:open="editVisible"
      :record="editRecord"
      :is-add="isAdd"
      @success="handleEditSuccess"
    />

    <!-- 删除确认 Modal -->
    <DeleteConfirmModal
      ref="deleteModalRef"
      :delete-fn="deleteWeFn"
      :label="'水生生态调查断面'"
      title="删除水生生态调查断面"
      @success="handleEditSuccess"
    />

    <OperationLogModal v-model:open="operationLogVisible" :table-name="'SD_WE_B_H'" :record-name-title="'断面名称'" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import WeSearch from './WeSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import EditWeModal from './EditWeModal.vue';
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import OperationLogModal from '@/components/OperationLogModal/index.vue';
import { getWePageList, deleteWeInfo } from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';

const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});

// 编辑相关
const editVisible = ref(false);
const editRecord = ref<any>(null);
const isAdd = ref(false);
const deleteModalRef = ref();
const operationLogVisible = ref(false);

const columns = ref<any[]>([
  {
    key: 'stnm',
    title: '断面名称',
    dataIndex: 'stnm',
    visible: true,
    width: 160,
    ellipsis: true
  },
  {
    key: 'stcd',
    title: '断面编码',
    dataIndex: 'stcd',
    visible: true,
    width: 280,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'sttpName',
    title: '测站类型',
    dataIndex: 'sttpName',
    visible: true,
    width: 150,
    ellipsis: true
  },
  
  {
    key: 'baseName',
    title: '水电基地',
    dataIndex: 'baseName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'ennm',
    title: '所属电站',
    dataIndex: 'ennm',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'jcdt',
    title: '建成日期',
    dataIndex: 'jcdt',
    visible: true,
    width: 110,
    customRender: ({ text }) => {
      if (!text || text === '-') return '-';
      const date = dayjs(text);
      return date.isValid() ? date.format('YYYY-MM-DD') : '-';
    }
  },
  {
    key: 'stlc',
    title: '站址',
    dataIndex: 'stlc',
    visible: true,
    width: 300,
    ellipsis: true
  },
  {
    key: 'remark',
    title: '备注',
    dataIndex: 'remark',
    visible: true,
    width: 300,
    ellipsis: true
  },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 120
  }
]);

const tableScrollX = computed(() =>
  Math.max(
    columns.value.reduce(
      (sum: number, col: any) => sum + (col.width || 180),
      0
    ),
    600
  )
);

const buildSearchParams = (values: any) => {
  return {
    logic: 'and',
    filters: [
      values.rstcd
        ? {
            field: 'rstcd',
            operator: 'eq',
            dataType: 'string',
            value: values.rstcd
          }
        : null,
      values.baseId !== 'all'
        ? {
            field: 'baseId',
            operator: 'eq',
            dataType: 'string',
            value: values.baseId
          }
        : null,
      values.stnm
        ? {
            field: 'stnm',
            operator: 'contains',
            dataType: 'string',
            value: values.stnm
          }
        : null,
      values.sttp
        ? {
            field: 'sttp',
            operator: 'eq',
            dataType: 'string',
            value: values.sttp
          }
        : null
    ].filter(Boolean)
  };
};

const onSearchFinish = (values: any) => {
  currentSearchParams.value = values;
  initTable(values);
};

const onReset = (values: any) => {
  currentSearchParams.value = values;
  initTable(values);
};

const initTable = (values: any) => {
  const params = buildSearchParams(values);
  tableRef.value.getList(params);
};

// 新增
const handleAdd = () => {
  isAdd.value = true;
  editRecord.value = null;
  editVisible.value = true;
};

const handleSeeEdit = () => {
  operationLogVisible.value = true;
};

// 编辑
const handleEdit = (record: any) => {
  isAdd.value = false;
  editRecord.value = { ...record };
  editVisible.value = true;
};

// 编辑成功回调
const handleEditSuccess = () => {
  initTable(currentSearchParams.value);
};

// 删除
const deleteWeFn = async (record: any, reason: string) => {
  return deleteWeInfo({
    ids: [record.stcd],
    source: reason
  });
};

const handleDelete = (record: any) => {
  deleteModalRef.value?.open(record, () => {
    initTable(currentSearchParams.value);
  });
};

onMounted(() => {
  nextTick(() => {
    tableScrollY.value = calcTableScrollY(tableRef.value);
  });
});
</script>

<style scoped lang="scss">
.body_one {
  position: relative;
  z-index: 900;
  pointer-events: all;
}
</style>