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

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

src/widget/videoupload/videoUploadPlay.vue

@@ -1,56 +1,153 @@
 <template>
-  <!-- <p>{{ videoHeight }}</p>
-  <p>{{ videoWidth }}</p> -->
-  <video  
-    :src="data?.control.videoMsg[0].url"
+  <!-- <p>{{ videoHeight }}</p>-->
+  <!-- <p>{{ props.pageType }}</p> -->
+  <video
+    :src="imgUrl"
     :loop="data?.control.videoMsg[0].loop"
     :autoplay="data?.control.videoMsg[0].videoAutoPlay"
-
-		:style="getFormItemInputStyle(configStyle,2)"
+    :style="getFormItemInputStyle(configStyle, 2)"
     controls
-    >
-  </video>
+  ></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"
+  >
+    <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)
-    return props.data.styles || {}
-})
-const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px'
+  console.log("视频宽度", props.data);
+  return props.data.styles || {};
+});
+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 widthtVal = ref("0px")
+const heightVal = ref("0px");
+const widthtVal = ref("0px");
+const beforeRemove = () => {
+  return false;
+};
 
-onMounted(()=>{
-	heightVal.value = props.data?.control.videoMsg[0].videoHeight+'px'
-	widthtVal.value = props.data?.control.videoMsg[0].videoWidth+'px'
-	// console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control)
+onMounted(() => {
+  heightVal.value = props.data?.control.videoMsg[0].videoHeight + "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) => {
-	// console.log("视频得长款--》",val);
-	heightVal.value = val.videoHeight+'px'
-	widthtVal.value = val.videoWidth+'px'
-},{
-  deep: true,
-})
-
-const getFormItemInputStyle = (ele: any,sty:number) => {
-    if(ele?.inputStyle){
-      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
-      return AnalysisInputCss(ele?.inputStyle,sty)
-    }
-}
+watch(
+  () => props.data?.control.videoMsg[0],
+  (val: any) => {
+    // console.log("视频得长款--》",val);
+    heightVal.value = val.videoHeight + "px";
+    widthtVal.value = val.videoWidth + "px";
+  },
+  {
+    deep: true,
+  }
+);
+
+const getFormItemInputStyle = (ele: any, sty: number) => {
+  if (ele?.inputStyle) {
+    console.log("返回栅格宽度4", 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>