| <template> | 
|   <ProDialog | 
|     title="结算确认" | 
|     v-model="visible" | 
|     @close="onDialogClose" | 
|     destroy-on-close | 
|     draggable | 
|     :width="700" | 
|   > | 
|     <ProForm :model="form" ref="dialogForm" label-width="120px"> | 
|       <ProFormItemV2 label="任务单号:" prop="code" mode="read"> | 
|         <ProFormSelect v-model="form.code" :valueEnum="[]"> </ProFormSelect> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 label="任务名称:" prop="name" mode="read"> | 
|         <ProFormText v-model.trim="form.name"></ProFormText> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 label="结算人数:" prop="settlementUserCount" mode="read"> | 
|         <ProFormInputNumber v-model="form.settlementUserCount" unit="人"> </ProFormInputNumber> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 label="结算金额:" prop="actualSettlementAmount" mode="read"> | 
|         <ProFormInputNumber v-model="form.actualSettlementAmount" unit="元" format-value="money"> | 
|         </ProFormInputNumber> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 | 
|         label="结算方式:" | 
|         prop="settlementAccess" | 
|         mode="read" | 
|         :check-rules="[{ message: '请选择结算方式' }]" | 
|       > | 
|         <ProFormSelect v-model="form.settlementAccess" :valueEnum="settlementAccessList"> | 
|         </ProFormSelect> | 
|       </ProFormItemV2> | 
|     </ProForm> | 
|     <template #footer> | 
|       <span class="dialog-footer"> | 
|         <el-button @click="emit('onCancel')">取消</el-button> | 
|         <el-button type="primary" @click="emit('onConfirm')">确认</el-button> | 
|       </span> | 
|     </template> | 
|   </ProDialog> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { FormInstance } from 'element-plus'; | 
| import { | 
|   ProDialog, | 
|   ProForm, | 
|   ProFormItemV2, | 
|   ProFormText, | 
|   ProFormSelect, | 
|   ProFormInputNumber, | 
| } from '@bole-core/components'; | 
| import { EnumEnterpriseWalletAccess, EnumEnterpriseWalletAccessTextForSettle } from '@/constants'; | 
|   | 
| defineOptions({ | 
|   name: 'SettleDetailDialog', | 
| }); | 
|   | 
| type Form = { | 
|   title?: string; | 
|   id: string; | 
|   name: string; | 
|   code: string; | 
|   settlementUserCount: number; | 
|   actualSettlementAmount: number; | 
|   settlementAccess: EnumEnterpriseWalletAccess; | 
| }; | 
|   | 
| const { settlementAccessList } = useEnterpriseWalletAccessSelect(); | 
|   | 
| const visible = defineModel({ type: Boolean }); | 
|   | 
| const form = defineModel<Form>('form'); | 
|   | 
| const emit = defineEmits<{ | 
|   (e: 'onConfirm'): void; | 
|   (e: 'onCancel'): void; | 
| }>(); | 
|   | 
| const dialogForm = ref<FormInstance>(); | 
|   | 
| function onDialogClose() { | 
|   if (!dialogForm.value) return; | 
|   dialogForm.value.resetFields(); | 
| } | 
| </script> |