视频

src/components/DesignForm/assembly/index.ts

@@ -306,6 +306,16 @@ const selectOption: any = [
 			modelValue: ''
 		  },
 		  config: {}
+		},
+		{
+			type: 'videoUpAndPlay',
+			label: '视频',
+			icon: '',
+			iconFont: 'fa-play-circle',
+			control: {
+			  modelValue: ''
+			},
+			config: {}
 		  }
 	  ]
 	},

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

@@ -426,6 +426,7 @@ onMounted(()=>{
 					</div>
 					
 				</template>
+				<VideoUpAndPlay  v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
 				<SignatureMap  v-else-if="element.type === 'signaturemap'" :data="element" />
 				<OrgCentent v-else-if="element.type === 'orgCentent'" :data="element" />
 				<BaiduMap v-else-if="element.type === 'baidumap'" :data="element" />

src/views/sysworkflow/codepage/page.vue

@@ -8,7 +8,7 @@
 	<PaintBoard @updataconbt="qianming" />
 </template>
 <script lang='ts' setup>
-import PaintBoard   from '@/views/knowledge/news/paintBoard.vue';
+import PaintBoard   from '@/widget/writingboard/paintBoard.vue';
 
 const qianming = (val:any) =>{
 	console.log("图片回传--->",val)

src/widget/index.ts

@@ -7,6 +7,7 @@ import orgCitys from './orgcitys/index.vue'
 import baiduMap from './baidumap/index.vue'
 import orgCentent from './org/index.vue'
 import signatureMap from './writingboard/index.vue'
+import videoUpAndPlay from './videoupload/index.vue'
 
 export default (app: any)	=> {
 	app.component('SerialNumber', serialNumber)
@@ -15,4 +16,5 @@ export default (app: any)	=> {
 	app.component('BaiduMap', baiduMap)
 	app.component('OrgCentent', orgCentent)
 	app.component('SignatureMap', signatureMap)
+	app.component('VideoUpAndPlay',videoUpAndPlay)
 }

src/widget/videoupload/index.vue

@@ -0,0 +1,186 @@
+<!--
+@ 作者: 李文轩
+@ 时间: 2024-01-02 13:49:57
+@ 备注: 
+-->
+<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" >
+    </el-form-item>
+
+    <VideoUploadPlay @added-video="addedVideo"></VideoUploadPlay>
+</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'
+const props = withDefaults(
+    defineProps<{
+		data: FormList
+		tablekey: any
+		numrun?: number
+		modelValue?: any // 子表和弹性布局时时有传
+		tProp?: string // 子表时的form-item的prop值，用于子表校验用
+    }>(),
+    {}
+)
+const emits = defineEmits<{
+    (e: 'update:modelValue', numVal: any): void
+}>()
+
+const formProps = inject(constFormProps, {}) as any
+const type = computed(() => {
+    return formProps.value.type
+})
+const config = computed(() => {
+    return props.data.config || {}
+})
+
+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)
+    }
+})
+const updateModel = (val: any) => {
+	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
+    })
+}
+
+
+
+const getLabel = (ele: FormItem) => {
+    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
+})
+// 处理自定义校验规则，将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 addedVideo = (val:any) =>{
+	console.log("最新视频上传列表--->",val)
+
+    value.value = val
+
+}
+</script>
+<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: 100%;
+        background: var(--el-fill-color-light);
+        color: var(--el-text-color-secondary);
+        font-size: 30px;
+    }
+}
+</style>

src/widget/videoupload/videoUploadPlay.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-upload  
+  :action="uploadUrl" :drag="true"  :before-remove="beforeRemove"
+  :on-success="videoUploadOk" :show-file-list="true"
+  :on-error="videoUploadErr"
+  :on-preview="selectVideo"
+  style="width: 50%;"
+    accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
+    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+    <div class="el-upload__text">
+      拖拽视频文件到此 或 <em>点此上传</em>
+    </div>
+    <template #tip>
+      <div class="el-upload__tip">
+        <!-- jpg/png files with a size less than 500kb -->
+      </div>
+    </template>
+  </el-upload>
+
+  <video v-if="videoReady" :src="videoResource" loop controls style="width: 50%;"></video>
+</template>
+
+<script setup lang="ts">
+import { uploadUrl } from '@/api/DesignForm'
+import { UploadFilled } from '@element-plus/icons-vue'
+import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
+//视频地址
+const videoResource = ref<string>()
+//上传是否成功
+const videoReady = ref(false)
+type VideoMsg = {
+  CreatedAt: string
+	UpdatedAt: string
+  fileSize: bigint
+  id: bigint
+  key: string
+  name: string
+  physicspath: string
+  size: string
+  tag: string
+  type: number
+  url: string
+}
+//成功上传的视频
+const videoArr = reactive<VideoMsg[]>([]);
+const emits = defineEmits(["addedVideo"]);
+//上传成功钩子
+function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
+  videoResource.value = response.data.url;
+  videoReady.value = true;
+  //console.log(response)
+  const videoMsg:VideoMsg = {
+      CreatedAt: '',
+      UpdatedAt: '',
+      fileSize: 0n,
+      id: 0n,
+      key: '',
+      name: '',
+      physicspath: '',
+      size: '',
+      tag: '',
+      type: 0,
+      url: ''
+      }
+  videoMsg.CreatedAt = response.data.CreatedAt;
+  videoMsg.UpdatedAt = response.data.UpdatedAt;
+  videoMsg.fileSize = response.data.fileSize;
+  videoMsg.id = response.data.id;
+  videoMsg.key = response.data.key;
+  videoMsg.name = response.data.name;
+  videoMsg.physicspath = response.data.physicspath;
+  videoMsg.size = response.data.size;
+  videoMsg.tag = response.data.tag;
+  videoMsg.type = response.data.type;
+  videoMsg.url = response.data.url;
+  videoArr.push(videoMsg);
+  //console.log(videoArr)
+  emits("addedVideo",videoArr)
+}
+
+//删除钩子 禁止删除
+function beforeRemove(){
+  return false;
+}
+
+//上传失败钩子
+function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
+  alert("上传失败,请重试")
+  console.log("上传失败"+error);
+  
+}
+//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src
+function selectVideo(uploadFile: UploadFile){
+ 
+  const res:any = uploadFile.response;
+  const resd = res.data;
+  const resdurl = resd.url;
+  videoResource.value = resdurl;
+}
+</script>
+
+<style scoped></style>