pc版bug修改完毕封板

src/components/DesignForm/public/form/formItem.vue

@@ -1053,6 +1053,7 @@ const diGuiJilian = (val: any, options: any[]) => {
   <VideoUpAndPlay
     v-else-if="judgeIsShow(data.name) && data.type === 'videoUpAndPlay'"
     :data="data"
+    :page-type="type"
   />
 
   <LowcodeTransfer

src/widget/videoupload/index.vue

@@ -11,65 +11,80 @@
     :rules="itemRules as any"
     :label="getLabel(data.item as FormItem)"
   >
-        <input  v-model="value" type="hidden" >
+    <input v-model="value" type="hidden" />
-		<VideoUploadPlay :data="props.data"></VideoUploadPlay>
+    <VideoUploadPlay
+      :data="props.data"
+      :page-type="pageType"
+      :val-info="value"
+      @upDateInfo="updatecontent"
+    ></VideoUploadPlay>
   </el-form-item>
-
-    
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
-import VideoUploadPlay   from './videoUploadPlay.vue';
+import VideoUploadPlay from "./videoUploadPlay.vue";
-import { 
+import { constControlChange, constFormProps } from "@/api/DesignForm/utils";
-	constControlChange,
+import validate from "@/api/DesignForm/validate";
-    constFormProps,
+import { FormItem, FormList } from "@/api/DesignForm/types";
-} from '@/api/DesignForm/utils'
-import validate from '@/api/DesignForm/validate'
-import { FormItem, FormList } from '@/api/DesignForm/types'
 const props = withDefaults(
   defineProps<{
-		data: FormList
+    data: FormList;
-		tablekey: any
+    pageType: number;
-		numrun?: number
+    tablekey: any;
-		modelValue?: any // 子表和弹性布局时时有传
+    numrun?: number;
-		tProp?: string // 子表时的form-item的prop值，用于子表校验用
+    modelValue?: any; // 子表和弹性布局时时有传
+    tProp?: string; // 子表时的form-item的prop值，用于子表校验用
   }>(),
   {}
-)
+);
 const emits = defineEmits<{
-    (e: 'update:modelValue', numVal: any): void
+  (e: "update:modelValue", numVal: any): void;
-}>()
+}>();
 
-const formProps = inject(constFormProps, {}) as any
+const formProps = inject(constFormProps, {}) as any;
 const type = computed(() => {
-    return formProps.value.type
+  return formProps.value.type;
-})
+});
 const config = computed(() => {
-    return props.data.config || {}
+  return props.data.config || {};
-})
+});
 
-const changeEvent = inject(constControlChange, '') as any
+const changeEvent = inject(constControlChange, "") as any;
 
 const value = computed({
   get() {
     if (props.tProp) {
       // 表格和弹性布局
-			return props.modelValue
+      return props.modelValue;
     } else {
-			return formProps.value.model[props.data.name]
+      return formProps.value.model[props.data.name];
     }
   },
   set(newVal: any) {
     if (props.tProp) {
-			emits('update:modelValue', newVal)
+      emits("update:modelValue", newVal);
-		}
-		updateModel(newVal)
     }
-})
+    updateModel(newVal);
+  },
+});
+
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-05 13:48:20
+@ 功能: 更新数据
+*/
+const updatecontent = (val: any) => {
+  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);
+};
+
 const updateModel = (val: any) => {
-	let controlAttribute = ""
+  let controlAttribute = "";
-	if(props.data.control){
+  if (props.data.control) {
-		if(props.data.control.type){
+    if (props.data.control.type) {
-			controlAttribute = props.data.control.type
+      controlAttribute = props.data.control.type;
     }
   }
   changeEvent &&
@@ -79,90 +94,80 @@ const updateModel = (val: any) => {
       data: props.data,
       tProp: props.tProp,
       type: props.data.type,
-		attribute: controlAttribute
+      attribute: controlAttribute,
-    })
+    });
-}
+};
-
-
 
 const getLabel = (ele: FormItem) => {
-    const showColon = formProps.value.showColon ? '：' : ''
+  const showColon = formProps.value.showColon ? "：" : "";
   if (ele) {
-    	return ele.showLabel ? '' : ele.label + showColon
+    return ele.showLabel ? "" : ele.label + showColon;
   } else {
-      	return ''
+    return "";
   }
-}
+};
 
 // 返回当前item项的校验规则
 const itemRules = computed(() => {
-    let temp
+  let temp;
-    const itemR: any = props.data.item?.rules || []
+  const itemR: any = props.data.item?.rules || [];
-    const customR = formatCustomRules()
+  const customR = formatCustomRules();
   // 如果三个都没有设置，则返回undefined
   if (itemR?.length || customR?.length) {
-      	temp = [...customR, ...itemR]
+    temp = [...customR, ...itemR];
   }
-    return temp
+  return temp;
-})
+});
 // 处理自定义校验规则，将customRules转换后追加到rules里
 const formatCustomRules = () => {
-    const rulesReg: any = {}
+  const rulesReg: any = {};
   validate &&
-    validate.forEach(item => {
+    validate.forEach((item) => {
-        rulesReg[item.type] = item.regExp
+      rulesReg[item.type] = item.regExp;
-    })
+    });
 
   // 获取校验方法 父级使用provide方法注入
-    const temp: any = []
+  const temp: any = [];
   props.data.customRules?.forEach((item: any) => {
-		if (!item.message && item.type !== 'methods') {
+    if (!item.message && item.type !== "methods") {
-			return // 方法时允许提示信息为空
+      return; // 方法时允许提示信息为空
     }
-		let obj = {}
+    let obj = {};
-		if (item.type === 'required') {
+    if (item.type === "required") {
-			obj = { required: true }
+      obj = { required: true };
-		} else if (item.type === 'rules') {
+    } else if (item.type === "rules") {
       // 自定义表达式
-			obj = { pattern: item.rules }
+      obj = { pattern: item.rules };
-		} else if (item.type === 'methods') {
+    } else if (item.type === "methods") {
       // 方法时
-			const methods: any = item.methods
+      const methods: any = item.methods;
       if (methods) {
-			obj = { validator: inject(methods, {}) }
+        obj = { validator: inject(methods, {}) };
       }
     } else if (item.type) {
-			obj = { pattern: rulesReg[item.type as string] }
+      obj = { pattern: rulesReg[item.type as string] };
     }
     // 这里判断下防某些条件下重复push的可能或存重复校验类型
-		let message: any = { message: item.message }
+    let message: any = { message: item.message };
     if (!item.message) {
       // 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
-			message = {}
+      message = {};
     }
     temp.push(
       Object.assign(
         {
-					trigger: item.trigger || 'blur'
+          trigger: item.trigger || "blur",
         },
         obj,
         message
       )
-		)
+    );
-    })
+  });
-    return temp
+  return temp;
-}
+};
-
-
-
-
-
-
-
-
 </script>
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
-.imgbox{
+.imgbox {
   padding: 0 5px;
   max-width: 300px;
   max-height: 200px;

src/widget/videoupload/videoUploadPlay.vue

@@ -1,56 +1,153 @@
 <template>
-  <!-- <p>{{ videoHeight }}</p>
+  <!-- <p>{{ videoHeight }}</p>-->
-  <p>{{ videoWidth }}</p> -->
+  <!-- <p>{{ props.pageType }}</p> -->
   <video
-    :src="data?.control.videoMsg[0].url"
+    :src="imgUrl"
     :loop="data?.control.videoMsg[0].loop"
     :autoplay="data?.control.videoMsg[0].videoAutoPlay"
-
+    :style="getFormItemInputStyle(configStyle, 2)"
-		:style="getFormItemInputStyle(configStyle,2)"
     controls
+  ></video>
+  <el-upload
+    v-if="props.pageType == 1 || props.pageType == 2"
+    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"
   >
-  </video>
+    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+  </el-upload>
 </template>
 
 <script setup lang="ts">
-import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'
+import {
+  AnalysisCss,
+  AnalysisInputCss,
+} from "@/components/DesignForm/public/form/calculate/cssInfo.ts";
+import { uploadUrl } from "@/api/DesignForm";
+import { useDesignFormStore } from "@/store/DesignForm/designForm";
+import type { UploadInstance, UploadProps, UploadRawFile, genFileId } from "element-plus";
 
 const props = defineProps({
   // eslint-disable-next-line vue/require-default-prop
   data: {
     type: Object,
+  },
+  pageType: {
+    type: Number,
+  },
+  valInfo: {
+    type: String,
+  },
+});
+
+const emits = defineEmits(["update:valInfo", "upDateInfo"]);
+
+const imgUrl = computed({
+  get() {
+    if (props.valInfo != "") {
+      return props.valInfo;
+    } else {
+      return props.data?.control.videoMsg[0].url;
     }
-})
+  },
+  set(val: any) {
+    emits("update:valInfo", val);
+  },
+});
+
 const configStyle = computed(() => {
-	console.log("视频宽度",props.data)
+  console.log("视频宽度", props.data);
-    return props.data.styles || {}
+  return props.data.styles || {};
-})
+});
-const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px'
+const videoHeight = props.data?.control.videoMsg[0].videoHeight + "px";
 
-const videoWidth = props.data?.control.videoMsg[0].videoWidth+'px'
+const videoWidth = props.data?.control.videoMsg[0].videoWidth + "px";
 
-const heightVal = ref("0px")
+const heightVal = ref("0px");
-const widthtVal = ref("0px")
+const widthtVal = ref("0px");
+const beforeRemove = () => {
+  return false;
+};
 
-onMounted(()=>{
+onMounted(() => {
-	heightVal.value = props.data?.control.videoMsg[0].videoHeight+'px'
+  heightVal.value = props.data?.control.videoMsg[0].videoHeight + "px";
-	widthtVal.value = props.data?.control.videoMsg[0].videoWidth+'px'
+  widthtVal.value = props.data?.control.videoMsg[0].videoWidth + "px";
   // console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control)
 });
-watch(()=>props.data?.control.videoMsg[0], (val:any) => {
+watch(
+  () => props.data?.control.videoMsg[0],
+  (val: any) => {
     // console.log("视频得长款--》",val);
-	heightVal.value = val.videoHeight+'px'
+    heightVal.value = val.videoHeight + "px";
-	widthtVal.value = val.videoWidth+'px'
+    widthtVal.value = val.videoWidth + "px";
-},{
+  },
+  {
     deep: true,
-})
+  }
+);
 
-const getFormItemInputStyle = (ele: any,sty:number) => {
+const getFormItemInputStyle = (ele: any, sty: number) => {
-    if(ele?.inputStyle){
+  if (ele?.inputStyle) {
-      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
+    console.log("返回栅格宽度4", AnalysisInputCss(ele?.inputStyle, sty));
-      return AnalysisInputCss(ele?.inputStyle,sty)
+    return AnalysisInputCss(ele?.inputStyle, sty);
   }
-}
+};
+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 upload = ref<UploadInstance>();
+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("upDateInfo", 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;
+};
+const handleExceed: UploadProps["onExceed"] = (files) => {
+  upload.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  upload.value!.handleStart(file);
+};
+//上传失败钩子
+const videoUploadErr = (
+  error: Error,
+  uploadFile: UploadFile,
+  uploadFiles: UploadFiles
+) => {
+  alert("上传失败,请重试");
+  // console.log("上传失败"+error);
+};
 </script>
 
 <style scoped></style>