From 307e714ec9f85bae11ed892cb90e199a341b6be3 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 06 八月 2025 11:06:13 +0800
Subject: [PATCH] Merge branch 'master' of http://120.26.58.240:8888/r/flexJobAdminBClient

---
 src/views/ServiceChargeManage/ServiceChargeDetail.vue |  201 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 194 insertions(+), 7 deletions(-)

diff --git a/src/views/ServiceChargeManage/ServiceChargeDetail.vue b/src/views/ServiceChargeManage/ServiceChargeDetail.vue
index 526465d..ad92f39 100644
--- a/src/views/ServiceChargeManage/ServiceChargeDetail.vue
+++ b/src/views/ServiceChargeManage/ServiceChargeDetail.vue
@@ -1,25 +1,160 @@
 <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 { useQuery } from '@tanstack/vue-query';
+import { downloadFileByUrl, OrderInputType } from '@bole-core/core';
 
 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({
@@ -32,13 +167,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