From 5e1d9c1714201a7c6a12cde703e228a76dd6df71 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 27 Aug 2025 11:18:47 +0800
Subject: [PATCH] =?UTF-8?q?1.=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E6=93=8D=E4=BD=9C=E5=8C=BA=E5=9F=9F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96,=E9=BB=98=E8=AE=A4=E5=80=BC=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E6=97=B6=E9=97=B4,=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=8F=AF=E6=93=8D=E4=BD=9Cbug=E4=BF=AE=E5=A4=8D=202.=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=BB=84=E4=BB=B6=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E4=B8=8A=E4=BC=A0=E9=97=AE=E9=A2=98=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=203.=E9=93=BE=E6=8E=A5=E7=BB=84=E4=BB=B6=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=97=A0=E6=B3=95=E8=B7=B3=E8=BD=AC=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lowCode/assistant/datePicker.vue          | 179 ++++++++++--------
 src/components/lowCode/assistant/urlLink.vue  |  22 ++-
 .../lowCode/assistant/videoUpAndPlay.vue      | 106 ++++++++++-
 src/components/lowCode/newFormItem.vue        |  33 ++++
 4 files changed, 251 insertions(+), 89 deletions(-)

diff --git a/src/components/lowCode/assistant/datePicker.vue b/src/components/lowCode/assistant/datePicker.vue
index 4463fbd..b2a590b 100644
--- a/src/components/lowCode/assistant/datePicker.vue
+++ b/src/components/lowCode/assistant/datePicker.vue
@@ -5,6 +5,8 @@
 -->
 <script lang='ts' setup>
 import dayJs from 'dayjs'
+import { ref, computed } from 'vue';
+import { DatePicker } from '@nutui/nutui';
 
 const props = withDefaults(
 	defineProps<{
@@ -38,13 +40,13 @@ const selectType = computed(() => {
 	}
 })
 function timestampToTargetFormat(timestamp: string) {
-	
+
 	// 将输入转换为数字类型的时间戳（毫秒）
 	const ms = Number(timestamp);
 	// 创建Date对象
 	const date = new Date(ms);
 	// Date对象的toString()方法恰好返回目标格式
-	
+
 	return date;
 }
 
@@ -195,14 +197,14 @@ const formatStart = computed(() => {
 	//console.log(value.value[0])
 	let val = new Date(parseInt(value.value[0], 10));
 	let group = props.data.control.type
-	let type= props.data.control.valueFormat
+	let type = props.data.control.valueFormat
+
 
-	
 
 	/* console.log(val)
 	console.log(group)
 	console.log(type) */
-	if (val&&value.value[0]&&value.value[0]!="") {
+	if (val && value.value[0] && value.value[0] != "") {
 		//console.log(111)
 		hasValue1.value = true
 		switch (group) {
@@ -277,14 +279,14 @@ const formatEnd = computed(() => {
 	//console.log(value.value[1])
 	let val = new Date(parseInt(value.value[1], 10));
 	let group = props.data.control.type
-	let type= props.data.control.valueFormat
+	let type = props.data.control.valueFormat
+
 
-	
 
 	/* console.log(val)
 	console.log(group)
 	console.log(type) */
-	if (val&&value.value[1]&&value.value[1]!="") {
+	if (val && value.value[1] && value.value[1] != "") {
 		//console.log(111)
 		hasValue2.value = true
 		switch (group) {
@@ -357,8 +359,7 @@ const formatEnd = computed(() => {
 
 
 
-import { ref, computed } from 'vue';
-import { DatePicker } from '@nutui/nutui';
+
 
 const showPicker = ref(false);
 
@@ -492,90 +493,97 @@ const shichang = computed(() => {
 	let end = value.value[1]
 	console.log(start)
 	console.log(end)
-	let a = calculateTimeDiff(start,end)
+	let a = calculateTimeDiff(start, end)
 	return a
 })
 function calculateTimeDiff(startTimestamp: string, endTimestamp: string) {
-    // 解析时间戳为数字
-    const start = parseInt(startTimestamp, 10);
-    const end = parseInt(endTimestamp, 10);
-    
-    // 计算时间差（毫秒）并取绝对值
-    const diffMs = Math.abs(end - start);
-    
-    // 计算总分钟数并四舍五入
-    const totalMinutes = Math.round(diffMs / 60000);
-    
-    // 计算总小时数（带小数）
-    const totalHours = totalMinutes / 60;
-    
-    // 处理小时进位情况
-    if (totalHours < 24) {
-        // 不足一天：四舍五入到小时
-        return `${Math.round(totalHours)} 小时`;
-    } else {
-        // 计算完整天数
-        const days = Math.floor(totalHours / 24);
-        // 计算剩余小时数（四舍五入）
-        const remainingHours = Math.round(totalHours % 24);
-        
-        // 处理小时进位（当剩余小时为24时）
-        if (remainingHours === 24) {
-            return `${days + 1} 天 0 小时`;
-        }
-        return `${days} 天 ${remainingHours} 小时`;
-    }
-}
+	// 解析时间戳为数字
+	const start = parseInt(startTimestamp, 10);
+	const end = parseInt(endTimestamp, 10);
+
+	// 计算时间差（毫秒）并取绝对值
+	const diffMs = Math.abs(end - start);
 
-function singleShow(){
-	//console.log(value.value)
-	if(value1.value==""){
-		value1.value = getTimestamp()
+	// 计算总分钟数并四舍五入
+	const totalMinutes = Math.round(diffMs / 60000);
+
+	// 计算总小时数（带小数）
+	const totalHours = totalMinutes / 60;
+
+	// 处理小时进位情况
+	if (totalHours < 24) {
+		// 不足一天：四舍五入到小时
+		return `${Math.round(totalHours)} 小时`;
+	} else {
+		// 计算完整天数
+		const days = Math.floor(totalHours / 24);
+		// 计算剩余小时数（四舍五入）
+		const remainingHours = Math.round(totalHours % 24);
+
+		// 处理小时进位（当剩余小时为24时）
+		if (remainingHours === 24) {
+			return `${days + 1} 天 0 小时`;
+		}
+		return `${days} 天 ${remainingHours} 小时`;
 	}
-	show.value = true
 }
-function rangeShowStart(){
+const types = props.types;
+function singleShow() {
+	if (types == 1||types == 2) {
+		if (value1.value == "") {
+			value1.value = getTimestamp()
+		}
+		show.value = true
+	}
 
-	if(startValue1.value==""){
-		startValue1.value = getTimestamp()
+}
+function rangeShowStart() {
+	if (types == 1||types == 2) {
+		if (startValue1.value == "") {
+			startValue1.value = getTimestamp()
+		}
+		showStart.value = true
 	}
-	showStart.value = true
-	
+
+
 }
 
-function rangeShowEnd(){
-	if(endValue1.value==""){
-		endValue1.value = getTimestamp()
+function rangeShowEnd() {
+	if (types == 1||types == 2) {
+		if (endValue1.value == "") {
+			endValue1.value = getTimestamp()
+		}
+		showEnd.value = true
 	}
-	showEnd.value = true
+
 
 }
 
 function getTimestamp() {
-	
-    const now = new Date();
-    let timestamp;
-    
-    switch(type.value) {
-        case 'year-month':
-            // 设置为当前年当前月1日0时0分1秒
-            const yearMonthDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 1);
-            timestamp = yearMonthDate
-            break;
-        case 'date':
-            // 设置为当前年当前月当前日0时0分1秒
-            const dateDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1);
-            timestamp = dateDate
-            break;
-        case 'datetime':
-            // 返回当前时刻的时间戳
-            timestamp = now
-            break;
-        default:
-            throw new Error('参数必须是"year-month"、"date"或"datetime"之一');
-    }
-    
-    return timestamp;
+
+	const now = new Date();
+	let timestamp;
+
+	switch (type.value) {
+		case 'year-month':
+			// 设置为当前年当前月1日0时0分1秒
+			const yearMonthDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 1);
+			timestamp = yearMonthDate
+			break;
+		case 'date':
+			// 设置为当前年当前月当前日0时0分1秒
+			const dateDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1);
+			timestamp = dateDate
+			break;
+		case 'datetime':
+			// 返回当前时刻的时间戳
+			timestamp = now
+			break;
+		default:
+			throw new Error('参数必须是"year-month"、"date"或"datetime"之一');
+	}
+
+	return timestamp;
 }
 
 </script>
@@ -626,9 +634,9 @@ function getTimestamp() {
 	<div v-if="selectType == 'range'"
 		style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
 		@click="rangeShowStart">
-		<el-text   v-if="hasValue1" class="wordColor">{{ formatStart
+		<el-text v-if="hasValue1" class="wordColor">{{ formatStart
 		}}</el-text>
-		<el-text v-if="!hasValue1" class="wordColor1">{{  formatStart
+		<el-text v-if="!hasValue1" class="wordColor1">{{ formatStart
 		}}</el-text>
 	</div>
 
@@ -640,16 +648,19 @@ function getTimestamp() {
 	<div v-if="selectType == 'range'"
 		style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
 		@click="rangeShowEnd">
-		<el-text  v-if="hasValue2" class="wordColor">{{ formatEnd
+		<el-text v-if="hasValue2" class="wordColor">{{ formatEnd
 		}}</el-text>
-		<el-text v-if="!hasValue2" class="wordColor1">{{formatEnd
+		<el-text v-if="!hasValue2" class="wordColor1">{{ formatEnd
 		}}</el-text>
 	</div>
 	<!-- <div v-if="selectType == 'range'"
 		style="border: 0px solid #DCDFE6; padding-left: 8px; width: 10%;height: 97%;border-radius: 5px;">
 		<el-text class="wordColor">时长:23天</el-text>
 	</div> -->
-	<div v-if="selectType=='range'&&value[0]&&value[1]" style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;"><div style="float:right">{{ shichang }}</div></div>
+	<div v-if="selectType == 'range' && value[0] && value[1]"
+		style="float:right;border: black 0px solid;position: absolute; pointer-events: none;bottom: -26px;color:#A8ABB2 ;width: 100%; font-size: smaller;">
+		<div style="float:right">{{ shichang }}</div>
+	</div>
 
 
 </template>
diff --git a/src/components/lowCode/assistant/urlLink.vue b/src/components/lowCode/assistant/urlLink.vue
index f2dcec6..02dd096 100644
--- a/src/components/lowCode/assistant/urlLink.vue
+++ b/src/components/lowCode/assistant/urlLink.vue
@@ -142,6 +142,25 @@ const formatCustomRules = () => {
 const urlVal = ref("http://")
 //访问URL
 const openUrl = () => {
+	console.log(1)
+	alert(1)
+	let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i;
+	console.log("编码组件-url-1111-》",value.value,patt.test(value.value))
+	if(patt.test(value.value)){
+		// console.log("编码组件-url--》",value)
+		window.open(value.value,'_blank')
+	}else{
+		// console.log("编码组件-url-1-》",value)
+		window.open(urlVal.value+value.value,'_blank')
+	}
+
+	// router.push({path:value})
+}
+
+
+function openUrl1(){
+	/* console.log(1)
+	alert(1) */
 	let patt = /^http(s)?:\/\/[\w-]+(\.[\w-]+)+(\:\d+)?(\/\w+)*(\?\w+=.*(\&\w+=.*)*)?$/i;
 	console.log("编码组件-url-1111-》",value.value,patt.test(value.value))
 	if(patt.test(value.value)){
@@ -168,7 +187,8 @@ onMounted(() => {
 		</template>
 		<template #append><el-button type="warning" @click="openUrl">访问</el-button></template>
 	</el-input>
-	<div v-else class="wordColor" @click="openUrl">{{urlVal}}{{value}}</div>
+	
+	<div v-else style="border: 0px solid black; cursor: pointer; color:#0000EE; text-decoration:underline;" class="wordColor" @click="openUrl1">{{urlVal}}{{value}}</div><el-button v-show="false" type="warning" @click="openUrl">访问</el-button>
 </template>
 <style  lang='scss' scoped>
 .wordColor{
diff --git a/src/components/lowCode/assistant/videoUpAndPlay.vue b/src/components/lowCode/assistant/videoUpAndPlay.vue
index 7f62750..dcae267 100644
--- a/src/components/lowCode/assistant/videoUpAndPlay.vue
+++ b/src/components/lowCode/assistant/videoUpAndPlay.vue
@@ -5,11 +5,20 @@
 -->
 <script lang='ts' setup>
 import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
+import request from '@/utils/axios/index'
+import { ref, computed } from 'vue'
+import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
+import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm'
+import SvgIcon from '@/components/svgIcon/index.vue'
+import { useAttrs } from 'vue';
 const props = defineProps({
   // eslint-disable-next-line vue/require-default-prop
   data: {
     type: Object,
   },
+  pageType: {
+    type: Number,
+  },
   valInfo: {
     type: String,
   },
@@ -51,25 +60,92 @@ const openVideo = () => {
   console.log("单机播放")
 }
 
+
+const emits = defineEmits(["updateVideoUrl"]);
+
 const imgUrl = computed({
   get() {
     if (props.modelValue != "") {
       return props.modelValue;
-    } else if (props.valInfo != "") {
+    } else if (props.valInfo&&props.valInfo != "") {
       return props.valInfo;
     } else {
       return props.data?.control.videoMsg[0].url;
     }
   },
   set(val: any) {
-    emits("update:valInfo", val);
+    console.log(val)
+    emits("updateVideoUrl", val);
   },
 });
+
+
+const beforeRemove = () => {
+  return false;
+};
+
+const store = useDesignFormStore() as any;
+
+const controlData = computed(() => {
+  // console.log("注册自定义事件----------------->",props.formInfo)
+  // console.log("注册自定义事件--------1--------->", store.controlAttr);
+  // console.log("注册自定义事件---------3-------->", controlData.value.customRules);
+  return store.controlAttr;
+});
+const videoIndex = ref(0);
+//上传成功钩子
+const videoUploadOk = (
+  response: any,
+  uploadFile: UploadFile,
+  uploadFiles: UploadFiles
+) => {
+  const { control = {} }: { control: any } = controlData.value;
+
+  console.log("上传成功钩子", controlData.value);
+
+  console.log("上传成功钩子--------->", props.data?.control.videoMsg);
+  // imgUrl.value = response.data.url;
+  console.log("上传成功钩子----1----->", imgUrl.value, response.data.url);
+  emits("updateVideoUrl", response.data.url);
+  props.data.control.videoMsg[videoIndex.value].url = response.data.url;
+  props.data.control.videoMsg[videoIndex.value].videoReady = true;
+  props.data.control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt;
+  props.data.control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt;
+  props.data.control.videoMsg[videoIndex.value].fileSize = response.data.fileSize;
+  props.data.control.videoMsg[videoIndex.value].id = response.data.id;
+  props.data.control.videoMsg[videoIndex.value].key = response.data.key;
+  props.data.control.videoMsg[videoIndex.value].name = response.data.name;
+  props.data.control.videoMsg[videoIndex.value].physicspath = response.data.physicspath;
+  props.data.control.videoMsg[videoIndex.value].size = response.data.size;
+  props.data.control.videoMsg[videoIndex.value].tag = response.data.tag;
+  props.data.control.videoMsg[videoIndex.value].type = response.data.type;
+  //props.modelValue = response.data.url;
+};
+//上传失败钩子
+const videoUploadErr = (
+  error: Error,
+  uploadFile: UploadFile,
+  uploadFiles: UploadFiles
+) => {
+  alert("上传失败,请重试");
+  // console.log("上传失败"+error);
+};
+
+const handleExceed: UploadProps["onExceed"] = (files) => {
+  upload.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  upload.value!.handleStart(file);
+};
+
+const attrs = useAttrs(); 
+const types = attrs.types;
+
 </script>
 <template>
   <div class="butBox" @click="openVideo">按钮</div>
   <div>
-    <video  
+    <!-- <video  
       
         :loop="data?.control.videoMsg[0].loop"
         :autoplay="data?.control.videoMsg[0].videoAutoPlay"
@@ -80,7 +156,29 @@ const imgUrl = computed({
         <source :src="imgUrl" type="video/mp4">
 
         您的浏览器不支持 HTML5 标签
-    </video>
+    </video> -->
+    <video
+    :src="imgUrl"
+    :loop="data?.control.videoMsg[0].loop"
+    :autoplay="data?.control.videoMsg[0].videoAutoPlay"
+    :style="getFormItemInputStyle(configStyle, 2)"
+    controls
+  ></video>
+
+    <el-upload
+    v-if="types!=3"
+    class="avatar-uploader"
+    :action="uploadUrl"
+    :before-remove="beforeRemove"
+    :on-success="videoUploadOk"
+    :show-file-list="false"
+    :on-error="videoUploadErr"
+    :on-exceed="handleExceed"
+    accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"
+  >
+    <!-- <el-icon class="avatar-uploader-icon" ><Plus /></el-icon> -->
+    <div style="display: flex; justify-content: center; max-width: 40px; font-weight: 600;"><SvgIcon  icon-class="videoupload" :size="'40px'" /></div>
+  </el-upload>
     
   </div>
 </template>
diff --git a/src/components/lowCode/newFormItem.vue b/src/components/lowCode/newFormItem.vue
index c3dcdb9..4c4d2f0 100644
--- a/src/components/lowCode/newFormItem.vue
+++ b/src/components/lowCode/newFormItem.vue
@@ -270,6 +270,16 @@ const getLabel = (ele: FormItem) => {
 function asfValueChanged(val:any){
 	emits("asfValueChanged",val)
 }
+
+const  updateContentVideo =  (val: any) => {
+    console.log("更新数据-------->",val)
+    alert(1)
+    value.value = val;
+    /* props.data.control.videoMsg[0].url = val;
+    console.log("更新数据-------->", val);
+    console.log("更新数据----1---->", value.value);
+    console.log("更新数据----2---->", props.data.control.videoMsg[0].url); */
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-11-13 16:18:59
@@ -392,6 +402,11 @@ const currentComponent = computed(() => {
     }
 })
 
+const testPage = (val:any) =>{
+    console.log("刷新数据-------->", val);
+}
+
+
 </script>
 <template>
     <el-form-item
@@ -408,6 +423,7 @@ const currentComponent = computed(() => {
         <template #label v-else>
             <span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span>
         </template>
+        <!-- {{ data.type }} -->
         <!--关联表单-->
         <component
             v-if="['associatedForms'].includes(data.type)"
@@ -424,6 +440,23 @@ const currentComponent = computed(() => {
             v-model="value"
             @asf-value-changed="asfValueChanged"
         />
+        <!--视频-->
+        <component
+            v-if="['videoUpAndPlay'].includes(data.type)"
+            :types="type"
+            :is="currentComponent"
+            :data="data"
+            v-bind="control"
+            :control="control"
+            :config="config"
+            :name="control.file || 'file'"
+            :disabled="judgeIsDisabled(data.name)"
+            :options="options"
+            v-model="value"
+            :val-info="value"
+            @updateVideoUrl="updateContentVideo"
+            @testPage = "testPage"
+        />
         <!--单行文本及密码组件-->
         <component
             v-else