af-mobile-client-vue3 1.3.1 → 1.3.2-2.1

package/src/router/routes.ts

@@ -6,6 +6,8 @@ import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
 import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
 import ComponentView from '@af-mobile-client-vue3/views/component/index.vue'
+import UserDetailView from '@af-mobile-client-vue3/views/component/UserDetailView/index.vue'
+import UserDetailPage from '@af-mobile-client-vue3/views/component/UserDetailView/UserDetailPage.vue'
 import XCellDetailView from '@af-mobile-client-vue3/views/component/XCellDetailView/index.vue'
 import XCellListView from '@af-mobile-client-vue3/views/component/XCellListView/index.vue'
 import XFormAppraiseView from '@af-mobile-client-vue3/views/component/XFormAppraiseView/index.vue'
@@ -20,6 +22,22 @@ import XRequestView from '@af-mobile-client-vue3/views/component/XRequestView/in
 import XSignatureView from '@af-mobile-client-vue3/views/component/XSignatureView/index.vue'
 import login from '@af-mobile-client-vue3/views/user/login/index.vue'
 import my from '@af-mobile-client-vue3/views/user/my/index.vue'
+import register from '@af-mobile-client-vue3/views/user/register/index.vue'
+import AbnormalAlarmRecords from '@af-mobile-client-vue3/views/userRecords/AbnormalAlarmRecords.vue'
+import CardReplacementRecords from '@af-mobile-client-vue3/views/userRecords/CardReplacementRecords.vue'
+import ChangeRecords from '@af-mobile-client-vue3/views/userRecords/ChangeRecords.vue'
+import CommandViewRecords from '@af-mobile-client-vue3/views/userRecords/CommandViewRecords.vue'
+import GasCompensationRecords from '@af-mobile-client-vue3/views/userRecords/GasCompensationRecords.vue'
+import InstrumentCollectionRecords from '@af-mobile-client-vue3/views/userRecords/InstrumentCollectionRecords.vue'
+import MeterRecords from '@af-mobile-client-vue3/views/userRecords/MeterRecords.vue'
+import OperateRecords from '@af-mobile-client-vue3/views/userRecords/OperateRecords.vue'
+import OtherChargeRecords from '@af-mobile-client-vue3/views/userRecords/OtherChargeRecords.vue'
+import PaymentRecords from '@af-mobile-client-vue3/views/userRecords/PaymentRecords.vue'
+import PriceAdjustmentRecords from '@af-mobile-client-vue3/views/userRecords/PriceAdjustmentRecords.vue'
+import ReplacementRecords from '@af-mobile-client-vue3/views/userRecords/ReplacementRecords.vue'
+import SafetyRecords from '@af-mobile-client-vue3/views/userRecords/SafetyRecords.vue'
+import TransactionRecords from '@af-mobile-client-vue3/views/userRecords/TransactionRecords.vue'
+import TransferRecords from '@af-mobile-client-vue3/views/userRecords/TransferRecords.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -143,6 +161,159 @@ const routes: Array<RouteRecordRaw> = [
         name: 'IconifyView',
         component: IconifyView,
       },
+      {
+        path: '/Component/UserDetailView',
+        name: 'UserDetailView',
+        component: UserDetailView,
+      },
+      {
+        path: '/Component/UserDetail/:userInfoId',
+        name: 'UserDetailRoute',
+        component: UserDetailPage,
+        meta: { title: '用户详情' },
+      },
+    ],
+  },
+  {
+    path: '/userRecords',
+    name: 'userRecords',
+    children: [
+      // 用户记录相关路由
+      {
+        path: '/records',
+        name: 'OperateRecords',
+        component: OperateRecords,
+        meta: {
+          title: '操作记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/payment',
+        name: 'PaymentRecords',
+        component: PaymentRecords,
+        meta: {
+          title: '缴费记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/meter',
+        name: 'MeterRecords',
+        component: MeterRecords,
+        meta: {
+          title: '抄表记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/transfer',
+        name: 'TransferRecords',
+        component: TransferRecords,
+        meta: {
+          title: '过户记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/safety',
+        name: 'SafetyRecords',
+        component: SafetyRecords,
+        meta: {
+          title: '安检记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/replacement',
+        name: 'ReplacementRecords',
+        component: ReplacementRecords,
+        meta: {
+          title: '换表记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/otherCharge',
+        name: 'OtherChargeRecords',
+        component: OtherChargeRecords,
+        meta: {
+          title: '其他收费记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/transaction',
+        name: 'TransactionRecords',
+        component: TransactionRecords,
+        meta: {
+          title: '流水记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/abnormalAlarm',
+        name: 'AbnormalAlarmRecords',
+        component: AbnormalAlarmRecords,
+        meta: {
+          title: '异常报警记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/cardReplacement',
+        name: 'CardReplacementRecords',
+        component: CardReplacementRecords,
+        meta: {
+          title: '补卡记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/change',
+        name: 'ChangeRecords',
+        component: ChangeRecords,
+        meta: {
+          title: '变更记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/commandView',
+        name: 'CommandViewRecords',
+        component: CommandViewRecords,
+        meta: {
+          title: '指令查看记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/gasCompensation',
+        name: 'GasCompensationRecords',
+        component: GasCompensationRecords,
+        meta: {
+          title: '补气记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/instrumentCollection',
+        name: 'InstrumentCollectionRecords',
+        component: InstrumentCollectionRecords,
+        meta: {
+          title: '表具采集记录',
+          keepAlive: false,
+        },
+      },
+      {
+        path: '/priceAdjustment',
+        name: 'PriceAdjustmentRecords',
+        component: PriceAdjustmentRecords,
+        meta: {
+          title: '价格调整记录',
+          keepAlive: false,
+        },
+      },
     ],
   },
   {
@@ -155,6 +326,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'userProfile',
     component: my,
   },
+  {
+    path: '/register/:strategyId?/:openId?',
+    name: 'register',
+    component: register,
+  },
   {
     path: '/404',
     name: '404',

package/src/services/api/user.ts

@@ -0,0 +1,17 @@
+import { post } from '@af-mobile-client-vue3/services/restTools'
+
+const userApi = {
+  // 修改密码
+  modifyPassword: '/af-system/user/modifypwd',
+}
+
+/**
+ * 修改密码
+ * @param data 修改密码参数
+ * @returns Promise
+ */
+export function modifyPassword(data: any) {
+  return post(userApi.modifyPassword, JSON.stringify(data))
+}
+
+export { userApi }

package/src/stores/modules/setting.ts

@@ -10,7 +10,7 @@ export interface WebConfig {
   systemName: string
   routerName: string
   systemDesc: string
-  homePage: string
+  homePage: any
   defaultAvatarUrl: string
   wechatLogin: boolean
   wxLoginAge: boolean
@@ -19,6 +19,7 @@ export interface WebConfig {
   systemLogo: string
   homeAppList: Array<any>
   slideshowList: Array<any>
+  registerRequire: boolean
 }
 
 //  存放 webConfig 中的 setting 配置

package/src/styles/var.less

@@ -14,3 +14,12 @@
   --base-interval-1: 14px;
   --base-interval-2: 28px;
 }
+// 全局弹出框样式覆盖 - 最强优先级
+.van-popover,
+.van-popover.van-popover--light,
+.van-popover.van-popover--dark {
+  background-color: #ffffff !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}

package/src/views/component/IconifyView/index.vue

@@ -3,13 +3,10 @@ import { Icon } from '@iconify/vue'
 import {
   Cell as VanCell,
   CellGroup as VanCellGroup,
-  Col as VanCol,
   Divider as VanDivider,
-  Field as VanField,
   Grid as VanGrid,
   GridItem as VanGridItem,
   NavBar as VanNavBar,
-  Row as VanRow,
   Tab as VanTab,
   Tabs as VanTabs,
 } from 'vant'

package/src/views/component/UserDetailView/UserDetailPage.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { RecordEntry } from '@af-mobile-client-vue3/components/data/UserDetail/recordEntries'
+import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
+import UserDetail from '@af-mobile-client-vue3/components/data/UserDetail/index.vue'
+import { showToast, Dialog as VanDialog, NavBar as VanNavBar } from 'vant'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+// 从路由参数获取用户ID
+const userInfoId = route.params.userInfoId as string
+
+// 返回上一页
+function handleBack() {
+  router.back()
+}
+
+// 记录点击处理
+function handleRecordClick(entry: RecordEntry, user: BaseUser) {
+  showToast(`点击了${entry.title}，用户：${user.f_user_name}`)
+}
+
+// 业务办理点击处理
+function handleBusinessClick(user: BaseUser) {
+  VanDialog.alert({
+    title: '业务办理',
+    message: `为用户 ${user.f_user_name}（${user.f_userinfo_code}）办理业务`,
+  })
+}
+
+// 打印处理
+function handlePrint(user: BaseUser) {
+  showToast(`打印用户 ${user.f_user_name} 的档案`)
+}
+</script>
+
+<template>
+  <div class="user-detail-page">
+    <!-- 导航栏 -->
+    <VanNavBar
+      title="用户详情"
+      left-text="返回"
+      left-arrow
+      @click-left="handleBack"
+    />
+
+    <!-- 用户详情组件 -->
+    <UserDetail
+      :user-info-id="userInfoId"
+      :show-recent-time="true"
+      :show-bottom-buttons="true"
+      business-button-text="立即办理"
+      @record-click="handleRecordClick"
+      @business-click="handleBusinessClick"
+      @print="handlePrint"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.user-detail-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+
+  .van-nav-bar {
+    flex-shrink: 0;
+  }
+
+  :deep(.user-detail) {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+</style>

package/src/views/component/UserDetailView/index.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { Button as VanButton } from 'vant'
+
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 模拟用户数据
+const mockUsers = reactive<BaseUser[]>([
+  {
+    f_userinfo_id: '65836',
+    f_userinfo_code: '1166730',
+    f_user_name: '刘思聪',
+    f_user_phone: '15199996077',
+    f_address: '滨河营业厅',
+    f_user_state: '正常',
+    f_user_type: '民用',
+    f_meter_type: '气量卡表',
+    f_meternumber: '0002353',
+    f_balance: 1.61,
+    f_balance_amount: 0,
+    f_userfiles_id: '71717',
+    f_times: 11,
+    f_total_gas: 768,
+    f_valve_state: '开启',
+    f_hascard: '是',
+    f_card_id: '9400002001',
+  },
+])
+
+// 切换用户 - 现在跳转到新路由
+function switchUser() {
+  const user = mockUsers[0]
+  router.push({
+    name: 'UserDetailRoute',
+    params: { userInfoId: user.f_userinfo_id },
+  })
+}
+</script>
+
+<template>
+  <NormalDataLayout title="UserDetail 用户详情组件">
+    <template #layout_content>
+      <div class="demo-container">
+        <!-- 基础使用说明 -->
+        <div class="demo-section">
+          <h3>基础使用</h3>
+          <p>UserDetail 组件用于展示用户的详细信息，支持动态配置记录入口和交互功能。</p>
+        </div>
+
+        <!-- 用户选择器 -->
+        <div class="demo-section">
+          <h3>点击用户查看详情</h3>
+          <div class="user-selector">
+            <VanButton
+              size="small"
+              @click="switchUser()"
+            >
+              {{ mockUsers[0].f_user_name }}
+              <span class="user-status" :class="`status-${mockUsers[0].f_user_state}`">
+                {{ mockUsers[0].f_user_state }}
+              </span>
+            </VanButton>
+          </div>
+        </div>
+
+        <!-- 功能特性说明 -->
+        <div class="demo-section">
+          <h3>组件特性</h3>
+          <ul class="feature-list">
+            <li>📋 用户基本信息展示与折叠</li>
+            <li>🔗 可配置的记录入口</li>
+            <li>⏰ 支持显示最近业务时间</li>
+            <li>🖨️ 内置打印功能</li>
+            <li>⚙️ 自定义 API 接口</li>
+            <li>🎨 多种用户状态样式</li>
+          </ul>
+        </div>
+
+        <!-- Props 说明 -->
+        <div class="demo-section">
+          <h3>主要 Props</h3>
+          <div class="props-table">
+            <div class="props-row">
+              <span class="prop-name">userInfoId</span>
+              <span class="prop-type">string</span>
+              <span class="prop-desc">用户ID（必传）</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showRecentTime</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否展示历史时间</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">recordEntries</span>
+              <span class="prop-type">RecordEntry[]</span>
+              <span class="prop-desc">记录入口配置</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showBottomButtons</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否显示底部按钮区域</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showHeader</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否显示头部导航栏</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">headerTitle</span>
+              <span class="prop-type">string</span>
+              <span class="prop-desc">头部标题文本</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">#bottom</span>
+              <span class="prop-type">slot</span>
+              <span class="prop-desc">底部插槽，可自定义按钮内容</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.demo-container {
+  padding: 16px;
+}
+
+.demo-section {
+  margin-bottom: 24px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #323233;
+  }
+
+  p {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+}
+
+.user-selector {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  .van-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .user-status {
+    font-size: 12px;
+    padding: 1px 6px;
+    border-radius: 10px;
+
+    &.status-正常 {
+      background-color: #e6ffed;
+      color: #52c41a;
+    }
+
+    &.status-欠费 {
+      background-color: #fff1f0;
+      color: #f5222d;
+    }
+
+    &.status-暂停 {
+      background-color: #fff7e6;
+      color: #fa8c16;
+    }
+  }
+}
+
+.feature-list {
+  margin: 0;
+  padding-left: 20px;
+
+  li {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+}
+
+.props-table {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 12px;
+
+  .props-row {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #ebedf0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .prop-name {
+    flex: 0 0 120px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #1976d2;
+    font-family: 'Monaco', 'Consolas', monospace;
+  }
+
+  .prop-type {
+    flex: 0 0 80px;
+    font-size: 12px;
+    color: #e91e63;
+    font-family: 'Monaco', 'Consolas', monospace;
+  }
+
+  .prop-desc {
+    flex: 1;
+    font-size: 13px;
+    color: #646566;
+  }
+}
+</style>

package/src/views/component/XCellListView/index.vue

@@ -12,8 +12,8 @@ const router = useRouter()
 const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('lngChargeAuditMobileCRUD')
-const serviceName = ref('af-gaslink')
+const configName = ref('mobile_meterInfoManageCRUD')
+const serviceName = ref('af-revenue')
 
 // 资源权限测试
 // const configName = ref('crud_sources_test')

package/src/views/component/XOlMapView/testData.ts

@@ -61,4 +61,4 @@ export const trackTestData: TrackData[] = [
     color: '#00FF00',
     show: true,
   },
-] 
+]

package/src/views/component/index.vue

@@ -73,6 +73,10 @@ const list = ref([
     name: 'Iconify 图标使用示例',
     to: '/Component/IconifyView',
   },
+  {
+    name: 'UserDetail 用户详情组件',
+    to: '/Component/UserDetailView',
+  },
 ])
 
 function cleanConfigCache() {

package/src/views/component/menu.vue

@@ -87,7 +87,7 @@ console.warn(appList)
 
 <style scoped lang="less">
 .menu_main {
-  margin-bottom: var(--base-interval-2)
+  margin-bottom: var(--base-interval-2);
 }
 
 .my-swipe {

package/src/views/user/login/ForgetPasswordForm.vue

@@ -90,5 +90,5 @@ function handleReset() {
 </template>
 
 <style scoped lang="less">
-@import "@af-mobile-client-vue3/styles/login.less";
+@import '@af-mobile-client-vue3/styles/login.less';
 </style>

package/src/views/user/login/LoginForm.vue

@@ -123,9 +123,9 @@ function handleSubmit() {
           await afterGeneral(data)
         else
           if (data.resources.data)
-            await afterGeneral(data.resources.data)
+            await afterGeneral(data.resources.data, data.access_token)
           else
-            await afterGeneral(data.resources)
+            await afterGeneral(data.resources, data.access_token)
 
         const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
         closeToast()
@@ -160,7 +160,7 @@ function closeWindows() {
   }
 }
 
-async function afterGeneral(result) {
+async function afterGeneral(result, token = '') {
   // 排序 functions 及其嵌套的 children
   if (result.functions && Array.isArray(result.functions)) {
     // 对顶层菜单进行排序
@@ -197,6 +197,7 @@ async function afterGeneral(result) {
         username: formData.username,
         password: formData.password,
         rememberMe: rememberMe.value,
+        token,
       },
     },
     {

package/src/views/user/login/LoginWave.vue

@@ -4,7 +4,7 @@ import { hexToRgba } from '@af-mobile-client-vue3/utils/common'
 
 <template>
   <div class="wave">
-    <div class="enter-y wave-wrapper fixed bottom-0 w-full !-z-5">
+    <div class="enter-y wave-wrapper w-full bottom-0 fixed !-z-5">
       <svg
         class="ignore-waves"
         xmlns="http://www.w3.org/2000/svg"