lingji-work-fe/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

<template>
  <div class="business-wrap">
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
      <div class="top flex h-64px px-24px py-10px justify-between items-center">
        <p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
      </div>

      <div class="container px-24px pt-12px pb-24px">
        <div class="filter-row flex mb-20px">
          <div class="filter-row-item flex items-center">
            <span class="label">服务/产品</span>
            <a-space size="medium">
              <a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
                <template #prefix>
                  <icon-search />
                </template>
              </a-input>
            </a-space>
          </div>
          <div class="filter-row-item flex items-center">
            <span class="label">时间筛选</span>
            <a-space class="w-240px">
              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
            </a-space>
          </div>

          <div class="filter-row flex">
            <a-button class="w-84px search-btn mr-12px" size="medium">
              <template #icon>
                <icon-search />
              </template>
              <template #default>搜索</template>
            </a-button>
            <a-button class="w-84px reset-btn" size="medium">
              <template #icon>
                <icon-refresh />
              </template>
              <template #default>重置</template>
            </a-button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
    >
      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
      </a-table>
      <div class="pagination-box">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
          show-total
          show-jumper
          show-page-size
          :current="pageInfo.page"
          :page-size="pageInfo.pageSize"
          @change="onPageChange"
          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const pageInfo = reactive({
  page: 1,
  pageSize: 20,
  total: 0,
});
const query = reactive({
  name: ref(''),
});

const listResult = reactive({
  data: [],
  total: 0,
});
const onPageSizeChange = () => {};
const tableData = ref([]);
const handleChange = () => {};
const onPageChange = () => {};
const columns = [
  {
    title: '服务/产品',
    dataIndex: 'service_name',
    slotName: 'rank',
    width: 60,
    minWidth: 60,
  },
  {
    title: '生成日期',
    dataIndex: 'create_time',
    width: 120,
    minWidth: 120,
  },
  {
    titleSlotName: 'hotTitle',
    width: 180,
    minWidth: 180,
    title: '目标客群',
    dataIndex: 'customer',
    slotName: 'hot',
  },
  {
    title: '价格区间',
    dataIndex: 'price',
    width: 120,
    minWidth: 120,
  },
  {
    titleSlotName: 'lasterUpdateTime',
    title: '最后更新日期',
    dataIndex: 'volumeRate',
    width: 180,
    minWidth: 180,
    slotName: 'lasterUpdateTime',
  },
  {
    title: '操作人',
    dataIndex: 'operator',
    width: 120,
    minWidth: 120,
  },
  {
    title: '操作',
    dataIndex: 'operator',
    width: 120,
    minWidth: 120,
  },
];
</script>

<style scoped lang="scss">
.business-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.search-btn) {
    border-radius: 4px;
    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
    color: #6d4cfe;
  }

  :deep(.edit-btn) {
    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
    color: #6d4cfe;
  }

  :deep(.reset-btn) {
    border-radius: 4px;
    border: 1px solid var(--BG-500, #b1b2b5);
    background: var(--BG-white, #fff);
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-select-view-single),
  :deep(.arco-textarea-wrapper),
  :deep(.arco-picker),
  :deep(.arco-select-view-multiple) {
    border-radius: 4px;
    border-color: #d7d7d9;
    background-color: #fff;

    &:focus-within,
    &.arco-input-focus {
      background-color: var(--color-bg-2);
      border-color: rgb(var(--primary-6));
      box-shadow: 0 0 0 0 var(--color-primary-light-2);
    }
  }

  .table-wrap {
    width: 100%;

    .pagination-box {
      display: flex;
      width: 100%;
      padding: 16px 24px;
      justify-content: flex-end;
      align-items: center;
    }

    margin-top: 20px;
  }

  .container {
    .filter-row {
      .filter-row-item {
        &:not(:last-child) {
          margin-right: 24px;
        }

        .label {
          margin-right: 8px;
          color: #211f24;
          font-family: 'PuHuiTi-Medium';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          flex-shrink: 0;
          line-height: 22px; /* 157.143% */
        }
      }
    }
  }
}
</style>