wui-components-v2 1.1.56 → 1.1.57

package/components/form-control/form-control.vue

@@ -11,6 +11,7 @@ import CustomDatePicker from '../custom-date-picker/custom-date-picker.vue'
 import addAddressPage from '../add-address-page/add-address-page.vue'
 import userChoose from '../user-choose/user-choose.vue'
 import { generateHighResolutionID } from '../../utils/index'
+import scanInput from '../scan-input/scan-input.vue'
 // import { enums } from '../../api/page'
 defineOptions({
   name: 'FormControl',
@@ -91,6 +92,12 @@ function initFormData() {
       return models[item.sourceId] = (props.entity && dayjs(props.entity[item.sourceId]).valueOf()) || (item.transDefaultValue && dayjs(item.transDefaultValue).valueOf()) || null
     }
 
+    // 评分
+    if (ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress') {
+      const val = props.entity?.[item.sourceId]
+      return models[item.sourceId] = (val !== undefined && val !== null && val !== '') ? Number(val) : 0
+    }
+
     return models[item.sourceId] = (props.entity && props.entity[item.sourceId]) || item.transDefaultValue || ''
   })
 
@@ -480,6 +487,22 @@ defineExpose({
               <wd-input-number v-model="model[item.sourceId]" :disabled="item.disabled || item.rowEditType === 'readonly'" :min="Number(item.min || 0)" :max="Number(item.max || Infinity)" />
             </view>
           </wd-form-item>
+          <wd-form-item
+            v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'QRCode'"
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <scanInput v-model="model[item.sourceId]" :disabled="item.disabled || item.rowEditType === 'readonly'" />
+          </wd-form-item>
+           <wd-form-item
+            v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress'"
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-rate v-model="model[item.sourceId]" :disabled="item.disabled || item.rowEditType === 'readonly'" />
+          </wd-form-item>
           <!-- done -->
           <wd-form-item
             v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'yes-no-switch'"

package/components/scan-input/scan-input.vue

@@ -1,34 +1,72 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 
 defineOptions({
   name: 'ScanInput',
 })
 
+// ---- 类型 ----
+type Html5QrcodeInstance = {
+  start: (config: object, opts: object, onSuccess: (text: string) => void, onFailure: () => void) => Promise<void>
+  stop: () => Promise<void>
+  clear: () => Promise<void>
+  isScanning?: boolean
+}
+
+// ---- Props ----
 const props = withDefaults(defineProps<{
+  /** v-model 绑定值 */
+  modelValue?: string
+  /** 自动启动扫码 */
   autoStart?: boolean
+  /** 占位文本 */
   placeholder?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 扫码成功后自动关闭弹窗 (H5) */
+  autoCloseOnSuccess?: boolean
+  /** 扫码成功后是否展示 toast 提示 */
+  showSuccessToast?: boolean
 }>(), {
+  modelValue: '',
   autoStart: false,
   placeholder: '请输入或扫描二维码/条形码',
+  disabled: false,
+  autoCloseOnSuccess: true,
+  showSuccessToast: true,
 })
 
 const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
   (e: 'scan', data: string): void
   (e: 'input', data: string): void
   (e: 'error', error: string): void
 }>()
 
-const inputValue = ref('')
+// ---- 状态 ----
+const inputValue = ref(props.modelValue)
 const isScanning = ref(false)
 const showScanModal = ref(false)
 const isLoading = ref(false)
-let html5QrcodeScanner: any = null
+let html5QrcodeScanner: Html5QrcodeInstance | null = null
+let scanLocked = false
+
+// v-model 同步
+watch(() => props.modelValue, (val) => { inputValue.value = val })
+watch(inputValue, (val) => { emit('update:modelValue', val); emit('input', val) })
+
+/** 外部可调用的方法 */
+function clear() { inputValue.value = '' }
+function focus() { /* wd-input 聚焦可通过 ref 实现 */ }
+
+defineExpose({ clear, focus, startScan: handleStartScan, stopScan })
 
+// ======================== H5 平台扫码 ========================
 // #ifdef H5
 import { Html5Qrcode } from 'html5-qrcode'
 
-function checkCameraEnvironment(): { ok: boolean, reason?: string } {
+/** 环境检测 */
+function checkCameraEnvironment(): { ok: boolean; reason?: string } {
   const hostname = window.location.hostname
   if (hostname === 'localhost' || hostname === '127.0.0.1') return { ok: true }
   if (window.location.protocol !== 'https:') {
@@ -38,7 +76,7 @@ function checkCameraEnvironment(): { ok: boolean, reason?: string } {
 }
 
 async function startScan() {
-  if (isScanning.value) return
+  if (isScanning.value || scanLocked) return
   const envCheck = checkCameraEnvironment()
   if (!envCheck.ok) {
     uni.showToast({ title: envCheck.reason || '环境不支持', icon: 'none' })
@@ -48,40 +86,48 @@ async function startScan() {
   isLoading.value = true
   isScanning.value = true
   showScanModal.value = true
+  scanLocked = false
 
   try {
     await nextTick()
-    // 减少延时，库已打包进 bundle 无需等待加载
     await new Promise(r => setTimeout(r, 200))
 
     const container = document.getElementById('h5-scan-reader')
-    if (!container) throw new Error('容器未找到')
+    if (!container) throw new Error('扫码容器未找到')
 
-    html5QrcodeScanner = new Html5Qrcode('h5-scan-reader')
+    html5QrcodeScanner = new Html5Qrcode('h5-scan-reader') as unknown as Html5QrcodeInstance
 
     await html5QrcodeScanner.start(
       { facingMode: 'environment' },
-      {
-        fps: 5,
-        // 不设置 qrbox，全屏显示摄像头画面
-      },
+      { fps: 5 },
       (decodedText: string) => {
-        console.log('扫码成功:', decodedText)
-        // 防抖：短时间内多次触发只处理第一次
-        if (!isScanning.value) return
+        if (scanLocked || !isScanning.value) return
+        scanLocked = true // 加锁防止重复触发
+
+        console.log('[ScanInput] 扫码成功:', decodedText)
         inputValue.value = decodedText
         emit('scan', decodedText)
-        emit('input', decodedText)
-        stopScan()
-        uni.showToast({ title: '扫描成功', icon: 'success' })
+        if (props.showSuccessToast) uni.showToast({ title: '扫描成功', icon: 'success' })
+        if (props.autoCloseOnSuccess) stopScan()
       },
-      () => {}, // 忽略中间帧错误
+      () => {}, // 忽略中间帧未识别错误
     )
+
+    // JS 强制全屏 video（html5-qrcode 库会覆盖 CSS，需运行时修正）
+    const videoEl = document.querySelector('#h5-scan-reader video') as HTMLVideoElement | null
+    if (videoEl) {
+      Object.assign(videoEl.style, {
+        width: '100%',
+        height: '100vh',
+        objectFit: 'cover',
+        objectPosition: 'center',
+      })
+    }
   }
-  catch (error: any) {
-    console.error('扫码启动失败:', error)
+  catch (error: unknown) {
+    console.error('[ScanInput] 启动失败:', error)
+    const errMsg = error instanceof Error ? error.message : String(error)
     let msg = '摄像头访问失败'
-    const errMsg = error.message || ''
     if (/Permission|NotAllowed/i.test(errMsg)) msg = '请允许浏览器使用摄像头'
     else if (/NotFound|not found/i.test(errMsg)) msg = '未检测到摄像头设备'
     else if (/secure origin|insecure/i.test(errMsg)) msg = '需要HTTPS环境才能使用摄像头'
@@ -99,24 +145,25 @@ async function startScan() {
 async function stopScan() {
   isScanning.value = false
   showScanModal.value = false
+  scanLocked = false
   if (html5QrcodeScanner) {
     try {
       if (html5QrcodeScanner.isScanning) await html5QrcodeScanner.stop()
-      html5QrcodeScanner.clear()
+      await html5QrcodeScanner.clear()
     }
-    catch { /* ignore */ }
+    catch { /* ignore cleanup error */ }
     html5QrcodeScanner = null
   }
 }
 // #endif
 
+// ======================== 非 H5 平台扫码 ========================
 function startUniScanCode() {
   // #ifndef H5
   uni.scanCode({
-    success(res: any) {
+    success(res: UniApp.ScanCodeSuccessRes) {
       inputValue.value = res.result
       emit('scan', res.result)
-      emit('input', res.result)
       uni.showToast({ title: '扫描成功', icon: 'success' })
     },
     fail() { emit('error', '扫描已取消') },
@@ -124,7 +171,9 @@ function startUniScanCode() {
   // #endif
 }
 
+// ======================== 公共方法 ========================
 function handleStartScan() {
+  if (props.disabled) return
   // #ifdef H5
   isScanning.value ? stopScan() : startScan()
   // #endif
@@ -133,17 +182,30 @@ function handleStartScan() {
   // #endif
 }
 
+/** 点击遮罩层关闭 (仅 H5) */
+function handleModalMaskClick() {
+  // #ifdef H5
+  stopScan()
+  // #endif
+}
+
 function handleConfirm() {
-  if (inputValue.value.trim()) emit('scan', inputValue.value.trim())
+  const val = inputValue.value.trim()
+  if (val) emit('scan', val)
 }
 
-onMounted(() => { if (props.autoStart) handleStartScan() })
-onUnmounted(() => { /* #ifdef H5 */ stopScan() /* #endif */ })
+// ---- 生命周期 ----
+onMounted(() => { if (props.autoStart && !props.disabled) handleStartScan() })
+onUnmounted(() => {
+  // #ifdef H5
+  stopScan()
+  // #endif
+})
 </script>
 
 <template>
   <view class="si-wrap">
-    <!-- 使用 wot-ui wd-input -->
+    <!-- 输入框 -->
     <wd-input
       v-model="inputValue"
       class="!pr-3"
@@ -152,37 +214,43 @@ onUnmounted(() => { /* #ifdef H5 */ stopScan() /* #endif */ })
       confirm-type="search"
       clearable
       no-border
+      :disabled="disabled"
       custom-class="si-wd-input"
       @confirm="handleConfirm"
-      @change="(val: string) => emit('input', val)"
       suffix-icon="scan"
-       @clicksuffixicon="handleStartScan"
-    >
-    </wd-input>
+      @clicksuffixicon="handleStartScan"
+    />
 
     <!-- #ifdef H5 -->
-    <!-- 全屏扫码遮罩 -->
-    <view v-if="showScanModal" class="si-modal" catchtouchmove>
+    <!-- 全屏扫码弹窗 -->
+    <view
+      v-if="showScanModal"
+      class="si-modal"
+      catchtouchmove
+      @click="handleModalMaskClick"
+    >
       <!-- 摄像头区域 -->
-      <view class="si-camera-area">
+      <view class="si-camera-area" @click.stop>
         <!-- 加载中 -->
         <view v-if="isLoading" class="si-loading-mask">
           <view class="si-loading-box">
             <text class="si-loading-text">正在启动摄像头...</text>
           </view>
         </view>
-        <!-- 渲染容器 -->
-        <div id="h5-scan-reader" class="si-reader" />
-        <!-- 扫描框装饰 -->
-        <view v-show="isScanning && !isLoading" class="si-scan-frame">
-          <view class="si-scan-line" />
-        </view>
-      </view>
 
-      <!-- 底部提示 -->
-      <view class="si-modal-footer">
-        <text class="si-tip">识别二维码 / 条形码 / 商品码等</text>
+        <!-- 渲染容器 + 扫描线 -->
+        <view class="si-reader-wrap  overflow-hidden">
+          <div id="h5-scan-reader" class="si-reader" />
+          <view v-show="isScanning && !isLoading" class="si-scan-frame">
+            <view class="si-scan-line" />
+          </view>
+        </view>
       </view>
+            <!-- 底部提示栏 -->
+      <view class="si-modal-footer" @click.stop>
+        <text class="si-tip">将二维码 / 条形码放入框内即可自动识别</text>
+        <text class="si-close-text" @click="stopScan">关闭</text>
+      </view>s
     </view>
     <!-- #endif -->
   </view>
@@ -191,17 +259,18 @@ onUnmounted(() => { /* #ifdef H5 */ stopScan() /* #endif */ })
 <!-- 全局样式：html5-qrcode 内部元素 -->
 <style lang="scss">
 #h5-scan-reader {
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  display: flex;
+  width: 100% !important;
+  height: 100vh !important;
 
   video {
-    border-radius: inherit;
-    object-fit: cover;
+    width: 100% !important;
+    height: 100vh !important;
+    object-fit: cover !important;
+    object-position: center !important;
   }
 
-  #qr-shaded-region {
+  #qr-shaded-region,
+  #html5-qrcode-anchor-scan-region {
     border-radius: inherit;
   }
 }
@@ -210,76 +279,85 @@ onUnmounted(() => { /* #ifdef H5 */ stopScan() /* #endif */ })
 <style scoped lang="scss">
 .si-wrap {
   width: 100%;
-  padding: 16rpx;
   box-sizing: border-box;
 
-  // ---- wot-ui 输入框容器 ----
+  // ---- 输入框容器 ----
   :deep(.si-wd-input) {
-    background: #f6f7f9;
+    background: transparent;
     border-radius: 10rpx;
-    border: 2rpx solid #eaecef;
+    border: none;
     padding-right: 4rpx;
+
+    &.is-disabled {
+      opacity: 0.6;
+    }
   }
 
-  // ---- 全屏扫码遮罩 ----
+  // ---- 全屏扫码弹窗 ----
   .si-modal {
     position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
+    inset: 0;
     z-index: 999;
     background: #000;
-    display: flex;
-    flex-direction: column;
   }
 
   .si-camera-area {
-    flex: 1;
     width: 100%;
+    height: 100%;
     position: relative;
     overflow: hidden;
 
-    .si-reader {
+    // 摄像头包装容器（全屏）
+    .si-reader-wrap {
       position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
+      inset: 0;
+      overflow: hidden;
+    }
+
+    // 摄像头渲染容器
+    .si-reader {
       width: 100%;
-      height: 50vh;
+      height: 100%;
     }
 
-    // ---- 扫描框（覆盖在 reader 上方） ----
+    // 扫描动画线（全屏时收缩在视频可视区域中间）
     .si-scan-frame {
       position: absolute;
-      top: 50%;
+      top: 0;
+      bottom: 0;
       left: 0;
-      transform: translateY(-50%);
-      width: 100%;
-      height: 50vh;
+      right:0;
       pointer-events: none;
       z-index: 5;
       overflow: hidden;
+      width:100vw;
+      height: 100vh;
 
       .si-scan-line {
         position: absolute;
-        top: 0;
+        top: 2%;
         left: 10rpx;
         right: 10rpx;
         height: 6rpx;
-        background: #07C160;
+        background: #07c160;
         border-radius: 3rpx;
-        box-shadow: 0 0 20rpx 4rpx rgba(7,193,96,0.7);
+        box-shadow: 0 0 20rpx 4rpx rgba(7, 193, 96, 0.7);
         animation: si-sweep 2.5s ease-in-out infinite;
       }
     }
 
+    // 加载中遮罩
     .si-loading-mask {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       z-index: 10;
+      background: rgba(0, 0, 0, 0.5);
 
       .si-loading-box {
-        background: rgba(0,0,0,0.75);
+        background: rgba(0, 0, 0, 0.75);
         padding: 30rpx 48rpx;
         border-radius: 16rpx;
 
@@ -291,22 +369,38 @@ onUnmounted(() => { /* #ifdef H5 */ stopScan() /* #endif */ })
     }
   }
 
+  // 底部提示栏（绝对定位在弹窗底部）
   .si-modal-footer {
-    padding: 40rpx 32rpx 80rpx;
-    text-align: center;
-    flex-shrink: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    padding: 40rpx 32rpx calc(80rpx + env(safe-area-inset-bottom, 0));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24rpx;
 
     .si-tip {
-      color: rgba(255,255,255,0.65);
+      color: rgba(255, 255, 255, 0.65);
       font-size: 26rpx;
       letter-spacing: 2rpx;
     }
+
+    .si-close-text {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 30rpx;
+      padding: 12rpx 48rpx;
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+      border-radius: 40rpx;
+    }
   }
 }
 
 @keyframes si-sweep {
-  0% { top: 0; opacity: 1; }
+  0% { top:30%; opacity: 1; }
   50% { opacity: 1; }
-  100% { top: calc(100% - 4rpx); opacity: 0.3; }
+  100% { top: 70%; opacity: 0.3; }
 }
 </style>

package/components/user-choose/user-choose.vue

@@ -100,8 +100,9 @@ const emitIfNeeded = (val: string) => {
 }
 
 onMounted(() => {
-  if (currentValue.value) {
-    const requestId= currentValue.value.includes('$$user.')? currentValue.value.split('$$user.')[1] : currentValue.value
+  const raw = currentValue.value
+  if (raw && typeof raw === 'string') {
+    const requestId = raw.includes('$$user.') ? raw.split('$$user.')[1] : raw
     fetchDataById(requestId)
   }
 

package/components/wui-user/wui-user.vue

@@ -99,8 +99,8 @@ function setting() {
       /> -->
       <!-- <wd-cell title="修改密码" icon="keywords" :is-link="true" :clickable="true"  /> -->
       <wd-cell title="系统设置" icon="setting" :is-link="true" :clickable="true" @click="setting" />
-      <wd-cell title="退出登录" icon="logout" :is-link="true" :clickable="true" @click="quit" />
        <wd-cell title="清空缓存"  :is-link="true" :clickable="true" @click="clearCache" />
+      <wd-cell title="退出登录" icon="logout" :is-link="true" :clickable="true" @click="quit" />
     </wd-cell-group>
     <wd-dialog />
   </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wui-components-v2",
-  "version": "1.1.56",
+  "version": "1.1.57",
   "description": "wui 组件库",
   "author": "wgxshh",
   "license": "MIT",

package/type.ts

@@ -59,6 +59,7 @@ export interface Config extends Groups {
   defaultCriteriaValue?: { [key: string]: string }
   split2TabCriterias?: Split2TabCriterias[]
   extShowConfig?: { [key: string]: any }
+  extDisplayConfig?: { [key: string]: any }
 }
 
 // 列表数据

package/utils/control-type-supportor.ts

@@ -82,6 +82,9 @@ SupportInputTypes.add('ltree-entity-select-value')
 SupportInputTypes.add('ltree-entity-select')
 SupportInputTypes.add('field-history')
 SupportInputTypes.add('relfile')
+SupportInputTypes.add('QRCode')
+SupportInputTypes.add('progress')
+
 
 const CUSTOM_VIEW_CONTROL_MAP: { [key: string]: string } = {}
 
@@ -139,6 +142,7 @@ ControlTypeSupportor.getControlType = function (fieldConfig: Fields, fieldValue?
   if (fieldValue && Array.isArray(fieldValue) && itemType === 'relselect' && fieldValue.length > 0 && fieldValue[0].includes('valid')) {
     itemType = 'file'
   }
+  console.log('itemType', itemType)
   return itemType
 }