af-mobile-client-vue3 1.3.12 → 1.3.14

package/src/views/userRecords/AbnormalAlarmRecords.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——异常报警记录
+const configName = 'mobile_abnormalAlarmQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+      uf_f_userfiles_id: userfilesId,
+    }"
+  />
+</template>

package/src/views/userRecords/CardReplacementRecords.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——补卡记录
+const configName = 'mobile_cardReplacementQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+      uf_f_userfiles_id: userfilesId,
+    }"
+  />
+</template>

package/src/views/userRecords/ChangeRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——变更记录
+const configName = 'mobile_changeQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/CommandViewRecords.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——指令查看记录
+const configName = 'mobile_commandViewQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+// const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      it_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/GasCompensationRecords.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——补气记录
+const configName = 'mobile_gasCompensationQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+// const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/InstrumentCollectionRecords.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——表具采集记录
+const configName = 'mobile_instrumentCollectionQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      it_f_userinfo_id: userId,
+      it_f_userfiles_id: userfilesId,
+    }"
+  />
+</template>

package/src/views/userRecords/MeterRecords.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——抄表记录
+const configName = 'mobile_HanplanQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+// const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      twb_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/OperateRecords.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import XExpandDetail from '@af-mobile-client-vue3/views/userRecords/operateRecordDetail/index.vue'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——变更记录
+const configName = 'mobile_operateRecordCRUD'
+const serviceName = 'af-revenue'
+// 获取默认值
+const idKey = ref('info_id')
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+
+// 当前展开的行ID
+const expandedItemId = ref<string>()
+
+// 处理列表项点击
+function handleItemClick(item: any) {
+  if (expandedItemId?.value === item[idKey.value]) {
+    // 如果点击的是当前展开的项，则收起
+    expandedItemId.value = null
+  }
+  else {
+    // 否则展开当前项
+    expandedItemId.value = item[idKey.value]
+  }
+}
+// 跳转到表单——以表单组来渲染纯表单
+function toDetail(item) {
+  handleItemClick(item)
+}
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+    @to-detail="toDetail"
+  >
+    <!-- 添加详情展开插槽 -->
+    <template #item-detail="{ item }">
+      <XExpandDetail
+        :item="item"
+        :expanded-id="expandedItemId"
+        :id-key="idKey"
+      />
+    </template>
+  </XCellList>
+</template>

package/src/views/userRecords/OtherChargeRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_otherChargeQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/PaymentRecords.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_ChargeQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+const router = useRouter()
+</script>
+
+<template>
+  <main class="h-full w-full">
+    <van-nav-bar
+      title="缴费记录"
+      left-arrow
+      fixed
+      @click-left="router.go(-1)"
+    />
+    <XCellList
+      :config-name="configName"
+      :service-name="serviceName"
+      :fix-query-form="{
+        info_f_userinfo_id: userId,
+      }"
+    />
+  </main>
+</template>

package/src/views/userRecords/PriceAdjustmentRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试——价格调整记录
+const configName = 'mobile_priceAdjustmentQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      it_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/ReplacementRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_changeTableQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/SafetyRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_safeCheckQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

package/src/views/userRecords/TransactionRecords.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_liushuiQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+const userfilesId = computed(() => useRoute().query.userfilesId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+      info_f_userfiles_id: userfilesId,
+    }"
+  />
+</template>

package/src/views/userRecords/TransferRecords.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+// 简易crud表单测试
+const configName = 'mobile_transferQueryCRUD'
+const serviceName = 'af-revenue'
+const userId = computed(() => useRoute().query.userId?.toString() || '')
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :fix-query-form="{
+      info_f_userinfo_id: userId,
+    }"
+  />
+</template>

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

@@ -0,0 +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>