leaser_front/src/views/setting/system/finance-settings/fee-management-table.vue

<template>
  <DataTable
    :data="renderData"
    pagination
    :columns="projectColumn"
    :loading="loading"
    :total="total"
    :current="current"
    :page-size="pageSize"
    :page-size-options="pageSizeOptions"
    @page-change="onPageChange"
    @page-size-change="onPageSizeChange"
  >
    <template #status="{ record }">
      <a-tag :color="record.status == 1 ? 'green' : 'red'">
        {{ record.status == 1 ? $t('enable') : $t('disable') }}</a-tag
      >
    </template>
    <template #operate="{ record }">
      <a-space>
        <a-button type="primary" @click="handleEdit(record.id)">
          {{ $t('edit') }}</a-button
        >
        <a-popover trigger="click" position="bottom">
          <a-button>{{ $t('more') }}</a-button>
          <template #content>
            <a-space direction="vertical">
              <a-button @click="handleToggleStatus(record.id, record.status)">
                {{ record.status == 1 ? $t('disable') : $t('enable') }}
              </a-button>
              <a-button status="danger" @click="handleDel(record.id)">
                {{ $t('delete') }}
              </a-button>
            </a-space>
          </template>
        </a-popover>
      </a-space>
    </template>
  </DataTable>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import useDataTable from '@/composables/useDataTable';
  import type { TableColumnData } from '@arco-design/web-vue';
  import { getFeeList, disableFee, delFee } from '@/api/setting';
  import { FeeManagement } from '@/types/setting';
  import { FeeType, UserStatus } from '@/types/comm';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps<{
    type: FeeType;
    isSubmitted: boolean;
  }>();
  const {
    data: renderData,
    columns: projectColumn,
    total,
    loading,
    current,
    pageSize,
    setData,
    setColumns,
    setTotal,
    setLoading,
    setCurrent,
    setPageSize,
  } = useDataTable({
    initialPage: 1,
    initialPageSize: 5,
    pageSizeOptions: [5, 10, 15, 20],
  });
  const pageSizeOptions = [5, 10, 15, 20];
  const feeListData = ref<FeeManagement[]>([]);
  const getFeeListData = async () => {
    setLoading(true);
    const params = {
      page: current.value,
      page_size: pageSize.value,
      fee_attribute: props.type,
    };
    const { code, data } = await getFeeList(params);
    setLoading(false);
    if (code === 200) {
      const { list, page } = data;
      const feeList = list ?? [];
      if (feeList.length === 0) return;
      feeListData.value = feeList;
      setData(feeListData.value);
      setTotal(page?.total ? page.total : 0);
    }
  };

  // 列配置
  const columns: TableColumnData[] = [
    {
      title: '费项名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
      ellipsis: true,
    },
    {
      title: '类别',
      dataIndex: 'feeTypeStr',
      key: 'feeTypeStr',
      width: 150,
      ellipsis: true,
    },
    {
      title: '是否保证金',
      dataIndex: 'isBondStr',
      key: 'isBond',
    },
    {
      title: '税率',
      dataIndex: 'taxRate',
      key: 'taxRate',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      slotName: 'status',
    },
    {
      title: '操作',
      key: 'operate',
      slotName: 'operate',
      width: 200,
    },
  ];
  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    current.value = page;
    getFeeListData();
  };
  const onPageSizeChange = (size: number) => {
    setPageSize(size);
    pageSize.value = size;
    getFeeListData();
  };
  const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void;
    (e: 'edit', id: number): void;
  }>();
  const handleEdit = (id: number) => {
    emit('edit', id);
  };
  const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
    try {
      const status: UserStatus = currentStatus === 1 ? 2 : 1;
      const param = { id, status };
      const { code, message } = await disableFee(param);
      if (code === 200) {
        Message.success(message);
        getFeeListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };
  const handleDel = async (id: number) => {
    try {
      const { code, message } = await delFee(id);
      if (code === 200) {
        Message.success(message);
        getFeeListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };

  watch(
    () => props.isSubmitted,
    (newVal) => {
      if (newVal) {
        setCurrent(1);
        getFeeListData();
      }
    }
  );

  onMounted(() => {
    setColumns(columns);
    getFeeListData();
  });
</script>