wui-components-v2 1.0.98 → 1.1.1

package/components/action-popup/action-popup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineEmits, defineOptions, defineProps, ref } from 'vue'
-import type { Groups } from '../../type'
+import type { Enums, Groups } from '../../type'
 import formControl from '../form-control/form-control.vue'
 import { actionDataSave } from '../../api/page'
 import { useGlobalToast } from '../../composables/useGlobalToast'
@@ -14,6 +14,7 @@ const props = defineProps<
     show: boolean
     code: string
     zpaging: any
+    enumColumn?: Enums
   }
 >()
 const emits = defineEmits(['update:show'])
@@ -58,7 +59,7 @@ async function action() {
     <view class="h-50vh w-100vw">
       <view class="h-44px .dark:bg-gray-900 .light:bg-white" />
       <view class="w-[calc(100%-44px)] overflow-auto .dark:bg-gray-900 .light:bg-white">
-        <formControl v-if="props.fieldGroup" ref="formControlRef" :field-group="props.fieldGroup" />
+        <formControl v-if="props.fieldGroup" ref="formControlRef" :field-group="props.fieldGroup" :enum-column="enumColumn" />
         <view class="h-44px .dark:bg-gray-900 .light:bg-white" />
         <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 .dark:bg-gray-900 .light:bg-white">
           <wd-button :loading="btnLoading" custom-class="flex-1" @click="() => { action() }">

package/components/audio-play/audio-play.vue

@@ -0,0 +1,220 @@
+<script setup>
+import { computed, defineEmits, defineExpose, defineOptions, defineProps, ref, watch } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+
+defineOptions({
+  name: 'AudioPlay',
+})
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emit = defineEmits(['play', 'pause'])
+const { primary } = useManualTheme()
+const innerAudioContext = ref(null)
+const isPlaying = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+
+// 计算进度百分比
+const progressPercent = computed(() => {
+  return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
+})
+
+// 格式化时间显示
+function formatTime(seconds) {
+  if (Number.isNaN(seconds))
+    return '00:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// 初始化音频
+function initAudio() {
+  innerAudioContext.value = uni.createInnerAudioContext()
+  innerAudioContext.value.src = props.src
+  innerAudioContext.value.autoplay = props.autoplay
+
+  innerAudioContext.value.onPlay(() => {
+    isPlaying.value = true
+    emit('play')
+  })
+
+  innerAudioContext.value.onPause(() => {
+    isPlaying.value = false
+    emit('pause')
+  })
+
+  innerAudioContext.value.onTimeUpdate(() => {
+    currentTime.value = innerAudioContext.value.currentTime
+    duration.value = innerAudioContext.value.duration
+  })
+
+  innerAudioContext.value.onError((err) => {
+    isPlaying.value = false
+    console.error('播放错误:', err)
+  })
+
+  innerAudioContext.value.onEnded(() => {
+    isPlaying.value = false // 更新状态
+    currentTime.value = 0 // 重置进度
+    // emit('ended');          // 通知父组件
+  })
+}
+
+// 播放控制
+function play() {
+  if (!innerAudioContext.value)
+    initAudio()
+  innerAudioContext.value.play()
+}
+
+function pause() {
+  if (innerAudioContext.value) {
+    innerAudioContext.value.pause()
+  }
+}
+
+function togglePlay() {
+  if (isPlaying.value) {
+    pause()
+  }
+  else {
+    play()
+  }
+}
+
+// 监听src变化
+watch(() => props.src, (newVal) => {
+  if (innerAudioContext.value) {
+    innerAudioContext.value.src = newVal
+  }
+  else {
+    initAudio()
+  }
+})
+
+// 暴露方法
+defineExpose({
+  play,
+  pause,
+  isPlaying,
+})
+
+// 初始化
+initAudio()
+</script>
+
+<template>
+  <view class="mini-audio-player">
+    <!-- 播放/暂停按钮 -->
+    <button class="mini-play-btn" :style="{ background: primary }" @click="togglePlay">
+      <wd-icon v-if="isPlaying" name="pause" size="22px" color="#fff" />
+      <wd-icon v-else name="play" size="22px" color="#fff" />
+    </button>
+
+    <!-- 时间显示 -->
+    <text class="time-display">
+      {{ formatTime(currentTime) }}
+    </text>
+
+    <!-- 迷你进度条 -->
+    <view class="mini-progress">
+      <view class="mini-progress-bar" :style="{ width: `${progressPercent}%`, background: primary }" />
+    </view>
+
+    <!-- 总时间 -->
+    <text class="time-display">
+      {{ formatTime(duration) }}
+    </text>
+  </view>
+</template>
+
+<style scoped>
+.mini-audio-player {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    background-color: #f5f5f5;
+    border-radius: 18px;
+    padding: 0 5px;
+    width: 180px;
+}
+
+.mini-play-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #1890ff;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.mini-icon {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    margin-left: 1px;
+}
+
+.mini-icon::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid white;
+}
+
+.mini-icon.playing::before,
+.mini-icon.playing::after {
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 12px;
+    background: white;
+}
+
+.mini-icon.playing::before {
+    left: 3px;
+}
+
+.mini-icon.playing::after {
+    left: 8px;
+}
+
+.mini-progress {
+    flex: 1;
+    height: 3px;
+    background: #d9d9d9;
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 0 8px;
+}
+
+.mini-progress-bar {
+    height: 100%;
+    background: #1890ff;
+    transition: width 0.3s ease;
+}
+
+.time-display {
+    font-size: 10px;
+    color: #666;
+    min-width: 32px;
+    text-align: center;
+    font-family: monospace;
+}
+</style>

package/components/card-botom-buttons/card-botom-buttons.vue

@@ -2,7 +2,7 @@
 import { computed, defineOptions, defineProps, ref } from 'vue'
 import { useRouter } from 'uni-mini-router'
 import { onLoad } from '@dcloudio/uni-app'
-import type { ClassEditConfigs, Entities, Fields, Groups, rowActions } from '../../type'
+import type { ClassEditConfigs, Entities, Enums, Fields, Groups, rowActions } from '../../type'
 import ActionPopup from '../action-popup/action-popup.vue'
 import { actionDataSave } from '../../api/page'
 import { useGlobalToast } from '../../composables/useGlobalToast'
@@ -20,6 +20,8 @@ const props = defineProps<{
   rowActions?: rowActions[]
   ractions?: rowActions[]
   zpaging?: any
+  enumColumn?: Enums
+  detailButtonHandle?: () => void
 }>()
 const toast = useGlobalToast()
 const pageType = ref('')
@@ -86,6 +88,10 @@ function raction(subitem: rowActions) {
 
 // 跳转详情页面
 function detail() {
+  if (props.detailButtonHandle) {
+    props.detailButtonHandle()
+    return
+  }
   router.push(`/pages/details-page/index?sourceId=${props.sourceId}&id=${props.code}&title=${props.item.title}`)
 }
 
@@ -120,6 +126,6 @@ function isShowAction(item: rowActions) {
     <wd-button v-if="props.item.buttons.includes('detail')" size="small" type="info" @click="detail()">
       详情
     </wd-button>
-    <ActionPopup v-model:show="actionItemShow" :zpaging="props.zpaging" :field-group="actionItem" :code="props.code" />
+    <ActionPopup v-model:show="actionItemShow" :enum-column="enumColumn" :zpaging="props.zpaging" :field-group="actionItem" :code="props.code" />
   </view>
 </template>

package/components/fold-card/fold-card.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
   sourceId: string
   groups: Groups
   enumColumn?: Enums
+  index: number
 }>()
 const contentRef = ref<any>()
 // 展示内容
@@ -106,12 +107,12 @@ function toggleCollapse(contentId: string) {
         <view class="mb-3">
           <!-- 订单信息 -->
           <view class="text-sm space-y-3">
-            <LabelValue :exhibit-data="exhibitData" :data="data" />
+            <LabelValue :exhibit-data="exhibitData" :data="data" :index="index" />
 
             <!-- 可折叠内容 -->
             <view :id="`${data.code}`" ref="contentRef">
               <view class="pt-3 space-y-3">
-                <LabelValue :exhibit-data="collapseData" :data="data" />
+                <LabelValue :exhibit-data="collapseData" :data="data" :index="index" />
               </view>
             </view>
           </view>
@@ -119,6 +120,7 @@ function toggleCollapse(contentId: string) {
 
         <!-- 订单底部 -->
         <view class="flex items-center justify-between border-t border-gray-100">
+          <!-- 折叠按钮 -->
           <view>
             <wd-button
               v-if="showCollapse"

package/components/label-value/label-value.vue

@@ -4,6 +4,7 @@ import type { Columns, Entities } from '../../type'
 import { downloadFile, formatItemData } from '../../utils'
 import ControlTypeSupportor from '../../utils/control-type-supportor'
 import VideoPlay from '../video-play/video-play.vue'
+import AudioPlay from '../audio-play/audio-play.vue'
 import { useManualTheme } from '../../composables/useManualTheme'
 
 defineOptions({
@@ -12,11 +13,13 @@ defineOptions({
 const props = defineProps<{
   exhibitData: Columns[]
   data: Entities
+  index: number
 }>()
 const { primary } = useManualTheme()
 const clums = computed(() => {
   return props.exhibitData.filter(item => !item.title?.includes('y'))
 })
+
 const videoPlayRef = ref()
 function openVideo(uitem: any) {
   videoPlayRef.value.open(uitem.url)
@@ -28,12 +31,12 @@ function isControlType(item: Columns): string {
 </script>
 
 <template>
-  <view v-for="(item, index) in clums" :key="index" class="flex">
+  <view v-for="(item, sindex) in clums" :key="sindex" class="flex">
     <view class="mr-2 w-20 p-1 text-gray-500 dark:text-white">
       {{ item.title }}:
     </view>
     <view
-      v-if="isControlType(item) === 'file' || isControlType(item) === 'relfile'"
+      v-if="isControlType(item) === 'file' || isControlType(item) === 'relfile' || isControlType(item) === 'video'"
       class="flex flex-1 items-center text-gray-800 dark:text-white"
     >
       <view v-if="data.fieldMap[item.sourceId]">
@@ -63,6 +66,13 @@ function isControlType(item: Columns): string {
           >
             <wd-icon name="play-circle-filled" size="22px" />
           </view>
+          <!-- 音频 -->
+          <view
+            v-else-if="['mp3', 'wma', 'wav', 'aac', 'ogg', 'flac', 'm4a', 'amr'].includes(uitem.type)"
+            style="display: flex;align-items: center;justify-content: center;"
+          >
+            <AudioPlay :src="uitem.url" />
+          </view>
           <!-- 文件 -->
           <view v-else-if="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt', 'zip', 'rar', '7z', 'gz', 'bz2', 'tar', 'iso', 'exe', 'dmg', 'apk', 'apk', 'apk', 'apk', 'apk', 'apk', 'apk', 'apk'].includes(uitem.type)">
             <span :style="{ color: primary }" @click="downloadFile(uitem.url)">
@@ -72,6 +82,9 @@ function isControlType(item: Columns): string {
         </view>
       </view>
     </view>
+    <view v-else-if="item.title === '序号'" class="flex flex-1 items-center text-gray-800 dark:text-white">
+      {{ index + 1 }}
+    </view>
     <view v-else class="flex flex-1 items-center text-gray-800 dark:text-white">
       {{ formatItemData(data.fieldMap[item.sourceId], isControlType(item)) }}
     </view>

package/components/wui-details-page/wui-details-page.vue

@@ -125,13 +125,13 @@ async function getDetailData() {
     </view>
     <view v-else>
       <wd-collapse v-model="collapses">
-        <wd-collapse-item v-for="group in pageConfig.groups" :key="group.id" :title="group.title" :name="group.id">
-          <view v-if="group.type === 'fieldGroup'">
-            <LabelValue :exhibit-data="group.fields" :data="data" />
+        <wd-collapse-item v-for="(group, index) in pageConfig.groups" :key="group.id" :title="group.title" :name="group.id">
+          <view v-if="group.type === 'fieldGroup'" class="text-sm space-y-3">
+            <LabelValue :index="index" :exhibit-data="group.fields" :data="data" />
           </view>
           <view v-if="group.type === 'relation'">
-            <view v-for="field in data.arrayMap[group.id]" :key="field.code">
-              <foldCard :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields" model="complex" :data="field">
+            <view v-for="(field, subindex) in data.arrayMap[group.id]" :key="field.code">
+              <foldCard :index="subindex" :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields" model="complex" :data="field">
                 <template #buttons>
                   <CardBotomButtons :source-id="group.id" :item="groups" :code="field.code" :data="data" />
                 </template>

package/components/wui-edit-page/wui-edit-page.vue

@@ -699,8 +699,8 @@ function handleFileChange(e: any, group: Groups) {
                   新增
                 </wd-button>
               </view>
-              <view v-for="field in pageConfig?.entity?.arrayMap[group.id]" :key="field.code">
-                <foldCard :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields" model="complex" :data="field">
+              <view v-for="(field, index) in pageConfig?.entity?.arrayMap[group.id]" :key="field.code">
+                <foldCard :index="index" :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields" model="complex" :data="field">
                   <template v-if="!group.readOnly" #buttons>
                     <wd-button v-if="group.buttons.includes('dtmplEdit')" size="small" @click="edit(group, field)">
                       编辑

package/components/wui-list/wui-list.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineOptions, ref } from 'vue'
+import { defineOptions, defineProps, ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { enums, listData, pageConfig, pageKey } from '../../api/page'
 import foldCard from '../fold-card/fold-card.vue'
@@ -11,6 +11,9 @@ import CardBotomButtons from '../card-botom-buttons/card-botom-buttons.vue'
 defineOptions({
   name: 'WuiList',
 })
+defineProps<{
+  detailButtonHandle?: () => void
+}>()
 const Zpaging = ref<any>(null)
 const config = ref<Config>({
   buttons: [],
@@ -129,7 +132,22 @@ async function queryList(pageNo: number, pageSize: number) {
 async function getEnums() {
   try {
     const params: string[] = []
-    config.value.criterias?.forEach((item: any) => {
+    const criterias = config.value?.criterias ?? []
+    const columns = config.value.columns ?? []
+    const writes = config.value.rowActions?.reduce((acc: any, cur: any) => {
+      return [...acc, ...cur.writes]
+    }, []) || []
+    columns.forEach((item: any) => {
+      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+        params.push(`mstrucIds=${item.mstrucId}`)
+      }
+    })
+    criterias.forEach((item: any) => {
+      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+        params.push(`mstrucIds=${item.mstrucId}`)
+      }
+    })
+    writes.forEach((item: any) => {
       if (item.controlType === 'select' || item.controlType === 'multiselect') {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
@@ -165,10 +183,10 @@ function submitSearch(data: any) {
       </view>
       <slot name="top" />
     </template>
-    <foldCard v-for="item in datas" :key="item.code" :enum-column="enumColumn" :collapse-num="5" :source-id="sourceId" :groups="config" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" :label-column="config.labelColumn" model="complex">
+    <foldCard v-for="(item, index) in datas" :key="item.code" :index="index" :enum-column="enumColumn" :collapse-num="5" :source-id="sourceId" :groups="config" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" :label-column="config.labelColumn" model="complex">
       <template #buttons>
         <slot name="cardBotomButtons" :data="item" />
-        <CardBotomButtons :zpaging="Zpaging" :row-actions="config.rowActions" :ractions="config.ractions" :source-id="sourceId" :item="config" :code="item.code" :page-type="pageType" :data="item" />
+        <CardBotomButtons :detail-button-handle="detailButtonHandle" :zpaging="Zpaging" :enum-column="enumColumn" :row-actions="config.rowActions" :ractions="config.ractions" :source-id="sourceId" :item="config" :code="item.code" :page-type="pageType" :data="item" />
       </template>
     </foldCard>
     <template #bottom>

package/components/wui-select-list/wui-select-list.vue

@@ -246,7 +246,7 @@ function submitSearch(data: any) {
       <slot name="top" />
     </template>
 
-    <foldCard v-for="item in datas" :key="item.code" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" :model="model" :groups="config" :source-id="sourceId" @click="() => { handleChange(item) }">
+    <foldCard v-for="(item, index) in datas" :key="item.code" :index="index" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" :model="model" :groups="config" :source-id="sourceId" @click="() => { handleChange(item) }">
       <template #select>
         <wd-checkbox :true-value="`${item.code}`" false-value="" :model-value="selectDataforMat[item.code]" />
       </template>

package/composables/useManualTheme.ts

@@ -79,6 +79,7 @@ export function useManualTheme() {
    */
   function selectThemeColor(option: ThemeColorOption) {
     store.setCurrentThemeColor(option)
+    store.setNavigationBarColor()
     closeThemeColorPicker()
   }
 

package/package.json

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

package/store/manualThemeStore.ts

@@ -60,8 +60,8 @@ export const useManualThemeStore = defineStore('manualTheme', {
      */
     setNavigationBarColor() {
       uni.setNavigationBarColor({
-        frontColor: this.theme === 'light' ? '#000000' : '#ffffff',
-        backgroundColor: this.theme === 'light' ? '#ffffff' : '#000000',
+        frontColor: this.theme === 'light' ? '#ffffff' : '#ffffff',
+        backgroundColor: this.theme === 'light' ? this.themeVars.colorTheme : '#000000',
       })
     },
 

package/utils/index.ts

@@ -39,7 +39,7 @@ export function formatItemData(data: any, type: string) {
     return data ? data.split('.')[0] : ''
   }
 
-  if (type === 'file' || type === 'relfile') {
+  if (type === 'file' || type === 'relfile' || type === 'video') {
     if (data) {
       // 判断是否为JSON文件
       if (typeof data === 'string') {