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

src/api/setting.ts

@@ -30,6 +30,10 @@ import {
   TenantDictionaryType,
   SettingContractNumbeRes,
   CreateCodeSettingParam,
+  FeeManagementListRes,
+  CreateFeeParams,
+  FeeManagementDetailRes,
+  FeeSelectListParams,
 } from '@/types/setting';
 import { HttpResponse } from './interceptor';
 
@@ -328,7 +332,6 @@ export function getCodeSettingList(
 ): Promise<SettingContractNumbeRes> {
   return axios.post(`contractSetting/getCodeSettingList`, params);
 }
-
 // 合同设置-合同条款设置-全部启用列表
 export function getAllTermsSettingList(): Promise<SettingContractNumbeRes> {
   return axios.get(`contractSetting/getAllTermsSettingList`);
@@ -367,3 +370,36 @@ export function getTermsSettingList(
 ): Promise<SettingContractNumbeRes> {
   return axios.post(`contractSetting/getTermsSettingList`, params);
 }
+
+// 合同设置-财务设置-全部列表（带分页）
+export function getFeeList(
+  params: PaginationParams
+): Promise<FeeManagementListRes> {
+  return axios.post(`financeSetting/getFeeList`, params);
+}
+// 合同设置-财务设置-新增
+export function createFee(params: CreateFeeParams): Promise<HttpResponse> {
+  return axios.post(`financeSetting/createFee`, params);
+}
+// 合同设置-财务设置-编辑
+export function updateFee(params: CreateFeeParams): Promise<HttpResponse> {
+  return axios.post(`financeSetting/updateFee`, params);
+}
+// 合同设置-财务设置-删除
+export function delFee(id: number): Promise<HttpResponse> {
+  return axios.get(`financeSetting/delFee?id=${id}`);
+}
+// 合同设置-财务设置-单个详情
+export function getFeeFromId(id: number): Promise<FeeManagementDetailRes> {
+  return axios.get(`financeSetting/getFee?id=${id}`);
+}
+// 合同设置-财务设置-启用/禁用
+export function disableFee(params: DisableUserParam): Promise<HttpResponse> {
+  return axios.post(`financeSetting/disableFee`, params);
+}
+// 合同设置-财务设置-获取下拉列表
+export function getUseFeeList(
+  params: FeeSelectListParams
+): Promise<FeeManagementListRes> {
+  return axios.post(`financeSetting/getUseFeeList`, params);
+}

src/composables/useDataTable.ts

@@ -67,6 +67,12 @@ interface UseDataTableReturn {
     stripe: boolean;
     tableLayout: 'auto' | 'fixed';
   };
+  // 设置页码
+  setPageSizeOptions: (sizeOptions: number[]) => void;
+  pageSizeOptions: Ref<number[]>;
+  // setShowTotal: (val: boolean) => void;
+  // setShowJumper: (val: boolean) => void;
+  // setShowPageSize: (val: boolean) => void;
 }
 
 export default function useDataTable(
@@ -93,16 +99,19 @@ export default function useDataTable(
   const current = ref(initialPage);
   const pageSize = ref(initialPageSize);
   const total = ref(0);
-
+  const copyPageSizeOptions = ref(pageSizeOptions);
+  const copyShowTotal = ref(showTotal);
+  const copyShowJumper = ref(showJumper);
+  const copyShowPageSize = ref(showPageSize);
   // 分页配置
   const pagination = computed<PaginationProps>(() => ({
     current: current.value,
     pageSize: pageSize.value,
     total: total.value,
-    showTotal,
+    showTotal: copyShowTotal.value,
-    showJumper,
+    showJumper: copyShowJumper.value,
-    showPageSize,
+    showPageSize: copyShowPageSize.value,
-    pageSizeOptions,
+    pageSizeOptions: copyPageSizeOptions.value,
   }));
 
   // 表格配置
@@ -145,7 +154,21 @@ export default function useDataTable(
     // 切换每页条数时重置到第一页
     current.value = 1;
   };
+  const setPageSizeOptions = (sizeOptions: number[]) => {
+    copyPageSizeOptions.value = sizeOptions;
+  };
 
+  // const setShowTotal = (val: boolean) => {
+  //   copyShowTotal.value = val;
+  // };
+
+  // const setShowJumper = (val: boolean) => {
+  //   copyShowJumper.value = val;
+  // };
+
+  // const setShowPageSize = (val: boolean) => {
+  //   copyShowPageSize.value = val;
+  // };
   // 重置分页
   const resetPagination = () => {
     current.value = initialPage;
@@ -168,5 +191,11 @@ export default function useDataTable(
     setPageSize,
     resetPagination,
     tableConfig,
+    setPageSizeOptions,
+    pageSizeOptions: copyPageSizeOptions,
+
+    // setShowTotal,
+    // setShowJumper,
+    // setShowPageSize,
   };
 }

src/locale/zh-CN.ts

@@ -121,6 +121,7 @@ export default {
   'setting.process': '流程设置',
   'setting.project': '项目设置',
   'setting.contract': '合同设置',
+  'setting.finance': '财务设置',
   'setting.data-dictionary': '数据字典',
 
   ...localeSettings,

src/router/routes/modules/setting.ts

@@ -126,6 +126,18 @@ const SETTING: AppRouteRecordRaw = {
             roles: ['*'],
           },
         },
+        // 财务设置
+        {
+          path: 'finance',
+          name: 'system-setting-finance',
+          component: () =>
+            import('@/views/setting/system/finance-settings/index.vue'),
+          meta: {
+            locale: 'setting.finance',
+            requiresAuth: true,
+            roles: ['*'],
+          },
+        },
         // 数据字典
         {
           path: 'data-dictionary',

src/types/setting.ts

@@ -28,7 +28,11 @@ export type ProjectTypeChecked = 0 | 1; // 是否选择：1是 0否
 export type TenantDictionaryType = 1 | 2 | 3 | 4; // 类型：1租客类型，2租客来源，3租客行业分类，4租客企业规模
 export type ContractSettingStatus = 0 | 1; // 0不回收，1回收
 export type delCodeRecycling = 0 | 1; // 删除合同编号回收：0不回收，1回收
-export type cancelCodeRecycling = 0 | 1;
+export type cancelCodeRecycling = 0 | 1; // 作废合同编号回收：0不回收，1回收
+export type CommStatus = 1 | 2; // 1:是 2否
+export type FeeManagementType = 1 | 2; // 费项属性：1收入费项，2支出费项
+export type FeeType = 1 | 2 | 3 | 4; // 费项类型：1租赁类，2物业类，3特殊类，4其他类
+
 // ==================== 部门相关类型 ====================
 export interface DepartmentFormParams {
   parent_id: number | null;
@@ -244,7 +248,36 @@ export interface CreateCodeSettingParam {
   del_code_recycling: delCodeRecycling;
   arrange: ArrangeInfo[];
 }
-
+export interface FeeManagement extends BaseEntity {
+  name: string; // 名称
+  type: CommStatus; // 是否为系统类型：1是 2否
+  feeAttribute: FeeManagementType; // 费项属性：1收入费项，2支出费项
+  feeType: FeeType; // 费项类型：1租赁类，2物业类，3特殊类，4其他类
+  isBond: CommStatus; // 是否保证金：1是，2否
+  taxRate: string; // 税率%
+  status: UserStatus; // 状态：1 启用，2 禁用
+  createUserId: number;
+  isDelete: number;
+  statusStr: string; // 状态名称
+  feeAttributeStr: string; // 费项属性名称
+  feeTypeStr: string; // 费项类型名称
+  isBondStr: string; // 是否保证金状态名称
+  createdAt: string;
+  updatedAt: string;
+}
+export interface CreateFeeParams {
+  id?: number;
+  name: string;
+  fee_attribute: FeeManagementType;
+  fee_type: FeeType;
+  is_bond: CommStatus;
+  tax_rate: string;
+}
+export interface FeeSelectListParams {
+  fee_attribute: FeeManagementType; // 费项属性：1收入费项，2支出费项
+  fee_type: FeeType; // 费项类型：1租赁类，2物业类，3特殊类，4其他类
+  is_bond: CommStatus; // 是否保证金：1是，2否
+}
 // ==================== 响应类型别名 ====================
 export type DepartmentFormRes = HttpResponse<DepartmentIdData>;
 export type DepartmentList = DepartmentItem[];
@@ -285,3 +318,10 @@ export type SettingContractNumbeRes = HttpResponse<{
   contractCodeSetting: ContractTermInfo[];
   page?: PaginationParams & PaginationResult;
 }>;
+export type FeeManagementListRes = HttpResponse<{
+  list: FeeManagement[];
+  page?: PaginationParams & PaginationResult;
+}>;
+export type FeeManagementDetailRes = HttpResponse<{
+  fee: FeeManagement;
+}>;

src/views/setting/system/contract-settings/contract-number.vue

@@ -46,7 +46,7 @@
         </a-space>
       </template>
     </DataTable>
-    <contractNumberFormModal
+    <contractNumberFormDrawer
       v-model:visible="showModal"
       :record="currentNumberInfo"
       :is-edit="isEdit"
@@ -68,7 +68,7 @@
   } from '@/api/setting';
   import { ContractTermInfo, UserStatus } from '@/types/setting';
   import { camelToSnake } from '@/utils/caseConvert';
-  import contractNumberFormModal from './modal/contract-number-form-modal.vue';
+  import contractNumberFormDrawer from './drawer/contract-number-form-drawer.vue';
 
   const {
     data: renderData,

src/views/setting/system/contract-settings/contract-terms.vue

@@ -46,7 +46,7 @@
         </a-space>
       </template>
     </DataTable>
-    <contractNumberFormModal
+    <contractNumberFormDrawer
       v-model:visible="showModal"
       :record="currentNumberInfo"
       :is-edit="isEdit"
@@ -68,7 +68,7 @@
   } from '@/api/setting';
   import { ContractTermInfo, UserStatus } from '@/types/setting';
   import { camelToSnake } from '@/utils/caseConvert';
-  import contractNumberFormModal from './modal/contract-terms-form-modal.vue';
+  import contractNumberFormDrawer from './drawer/contract-terms-form-drawer.vue';
 
   const {
     data: renderData,

src/views/setting/system/contract-settings/drawer/contract-number-form-drawer.vue

@@ -103,7 +103,6 @@
 
 <script lang="ts" setup>
   import { ref, watch, reactive, computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
   import type { FormInstance } from '@arco-design/web-vue';
   import { Message } from '@arco-design/web-vue';
   import { createCodeSetting, updateCodeSetting } from '@/api/setting';
@@ -143,7 +142,6 @@
     arrange: arrangeList.value,
   };
   const form = reactive<any>({ ...defaultForm });
-  const { t } = useI18n();
   //  校验规则
   const rules = reactive({
     name: [{ required: true, message: '请输入合同编号' }],

src/views/setting/system/contract-settings/drawer/contract-terms-form-drawer.vue

@@ -42,7 +42,6 @@
 
 <script lang="ts" setup>
   import { ref, watch, reactive } from 'vue';
-  import { useI18n } from 'vue-i18n';
   import type { FormInstance } from '@arco-design/web-vue';
   import { Message } from '@arco-design/web-vue';
   import { createCodeSetting, updateCodeSetting } from '@/api/setting';
@@ -70,7 +69,6 @@
     type: 1,
   };
   const form = reactive<any>({ ...defaultForm });
-  const { t } = useI18n();
   //  校验规则
   const rules = reactive({
     name: [{ required: true, message: '请输入合同编号' }],

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

@@ -0,0 +1,204 @@
+<template>
+  <a-drawer
+    :width="420"
+    :visible="visible"
+    :title="isEdit ? '编辑费项' : '新增费项'"
+    unmount-on-close
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      layout="vertical"
+    >
+      <!-- 费项属性 -->
+      <a-form-item label="费项属性" field="fee_attribute" required>
+        <a-radio-group
+          v-model="form.fee_attribute"
+          style="width: 100%"
+          type="button"
+        >
+          <a-radio style="width: 50%; text-align: center" :value="1"
+            >收入费项</a-radio
+          >
+          <a-radio style="width: 50%; text-align: center" :value="2"
+            >支出费项</a-radio
+          >
+        </a-radio-group>
+      </a-form-item>
+      <!-- 费项名称 -->
+      <a-form-item label="费项名称" field="name" required>
+        <a-input
+          v-model="form.name"
+          :placeholder="$t('please.enter', { placeholder: '费项名称' })"
+        />
+      </a-form-item>
+      <!-- 费项类别 -->
+      <a-form-item label="费项类别" field="fee_type" required>
+        <a-select v-model="form.fee_type">
+          <a-option
+            v-for="item in feeTypeList"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}</a-option
+          >
+        </a-select>
+      </a-form-item>
+      <!-- 是否保证金 -->
+      <a-form-item label="是否保证金" field="is_bond" required>
+        <a-radio-group v-model="form.is_bond" style="width: 100%" type="button">
+          <a-radio style="width: 50%; text-align: center" :value="1"
+            >是</a-radio
+          >
+          <a-radio style="width: 50%; text-align: center" :value="2"
+            >否</a-radio
+          >
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="费项税率" field="tax_rate" required>
+        <a-input
+          v-model.number="form.tax_rate"
+          :placeholder="$t('please.enter', { placeholder: '费项税率' })"
+          append="%"
+        />
+      </a-form-item>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, reactive } from 'vue';
+  import type { FormInstance } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
+  import { createFee, updateFee } from '@/api/setting';
+  import { CreateFeeParams } from '@/types/setting';
+
+  const props = defineProps<{
+    visible: boolean;
+    isEdit: boolean;
+    record?: CreateFeeParams | null;
+  }>();
+  const emit = defineEmits<{
+    (e: 'update:visible', val: boolean): void;
+    (e: 'submitted'): void;
+  }>();
+  const feeTypeList = [
+    { value: 1, text: '租赁类' },
+    { value: 2, text: '物业类' },
+    { value: 3, text: '特殊类' },
+    { value: 4, text: '其他类' },
+  ];
+  //  表单数据
+  const formRef = ref<FormInstance>();
+  const defaultForm: CreateFeeParams = {
+    name: '',
+    fee_attribute: 1,
+    fee_type: 1,
+    is_bond: 2,
+    tax_rate: '0',
+  };
+  const form = reactive<CreateFeeParams>({ ...defaultForm });
+  //  校验规则
+  const rules = reactive({
+    name: [{ required: true, message: '请输入合同编号' }],
+    fee_attribute: [{ required: true, message: '请选择费项属性' }],
+    fee_type: [{ required: true, message: '请选择费项类别' }],
+    is_bond: [{ required: true, message: '请选择是否保证金' }],
+    tax_rate: [
+      { required: true, message: '请输入费项税率' },
+      {
+        validator: (value, cb) => {
+          const int = Number(value);
+          if (!int || int > 100) {
+            cb('请输入正确的费项税率');
+          } else {
+            cb();
+          }
+        },
+      },
+    ],
+  });
+
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
+        if (props.isEdit && props.record) {
+          Object.assign(form, props.record);
+        } else {
+          Object.assign(form, defaultForm);
+        }
+      }
+    },
+    { immediate: true }
+  );
+  const handleOk = async () => {
+    try {
+      const valid = await formRef.value.validate();
+      if (valid) return;
+      const res = props?.isEdit ? await updateFee(form) : await createFee(form);
+      if (res?.code === 200) {
+        Message.success(res?.message);
+        emit('submitted');
+        emit('update:visible', false);
+      }
+    } catch (err) {
+      // 捕获异常，暂不处理
+    }
+  };
+
+  const handleCancel = () => {
+    emit('update:visible', false);
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(label.arco-form-item-label) {
+    width: 100% !important;
+  }
+
+  .label_wrap {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .required {
+        color: #f53f3f;
+        margin-right: 4px;
+        font-size: 16px;
+        line-height: 1;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
+  .numbering {
+    background-color: #eaf3fe;
+    padding: 5px 10px;
+    width: 100%;
+    font-weight: bold;
+  }
+
+  .arrange_left {
+    display: flex;
+    align-items: center;
+
+    .text {
+      margin-left: 7px;
+    }
+  }
+</style>

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

@@ -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>

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

@@ -0,0 +1,66 @@
+<template>
+  <a-card title="费项管理">
+    <template #extra>
+      <a-button type="primary" @click="handleAdd"><icon-plus />新增</a-button>
+    </template>
+    <a-tabs v-model:active-key="currentTabsKey" class="tabs_card">
+      <a-tab-pane key="1" title="收入费项">
+        <feeManagementTable
+          v-if="currentTabsKey === '1'"
+          :is-submitted="isSubmitted"
+          :type="1"
+          @edit="handleEdit"
+        />
+      </a-tab-pane>
+      <a-tab-pane key="2" title="支出费项">
+        <feeManagementTable
+          v-if="currentTabsKey === '2'"
+          :is-submitted="isSubmitted"
+          :type="2"
+          @edit="handleEdit"
+        />
+      </a-tab-pane>
+    </a-tabs>
+    <feeManagementDrawer
+      v-model:visible="visible"
+      :is-edit="isEdit"
+      :record="currentRecord"
+      @submitted="onSubmitted"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { getFeeFromId } from '@/api/setting';
+  import feeManagementTable from './fee-management-table.vue';
+  import feeManagementDrawer from './drawer/fee-management-drawer.vue';
+
+  const currentTabsKey = ref<string>('1');
+  const visible = ref<boolean>(false);
+  const isEdit = ref<boolean>(false);
+  const currentRecord = ref<any | null>(null);
+  const isSubmitted = ref<boolean>(false);
+  const handleAdd = () => {
+    isEdit.value = false;
+    currentRecord.value = null;
+    visible.value = true;
+    isSubmitted.value = false;
+  };
+  const getFeeInfoFromId = async (id: number) => {
+    const { code, data } = await getFeeFromId(id);
+    if (code === 200 && data) {
+      const { fee } = data;
+      if (fee) currentRecord.value = fee;
+    }
+  };
+  const handleEdit = async (id: number) => {
+    isEdit.value = true;
+    isSubmitted.value = false;
+    await getFeeInfoFromId(id);
+    visible.value = true;
+  };
+  const onSubmitted = () => {
+    isSubmitted.value = true;
+  };
+</script>

src/views/setting/system/finance-settings/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="system-setting-general">
+    <Breadcrumb
+      :items="['menu.setting', 'menu.setting.system', 'setting.finance']"
+    />
+    <a-card class="full_height" :title="t('setting.finance')">
+      <a-row :gutter="12">
+        <a-col :span="6">
+          <ul class="setting_tabs_list">
+            <li
+              v-for="item in financeSettingTabs"
+              :key="item.id"
+              :class="[
+                'setting_tabs_item',
+                { isChoose: currentSettingId === item.id },
+              ]"
+              @click="chooseSettingTab(item.id)"
+            >
+              {{ item.text }}
+            </li>
+          </ul>
+        </a-col>
+        <a-col :span="18">
+          <feeManagement v-if="currentSettingId === 5" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import feeManagement from './fee-management.vue';
+  // import { } from '@/api/setting';
+  // import { Message } from '@arco-design/web-vue';
+
+  const { t } = useI18n();
+  const currentSettingId = ref<number>(5);
+  const financeSettingTabs = [
+    { id: 1, text: '财务通用' },
+    { id: 2, text: '通知单模板' },
+    { id: 3, text: '通知单发送方式' },
+    { id: 4, text: '流水账户' },
+    { id: 5, text: '费项管理' },
+  ];
+  const chooseSettingTab = (id: number) => {
+    if (id === currentSettingId.value) return;
+    currentSettingId.value = id;
+  };
+</script>
+
+<style lang="less" scoped>
+  .system-setting-general {
+    .setting_tabs_list {
+      border-radius: 6px;
+      border: 1px solid rgba(239, 239, 239, 1);
+      padding: 14px 0;
+      padding-bottom: 200px;
+
+      .setting_tabs_item {
+        padding: 0 20px;
+        height: 42px;
+        line-height: 42px;
+        color: #000;
+        background-color: #fff;
+        cursor: pointer;
+
+        &.isChoose {
+          background-color: #efefef;
+        }
+      }
+    }
+
+    .project_house_list {
+      .project_house_item {
+        margin-top: 20px;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .options {
+          display: flex;
+          align-items: center;
+          background-color: #f2f3f5;
+          width: 430px;
+          height: 36px;
+          margin-top: 10px;
+          padding: 0 3px;
+
+          .subItem {
+            flex: 1;
+            text-align: center;
+            padding: 4px 0;
+            cursor: pointer;
+
+            &.isActive {
+              background-color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .in_rented_area,
+    .cumulative_leasing_rate {
+      .tips {
+        color: rgba(187, 187, 187, 1);
+        font-size: 12px;
+        margin-top: 4px;
+      }
+
+      .desc {
+        background-color: #eaf3fe;
+        border-radius: 2px;
+        background-color: rgba(232, 243, 255, 1);
+        color: rgba(29, 33, 41, 1);
+        font-size: 14px;
+        text-align: left;
+        border: 0px solid rgba(121, 121, 121, 1);
+        padding: 12px;
+        margin-top: 12px;
+      }
+
+      .title_item {
+        margin-top: 24px;
+      }
+    }
+  }
+</style>