wui-components-v2 1.0.87 → 1.0.89

package/components/batch-upload-file/batch-upload-file.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { defineEmits, defineOptions, onBeforeMount, ref } from 'vue'
+
+defineOptions({
+  name: 'BatchUploadFile',
+})
+const emit = defineEmits(['handleFileChange'])
+const fileTypes = [
+  {
+    label: '照片',
+    value: 'image',
+  },
+  {
+    label: '视频',
+    value: 'video',
+  },
+  // {
+  //   label: '文件',
+  //   value: 'file',
+  // },
+]
+const fileType = ref<any>('image')
+const show = ref(false)
+const action = ref('')
+const hydrocarbonProgramToken = ref('')
+const token = ref('')
+onBeforeMount(() => {
+  action.value = uni.getStorageSync('BASE_URL')
+  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
+  token.value = uni.getStorageSync('TOKEN')
+})
+function handleFileChange(e: any) {
+  show.value = false
+  emit('handleFileChange', e)
+}
+</script>
+
+<template>
+  <wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="show = false">
+    <view class="p-3">
+      <wd-radio-group v-model="fileType" shape="dot">
+        <wd-radio v-for="item in fileTypes" :key="item.value" :value="item.value">
+          {{ item.label }}
+        </wd-radio>
+      </wd-radio-group>
+      <wd-upload
+        custom-class="custom-upload"
+        :multiple="true" :accept="fileType"
+        :header="{ 'hydrocarbon-program-token': hydrocarbonProgramToken, 'hydrocarbon-token': token }"
+        :action="`${action}/v3/upload`" @success="(e) => { handleFileChange(e) }"
+      >
+        <view class="p-t-3">
+          <wd-button size="small" type="info" block class="w-200px">
+            确定
+          </wd-button>
+        </view>
+      </wd-upload>
+    </view>
+  </wd-popup>
+  <wd-button size="small" type="info" @click="show = true">
+    批量上传
+  </wd-button>
+</template>
+
+<style scoped>
+:deep(.custom-upload .wd-upload__preview) {
+  display: none !important;
+}
+</style>

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

@@ -15,6 +15,21 @@ const props = defineProps<{
   entity?: { [key: string]: string }
   enumColumn?: Enums
 }>()
+const fileTypes = [
+  {
+    label: '照片',
+    value: 'image',
+  },
+  {
+    label: '视频',
+    value: 'video',
+  },
+  // {
+  //   label: '文件',
+  //   value: 'file',
+  // },
+]
+const fileType = ref<any>('image')
 const action = ref<string>('')
 const hydrocarbonProgramToken = ref<string>('')
 const token = ref<string>('')
@@ -245,7 +260,13 @@ defineExpose({
             :placeholder="`请输入${item.title}`"
           />
           <wd-cell v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'file' || ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relfile' " :prop="item.sourceId" :title="item.title" title-width="100px">
+            <wd-radio-group v-if="!item.disabled" v-model="fileType" inline shape="dot" custom-class="custom-radio">
+              <wd-radio v-for="(titem, index) in fileTypes" :key="index" :value="titem.value">
+                {{ titem.label }}
+              </wd-radio>
+            </wd-radio-group>
             <wd-upload
+              :accept="fileType"
               :disabled="item.disabled"
               :limit="1"
               :header="{ 'hydrocarbon-program-token': hydrocarbonProgramToken, 'hydrocarbon-token': token }"
@@ -292,3 +313,10 @@ defineExpose({
     </wd-form>
   </view>
 </template>
+
+<style scoped>
+:deep(.custom-radio){
+  display: flex;
+  padding: 4px;
+}
+</style>

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

@@ -3,6 +3,7 @@ import { computed, defineOptions, defineProps } from 'vue'
 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'
 
 defineOptions({
   name: 'LabelValue',
@@ -14,15 +15,19 @@ const props = defineProps<{
 const clums = computed(() => {
   return props.exhibitData.filter(item => !item.title?.includes('y'))
 })
+const videoPlayRef = ref()
+// function splitUrlStr(str: string) {
+//   if (str) {
+//     const strarr = str.split('&')
+//     return strarr[strarr.length - 1].split('=')[1] || ''
+//   }
+//   else {
+//     return '暂无文件'
+//   }
+// }
 
-function splitUrlStr(str: string) {
-  if (str) {
-    const strarr = str.split('&')
-    return strarr[strarr.length - 1].split('=')[1] || ''
-  }
-  else {
-    return '暂无文件'
-  }
+function openVideo(uitem: any) {
+  videoPlayRef.value.open(uitem.url)
 }
 
 function isControlType(item: Columns): string {
@@ -37,14 +42,15 @@ function isControlType(item: Columns): string {
     </view>
     <view v-if="isControlType(item) === 'file' || isControlType(item) === 'relfile'" class="flex-1 text-gray-800 dark:text-white">
       <view v-if="data.fieldMap[item.sourceId]">
-        <view v-for="(url, uindex) in formatItemData(data.fieldMap[item.sourceId], isControlType(item))" :key="uindex">
-          <wd-img enable-preview :width="100" :height="100" :src="url">
+        <view v-for="(uitem, uindex) in formatItemData(data.fieldMap[item.sourceId], isControlType(item))" :key="uindex">
+          <wd-img v-if="['png', 'jpg', 'jpeg'].includes(uitem.type)" enable-preview :width="100" :height="100" :src="uitem.url">
             <template #error>
-              <view class="error-wrap">
+              <!-- <view class="error-wrap">
                 <wd-button type="text" @click="downloadFile(url)">
                   {{ splitUrlStr(url) || '' }}
                 </wd-button>
-              </view>
+              </view> -->
+              无图片
             </template>
             <template #loading>
               <view class="loading-wrap">
@@ -52,6 +58,9 @@ function isControlType(item: Columns): string {
               </view>
             </template>
           </wd-img>
+          <view v-else-if="['mp4', 'mov', 'wmv', 'avi', 'rmvb', 'flv', 'mkv'].includes(uitem.type)" style="width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;border: 1px solid #ccc;border-radius: 4px;" @click="openVideo(uitem)">
+            <wd-icon name="play-circle-filled" size="22px" />
+          </view>
         </view>
       </view>
     </view>
@@ -59,4 +68,5 @@ function isControlType(item: Columns): string {
       {{ formatItemData(data.fieldMap[item.sourceId], isControlType(item)) }}
     </view>
   </view>
+  <videoPlay ref="videoPlayRef" />
 </template>

package/components/video-play/video-play.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { defineOptions, ref } from 'vue'
+
+defineOptions({
+  name: 'VideoPlay',
+})
+const key = ref(1)
+const show = ref(false)
+const url = ref('')
+defineExpose({
+  open: (e: any) => {
+    key.value++
+    console.log(e)
+    show.value = true
+    url.value = e
+  },
+})
+</script>
+
+<template>
+  <wd-popup v-model="show" :lazy-render="false">
+    <view :key="key">
+      <video
+        style="width: 300px;height: 225px;"
+        :src="url"
+        controls
+      />
+    </view>
+  </wd-popup>
+</template>
+
+<style>
+
+</style>

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

@@ -9,6 +9,7 @@ import { useGlobalToast } from '../../composables/useGlobalToast'
 import foldCard from '../fold-card/fold-card.vue'
 import { generateHighResolutionID } from '../../utils/index'
 import TreeSelectControl from '../tree-select/index.vue'
+import batchUploadFile from '../batch-upload-file/batch-upload-file.vue'
 
 defineOptions({
   name: 'WuiEditPage',
@@ -683,17 +684,11 @@ function handleFileChange(e: any, group: Groups) {
             </view>
             <view v-else>
               <view v-if="!group.readOnly" class="w-upload flex justify-center gap-2">
-                <wd-upload
+                <batchUploadFile
                   v-if="group.batchAddFileField && group.batchAddFileField.extControlType === 'file'"
-                  :multiple="true"
-                  :header="{ 'hydrocarbon-program-token': hydrocarbonProgramToken, 'hydrocarbon-token': token }"
-                  :action="`${action}/v3/upload`"
-                  @success="(e) => { handleFileChange(e, group) }"
-                >
-                  <wd-button size="small" type="info">
-                    批量上传
-                  </wd-button>
-                </wd-upload>
+                  @handle-file-change="(e) => { handleFileChange(e, group) }"
+                />
+
                 <wd-button v-if="group.buttons.includes('selectAdd')" :disabled="canClick(group)" type="info" size="small" @click="gotoSlect(group)">
                   选择
                 </wd-button>
@@ -734,7 +729,5 @@ function handleFileChange(e: any, group: Groups) {
 </template>
 
 <style scoped>
-:deep(.w-upload .wd-upload__preview){
-  display: none;
-}
+
 </style>

package/package.json

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

package/utils/index.ts

@@ -42,22 +42,38 @@ export function formatItemData(data: any, type: string) {
       // 判断是否为JSON文件
       if (typeof data === 'string') {
         const a = JSON.parse(data)
-        return [`${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`]
+        return [{
+          url: `${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`,
+          name: a.base.path.fileName,
+          type: a.base.type,
+        }]
       }
       else if (Array.isArray(data)) {
         return data.map((item) => {
           if (item.includes('@R@')) {
             const a = JSON.parse(item.split('@R@')[1])
-            return `${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`
+            return [{
+              url: `${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`,
+              name: a.base.path.fileName,
+              type: a.base.type,
+            }]
           }
           else {
             const a = JSON.parse(item)
-            return `${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`
+            return [{
+              url: `${baseUrl}/v3/files${a.base.path}?@token=${token}&@programToken=${hydrocarbonProgramToken}&name=${a.base.fileName || ''}`,
+              name: a.base.path.fileName,
+              type: a.base.type,
+            }]
           }
         })
       }
       else {
-        return data.url
+        return [{
+          url: data.url,
+          name: data.name,
+          type: data.name.split('.')[1],
+        }]
       }
     }
     return ''