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

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

    <BasicTable
      ref="tableRef"
      :enableEllipsis="true"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :list-url="getWqPageList"
    >
      <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>

    <EditWqModal
      v-model:open="editVisible"
      :record="editRecord"
      :is-add="isAdd"
      @success="handleEditSuccess"
    />

    <DeleteConfirmModal
      ref="deleteModalRef"
      :delete-fn="deleteWqFn"
      :label="'水质测站'"
      title="删除水质测站"
      @success="handleEditSuccess"
    />

    <!-- 操作日志 Modal -->
    <OperationLogModal
      v-model:open="operationLogVisible"
      :table-name="'SD_WQ_B_H'"
      :record-name-title="'测站'"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import WqSearch from './WqSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import EditWqModal from './EditWqModal.vue';
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import OperationLogModal from '@/components/OperationLogModal/index.vue';
import { getWqPageList, deleteWqInfo } 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: 150,
    ellipsis: true
  },
  {
    key: 'stcd',
    title: '水质站站码',
    dataIndex: 'stcd',
    visible: true,
    width: 180,
    fixed: 'left',
    ellipsis: true
  },
  
  {
    key: 'sttpName',
    title: '测站类型',
    dataIndex: 'sttpName',
    visible: true,
    width: 120,
    ellipsis: true
  },
  
  {
    key: 'baseName',
    title: '水电基地',
    dataIndex: 'baseName',
    visible: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'ennm',
    title: '所属电站',
    dataIndex: 'ennm',
    visible: true,
    width: 150,
    ellipsis: true
  },
 
  {
    key: 'dtinTypeName',
    title: '类别',
    dataIndex: 'dtinTypeName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'wwqtgName',
    title: '水质要求',
    dataIndex: 'wwqtgName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'mwayName',
    title: '监测方式',
    dataIndex: 'mwayName',
    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,
    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' && values.baseId != null
        ? { 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 deleteWqFn = async (record: any, reason: string) => {
  return deleteWqInfo({
    ids: [record.stcd],
    source: reason
  });
};

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

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

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