leaser_front/src/views/business/project/index.vue

<template>
  <div class="business_project_wrap">
    <Breadcrumb :items="['menu.business', 'menu.business.project']" />
    <a-card class="general-card full_height">
      <template #title>
        <div class="card-title_between">
          <p class="title">{{ t('menu.business.project') }}</p>
          <div class="flex_center_between">
            <a-space>
              <a-input-search
                v-model="queryParams.keyword"
                :style="{ width: '320px' }"
                :placeholder="t('please.enter', { placeholder: t('content') })"
                @search="handleSearch"
              />
              <a-button>
                <template #icon>
                  <icon-filter />
                </template>
                {{ t('table.filter') }}
              </a-button>
              <a-button>
                <template #icon>
                  <icon-download />
                </template>
                {{ t('table.export') }}
              </a-button>
              <a-button type="primary" @click="handleAddProject">
                <template #icon>
                  <icon-plus />
                </template>
                {{ t('add-project') }}
              </a-button>
            </a-space>
          </div>
        </div>
      </template>
      <!-- 使用新的 DataTable 组件 -->
      <DataTable
        :data="renderData"
        :columns="projectColumn"
        :loading="loading"
        :total="total"
        :current="current"
        :page-size="pageSize"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #type="{ record }">
          <a-tag checkable :color="getProjectTypeColor(record.type)">
            {{ record.typeName }}
          </a-tag>
        </template>
        <template #rate="{ record }">
          <a-progress
            :percent="Number(record.rentRate)"
            color="green"
            :style="{ width: '100px' }"
          />
        </template>
        <template #operate="{ record }">
          <a-space>
            <a-button>查看</a-button>
            <a-button
              :loading="isLoadingEdit"
              type="primary"
              @click="handleEditProject(record.id)"
              >编辑</a-button
            >
            <a-button>更多</a-button>
          </a-space>
        </template>
      </DataTable>
    </a-card>
    <projectFormDrawer
      v-model:visible="showDrawer"
      :is-edit="isEdit"
      :record="currentProjectInfo"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';
  import type { TableColumnData } from '@arco-design/web-vue';
  import useDataTable from '@/composables/useDataTable';
  import { ProjectItem, ProjectInfo } from '@/types/business';
  import { getProjectList, getProjectDetail } from '@/api/business';
  import { ProjectPaginationParams, ProjectType } from '@/types/comm';
  import projectFormDrawer from './drawer/project-form-drawer.vue';

  const { t } = useI18n();
  const { loading } = useLoading(false);
  const showDrawer = ref<boolean>(false);
  const isLoadingEdit = ref<boolean>(false);
  const isEdit = ref<boolean>(false);
  const currentProjectInfo = ref<ProjectInfo | null>(null);
  const projectList = ref<ProjectItem[]>([]);
  const {
    data: renderData,
    columns: projectColumn,
    total,
    current,
    pageSize,
    setData,
    setColumns,
    setTotal,
    setCurrent,
    setPageSize,
    setLoading,
  } = useDataTable({
    initialPage: 1,
    initialPageSize: 10,
    pageSizeOptions: [10, 20, 50, 100],
  });

  // 列配置
  const columns: TableColumnData[] = [
    { title: '项目信息', dataIndex: 'name', key: 'name' },
    { title: '项目类型', dataIndex: 'type', key: 'type', slotName: 'type' },
    { title: '管理面积', dataIndex: 'RentAreaStr', key: 'RentAreaStr' },
    { title: '可租面积', dataIndex: 'RoomAreaStr', key: 'RoomAreaStr' },
    {
      title: '出租率',
      dataIndex: 'RentRateStr',
      key: 'RentRateStr',
      slotName: 'rate',
    },
    { title: '房源数量', dataIndex: 'roomNum', key: 'roomNum' },
    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
    { title: '操作', key: 'operate', slotName: 'operate', width: 200 },
  ];
  const queryParams = ref<ProjectPaginationParams>({
    page: current.value,
    page_size: pageSize.value,
    keyword: '',
    type: null,
    province_ids: null,
    rent_rate_min: null,
    rent_rate_max: null,
  });
  const getProjectListData = async () => {
    setLoading(true);
    const { code, data } = await getProjectList(queryParams.value);
    if (code === 200 && data) {
      const { projectsList, page } = data;
      projectList.value = Array.isArray(projectsList) ? projectsList : [];
      setData(projectList.value);
      setTotal(page?.total ? page.total : 0);
    }
    setLoading(false);
  };
  const getProjectDetailData = async (id: number) => {
    isLoadingEdit.value = true;
    const { code, data } = await getProjectDetail(id);
    if (code === 200 && data) {
      currentProjectInfo.value = data.project;
    }
    isLoadingEdit.value = false;
  };

  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    current.value = page;
  };
  const onPageSizeChange = (size: number) => {
    setPageSize(size);
    pageSize.value = size;
  };
  const handleAddProject = () => {
    isEdit.value = false;
    currentProjectInfo.value = null;
    showDrawer.value = true;
  };
  const handleEditProject = async (id: number) => {
    isEdit.value = true;
    await getProjectDetailData(id);
    showDrawer.value = true;
  };
  const handleSearch = () => {
    getProjectListData();
  };
  const getProjectTypeColor = (type: ProjectType) => {
    const typeMap = { 1: 'green', 2: 'red', 3: 'orange' };
    return typeMap[type];
  };
  onMounted(() => {
    setColumns(columns);
    getProjectListData();
  });
</script>