feat: init

wupengfei

2025-04-02 32c69839e3658c81e1ac7bf66ef207215c22a4a9

 src/views/Home/Home.vue

@@ -1,308 +1,34 @@
<template>
  <LoadingLayout :loading="state.loading">
  <LoadingLayout :loading="isLoading">
    <AppContainer>
      <div class="home-top-view">
        <ProForm :mode="form">
          <ProFormItemV2 label="报案年份:">
            <ProFormDatePicker
              v-model="form.year"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="报案年份"
              :disabled-date="disabledYear"
            ></ProFormDatePicker>
          </ProFormItemV2>
          <ProFormItemV2 label="报案月份:">
            <ProFormDatePicker
              v-model="form.month"
              type="month"
              format="M"
              value-format="M"
              placeholder="报案月份"
            ></ProFormDatePicker>
          </ProFormItemV2>
          <ProFormItemV2 label="理赔渠道:">
            <ProFormSelect
              v-model="form.claimChannel"
              placeholder="理赔渠道"
              :value-enum="insuranceClaimChannelListForSelect"
              clearable
              style="width: 100%"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="报案数量:">
            <div class="home-top-view-count">{{ claimCount ?? 0 }}人</div>
          </ProFormItemV2>
        </ProForm>
        <Chart />
      </div>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem>
            <FieldSelect
              v-model="extraParamState.claimChannel"
              placeholder="理赔渠道"
              :value-enum="insuranceClaimChannelListForSelect"
              clearable
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <FieldSelect
              v-model="extraParamState.claimResult"
              placeholder="理赔结果"
              :value-enum="InsuranceClaimResultEnumText"
              clearable
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.idNumber"
              style="width: 260px"
              placeholder="身份证号码"
              :showSearchBtn="false"
            >
            </SearchInput>
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.laborContractEnterprise"
              style="width: 260px"
              placeholder="劳动合同公司"
              :showSearchBtn="false"
            >
            </SearchInput>
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.workEnterprise"
              style="width: 260px"
              placeholder="用工企业"
              @on-click-search="getList"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
        <template #btn>
          <el-button @click="handleExport()" icon="Download" type="primary">导出</el-button>
          <el-button @click="handleExportPic()" icon="Download" type="primary">导出图片</el-button>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="HomeColumns" :operationBtns="operationBtns">
      </ProTableV2>
      <ChunkCell title="待处理"> </ChunkCell>
      <ChunkCell title="数据看板"> </ChunkCell>
    </AppContainer>
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  OperationBtnType,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  defineOperationBtns,
  FieldSelect,
  ProForm,
  ProFormItemV2,
  ProFormSelect,
  ProFormDatePicker,
  ProFormText,
  ProFormCol,
  ProFormColItem,
  ProFormInputNumber,
  ProFormTextArea,
  ProFormRadio,
  ChunkCell,
  AppScrollContainer,
} from '@bole-core/components';
import { useInsuranceClaimChannelList, useGlobalEventContext } from '@/hooks';
import * as insuranceClaimServices from '@/services/api/InsuranceClaim';
import { Message, OrderInputType, downloadWithZip } from '@bole-core/core';
import { HomeColumns } from './constants';
import { downloadFile, setOSSLink, toThousand } from '@/utils';
import dayjs from 'dayjs';
import { useQuery } from '@tanstack/vue-query';
import { useInsuranceClaimCount } from './hooks';
import Chart from './components/Chart.vue';
import { InsuranceClaimResultEnumText, InsuranceClaimResultEnum } from '@/constants';

defineOptions({
  name: 'Home',
});

const operationBtns = defineOperationBtns([
  {
    data: {
      enCode: 'checkBtn',
      name: '详情',
    },
    emits: {
      onClick: (role) => goDetail(role),
    },
  },
]);

const { insuranceClaimChannelListForSelect } = useInsuranceClaimChannelList();

const eventContext = useGlobalEventContext();

const BaseState = {
  loading: true,
};

const state = reactive({ ...BaseState });

eventContext.addEvent('updateInsuranceClaim', () => {
  getList(paginationState.pageIndex);
});

onMounted(async () => {
  await getList();
  state.loading = false;
});

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params = createParams(pageIndex, pageSize);
      let res = await insuranceClaimServices.getInsuranceClaimPage(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      orderInput: [{ property: 'createTime', order: OrderInputType.Desc }],
      claimChannel: '',
      laborContractEnterprise: '',
      workEnterprise: '',
      idNumber: '',
      claimResult: '' as any as InsuranceClaimResultEnum,
    },
    columnsRenderProps: {
      insuranceBeginTime: {
        type: 'date',
        format: 'YYYY/MM/DD',
      },
      insuranceEndTime: {
        type: 'date',
        format: 'YYYY/MM/DD',
      },
      reportedTime: {
        type: 'date',
        format: 'YYYY/MM/DD HH:mm:ss',
      },
      accidentTime: {
        type: 'date',
        format: 'YYYY/MM/DD HH:mm:ss',
      },
      lastModificationTime: {
        type: 'date',
        format: 'YYYY-MM-DD HH:mm:ss',
      },
      disabilityRatio: {
        formatter: (row: API.InsuranceClaimListOutput) =>
          row.disabilityRatio == null ? '' : row.disabilityRatio + '%',
      },
      downPaymentAmount: {
        type: 'money',
        formatter: (row: API.InsuranceClaimListOutput) =>
          row.downPaymentAmount == null ? '' : toThousand(row.downPaymentAmount),
      },
      claimResultTime: { type: 'date', format: 'YYYY-MM-DD' },
      claimResult: { type: 'enum', valueEnum: InsuranceClaimResultEnumText },
    },
  }
);

function createParams(pageIndex: number, pageSize: number) {
  let params: API.QueryInsuranceClaimPageInput = {
    pageModel: {
      rows: pageSize,
      page: pageIndex,
      orderInput: extraParamState.orderInput,
    },
    claimChannel: extraParamState.claimChannel,
    laborContractEnterprise: extraParamState.laborContractEnterprise,
    workEnterprise: extraParamState.workEnterprise,
    idNumber: extraParamState.idNumber,
    claimResult: extraParamState.claimResult,
  };
  return params;
}

const router = useRouter();
function goDetail(row: API.InsuranceClaimListOutput) {
  router.push({
    name: 'InsuranceClaimDetail',
    params: {
      id: row.insuranceOrderId,
    },
    query: {
      backRouteName: 'Home',
      insuranceClaimId: row.id,
    },
  });
}

async function handleExport() {
  try {
    if (paginationState.total === 0) {
      Message.warnMessage('没有数据可以导出哦~');
      return;
    }
    let params = createParams(paginationState.pageIndex, paginationState.pageSize);
    let res = await insuranceClaimServices.exportInsuranceClaimList(params, {
      responseType: 'blob',
      getResponse: true,
    });
    if (res) {
      downloadFile(res.data, `理赔导出`, 'xlsx');
    }
  } catch (error) {}
}

async function handleExportPic() {
  try {
    if (paginationState.total === 0) {
      Message.warnMessage('没有数据可以导出哦~');
      return;
    }
    let params = createParams(paginationState.pageIndex, paginationState.pageSize);
    let res = await insuranceClaimServices.getInsuranceClaimAttachmentUrlList(params);
    if (res) {
      if (res.length && res.length > 0) {
        downloadWithZip(
          res.map((item) => ({ data: setOSSLink(item) })),
          '理赔图片导出'
        );
      } else {
        Message.errorMessage('报案数据中未上传图片！');
      }
    }
  } catch (error) {}
}

const { form, claimCount, disabledYear } = useInsuranceClaimCount();
const isLoading = ref(false);
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.home-top-view {
  display: flex;
  padding: 20px boleGetCssVar('proTable', 'filter-bar-horizontal-padding') 0;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  background-color: #ffffff;

  .home-top-view-count {
    font-size: 30px;
    font-weight: bold;
  }
}
</style>