From 1dd18a43eeddf5baf9c425dd5c37b5e0a0d5f781 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 01 八月 2025 14:32:16 +0800
Subject: [PATCH] feat: 页面
---
src/views/ServiceChargeManage/ServiceChargeDetail.vue | 202 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 195 insertions(+), 7 deletions(-)
diff --git a/src/views/ServiceChargeManage/ServiceChargeDetail.vue b/src/views/ServiceChargeManage/ServiceChargeDetail.vue
index 5d19a9e..507a280 100644
--- a/src/views/ServiceChargeManage/ServiceChargeDetail.vue
+++ b/src/views/ServiceChargeManage/ServiceChargeDetail.vue
@@ -1,27 +1,163 @@
<template>
<LoadingLayout :loading="isLoading">
<AppScrollContainer>
- <ChunkCell title="缁撶畻鍗曡鎯�"> </ChunkCell>
- <ChunkCell title="缁撶畻娴佺▼"> </ChunkCell>
- <ChunkCell title="缁撶畻鍚嶅崟"> </ChunkCell>
+ <ChunkCell title="缁撶畻鍗曡鎯�">
+ <template #titleRight>
+ <el-button type="primary" icon="Download" @click="handleDownloadTemplate()"
+ >鐢靛瓙鍥炲崟涓嬭浇</el-button
+ >
+ </template>
+ <ProForm :model="form" ref="formRef" label-width="120px" :is-read="true">
+ <ProFormCol>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="鎵�灞炰换鍔�:" prop="name">
+ <ProFormText v-model="form.name"> </ProFormText>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="浠诲姟缂栧彿:" prop="name">
+ <ProFormText v-model="form.name"> </ProFormText>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8"></ProFormColItem>
+ </ProFormCol>
+ <ProFormCol>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="缁撶畻鍗曞悕绉�:" prop="name">
+ <ProFormText v-model="form.name"> </ProFormText>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="涓婁紶鏃堕棿:" prop="name">
+ <ProFormDatePicker
+ v-model="form.name"
+ type="date"
+ format="YYYY-MM-DD HH:mm"
+ ></ProFormDatePicker>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8"></ProFormColItem>
+ </ProFormCol>
+ <ProFormCol>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="缁撶畻閲戦:" prop="money">
+ <ProFormInputNumber v-model="form.money"> </ProFormInputNumber>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="瀹炲彂閲戦:" prop="money">
+ <ProFormInputNumber v-model="form.money"> </ProFormInputNumber>
+ </ProFormItemV2>
+ </ProFormColItem>
+ <ProFormColItem :span="8">
+ <ProFormItemV2 label="鐘舵��:" prop="status">
+ <ProFormRadio v-model="form.status" :value-enum="[{ label: '鏄�', value: 1 }]">
+ </ProFormRadio>
+ </ProFormItemV2>
+ </ProFormColItem>
+ </ProFormCol>
+ </ProForm>
+ </ChunkCell>
+ <ChunkCell title="缁撶畻娴佺▼">
+ <div class="step-wrapper">
+ <el-steps :active="1" align-center finish-status="process">
+ <el-step title="缁撶畻鍗曚笂浼�" :icon="Edit">
+ <template #description>
+ <div>鍒涘缓浜�:{{ form.name }}</div>
+ <div>鏃堕棿:{{ form.name }}</div>
+ <TextOverTooltip>澶囨敞:{{ form.name }}</TextOverTooltip>
+ </template>
+ </el-step>
+ <el-step title="缁撶畻浠樻" :icon="Upload">
+ <template #description>
+ <div>鍒涘缓浜�:{{ form.name }}</div>
+ <div>鏃堕棿:{{ form.name }}</div>
+ <TextOverTooltip
+ >澶囨敞:{{ 'form.nameform.nameform.eform.nameform.nameform.name' }}</TextOverTooltip
+ >
+ </template>
+ </el-step>
+ </el-steps>
+ </div>
+ </ChunkCell>
+ <ChunkCell title="缁撶畻鍚嶅崟">
+ <ProTableQueryFilterBar @on-reset="reset">
+ <template #query>
+ <QueryFilterItem>
+ <SearchInput
+ v-model="extraParamState.searchWord"
+ style="width: 300px"
+ placeholder="浜哄憳濮撳悕/韬唤璇佸彿/鎵嬫満鍙�"
+ @on-click-search="getList"
+ >
+ </SearchInput>
+ </QueryFilterItem>
+ </template>
+ </ProTableQueryFilterBar>
+ <ProTableV2
+ v-bind="proTableProps"
+ :columns="SettlementListColumns"
+ :operationBtns="operationBtns"
+ :auto-height="false"
+ ref="proTable"
+ :tableProps="{
+ maxHeight: '400px',
+ }"
+ >
+ </ProTableV2>
+ </ChunkCell>
</AppScrollContainer>
</LoadingLayout>
</template>
<script setup lang="ts">
-import { LoadingLayout, AppScrollContainer, ChunkCell } from '@bole-core/components';
+import {
+ LoadingLayout,
+ AppScrollContainer,
+ ChunkCell,
+ ProForm,
+ ProFormItemV2,
+ ProFormText,
+ ProFormCol,
+ ProFormColItem,
+ ProFormDatePicker,
+ ProFormInputNumber,
+ ProFormRadio,
+ useTable,
+ ProTableV2,
+ defineOperationBtns,
+ SearchInput,
+ QueryFilterItem,
+ ProTableQueryFilterBar,
+ TextOverTooltip,
+} from '@bole-core/components';
+import { Edit, Upload } from '@element-plus/icons-vue';
+import { SettlementListColumns } from './constants';
import {} from '@/constants';
import * as flexTaskServices from '@/services/api/FlexTask';
import { useQuery } from '@tanstack/vue-query';
+import { downloadFileByUrl, OrderInputType } from '@bole-core/core';
+import * as flexEnterpriseServices from '@/services/api/FlexEnterprise';
defineOptions({
name: 'ServiceChargeDetail',
});
+const operationBtns = defineOperationBtns([
+ {
+ data: {
+ enCode: 'downloadBtn',
+ name: '涓嬭浇鍥炲崟',
+ },
+ },
+]);
+
const route = useRoute();
const id = (route.params.id as string) ?? '';
-const state = reactive({
- loading: true,
+const form = reactive({
+ name: '',
+ money: 0,
+ status: 1,
});
const { isLoading } = useQuery({
@@ -34,13 +170,65 @@
}
);
},
+ placeholderData: () => ({} as API.GetFlexTaskDetailForBackOutput),
onSuccess(data) {},
enabled: !!id,
});
-onMounted(() => {});
+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,
+ },
+ searchWord: extraParamState.searchWord,
+ };
+
+ let res = await flexEnterpriseServices.getFlexEnterpriseList(params);
+ return res;
+ } catch (error) {
+ console.log('error: ', error);
+ }
+ },
+ {
+ defaultExtraParams: {
+ searchWord: '',
+ orderInput: [{ property: 'id', order: OrderInputType.Desc }],
+ },
+ queryKey: ['flexEnterpriseServices/getFlexEnterpriseList'],
+ columnsRenderProps: {},
+ }
+);
+
+function handleDownloadTemplate() {
+ downloadFileByUrl('', '鐢靛瓙鍥炲崟');
+}
+
+onMounted(() => {
+ getList();
+});
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
+
+.step-wrapper {
+ margin: 0 auto;
+ padding: 24px 0;
+}
+</style>
+<style lang="scss">
+.text-over-tooltip-content {
+ max-width: 600px;
+ word-break: break-all;
+}
</style>
--
Gitblit v1.9.1