feat: 设置-财务设置-费项管理

2025-07-28 23:00:41 +08:00
parent 381c40eeb4
commit f1016ece6c
13 changed files with 726 additions and 16 deletions
@@ -0,0 +1,195 @@
+<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 { FeeType, FeeManagement, UserStatus } from '@/types/setting';
+  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) getFeeListData();
+    }
+  );
+
+  onMounted(() => {
+    setColumns(columns);
+    getFeeListData();
+  });
+</script>