af-mobile-client-vue3 1.3.29 → 1.3.31

package/src/components/core/ImageUploader/index.vue

@@ -1,249 +1,251 @@
-<script setup lang="ts">
-import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
-import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
-import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import {
-  ActionSheet,
-  Uploader as vanUploader,
-} from 'vant'
-import { ref } from 'vue'
-
-const props = defineProps({
-  imageList: Array<any>,
-  outerIndex: { default: undefined },
-  authority: { default: 'user' },
-  uploadMode: { default: 'server' },
-  attr: { type: Object as () => { addOrEdit?: string, acceptCount?: number, uploadImage?: boolean }, default: () => ({}) },
-  mode: { default: '新增' }, // 预览
-})
-const emit = defineEmits(['updateFileList', 'updateAllFileList'])
-
-const imageList = ref<Array<any>>(props.imageList ?? [])
-
-// 触发拍照
-function triggerCamera() {
-  mobileUtil.execute({
-    funcName: 'takePicture',
-    param: {},
-    callbackFunc: (result: any) => {
-      if (result.status === 'success') {
-        handlePhotoUpload(result.data)
-      }
-    },
-  })
-}
-
-// 处理拍照后的上传
-function getImageMimeType(fileName: string): string {
-  const ext = fileName.split('.').pop()?.toLowerCase()
-  if (ext === 'jpg' || ext === 'jpeg')
-    return 'image/jpeg'
-  if (ext === 'png')
-    return 'image/png'
-  if (ext === 'gif')
-    return 'image/gif'
-  return 'image/png' // 默认
-}
-
-function handlePhotoUpload(photoData: any) {
-  // 添加临时预览
-  const mimeType = getImageMimeType(photoData.filePath)
-  const tempFile = {
-    uid: Date.now() + Math.random().toString(36).substr(2, 5),
-    name: photoData.filePath.split('/').pop(),
-    status: 'uploading',
-    message: '上传中...',
-    url: `data:${mimeType};base64,${photoData.content}`,
-  }
-
-  if (!imageList.value) {
-    imageList.value = [tempFile]
-  }
-  else {
-    imageList.value.push(tempFile)
-  }
-
-  const param = {
-    resUploadMode: props.uploadMode,
-    pathKey: 'Default',
-    formType: 'image',
-    useType: 'Default',
-    resUploadStock: '1',
-    filename: photoData.name,
-    filesize: photoData.size,
-    f_operator: 'server',
-    imgPath: photoData.filePath,
-    urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-  }
-  // 上传到服务器
-  mobileUtil.execute({
-    funcName: 'uploadResource',
-    param,
-    callbackFunc: (result: any) => {
-      const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
-      if (result.status === 'success') {
-        if (index !== -1) {
-          imageList.value[index].uid = result.data.id
-          imageList.value[index].id = result.data.id
-          delete imageList.value[index].message
-          imageList.value[index].status = 'done'
-          imageList.value[index].url = result.data.f_downloadpath
-        }
-      }
-      else {
-        if (index !== -1) {
-          imageList.value[index].status = 'failed'
-          imageList.value[index].message = '上传失败'
-        }
-      }
-
-      emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
-
-      const doneIds = Object.values(imageList.value)
-        .filter(item => item.status === 'done')
-        .map(item => item.id)
-
-      if (props.outerIndex !== undefined)
-        emit('updateFileList', doneIds, props.outerIndex)
-      else
-        emit('updateFileList', doneIds)
-    },
-  })
-}
-
-// 删除图片
-function deleteFileFunction(file: any) {
-  if (file.id) {
-    deleteFile({ ids: [file.id], f_state: '删除' }).then((res: any) => {
-      if (res.msg !== undefined) {
-        const targetIndex = imageList.value.findIndex(item => item.id === file.id)
-        if (targetIndex !== -1) {
-          imageList.value.splice(targetIndex, 1)
-
-          emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
-
-          const doneIds = Object.values(imageList.value)
-            .filter(item => item.status === 'done')
-            .map(item => item.id)
-          if (props.outerIndex !== undefined)
-            emit('updateFileList', doneIds, props.outerIndex)
-          else
-            emit('updateFileList', doneIds)
-        }
-      }
-    })
-  }
-}
-
-const showActionSheet = ref(false)
-const uploaderRef = ref()
-
-const actionOptions = [
-  { name: '拍照', key: 'camera' },
-  { name: '上传', key: 'file' },
-]
-
-function handleUploadAreaClick() {
-  if (props.attr?.uploadImage) {
-    showActionSheet.value = true
-  }
-  else {
-    triggerCamera()
-  }
-}
-
-function handleActionSelect(option: any) {
-  showActionSheet.value = false
-  if (option.key === 'camera') {
-    triggerCamera()
-  }
-  else if (option.key === 'file') {
-    mobileUtil.execute({
-      funcName: 'photoAlbum',
-      param: {},
-      callbackFunc: (result: any) => {
-        if (result.status === 'success') {
-          result.data?.photos.forEach((photo: any) => {
-            handlePhotoUpload(photo)
-          })
-        }
-      },
-    })
-  }
-}
-</script>
-
-<template>
-  <div class="uploader-container">
-    <div
-      v-if="props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
-      class="custom-upload-area"
-      @click="handleUploadAreaClick"
-    >
-      <img :src="cameraIcon" alt="camera" class="upload-camera-img">
-      <div class="upload-title">
-        上传附件
-      </div>
-      <div v-if="props.attr?.acceptCount" class="upload-desc">
-        已上传 {{ imageList.length }} 个，最多可上传 {{ props.attr?.acceptCount }} 个
-      </div>
-    </div>
-    <van-uploader
-      ref="uploaderRef"
-      v-model="imageList"
-      :show-upload="false"
-      :deletable="(props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin') && props.mode !== '预览'"
-      :multiple="props.authority === 'admin'"
-      :preview-image="true"
-      :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
-    />
-    <ActionSheet
-      v-model:show="showActionSheet"
-      :actions="actionOptions"
-      cancel-text="取消"
-      @select="handleActionSelect"
-    />
-  </div>
-</template>
-
-<style scoped lang="less">
-.uploader-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.custom-upload-area {
-  width: 100%;
-  min-width: 220px;
-  min-height: 100px;
-  margin: 0 auto 12px auto;
-  box-sizing: border-box;
-  border: 1px dashed #d9d9d9;
-  border-radius: 10px;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 12px 0 10px 0;
-  .upload-camera-img {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 6px;
-    object-fit: contain;
-    display: block;
-  }
-  .upload-title {
-    font-size: 14px;
-    color: #bfc1c6;
-    font-weight: 400;
-    margin-bottom: 2px;
-  }
-  .upload-desc {
-    font-size: 12px;
-    color: #bfc1c6;
-    margin-top: 0;
-  }
-}
-</style>
+<script setup lang="ts">
+import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
+import { deleteFile } from '@af-mobile-client-vue3/services/api/common'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import {
+  ActionSheet,
+  Uploader as vanUploader,
+} from 'vant'
+import { ref } from 'vue'
+
+const props = defineProps({
+  imageList: Array<any>,
+  outerIndex: { default: undefined },
+  authority: { default: 'user' },
+  uploadMode: { default: 'server' },
+  attr: { type: Object as () => { addOrEdit?: string, acceptCount?: number, uploadImage?: boolean }, default: () => ({}) },
+  mode: { default: '新增' }, // 预览
+})
+const emit = defineEmits(['updateFileList', 'updateAllFileList'])
+
+const imageList = ref<Array<any>>(props.imageList ?? [])
+
+// 触发拍照
+function triggerCamera() {
+  mobileUtil.execute({
+    funcName: 'takePicture',
+    param: {},
+    callbackFunc: (result: any) => {
+      if (result.status === 'success') {
+        handlePhotoUpload(result.data)
+      }
+    },
+  })
+}
+
+// 处理拍照后的上传
+function getImageMimeType(fileName: string): string {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  if (ext === 'jpg' || ext === 'jpeg')
+    return 'image/jpeg'
+  if (ext === 'png')
+    return 'image/png'
+  if (ext === 'gif')
+    return 'image/gif'
+  return 'image/png' // 默认
+}
+
+function handlePhotoUpload(photoData: any) {
+  // 添加临时预览
+  const mimeType = getImageMimeType(photoData.filePath)
+  const tempFile = {
+    uid: Date.now() + Math.random().toString(36).substr(2, 5),
+    name: photoData.filePath.split('/').pop(),
+    status: 'uploading',
+    message: '上传中...',
+    url: `data:${mimeType};base64,${photoData.content}`,
+  }
+
+  if (!imageList.value) {
+    imageList.value = [tempFile]
+  }
+  else {
+    imageList.value.push(tempFile)
+  }
+
+  const param = {
+    resUploadMode: props.uploadMode,
+    pathKey: 'Default',
+    formType: 'image',
+    useType: 'Default',
+    resUploadStock: '1',
+    filename: photoData.name,
+    filesize: photoData.size,
+    f_operator: 'server',
+    imgPath: photoData.filePath,
+    urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
+  }
+  // 上传到服务器
+  mobileUtil.execute({
+    funcName: 'uploadResource',
+    param,
+    callbackFunc: (result: any) => {
+      const index = imageList.value.findIndex(item => item.uid === tempFile.uid)
+      if (result.status === 'success') {
+        if (index !== -1) {
+          imageList.value[index].uid = result.data.id
+          imageList.value[index].id = result.data.id
+          delete imageList.value[index].message
+          imageList.value[index].status = 'done'
+          imageList.value[index].url = result.data.f_downloadpath
+        }
+      }
+      else {
+        if (index !== -1) {
+          imageList.value[index].status = 'failed'
+          imageList.value[index].message = '上传失败'
+        }
+      }
+
+      emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
+
+      const doneIds = Object.values(imageList.value)
+        .filter(item => item.status === 'done')
+        .map(item => item.id)
+
+      if (props.outerIndex !== undefined)
+        emit('updateFileList', doneIds, props.outerIndex)
+      else
+        emit('updateFileList', doneIds)
+    },
+  })
+}
+
+// 删除图片
+function deleteFileFunction(file: any) {
+  if (file.id) {
+    deleteFile({ ids: [file.id], f_state: '删除' }).then((res: any) => {
+      if (res.msg !== undefined) {
+        const targetIndex = imageList.value.findIndex(item => item.id === file.id)
+        if (targetIndex !== -1) {
+          imageList.value.splice(targetIndex, 1)
+
+          emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
+
+          const doneIds = Object.values(imageList.value)
+            .filter(item => item.status === 'done')
+            .map(item => item.id)
+          if (props.outerIndex !== undefined)
+            emit('updateFileList', doneIds, props.outerIndex)
+          else
+            emit('updateFileList', doneIds)
+        }
+      }
+    })
+  }
+}
+
+const showActionSheet = ref(false)
+const uploaderRef = ref()
+
+const actionOptions = [
+  { name: '拍照', key: 'camera' },
+  { name: '上传', key: 'file' },
+]
+
+function handleUploadAreaClick() {
+  if (props.attr?.uploadImage) {
+    showActionSheet.value = true
+  }
+  else {
+    triggerCamera()
+  }
+}
+
+function handleActionSelect(option: any) {
+  showActionSheet.value = false
+  if (option.key === 'camera') {
+    triggerCamera()
+  }
+  else if (option.key === 'file') {
+    mobileUtil.execute({
+      funcName: 'photoAlbum',
+      param: {},
+      callbackFunc: (result: any) => {
+        if (result.status === 'success') {
+          result.data?.photos.forEach((photo: any) => {
+            handlePhotoUpload(photo)
+          })
+        }
+      },
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="uploader-container">
+    <div
+      v-if="props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
+      class="custom-upload-area"
+      @click="handleUploadAreaClick"
+    >
+      <img :src="cameraIcon" alt="camera" class="upload-camera-img">
+      <div class="upload-title">
+        上传附件
+      </div>
+      <div v-if="props.attr?.acceptCount" class="upload-desc">
+        已上传 {{ imageList.length }} 个，最多可上传 {{ props.attr?.acceptCount }} 个
+      </div>
+    </div>
+    <van-uploader
+      ref="uploaderRef"
+      v-model="imageList"
+      :show-upload="false"
+      :deletable="(props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin') && props.mode !== '预览'"
+      :multiple="props.authority === 'admin'"
+      :preview-image="true"
+      :before-delete="props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
+    />
+    <ActionSheet
+      v-model:show="showActionSheet"
+      :actions="actionOptions"
+      cancel-text="取消"
+      @select="handleActionSelect"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.uploader-container {
+  display: flex;
+  flex-direction: column;
+  // 该属性会影响表单布局
+  // gap: 16px;
+}
+.custom-upload-area {
+  width: 100%;
+  min-width: 220px;
+  min-height: 100px;
+  // 该属性会影响表单布局
+  // margin: 0 auto 12px auto;
+  box-sizing: border-box;
+  border: 1px dashed #d9d9d9;
+  border-radius: 10px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 12px 0 10px 0;
+  .upload-camera-img {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 6px;
+    object-fit: contain;
+    display: block;
+  }
+  .upload-title {
+    font-size: 14px;
+    color: #bfc1c6;
+    font-weight: 400;
+    margin-bottom: 2px;
+  }
+  .upload-desc {
+    font-size: 12px;
+    color: #bfc1c6;
+    margin-top: 0;
+  }
+}
+</style>

package/src/components/core/NavBar/index.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
-import { NavBar as VanNavBar } from 'vant/es'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-
-const showNavBar = computed(() => route.meta.navBar)
-
-/**
- * Get page title
- * Located in src/locales/json
- */
-const title = computed(() => {
-  if (!route.meta)
-    return ''
-
-  return route.meta.i18n ? t(route.meta.i18n as string) : (route.meta.title || '')
-})
-
-/**
- * Show the left arrow
- * If route name is in rootRouteList, hide left arrow
- */
-const showLeftArrow = computed(() => {
-  return !(route.name && rootRouteList.includes(route.name as string))
-})
-
-// back
-function onBack() {
-  if (window.history.state.back)
-    history.back()
-  else
-    router.replace('/')
-}
-</script>
-
-<template>
-  <VanNavBar
-    v-show="showNavBar"
-    :title="title as string"
-    :fixed="true"
-    clickable placeholder
-    :left-arrow="showLeftArrow"
-    @click-left="onBack"
-  />
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
+import { NavBar as VanNavBar } from 'vant/es'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const showNavBar = computed(() => route.meta.navBar)
+
+/**
+ * Get page title
+ * Located in src/locales/json
+ */
+const title = computed(() => {
+  if (!route.meta)
+    return ''
+
+  return route.meta.i18n ? t(route.meta.i18n as string) : (route.meta.title || '')
+})
+
+/**
+ * Show the left arrow
+ * If route name is in rootRouteList, hide left arrow
+ */
+const showLeftArrow = computed(() => {
+  return !(route.name && rootRouteList.includes(route.name as string))
+})
+
+// back
+function onBack() {
+  if (window.history.state.back)
+    history.back()
+  else
+    router.replace('/')
+}
+</script>
+
+<template>
+  <VanNavBar
+    v-show="showNavBar"
+    :title="title as string"
+    :fixed="true"
+    clickable placeholder
+    :left-arrow="showLeftArrow"
+    @click-left="onBack"
+  />
+</template>
+
+<style scoped></style>

package/src/components/core/Tabbar/index.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
-import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem } from 'vant'
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import 'vant/lib/tabbar-item/index.css'
-import 'vant/lib/tabbar/index.css'
-
-const active = ref(0)
-const route = useRoute()
-
-const show = computed(() => {
-  return route.name && rootRouteList.includes(route.name as string)
-})
-</script>
-
-<template>
-  <VanTabbar v-if="show" v-model="active" placeholder route>
-    <VanTabbarItem replace to="/Component/main">
-      {{ '首页' }}
-      <template #icon>
-        <div class="i-carbon:home" />
-      </template>
-    </VanTabbarItem>
-    <VanTabbarItem replace to="/user/my">
-      {{ '我的' }}
-      <template #icon>
-        <div class="i-carbon:user" />
-      </template>
-    </VanTabbarItem>
-  </VanTabbar>
-</template>
+<script setup lang="ts">
+import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
+import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem } from 'vant'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import 'vant/lib/tabbar-item/index.css'
+import 'vant/lib/tabbar/index.css'
+
+const active = ref(0)
+const route = useRoute()
+
+const show = computed(() => {
+  return route.name && rootRouteList.includes(route.name as string)
+})
+</script>
+
+<template>
+  <VanTabbar v-if="show" v-model="active" placeholder route>
+    <VanTabbarItem replace to="/Component/main">
+      {{ '首页' }}
+      <template #icon>
+        <div class="i-carbon:home" />
+      </template>
+    </VanTabbarItem>
+    <VanTabbarItem replace to="/user/my">
+      {{ '我的' }}
+      <template #icon>
+        <div class="i-carbon:user" />
+      </template>
+    </VanTabbarItem>
+  </VanTabbar>
+</template>