| | |
| | | <template> |
| | | <LoadingLayout :loading="isLoading"> |
| | | <AppScrollContainer> |
| | | <AppContainer> |
| | | <ChunkCell title="结算单详情"> |
| | | <ProForm :model="form" ref="formRef" label-width="120px" :is-read="true"> |
| | | <ProFormCol> |
| | |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="结算金额:" prop="settlementAmount"> |
| | | <ProFormInputNumber v-model="form.settlementAmount"> </ProFormInputNumber> |
| | | <ProFormInputNumber v-model="form.settlementAmount" format-value="money"> |
| | | </ProFormInputNumber> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="实发金额:" prop="actualSettlementAmount"> |
| | | <ProFormInputNumber v-model="form.actualSettlementAmount"> </ProFormInputNumber> |
| | | <ProFormInputNumber v-model="form.actualSettlementAmount" format-value="money"> |
| | | </ProFormInputNumber> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | |
| | | </el-steps> |
| | | </div> |
| | | </ChunkCell> --> |
| | | <ChunkCell title="结算名单"> |
| | | <ChunkCell title="结算名单" style="flex: 1" class="settlement-user-list-chunk"> |
| | | <ProTableQueryFilterBar @on-reset="reset"> |
| | | <template #query> |
| | | <QueryFilterItem> |
| | |
| | | <ProTableV2 |
| | | v-bind="proTableProps" |
| | | :columns="SettlementListColumns" |
| | | :operationBtns="operationBtns" |
| | | :show-operation-column="false" |
| | | :auto-height="false" |
| | | ref="proTable" |
| | | :tableProps="{ |
| | | maxHeight: '400px', |
| | | maxHeight: '250px', |
| | | }" |
| | | > |
| | | </ProTableV2> |
| | | <div class="chuck-add-or-edit-actions"> |
| | | <el-button @click="handleBack">取消</el-button> |
| | | <el-button class="chuck-add-or-edit-actions" type="primary" @click="handleSubmit" |
| | | <el-button class="chuck-add-or-edit-actions" @click="handleBack">取消</el-button> |
| | | <el-button |
| | | v-if="!isDetail" |
| | | class="chuck-add-or-edit-actions" |
| | | type="primary" |
| | | @click="handleSubmit" |
| | | >确认</el-button |
| | | > |
| | | </div> |
| | | </ChunkCell> |
| | | </AppScrollContainer> |
| | | </AppContainer> |
| | | <EditAccountInfoDialog v-bind="dialogProps"></EditAccountInfoDialog> |
| | | </LoadingLayout> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | import { |
| | | LoadingLayout, |
| | | AppContainer, |
| | | AppScrollContainer, |
| | | ChunkCell, |
| | | ProForm, |
| | |
| | | QueryFilterItem, |
| | | ProTableQueryFilterBar, |
| | | useFormDialog, |
| | | XLSXUtils, |
| | | } from '@bole-core/components'; |
| | | import { SettlementListColumns } from './constants'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | |
| | | import * as taskUserServices from '@/services/api/taskUser'; |
| | | import EditAccountInfoDialog from './components/EditAccountInfoDialog.vue'; |
| | | import { Message } from '@bole-core/core'; |
| | | import { paginateList } from '@/utils'; |
| | | import { paginateList, setOssFileName, toThousand } from '@/utils'; |
| | | |
| | | defineOptions({ |
| | | name: 'ServiceChargeDetail', |
| | |
| | | ]); |
| | | |
| | | const route = useRoute(); |
| | | const id = (route.query.id as string) ?? ''; |
| | | const id = (route.params.id as string) ?? ''; |
| | | const url = (route.query.url as string) ?? ''; |
| | | |
| | | const isDetail = computed(() => !url); |
| | | |
| | | const form = reactive({ |
| | | name: '', |
| | |
| | | code: '', |
| | | settlementOrderName: '', |
| | | settlementOrderTime: '', |
| | | settlementTaskUsers: [] as API.GetSettlementTaskUsersQueryResultItem[], |
| | | }); |
| | | |
| | | const BaseState = { |
| | | loading: true, |
| | | }; |
| | | |
| | | const state = reactive({ ...BaseState }); |
| | | |
| | | // onMounted(async () => { |
| | | // await getList(); |
| | | // state.loading = false; |
| | | // }); |
| | | |
| | | // const { isLoading } = useQuery({ |
| | | // queryKey: ['taskServices/getSettlementTask', id], |
| | | // queryFn: async () => { |
| | | // return await taskServices.getSettlementTask( |
| | | // { id: id }, |
| | | // { |
| | | // showLoading: false, |
| | | // } |
| | | // ); |
| | | // }, |
| | | // placeholderData: () => ({} as API.GetSettlementTaskQueryResult), |
| | | // onSuccess(data) { |
| | | // form.name = data.name; |
| | | // form.settlementAmount = data.settlementAmount ?? 0; |
| | | // form.actualSettlementAmount = data.actualSettlementAmount ?? 0; |
| | | // form.code = data.code; |
| | | // form.settlementOrderName = setOssFileName(data.settlementOrderName); |
| | | // form.settlementOrderTime = data.settlementOrderTime ?? ''; |
| | | // }, |
| | | // enabled: !!id, |
| | | // }); |
| | | const { isLoading } = useQuery({ |
| | | queryKey: ['taskServices/getSettlementTask', id], |
| | | queryKey: ['taskUserServices/getSettlementTaskUsers', id, url], |
| | | queryFn: async () => { |
| | | return await taskServices.getSettlementTask( |
| | | { id: id }, |
| | | return await taskUserServices.getSettlementTaskUsers( |
| | | { taskInfoId: id, settlementOrderUrl: url }, |
| | | { |
| | | showLoading: false, |
| | | } |
| | | ); |
| | | }, |
| | | placeholderData: () => ({} as API.GetSettlementTaskQueryResult), |
| | | onSuccess(data) { |
| | | form.name = data.name; |
| | | form.settlementAmount = data.settlementAmount; |
| | | form.actualSettlementAmount = data.actualSettlementAmount; |
| | | form.code = data.code; |
| | | form.settlementOrderName = data.settlementOrderName; |
| | | form.settlementOrderTime = data.settlementOrderTime; |
| | | placeholderData: () => ({} as API.GetSettlementTaskUsersQueryResult), |
| | | onSuccess(res) { |
| | | form.settlementTaskUsers = res?.data ?? []; |
| | | if (res?.detail) { |
| | | form.name = res?.detail?.name; |
| | | form.settlementAmount = res?.detail?.settlementAmount ?? 0; |
| | | form.actualSettlementAmount = res?.detail?.actualSettlementAmount ?? 0; |
| | | form.code = res?.detail?.code; |
| | | form.settlementOrderName = setOssFileName(res?.detail?.settlementOrderName); |
| | | form.settlementOrderTime = res?.detail?.settlementOrderTime ?? ''; |
| | | } |
| | | if (res?.errors?.length > 0) { |
| | | Message.tipMessage('存在导入错误的数据,是否导出?').then(() => { |
| | | XLSXUtils.exportToXLSX({ |
| | | workbookDataList: res.errors, |
| | | fileName: '结算导入-错误数据', |
| | | workbookHeaderMap: { |
| | | name: '姓名', |
| | | identity: '身份证号', |
| | | taskName: '任务名称', |
| | | settlementAmount: '结算金额', |
| | | actualSettlementAmount: '实发金额', |
| | | receiveAccount: '收款账户', |
| | | bank: '所属银行', |
| | | bankBranch: '开户支行名称', |
| | | errorMessage: '错误信息', |
| | | }, |
| | | }); |
| | | }); |
| | | } |
| | | getList(); |
| | | }, |
| | | enabled: !!id, |
| | | }); |
| | |
| | | } = useTable( |
| | | async ({ pageIndex, pageSize }, extraParamState) => { |
| | | try { |
| | | let params: API.APIgetSettlementTaskUsersParams = { |
| | | taskInfoId: id, |
| | | settlementOrderUrl: url, |
| | | }; |
| | | let res = await taskUserServices.getSettlementTaskUsers(params); |
| | | let list = [...form.settlementTaskUsers]; |
| | | if (extraParamState.keywords) { |
| | | res.data = res.data?.filter((item) => { |
| | | list = list?.filter((item) => { |
| | | return ( |
| | | item.name.includes(extraParamState.keywords) || |
| | | item.contactPhoneNumber.includes(extraParamState.keywords) || |
| | |
| | | ); |
| | | }); |
| | | } |
| | | |
| | | return Promise.resolve({ |
| | | pageModel: { |
| | | rows: pageSize, |
| | | page: pageIndex, |
| | | totalCount: res.data.length, |
| | | totalCount: list.length, |
| | | }, |
| | | data: paginateList(res.data, pageIndex, pageSize), |
| | | data: paginateList(list, pageIndex, pageSize), |
| | | }); |
| | | } catch (error) { |
| | | console.log('error: ', error); |
| | |
| | | orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], |
| | | }, |
| | | queryKey: ['taskUserServices/getSettlementTaskUsers'], |
| | | columnsRenderProps: {}, |
| | | columnsRenderProps: { |
| | | settlementTime: { type: 'date' }, |
| | | settlementAmount: { type: 'money' }, |
| | | actualSettlementAmount: { type: 'money' }, |
| | | }, |
| | | } |
| | | ); |
| | | |
| | |
| | | let params: API.SureTaskSettlementOrderCommand = { |
| | | taskInfoId: id, |
| | | settlementOrderUrl: url, |
| | | taskInfoUsers: [], |
| | | taskInfoUsers: |
| | | proTableProps.value.tableData?.length > 0 |
| | | ? proTableProps.value.tableData.map( |
| | | (x) => ({ ...x } as API.SureTaskSettlementOrderCommandUser) |
| | | ) |
| | | : [], |
| | | }; |
| | | let res = await taskServices.sureTaskSettlementOrder(params); |
| | | if (res) { |
| | |
| | | name: 'ServiceChargeManageList', |
| | | }); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | margin: 0 auto; |
| | | padding: 24px 0; |
| | | } |
| | | |
| | | .settlement-user-list-chunk { |
| | | :deep() { |
| | | .no-data img { |
| | | width: 280px; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss"> |
| | | .text-over-tooltip-content { |