af-mobile-client-vue3 1.3.16 → 1.3.18

package/src/views/userRecords/operateRecordDetail/index.vue

@@ -1,316 +1,316 @@
-<script setup lang="ts">
-import { runLogic } from '@af-mobile-client-vue3/services/api/common'
-import { Loading as VanLoading } from 'vant'
-import { defineProps, ref, watch } from 'vue'
-
-import AddUserDetail from './operateRecordDetails/AddUserDetail.vue'
-import AdvanceDeliveryDetail from './operateRecordDetails/AdvanceDeliveryDetail.vue'
-import AutoAccountsCancelDetail from './operateRecordDetails/AutoAccountsCancelDetail.vue'
-import AutoAccountsDetail from './operateRecordDetails/AutoAccountsDetail.vue'
-import BankDkDetail from './operateRecordDetails/BankDkDetail.vue'
-import BankPayDetail from './operateRecordDetails/BankPayDetail.vue'
-import BlacklistDetail from './operateRecordDetails/BlacklistDetail.vue'
-import CancellationDetail from './operateRecordDetails/CancellationDetail.vue'
-import CardMeterCenterCancelDetail from './operateRecordDetails/CardMeterCenterCancelDetail.vue'
-import CardMeterCenterDetail from './operateRecordDetails/CardMeterCenterDetail.vue'
-import CardOverUserDetail from './operateRecordDetails/CardOverUserDetail.vue'
-import ChangeMeterCancelDetail from './operateRecordDetails/ChangeMeterCancelDetail.vue'
-import ChangeMeterDetail from './operateRecordDetails/ChangeMeterDetail.vue'
-import DisableManageDetail from './operateRecordDetails/DisableManageDetail.vue'
-import EnableManageDetail from './operateRecordDetails/EnableManageDetail.vue'
-import FaZheChangeDetail from './operateRecordDetails/FaZheChangeDetail.vue'
-import FeeDeductionDetail from './operateRecordDetails/FeeDeductionDetail.vue'
-import GasPriceChangeDetail from './operateRecordDetails/GasPriceChangeDetail.vue'
-import InputtorChangeDetail from './operateRecordDetails/InputtorChangeDetail.vue'
-import IotMeterCenterCancelDetail from './operateRecordDetails/IotMeterCenterCancelDetail.vue'
-import IotMeterCenterDetail from './operateRecordDetails/IotMeterCenterDetail.vue'
-import IotOpenDetail from './operateRecordDetails/IotOpenDetail.vue'
-import MachineCardDetail from './operateRecordDetails/MachineCardDetail.vue'
-import MachineMeterCenterCancelDetail from './operateRecordDetails/MachineMeterCenterCancelDetail.vue'
-import MachineMeterCenterDetail from './operateRecordDetails/MachineMeterCenterDetail.vue'
-import OffGasAddGasDetail from './operateRecordDetails/OffGasAddGasDetail.vue'
-import OtherChargeCancelDetail from './operateRecordDetails/OtherChargeCancelDetail.vue'
-import OtherChargeDetail from './operateRecordDetails/OtherChargeDetail.vue'
-import OverUserChangeDetail from './operateRecordDetails/OverUserChangeDetail.vue'
-import ReBillDetail from './operateRecordDetails/ReBillDetail.vue'
-import RefundDetail from './operateRecordDetails/RefundDetail.vue'
-import ReplaceCardManageCancelDetail from './operateRecordDetails/ReplaceCardManageCancelDetail.vue'
-import ReplaceCardManageDetail from './operateRecordDetails/ReplaceCardManageDetail.vue'
-import SaleCardGasDetail from './operateRecordDetails/SaleCardGasDetail.vue'
-import TransferManageDetail from './operateRecordDetails/TransferManageDetail.vue'
-import UserChangeDetail from './operateRecordDetails/UserChangeDetail.vue'
-import WechatPayDetail from './operateRecordDetails/WechatPayDetail.vue'
-
-interface Props {
-  expandedId: string | null // 列表项数据
-  idKey?: string // 当前展开的ID
-  item: Record<string, any> // ID的键名
-}
-
-// 定义组件属性
-const props = withDefaults(defineProps<Props>(), {
-  idKey: 'info_id',
-})
-
-// 加载状态
-const loading = ref(false)
-// 错误状态
-const error = ref(null)
-const detailData = ref({})
-const currentDetailComponent = ref(null)
-console.log(props.item)
-
-// 监听展开状态变化
-watch(() => props.expandedId, async (newVal) => {
-  if (newVal === props.item[props.idKey]) {
-    console.log('展开项的类型:', props.item.info_f_operat_type)
-    // 当前项被展开，获取详情数据
-    if (await getCurrentDetailComponent() !== null) {
-      await fetchDetailData()
-      currentDetailComponent.value = await getCurrentDetailComponent()
-      console.log('获取到的详情数据:', detailData.value)
-      console.log('当前渲染组件:', currentDetailComponent.value)
-      console.log('完整的props.item:', props.item)
-    }
-    else {
-      currentDetailComponent.value = null
-    }
-  }
-  else {
-    // 当前项被收起，清空数据
-    detailData.value = null
-    currentDetailComponent.value = null
-  }
-})
-
-// 使用computed获取对应的组件
-async function getCurrentDetailComponent() {
-  const type = props.item.info_f_operat_type
-
-  switch (type) {
-    // 基础操作
-    case '发卡售气':
-    case '换表发卡':
-      return SaleCardGasDetail
-    case '卡表收费':
-      return CardMeterCenterDetail
-    case '机表收费':
-      return MachineMeterCenterDetail
-    case '自动下账':
-      return AutoAccountsDetail
-    case '银行代扣':
-      return BankDkDetail
-    case '银行支付':
-      return BankPayDetail
-    case '微信支付':
-      return WechatPayDetail
-    case '停用':
-      return DisableManageDetail
-    case '启用':
-      return EnableManageDetail
-    case '补卡':
-      return ReplaceCardManageDetail
-    case '机表补卡':
-      return MachineCardDetail
-    case '过户':
-      return TransferManageDetail
-    case '其他收费':
-      return OtherChargeDetail
-    case '抄表员变更':
-      return InputtorChangeDetail
-    case '换表补气':
-    case '其他补气':
-    case '清零补气':
-    case '掉气补气':
-      return OffGasAddGasDetail
-    case '开通':
-      return IotOpenDetail
-    case '物联网收费':
-    case '物联网开户':
-    case '调价退费':
-    case '调价补费':
-      return IotMeterCenterDetail
-    case '超用收费':
-      return OverUserChangeDetail
-    case '新增户档案':
-      return AddUserDetail
-    case '气价变更':
-      return GasPriceChangeDetail
-    case '档案变更':
-    case '表记变更':
-    case '修改表计信息':
-    case '手动同步开户':
-    case '自动同步开户':
-    case '批量导入开户':
-    case '档案完善开户':
-    case '新增户档案开户':
-    case '新增用户档案开户':
-      return UserChangeDetail
-    case '换表':
-    case '换控制器':
-    case '换新表':
-    case '气表清零':
-    case '气表升级':
-    case '换主板':
-    case '换基表':
-      return ChangeMeterDetail
-    case '卡表超用':
-      return CardOverUserDetail
-    case '销户':
-      return CancellationDetail
-    case '退费':
-      return RefundDetail
-
-    // 撤销类操作
-    case '换表撤销':
-    case '换控制器撤销':
-    case '换新表撤销':
-    case '气表清零撤销':
-    case '气表升级撤销':
-    case '换主板撤销':
-    case '换基表撤销':
-      return ChangeMeterCancelDetail
-    case '自动下账撤销':
-      return AutoAccountsCancelDetail
-    case '卡表收费撤销':
-      return CardMeterCenterCancelDetail
-    case '机表收费撤销':
-      return MachineMeterCenterCancelDetail
-    case '其他收费撤销':
-      return OtherChargeCancelDetail
-    case '补卡撤销':
-      return ReplaceCardManageCancelDetail
-    case '物联网收费撤销':
-      return IotMeterCenterCancelDetail
-
-    // 特殊操作
-    case '补费':
-    case '扣费':
-    case '补气':
-    case '扣气':
-      return FeeDeductionDetail
-    case '拉黑':
-    case '取消拉黑':
-      return BlacklistDetail
-    case '卡表预交':
-      return AdvanceDeliveryDetail
-    case '补换折':
-    case '发折':
-      return FaZheChangeDetail
-    case '补打票据':
-    case '补打折子':
-      return ReBillDetail
-    default:
-      return null
-  }
-}
-
-// 获取详情数据
-async function fetchDetailData() {
-  loading.value = true
-  error.value = null
-  try {
-    const params = {
-      type: props.item.info_f_operat_type,
-      id: props.item.info_id,
-      f_userinfo_id: props.item.info_f_userinfo_id,
-    }
-    console.log('开始获取详情数据，参数:', params)
-    const result = await runLogic('mobile_getBusinessDataDetail', params, 'af-revenue')
-    console.log('获取详情数据成功:', result)
-    detailData.value = result
-  }
-  catch (err) {
-    console.error('获取详情数据失败:', err)
-    error.value = err
-    detailData.value = null
-  }
-  finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <div v-if="expandedId === item[idKey]" class="expanded-detail">
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-state">
-      <VanLoading type="spinner" />
-      <span>加载中...</span>
-    </div>
-
-    <!-- 错误状态 -->
-    <div v-else-if="error" class="error-state">
-      <span>{{ error.msg || '数据加载失败' }}</span>
-    </div>
-
-    <!-- 动态组件渲染 -->
-    <component
-      :is="currentDetailComponent"
-      v-else-if="currentDetailComponent"
-      :data="detailData"
-    />
-
-    <div v-else class="error-state">
-      <span>暂无对应的详情组件</span>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.expanded-detail {
-  padding: 8px;
-  background-color: var(--van-background);
-  margin-top: 8px;
-  border-radius: var(--van-radius-md);
-  border: 1px solid var(--van-border-color);
-  animation: expand 0.3s ease-out;
-
-  .loading-state,
-  .error-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    font-size: var(--van-font-size-sm);
-
-    .van-loading {
-      margin-right: 8px;
-    }
-  }
-
-  .detail-content {
-    h4 {
-      margin: 0 0 8px;
-      color: var(--van-text-color);
-      font-size: var(--van-font-size-md);
-    }
-
-    p {
-      margin: 0 0 12px;
-      color: var(--van-text-color-2);
-      font-size: var(--van-font-size-sm);
-    }
-
-    pre {
-      margin: 0;
-      padding: 12px;
-      background-color: var(--van-background-2);
-      border-radius: var(--van-radius-sm);
-      font-size: var(--van-font-size-sm);
-      overflow-x: auto;
-    }
-  }
-}
-
-@keyframes expand {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
+<script setup lang="ts">
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import { Loading as VanLoading } from 'vant'
+import { defineProps, ref, watch } from 'vue'
+
+import AddUserDetail from './operateRecordDetails/AddUserDetail.vue'
+import AdvanceDeliveryDetail from './operateRecordDetails/AdvanceDeliveryDetail.vue'
+import AutoAccountsCancelDetail from './operateRecordDetails/AutoAccountsCancelDetail.vue'
+import AutoAccountsDetail from './operateRecordDetails/AutoAccountsDetail.vue'
+import BankDkDetail from './operateRecordDetails/BankDkDetail.vue'
+import BankPayDetail from './operateRecordDetails/BankPayDetail.vue'
+import BlacklistDetail from './operateRecordDetails/BlacklistDetail.vue'
+import CancellationDetail from './operateRecordDetails/CancellationDetail.vue'
+import CardMeterCenterCancelDetail from './operateRecordDetails/CardMeterCenterCancelDetail.vue'
+import CardMeterCenterDetail from './operateRecordDetails/CardMeterCenterDetail.vue'
+import CardOverUserDetail from './operateRecordDetails/CardOverUserDetail.vue'
+import ChangeMeterCancelDetail from './operateRecordDetails/ChangeMeterCancelDetail.vue'
+import ChangeMeterDetail from './operateRecordDetails/ChangeMeterDetail.vue'
+import DisableManageDetail from './operateRecordDetails/DisableManageDetail.vue'
+import EnableManageDetail from './operateRecordDetails/EnableManageDetail.vue'
+import FaZheChangeDetail from './operateRecordDetails/FaZheChangeDetail.vue'
+import FeeDeductionDetail from './operateRecordDetails/FeeDeductionDetail.vue'
+import GasPriceChangeDetail from './operateRecordDetails/GasPriceChangeDetail.vue'
+import InputtorChangeDetail from './operateRecordDetails/InputtorChangeDetail.vue'
+import IotMeterCenterCancelDetail from './operateRecordDetails/IotMeterCenterCancelDetail.vue'
+import IotMeterCenterDetail from './operateRecordDetails/IotMeterCenterDetail.vue'
+import IotOpenDetail from './operateRecordDetails/IotOpenDetail.vue'
+import MachineCardDetail from './operateRecordDetails/MachineCardDetail.vue'
+import MachineMeterCenterCancelDetail from './operateRecordDetails/MachineMeterCenterCancelDetail.vue'
+import MachineMeterCenterDetail from './operateRecordDetails/MachineMeterCenterDetail.vue'
+import OffGasAddGasDetail from './operateRecordDetails/OffGasAddGasDetail.vue'
+import OtherChargeCancelDetail from './operateRecordDetails/OtherChargeCancelDetail.vue'
+import OtherChargeDetail from './operateRecordDetails/OtherChargeDetail.vue'
+import OverUserChangeDetail from './operateRecordDetails/OverUserChangeDetail.vue'
+import ReBillDetail from './operateRecordDetails/ReBillDetail.vue'
+import RefundDetail from './operateRecordDetails/RefundDetail.vue'
+import ReplaceCardManageCancelDetail from './operateRecordDetails/ReplaceCardManageCancelDetail.vue'
+import ReplaceCardManageDetail from './operateRecordDetails/ReplaceCardManageDetail.vue'
+import SaleCardGasDetail from './operateRecordDetails/SaleCardGasDetail.vue'
+import TransferManageDetail from './operateRecordDetails/TransferManageDetail.vue'
+import UserChangeDetail from './operateRecordDetails/UserChangeDetail.vue'
+import WechatPayDetail from './operateRecordDetails/WechatPayDetail.vue'
+
+interface Props {
+  expandedId: string | null // 列表项数据
+  idKey?: string // 当前展开的ID
+  item: Record<string, any> // ID的键名
+}
+
+// 定义组件属性
+const props = withDefaults(defineProps<Props>(), {
+  idKey: 'info_id',
+})
+
+// 加载状态
+const loading = ref(false)
+// 错误状态
+const error = ref(null)
+const detailData = ref({})
+const currentDetailComponent = ref(null)
+console.log(props.item)
+
+// 监听展开状态变化
+watch(() => props.expandedId, async (newVal) => {
+  if (newVal === props.item[props.idKey]) {
+    console.log('展开项的类型:', props.item.info_f_operat_type)
+    // 当前项被展开，获取详情数据
+    if (await getCurrentDetailComponent() !== null) {
+      await fetchDetailData()
+      currentDetailComponent.value = await getCurrentDetailComponent()
+      console.log('获取到的详情数据:', detailData.value)
+      console.log('当前渲染组件:', currentDetailComponent.value)
+      console.log('完整的props.item:', props.item)
+    }
+    else {
+      currentDetailComponent.value = null
+    }
+  }
+  else {
+    // 当前项被收起，清空数据
+    detailData.value = null
+    currentDetailComponent.value = null
+  }
+})
+
+// 使用computed获取对应的组件
+async function getCurrentDetailComponent() {
+  const type = props.item.info_f_operat_type
+
+  switch (type) {
+    // 基础操作
+    case '发卡售气':
+    case '换表发卡':
+      return SaleCardGasDetail
+    case '卡表收费':
+      return CardMeterCenterDetail
+    case '机表收费':
+      return MachineMeterCenterDetail
+    case '自动下账':
+      return AutoAccountsDetail
+    case '银行代扣':
+      return BankDkDetail
+    case '银行支付':
+      return BankPayDetail
+    case '微信支付':
+      return WechatPayDetail
+    case '停用':
+      return DisableManageDetail
+    case '启用':
+      return EnableManageDetail
+    case '补卡':
+      return ReplaceCardManageDetail
+    case '机表补卡':
+      return MachineCardDetail
+    case '过户':
+      return TransferManageDetail
+    case '其他收费':
+      return OtherChargeDetail
+    case '抄表员变更':
+      return InputtorChangeDetail
+    case '换表补气':
+    case '其他补气':
+    case '清零补气':
+    case '掉气补气':
+      return OffGasAddGasDetail
+    case '开通':
+      return IotOpenDetail
+    case '物联网收费':
+    case '物联网开户':
+    case '调价退费':
+    case '调价补费':
+      return IotMeterCenterDetail
+    case '超用收费':
+      return OverUserChangeDetail
+    case '新增户档案':
+      return AddUserDetail
+    case '气价变更':
+      return GasPriceChangeDetail
+    case '档案变更':
+    case '表记变更':
+    case '修改表计信息':
+    case '手动同步开户':
+    case '自动同步开户':
+    case '批量导入开户':
+    case '档案完善开户':
+    case '新增户档案开户':
+    case '新增用户档案开户':
+      return UserChangeDetail
+    case '换表':
+    case '换控制器':
+    case '换新表':
+    case '气表清零':
+    case '气表升级':
+    case '换主板':
+    case '换基表':
+      return ChangeMeterDetail
+    case '卡表超用':
+      return CardOverUserDetail
+    case '销户':
+      return CancellationDetail
+    case '退费':
+      return RefundDetail
+
+    // 撤销类操作
+    case '换表撤销':
+    case '换控制器撤销':
+    case '换新表撤销':
+    case '气表清零撤销':
+    case '气表升级撤销':
+    case '换主板撤销':
+    case '换基表撤销':
+      return ChangeMeterCancelDetail
+    case '自动下账撤销':
+      return AutoAccountsCancelDetail
+    case '卡表收费撤销':
+      return CardMeterCenterCancelDetail
+    case '机表收费撤销':
+      return MachineMeterCenterCancelDetail
+    case '其他收费撤销':
+      return OtherChargeCancelDetail
+    case '补卡撤销':
+      return ReplaceCardManageCancelDetail
+    case '物联网收费撤销':
+      return IotMeterCenterCancelDetail
+
+    // 特殊操作
+    case '补费':
+    case '扣费':
+    case '补气':
+    case '扣气':
+      return FeeDeductionDetail
+    case '拉黑':
+    case '取消拉黑':
+      return BlacklistDetail
+    case '卡表预交':
+      return AdvanceDeliveryDetail
+    case '补换折':
+    case '发折':
+      return FaZheChangeDetail
+    case '补打票据':
+    case '补打折子':
+      return ReBillDetail
+    default:
+      return null
+  }
+}
+
+// 获取详情数据
+async function fetchDetailData() {
+  loading.value = true
+  error.value = null
+  try {
+    const params = {
+      type: props.item.info_f_operat_type,
+      id: props.item.info_id,
+      f_userinfo_id: props.item.info_f_userinfo_id,
+    }
+    console.log('开始获取详情数据，参数:', params)
+    const result = await runLogic('mobile_getBusinessDataDetail', params, 'af-revenue')
+    console.log('获取详情数据成功:', result)
+    detailData.value = result
+  }
+  catch (err) {
+    console.error('获取详情数据失败:', err)
+    error.value = err
+    detailData.value = null
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="expandedId === item[idKey]" class="expanded-detail">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <VanLoading type="spinner" />
+      <span>加载中...</span>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-state">
+      <span>{{ error.msg || '数据加载失败' }}</span>
+    </div>
+
+    <!-- 动态组件渲染 -->
+    <component
+      :is="currentDetailComponent"
+      v-else-if="currentDetailComponent"
+      :data="detailData"
+    />
+
+    <div v-else class="error-state">
+      <span>暂无对应的详情组件</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.expanded-detail {
+  padding: 8px;
+  background-color: var(--van-background);
+  margin-top: 8px;
+  border-radius: var(--van-radius-md);
+  border: 1px solid var(--van-border-color);
+  animation: expand 0.3s ease-out;
+
+  .loading-state,
+  .error-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    font-size: var(--van-font-size-sm);
+
+    .van-loading {
+      margin-right: 8px;
+    }
+  }
+
+  .detail-content {
+    h4 {
+      margin: 0 0 8px;
+      color: var(--van-text-color);
+      font-size: var(--van-font-size-md);
+    }
+
+    p {
+      margin: 0 0 12px;
+      color: var(--van-text-color-2);
+      font-size: var(--van-font-size-sm);
+    }
+
+    pre {
+      margin: 0;
+      padding: 12px;
+      background-color: var(--van-background-2);
+      border-radius: var(--van-radius-sm);
+      font-size: var(--van-font-size-sm);
+      overflow-x: auto;
+    }
+  }
+}
+
+@keyframes expand {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>