af-mobile-client-vue3 1.6.49 → 1.6.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.6.49",
+  "version": "1.6.51",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

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

@@ -149,52 +149,54 @@ const resultLabel = computed(() => {
       :is-link="$attrs.disabled === undefined"
       @click="showPopu($attrs.readonly)"
     />
-    <VanPopup v-model:show="show" position="bottom">
-      <div class="van-picker__toolbar">
-        <button type="button" class="van-picker__cancel" @click="cancel">
-          取消
-        </button>
-        <div class="van-ellipsis van-picker__title">
-          {{ $attrs.label }}
-        </div>
-        <button type="button" class="van-picker__confirm" @click="onConfirm">
-          确认
-        </button>
-      </div>
-      <div class="x-multi-select-content">
-        <VanSearch
-          v-if="props.isSearch"
-          v-model="searchVal"
-          placeholder="搜索"
-          @update:model-value="search"
-          @cancel="search"
-        />
-        <div v-if="isLoading" class="loading-container">
-          <div class="loading-text">
-            搜索中...
+    <VanPopup v-model:show="show" position="bottom" teleport="body" round>
+      <div class="x-multi-select-popup">
+        <div class="van-picker__toolbar">
+          <button type="button" class="van-picker__cancel" @click="cancel">
+            取消
+          </button>
+          <div class="van-ellipsis van-picker__title">
+            {{ $attrs.label }}
           </div>
+          <button type="button" class="van-picker__confirm" @click="onConfirm">
+            确认
+          </button>
         </div>
-        <div v-else class="x-multi-select-checkbox-group">
-          <VanCell title="全选">
-            <template #right-icon>
-              <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
-            </template>
-          </VanCell>
-          <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
-            <VanCellGroup>
-              <VanCell
-                v-for="(item, index) in columnsData"
-                :key="item[props.option.value]"
-                :title="item[props.option.text]"
-                clickable
-                @click="toggle(item, index)"
-              >
-                <template #right-icon>
-                  <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
-                </template>
-              </VanCell>
-            </VanCellGroup>
-          </VanCheckboxGroup>
+        <div class="x-multi-select-content">
+          <VanSearch
+            v-if="props.isSearch"
+            v-model="searchVal"
+            placeholder="搜索"
+            @update:model-value="search"
+            @cancel="search"
+          />
+          <div v-if="isLoading" class="loading-container">
+            <div class="loading-text">
+              搜索中...
+            </div>
+          </div>
+          <div v-else class="x-multi-select-checkbox-group">
+            <VanCell title="全选">
+              <template #right-icon>
+                <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
+              </template>
+            </VanCell>
+            <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
+              <VanCellGroup>
+                <VanCell
+                  v-for="(item, index) in columnsData"
+                  :key="item[props.option.value]"
+                  :title="item[props.option.text]"
+                  clickable
+                  @click="toggle(item, index)"
+                >
+                  <template #right-icon>
+                    <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
+                  </template>
+                </VanCell>
+              </VanCellGroup>
+            </VanCheckboxGroup>
+          </div>
         </div>
       </div>
     </VanPopup>
@@ -213,12 +215,19 @@ const resultLabel = computed(() => {
     left: -8px;
   }
   .x-multi-select-content {
-    max-height: 264px;
+    max-height: calc(70vh - 44px);
     overflow-y: auto;
     .x-multi-select-checkbox-group {
       padding: 0 16px;
     }
   }
+  .x-multi-select-popup {
+    max-height: 70vh;
+    padding-bottom: env(safe-area-inset-bottom);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
   .loading-container {
     display: flex;
     justify-content: center;

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

@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
     :border="props.border"
     @click="showPopu($attrs.readonly)"
   />
-  <VanPopup v-model:show="show" position="bottom" teleport="body">
+  <VanPopup v-model:show="show" position="bottom" teleport="body" round>
     <div class="x-select-popup">
       <!-- 搜索框 -->
       <VanSearch
@@ -222,6 +222,23 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.x-select-popup {
+  max-height: 70vh;
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-select-popup :deep(.van-picker) {
+  flex: 1;
+  min-height: 0;
+}
+
+.x-select-popup :deep(.van-picker__columns) {
+  max-height: 40vh;
+}
+
 .loading-container {
   display: flex;
   justify-content: center;

package/src/components/data/FilePreview/components/KkPreview.vue

@@ -68,6 +68,15 @@ onMounted(buildPreviewUrl)
   position: relative;
 }
 
+/* 透明遮罩：阻止 iframe 在点击悬浮按钮时抢夺事件 */
+.preview-doc-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 99;
+  pointer-events: none;
+}
+
 .kk-loading {
   position: absolute;
   inset: 0;

package/src/components/data/FilePreview/index.vue

@@ -111,7 +111,7 @@ defineExpose({ init, download: handleDownload })
   <div class="file-preview-root">
     <!-- 悬浮下载按钮，定位在预览区右上角 -->
     <div v-if="rawUrl && !loading" class="preview-download-btn">
-      <VanButton size="small" type="primary" plain icon="down" @click="handleDownload">
+      <VanButton size="small" type="primary" plain icon="down" @pointerdown.stop="handleDownload">
         下载
       </VanButton>
     </div>
@@ -186,7 +186,8 @@ defineExpose({ init, download: handleDownload })
   position: absolute;
   top: 10px;
   right: 12px;
-  z-index: 10;
+  z-index: 100;
+  pointer-events: all;
 }
 
 .preview-loading {

package/src/components/data/XCellList/index.vue

@@ -2,7 +2,7 @@
 import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
 import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
 import { isDark } from '@af-mobile-client-vue3/composables/dark'
-import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
+import { getConfigByName, getConfigByNameWithoutIndexedDB, query } from '@af-mobile-client-vue3/services/api/common'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import { getRangeByType } from '@af-mobile-client-vue3/utils/queryFormDefaultRangePicker'
 import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
@@ -239,110 +239,126 @@ onBeforeMount(() => {
   initComponent()
 })
 
-// 组件初始化
-function initComponent() {
-  getConfigByName(configName, (result) => {
-    groupFormItems.value = result
-
-    // 数据主键名称
-    primaryKey.value = result.primaryKey
-    tableColumns.value = JSON.parse(JSON.stringify(result.columnJson))
-    rowKey = getPrimaryKeyName()
-
-    // 行样式函数
-    rowStyleFunction.value = result?.rowStyleFunction
-
-    title.value = result?.title
-    const isQuery = result.createdQuery
-    for (let i = 0; i < result.columnJson.length; i++) {
-      const item = result.columnJson[i]
-      item.span = item.flexSpan
-      if (item.slotType === 'badge')
-        item.dictName = item.slotKeyMap
-
-      if (item.mobileColumnType === 'mobile_header_column') {
-        mainColumns.value.push(item)
-      }
-      else if (item.mobileColumnType === 'mobile_subtitle_column') {
-        subTitleColumns.value.push(item)
-      }
-      else if (item.mobileColumnType === 'mobile_details_column') {
-        detailColumns.value.push(item)
-      }
-      else if (item.mobileColumnType === 'mobile_footer_column') {
-        footColumns.value.push(item)
-      }
-      else if (item.mobileColumnType === 'mobile_tag_column') {
-        tagList.value.push(item)
-      }
-      else if (item.slotType === 'action' && item.actionArr) {
-        for (let j = 0; j < item.actionArr.length; j++) {
-          allActions.value.push({
-            text: item.actionArr[j].text,
-            func: item.actionArr[j].func,
-            customFunction: item.actionArr[j].customFunction,
-          })
-        }
+function applyConfig(result: any) {
+  groupFormItems.value = result
+
+  // 数据主键名称
+  primaryKey.value = result.primaryKey
+  tableColumns.value = JSON.parse(JSON.stringify(result.columnJson))
+  rowKey = getPrimaryKeyName()
+
+  // 行样式函数
+  rowStyleFunction.value = result?.rowStyleFunction
+
+  title.value = result?.title
+  const isQuery = result.createdQuery
+  for (let i = 0; i < result.columnJson.length; i++) {
+    const item = result.columnJson[i]
+    item.span = item.flexSpan
+    if (item.slotType === 'badge')
+      item.dictName = item.slotKeyMap
+
+    if (item.mobileColumnType === 'mobile_header_column') {
+      mainColumns.value.push(item)
+    }
+    else if (item.mobileColumnType === 'mobile_subtitle_column') {
+      subTitleColumns.value.push(item)
+    }
+    else if (item.mobileColumnType === 'mobile_details_column') {
+      detailColumns.value.push(item)
+    }
+    else if (item.mobileColumnType === 'mobile_footer_column') {
+      footColumns.value.push(item)
+    }
+    else if (item.mobileColumnType === 'mobile_tag_column') {
+      tagList.value.push(item)
+    }
+    else if (item.slotType === 'action' && item.actionArr) {
+      for (let j = 0; j < item.actionArr.length; j++) {
+        allActions.value.push({
+          text: item.actionArr[j].text,
+          func: item.actionArr[j].func,
+          customFunction: item.actionArr[j].customFunction,
+        })
       }
+    }
 
-      if (item.mobileColumnType === 'mobile_header_column') {
-        try {
-          if (typeof item.btnIcon === 'string') {
-            // 字符串 => 直接作为数组的一项
-            btnList.value = [item.btnIcon]
-          }
-          else if (Array.isArray(item.btnIcon)) {
-            // 已经是数组 => 直接赋值
-            btnList.value = item.btnIcon
-          }
-          // 其他类型不处理
+    if (item.mobileColumnType === 'mobile_header_column') {
+      try {
+        if (typeof item.btnIcon === 'string') {
+          // 字符串 => 直接作为数组的一项
+          btnList.value = [item.btnIcon]
         }
-        catch (e) {
-          console.error('btnIcon 处理异常：', e)
+        else if (Array.isArray(item.btnIcon)) {
+          // 已经是数组 => 直接赋值
+          btnList.value = item.btnIcon
         }
+        // 其他类型不处理
       }
-
-      if (result.showSortIcon && item.sortable) {
-        orderList.value.push({
-          title: item.title,
-          value: item.dataIndex,
-        })
+      catch (e) {
+        console.error('btnIcon 处理异常：', e)
       }
     }
-    configContent.value = result
-    // 扁平化 type=group 的 groupItems，保持顺序
-    const flatFormJson = []
-    result.formJson.forEach((item) => {
-      if (item.type === 'group' && Array.isArray(item.groupItems)) {
-        item.groupItems.forEach((groupItem) => {
-          if (!groupItem.isOnlyAddOrEdit) {
-            flatFormJson.push(groupItem)
-          }
-        })
-      }
-      else {
-        if (!item.isOnlyAddOrEdit && item.type !== 'group') {
-          flatFormJson.push(item)
+
+    if (result.showSortIcon && item.sortable) {
+      orderList.value.push({
+        title: item.title,
+        value: item.dataIndex,
+      })
+    }
+  }
+  configContent.value = result
+  // 扁平化 type=group 的 groupItems，保持顺序
+  const flatFormJson = []
+  result.formJson.forEach((item) => {
+    if (item.type === 'group' && Array.isArray(item.groupItems)) {
+      item.groupItems.forEach((groupItem) => {
+        if (!groupItem.isOnlyAddOrEdit) {
+          flatFormJson.push(groupItem)
         }
+      })
+    }
+    else {
+      if (!item.isOnlyAddOrEdit && item.type !== 'group') {
+        flatFormJson.push(item)
       }
-    })
-    formQueryList.value = flatFormJson
-    console.log('formQueryList', formQueryList.value)
-    if (result.buttonState) {
-      buttonState.value = result.buttonState
-      buttonPermissions.value = result.buttonPermissions
-      if (buttonState.value.edit && buttonState.value.edit === true && (filterButtonPermissions('edit').state === false || ((filterButtonPermissions('edit').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('edit').roleStr))))))
-        allActions.value.push({ text: '修改', func: 'update' })
-      if (buttonState.value.delete && buttonState.value.delete === true && (filterButtonPermissions('delete').state === false || ((filterButtonPermissions('delete').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('delete').roleStr))))))
-        allActions.value.push({ text: '删除', func: 'delete' })
     }
-    splitArrayAt(allActions.value, 3)
+  })
+  formQueryList.value = flatFormJson
+  console.log('formQueryList', formQueryList.value)
+  if (result.buttonState) {
+    buttonState.value = result.buttonState
+    buttonPermissions.value = result.buttonPermissions
+    if (buttonState.value.edit && buttonState.value.edit === true && (filterButtonPermissions('edit').state === false || ((filterButtonPermissions('edit').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('edit').roleStr))))))
+      allActions.value.push({ text: '修改', func: 'update' })
+    if (buttonState.value.delete && buttonState.value.delete === true && (filterButtonPermissions('delete').state === false || ((filterButtonPermissions('delete').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('delete').roleStr))))))
+      allActions.value.push({ text: '删除', func: 'delete' })
+  }
+  splitArrayAt(allActions.value, 3)
 
-    // 初始化条件参数（从表单默认值中获取）
-    initConditionParams(result.formJson, isQuery)
+  // 初始化条件参数（从表单默认值中获取）
+  initConditionParams(result.formJson, isQuery)
 
-    // 自定义操作按钮
-    editButtonStateData.value = result.editButtonStateData
+  // 自定义操作按钮
+  editButtonStateData.value = result.editButtonStateData
+}
+
+// 组件初始化
+function initComponent() {
+  getConfigByName(configName, (result) => {
+    if (!result) {
+      getConfigByNameWithoutIndexedDB(configName, serviceName).then((res) => {
+        if (!res) {
+          isError.value = true
+          return
+        }
+        applyConfig(res)
+      }).catch(() => {
+        isError.value = true
+      })
+      return
+    }
+    applyConfig(result)
   }, serviceName)
 }
 

package/src/components/data/step/person-select.vue

@@ -1,168 +1,186 @@
-<script setup lang="ts">
-import {
-  Field as VanField,
-  Picker as VanPicker,
-  Popup as VanPopup,
-  Search as VanSearch,
-} from 'vant'
-import { computed, inject, onMounted, ref } from 'vue'
-
-const workflowHandleWrap: any = inject('workflowHandleWrap')
-
-const showPicker = ref(false)
-
-const showMultiplePicker = ref(false)
-
-const branchChargePersons = ref({})
-
-const isInit = ref(false)
-
-// 用于 filterOption 的本地输入缓存（vant 不自带 filter）
-const filterKeyword = ref('')
-
-const customFieldName = {
-  text: 'label',
-  value: 'value',
-}
-
-const selectedNode = ref(undefined)
-
-const selectedOptions = computed(() => {
-  if (!selectedNode.value) {
-    return []
-  }
-  return filterOptions(selectedNode.value.chargePersonOptions)
-})
-
-onMounted(() => {
-  isInit.value = false
-  if (workflowHandleWrap.branchNodes.value) {
-    // 初始化初始值
-    for (const node of workflowHandleWrap.branchNodes.value) {
-      branchChargePersons.value[node.stepId] = {
-        handler: '',
-        handlerId: '',
-      }
-    }
-  }
-  isInit.value = true
-})
-
-function setBranchPersonValue(stepId, value, options, selectedOptions) {
-  if (!stepId)
-    return
-  if (!workflowHandleWrap.branchChargePersons.value) {
-    workflowHandleWrap.branchChargePersons.value = {}
-  }
-  if (!workflowHandleWrap.branchChargePersons.value[stepId]) {
-    workflowHandleWrap.branchChargePersons.value[stepId] = {}
-  }
-  if (workflowHandleWrap.branchChargePersons.value[stepId]) {
-    branchChargePersons.value[stepId] = {
-      handler: options.find(item => item.value === value)?.label,
-      handlerId: value,
-    }
-    Object.assign(workflowHandleWrap.branchChargePersons.value[stepId], branchChargePersons.value[stepId])
-  }
-  workflowHandleWrap.checkedNextStepPerson.value = selectedOptions[0].value
-  workflowHandleWrap.checkedNextStepPersonName.value = selectedOptions[0].label
-}
-
-function getBranchSelectionLabel() {
-  if (workflowHandleWrap.needMultipleBranchSelection.value) {
-    return '分支处理人'
-  }
-  else if (workflowHandleWrap.calculatedTargetNode.value) {
-    return `${workflowHandleWrap.getStepNameByStepId(workflowHandleWrap.calculatedTargetNode.value)}处理人`
-  }
-  else {
-    return '处理人'
-  }
-}
-
-// vant 没有原生 filter-option，因此需要本地筛选
-function filterOptions(options) {
-  if (!filterKeyword.value)
-    return options
-  return options.filter(option => option.label.toLowerCase().includes(filterKeyword.value.toLowerCase()))
-}
-
-// 搜索回调函数
-function search(val: string) {
-  filterKeyword.value = val || ''
-}
-</script>
-
-<template>
-  <div v-if="workflowHandleWrap.isNeedSelectPerson.value && isInit">
-    <!-- 多分支选择 -->
-    <template v-if="workflowHandleWrap.needMultipleBranchSelection.value && workflowHandleWrap.branchNodes.value.length > 0">
-      <template v-for="node in workflowHandleWrap.branchNodes.value" :key="node.stepId">
-        <VanField
-          v-model="branchChargePersons[node.stepId].handler"
-          :label="`${node.stepName}处理人`"
-          is-link
-          clickable
-          required
-          placeholder="请选择处理人"
-          @click="selectedNode = node; showMultiplePicker = true;"
-        />
-      </template>
-      <VanPopup v-model:show="showMultiplePicker" position="bottom">
-        <!-- 搜索框 -->
-        <VanSearch
-          v-model="filterKeyword"
-          placeholder="搜索"
-          @clear="() => search('')"
-          @update:model-value="search"
-        />
-        <VanPicker
-          :columns="selectedOptions"
-          :columns-field-names="customFieldName"
-          value-key="label"
-          @confirm="(val) => {
-            setBranchPersonValue(selectedNode.stepId, val.selectedValues[0], selectedNode.chargePersonOptions, val.selectedOptions)
-            showMultiplePicker = false;
-          }"
-          @cancel="showMultiplePicker = false;"
-        />
-      </VanPopup>
-    </template>
-
-    <!-- 单分支选择 -->
-    <template v-else>
-      <VanField
-        v-model="workflowHandleWrap.checkedNextStepPersonName.value"
-        :label="getBranchSelectionLabel()"
-        label-width="auto"
-        is-link
-        clickable
-        required
-        placeholder="请选择处理人"
-        @click="showPicker = true"
-      />
-      <VanPopup v-model:show="showPicker" position="bottom">
-        <!-- 搜索框 -->
-        <VanSearch
-          v-model="filterKeyword"
-          placeholder="搜索"
-          @clear="() => search('')"
-          @update:model-value="search"
-        />
-        <VanPicker
-          :columns="filterOptions(workflowHandleWrap.nextStepPersonOptions.value)"
-          :columns-field-names="customFieldName"
-          @confirm="(val) => {
-            setBranchPersonValue(workflowHandleWrap.calculatedTargetNode.value, val.selectedValues[0], workflowHandleWrap.nextStepPersonOptions.value, val.selectedOptions)
-            showPicker = false;
-          }"
-          @cancel="showPicker = false;"
-        />
-      </VanPopup>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-/* 保持你的样式或根据 vant 移动端自行优化 */
-</style>
+<script setup lang="ts">
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+  Search as VanSearch,
+} from 'vant'
+import { computed, inject, onMounted, ref } from 'vue'
+
+const workflowHandleWrap: any = inject('workflowHandleWrap')
+
+const showPicker = ref(false)
+
+const showMultiplePicker = ref(false)
+
+const branchChargePersons = ref({})
+
+const isInit = ref(false)
+
+// 用于 filterOption 的本地输入缓存（vant 不自带 filter）
+const filterKeyword = ref('')
+
+const customFieldName = {
+  text: 'label',
+  value: 'value',
+}
+
+const selectedNode = ref(undefined)
+
+const selectedOptions = computed(() => {
+  if (!selectedNode.value) {
+    return []
+  }
+  return filterOptions(selectedNode.value.chargePersonOptions)
+})
+
+onMounted(() => {
+  isInit.value = false
+  if (workflowHandleWrap.branchNodes.value) {
+    // 初始化初始值
+    for (const node of workflowHandleWrap.branchNodes.value) {
+      branchChargePersons.value[node.stepId] = {
+        handler: '',
+        handlerId: '',
+      }
+    }
+  }
+  isInit.value = true
+})
+
+function setBranchPersonValue(stepId, value, options, selectedOptions) {
+  if (!stepId)
+    return
+  if (!workflowHandleWrap.branchChargePersons.value) {
+    workflowHandleWrap.branchChargePersons.value = {}
+  }
+  if (!workflowHandleWrap.branchChargePersons.value[stepId]) {
+    workflowHandleWrap.branchChargePersons.value[stepId] = {}
+  }
+  if (workflowHandleWrap.branchChargePersons.value[stepId]) {
+    branchChargePersons.value[stepId] = {
+      handler: options.find(item => item.value === value)?.label,
+      handlerId: value,
+    }
+    Object.assign(workflowHandleWrap.branchChargePersons.value[stepId], branchChargePersons.value[stepId])
+  }
+  workflowHandleWrap.checkedNextStepPerson.value = selectedOptions[0].value
+  workflowHandleWrap.checkedNextStepPersonName.value = selectedOptions[0].label
+}
+
+function getBranchSelectionLabel() {
+  if (workflowHandleWrap.needMultipleBranchSelection.value) {
+    return '分支处理人'
+  }
+  else if (workflowHandleWrap.calculatedTargetNode.value) {
+    return `${workflowHandleWrap.getStepNameByStepId(workflowHandleWrap.calculatedTargetNode.value)}处理人`
+  }
+  else {
+    return '处理人'
+  }
+}
+
+// vant 没有原生 filter-option，因此需要本地筛选
+function filterOptions(options) {
+  if (!filterKeyword.value)
+    return options
+  return options.filter(option => option.label.toLowerCase().includes(filterKeyword.value.toLowerCase()))
+}
+
+// 搜索回调函数
+function search(val: string) {
+  filterKeyword.value = val || ''
+}
+</script>
+
+<template>
+  <div v-if="workflowHandleWrap.isNeedSelectPerson.value && isInit">
+    <!-- 多分支选择 -->
+    <template v-if="workflowHandleWrap.needMultipleBranchSelection.value && workflowHandleWrap.branchNodes.value.length > 0">
+      <template v-for="node in workflowHandleWrap.branchNodes.value" :key="node.stepId">
+        <VanField
+          v-model="branchChargePersons[node.stepId].handler"
+          :label="`${node.stepName}处理人`"
+
+          clickable is-link required
+          placeholder="请选择处理人"
+          @click="selectedNode = node; showMultiplePicker = true;"
+        />
+      </template>
+      <VanPopup v-model:show="showMultiplePicker" position="bottom" teleport="body" round>
+        <div class="person-select-popup">
+          <VanSearch
+            v-model="filterKeyword"
+            placeholder="搜索"
+            @clear="() => search('')"
+            @update:model-value="search"
+          />
+          <VanPicker
+            show-toolbar
+            :columns="selectedOptions"
+            :columns-field-names="customFieldName"
+            value-key="label"
+            @confirm="(val) => {
+              setBranchPersonValue(selectedNode.stepId, val.selectedValues[0], selectedNode.chargePersonOptions, val.selectedOptions)
+              showMultiplePicker = false;
+            }"
+            @cancel="showMultiplePicker = false;"
+          />
+        </div>
+      </VanPopup>
+    </template>
+
+    <!-- 单分支选择 -->
+    <template v-else>
+      <VanField
+        v-model="workflowHandleWrap.checkedNextStepPersonName.value"
+        :label="getBranchSelectionLabel()"
+        label-width="auto"
+        is-link
+        clickable
+        required
+        placeholder="请选择处理人"
+        @click="showPicker = true"
+      />
+      <VanPopup v-model:show="showPicker" position="bottom" teleport="body" round>
+        <div class="person-select-popup">
+          <VanSearch
+            v-model="filterKeyword"
+            placeholder="搜索"
+            @clear="() => search('')"
+            @update:model-value="search"
+          />
+          <VanPicker
+            show-toolbar
+            :columns="filterOptions(workflowHandleWrap.nextStepPersonOptions.value)"
+            :columns-field-names="customFieldName"
+            @confirm="(val) => {
+              setBranchPersonValue(workflowHandleWrap.calculatedTargetNode.value, val.selectedValues[0], workflowHandleWrap.nextStepPersonOptions.value, val.selectedOptions)
+              showPicker = false;
+            }"
+            @cancel="showPicker = false;"
+          />
+        </div>
+      </VanPopup>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.person-select-popup {
+  max-height: 70vh;
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.person-select-popup :deep(.van-picker) {
+  flex: 1;
+  min-height: 0;
+}
+
+.person-select-popup :deep(.van-picker__columns) {
+  max-height: 40vh;
+}
+</style>

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

@@ -2,16 +2,17 @@
 import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
 import { onMounted, ref } from 'vue'
 
-const previewDocType = ref('docx')
+const previewDocType = ref('xlsx')
 // /resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc
 // /resource/af-revenue/word/46a87ec0a05143f98061a1ba43f19ed2.docx
-const previewDocUrl = ref('/resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc')
+// /resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx
+const previewDocUrl = ref('/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx')
 
 const filePreviewRef = ref<InstanceType<typeof FilePreview> | null>(null)
 
 onMounted(() => {
   filePreviewRef.value?.init({
-    path: '/resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc',
+    path: '/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx',
   })
 })
 </script>