feat: 页面

wupengfei

2025-07-30 75d473492fc9d818de85eaa0e934cdb5d309f441

feat: 页面

 src/router/index.ts

@@ -218,6 +218,60 @@
    ],
  },
  {
    path: '/ServiceChargeManage',
    redirect: 'noRedirect',
    component: Layout,
    hidden: false,
    alwaysShow: true,
    meta: {
      rank: 10040,
      title: '服务费管理',
      rootMenu: true,
      icon: 'home',
    },
    children: [
      {
        path: '/ServiceChargeManageList',
        name: 'ServiceChargeManageList',
        hidden: false,
        alwaysShow: true,
        component: () => import('@/views/ServiceChargeManage/ServiceChargeManage.vue'),
        meta: {
          rank: 10041,
          title: '服务费管理',
          // rootMenu: true,
          icon: 'home',
        },
      },
      {
        path: '/ServiceChargeSettle',
        name: 'ServiceChargeSettle',
        hidden: false,
        alwaysShow: true,
        component: () => import('@/views/ServiceChargeManage/ServiceChargeSettle.vue'),
        meta: {
          rank: 10042,
          title: '结算',
          // rootMenu: true,
          icon: 'home',
        },
      },
      {
        path: '/ServiceChargeDetail',
        name: 'ServiceChargeDetail',
        hidden: false,
        alwaysShow: true,
        component: () => import('@/views/ServiceChargeManage/ServiceChargeDetail.vue'),
        meta: {
          rank: 10042,
          title: '详情',
          // rootMenu: true,
          icon: 'home',
        },
      },
    ],
  },
  {
    path: '/Login',
    name: 'Login',
    hidden: true,

 src/views/ServiceChargeManage/ServiceChargeDetail.vue

New file
@@ -0,0 +1,46 @@
<template>
  <LoadingLayout :loading="isLoading">
    <AppScrollContainer>
      <ChunkCell title="结算单详情"> </ChunkCell>
      <ChunkCell title="结算流程"> </ChunkCell>
      <ChunkCell title="结算名单"> </ChunkCell>
    </AppScrollContainer>
  </LoadingLayout>
</template>
<script setup lang="ts">
import { LoadingLayout, AppScrollContainer, ChunkCell } from '@bole-core/components';
import {} from '@/constants';
import * as flexTaskServices from '@/services/api/FlexTask';
import { useQuery } from '@tanstack/vue-query';

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

const route = useRoute();
const id = (route.params.id as string) ?? '';

const state = reactive({
  loading: true,
});

const { isLoading } = useQuery({
  queryKey: ['flexTaskServices/getFlexTaskDetail', id],
  queryFn: async () => {
    return await flexTaskServices.getFlexTaskDetail(
      { id: id },
      {
        showLoading: false,
      }
    );
  },
  onSuccess(data) {},
  enabled: !!id,
});

onMounted(() => {});
</script>

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

 src/views/ServiceChargeManage/ServiceChargeManage.vue

New file
@@ -0,0 +1,224 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem tip-content="结算单状态">
            <FieldRadio
              v-model="extraParamState.flexEnterpriseSettingStatus"
              :value-enum="[
                { label: '已安排', value: 1 },
                { label: '待安排', value: 0 },
              ]"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="结算状态">
            <FieldRadio
              v-model="extraParamState.flexEnterpriseSettingStatus"
              :value-enum="[
                { label: '已安排', value: 1 },
                { label: '待安排', value: 0 },
              ]"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <FieldDatePicker
              v-model="extraParamState.flexEnterpriseSettingStatus"
              type="daterange"
              range-separator="~"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              clearable
              @change="getList()"
              tooltipContent="创建时间"
            ></FieldDatePicker>
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.searchWord"
              style="width: 250px"
              placeholder="任务名称"
              @on-click-search="getList"
              @keyup.enter="getList()"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
        <template #btn>
          <el-button type="primary" link @click="handleDownloadTemplate()">结算单模板</el-button>
          <el-button type="primary" @click="handleDownloadTemplate()">上传结算单</el-button>
          <el-button type="primary" @click="handleDownloadTemplate()">导出</el-button>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2
        v-bind="proTableProps"
        :columns="ServiceChargeManageColumns"
        :operationBtns="operationBtns"
      >
        <template #operationBtn-uploadBtn="{ data, row }">
          <BlFileUpload
            v-model:file-url="row.fileUrl"
            :limitFileSize="2"
            :limit="1"
            accept="doc,docx"
            ref="uploadRef"
            :showTip="false"
            :on-success="(response) => handleUpload(response, row)"
            :show-file-list="false"
            class="pro-table-operation-btn upload-style-btn"
          >
            <el-button link type="primary">上传</el-button>
          </BlFileUpload>
        </template>
      </ProTableV2>
    </AppContainer>
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  FieldDatePicker,
  FieldRadio,
  defineOperationBtns,
  BlFileUpload,
} from '@bole-core/components';
import * as flexEnterpriseServices from '@/services/api/FlexEnterprise';
import { ServiceChargeManageColumns } from './constants';
import { FlexEnterpriseSettingStatus, Gender } from '@/constants';
import { OrderInputType } from '@bole-core/core';
import { downloadFileByUrl } from '@/utils';

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

const operationBtns = defineOperationBtns([
  {
    data: {
      enCode: 'uploadBtn',
      name: '上传',
    },
  },
  {
    data: {
      enCode: 'settleBtn',
      name: '结算',
    },
    emits: {
      onClick: (role) => goSettle(role),
    },
  },
  {
    data: {
      enCode: 'detailBtn',
      name: '详情',
    },
    emits: {
      onClick: (role) => goDetail(role),
    },
  },
  {
    data: {
      enCode: 'exportBtn',
      name: '导出',
    },
    emits: {
      onClick: (role) => handleExport(role),
    },
  },
]);

const router = useRouter();

const BaseState = {
  loading: true,
};

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

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

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetFlexEnterpriseInput = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
        flexEnterpriseSettingStatus: extraParamState.flexEnterpriseSettingStatus,
        searchWord: extraParamState.searchWord,
      };

      let res = await flexEnterpriseServices.getFlexEnterpriseList(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {
      console.log('error: ', error);
    }
  },
  {
    defaultExtraParams: {
      searchWord: '',
      orderInput: [{ property: 'id', order: OrderInputType.Desc }],
      flexEnterpriseSettingStatus: '' as any as FlexEnterpriseSettingStatus,
    },
    queryKey: ['flexEnterpriseServices/getFlexEnterpriseList'],
    columnsRenderProps: {},
  }
);

function goSettle(row) {
  router.push({
    name: 'ServiceChargeSettle',
    query: {
      id: row.id,
    },
  });
}

function goDetail(row) {
  router.push({
    name: 'ServiceChargeDetail',
    query: {
      id: row.id,
    },
  });
}

function handleUpload(val, row) {
  console.log('val: ', val);
}

function handleExport(val) {
  console.log('val: ', val);
}

function handleDownloadTemplate() {
  downloadFileByUrl('', '结算单模板');
}
</script>

 src/views/ServiceChargeManage/ServiceChargeSettle.vue

New file
@@ -0,0 +1,46 @@
<template>
  <LoadingLayout :loading="isLoading">
    <AppScrollContainer>
      <ChunkCell title="付款方信息"> </ChunkCell>
      <ChunkCell title="收款方信息"> </ChunkCell>
      <ChunkCell title="转账信息"> </ChunkCell>
    </AppScrollContainer>
  </LoadingLayout>
</template>
<script setup lang="ts">
import { LoadingLayout, AppScrollContainer, ChunkCell } from '@bole-core/components';
import {} from '@/constants';
import * as flexTaskServices from '@/services/api/FlexTask';
import { useQuery } from '@tanstack/vue-query';

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

const route = useRoute();
const id = (route.params.id as string) ?? '';

const state = reactive({
  loading: true,
});

const { isLoading } = useQuery({
  queryKey: ['flexTaskServices/getFlexTaskDetail', id],
  queryFn: async () => {
    return await flexTaskServices.getFlexTaskDetail(
      { id: id },
      {
        showLoading: false,
      }
    );
  },
  onSuccess(data) {},
  enabled: !!id,
});

onMounted(() => {});
</script>

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

 src/views/ServiceChargeManage/constants/columns.ts

New file
@@ -0,0 +1,86 @@
import { defineColumns } from '@bole-core/components';

export const ServiceChargeManageColumns = defineColumns([
  {
    id: '1',
    enCode: 'name',
    name: '所属任务',
    width: 180,
  },
  {
    id: '2',
    enCode: 'name',
    name: '发放方式',
    width: 180,
  },
  {
    id: '3',
    enCode: 'name',
    name: '收款人',
  },
  {
    id: '4',
    enCode: 'name',
    name: '收款账号',
  },
  {
    id: '5',
    enCode: 'name',
    name: '结算单状态',
    width: 140,
  },
  {
    id: '6',
    enCode: 'name',
    name: '结算单名称',
    width: 140,
  },
  {
    id: '7',
    enCode: 'signNum',
    name: '上传时间',
    width: 140,
  },
  {
    id: '8',
    enCode: 'name',
    name: '结算状态',
    width: 140,
  },
  {
    id: '9',
    enCode: 'name',
    name: '实发金额',
    width: 160,
  },
  {
    id: '10',
    enCode: 'name',
    name: '结算金额',
    width: 160,
  },
  {
    id: '11',
    enCode: 'name',
    name: '失败金额',
    width: 160,
  },
  {
    id: '12',
    enCode: 'name',
    name: '退款金额',
    width: 160,
  },
  {
    id: '13',
    enCode: 'name',
    name: '结算时间',
    width: 160,
  },
  {
    id: '14',
    enCode: 'name',
    name: '备注',
    width: 160,
  },
]);

 src/views/ServiceChargeManage/constants/index.ts

New file
@@ -0,0 +1 @@
export * from './columns';