From 800a6769e4faf0cb2b9c9aabe4dbbbbfa8387a61 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Mon, 11 Dec 2023 10:00:13 +0800
Subject: [PATCH 01/11] =?UTF-8?q?=E7=AD=BE=E5=90=8D=E6=9D=BF=E6=95=B4?=
 =?UTF-8?q?=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/paintboard.png                     | Bin 0 -> 10670 bytes
 src/components/DesignForm/assembly/index.ts   |   9 +
 .../DesignForm/public/form/formGroup.vue      |   3 +-
 src/views/sysworkflow/codepage/page.vue       |  17 +-
 src/views/sysworkflow/codepage/page_black.vue |  19 +
 src/widget/index.ts                           |   2 +
 src/widget/writingboard/index.vue             | 186 +++++
 src/widget/writingboard/paintBoard.vue        | 124 +++
 src/widget/writingboard/vueSignature.vue      | 713 ++++++++++++++++++
 9 files changed, 1064 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/paintboard.png
 create mode 100644 src/views/sysworkflow/codepage/page_black.vue
 create mode 100644 src/widget/writingboard/index.vue
 create mode 100644 src/widget/writingboard/paintBoard.vue
 create mode 100644 src/widget/writingboard/vueSignature.vue

diff --git a/src/assets/paintboard.png b/src/assets/paintboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..252b4631e33f4b45244486608fafd99ee847f792
GIT binary patch
literal 10670
zcmeAS@N?(olHy`uVBq!ia0y~y;QYtHz+%C{1QfaJe!>z+F%}28J29*~C-V}>VM%xN
zb!1@J*w6hZkrl}2EbxddW?<ku48n}Z^H-!WFlah^x;TbZ#J#;~D9E5FaNxk>zuZTe
zS??z(8SnOWNx8e39jFlq8aBNbg|c*Bi$hon=YN5W1%eZs>lh)dPix{Kj0T%gWuTB4
z4G?g87)>GIU>MCZ;9wXn9KgXaS~x(0VYF}<EgVMk!f0M#7_ApZ>jj3<HWD}yjOK;W
zyfB&<AZcJUFO24e(Y!F47e+@KM~7a4xnOim6<idI4x503VYI&h4u;V-5;zz}3kOIr
zj1~@~g~MoG7|jc#W2&Po6BtJO&X9s&w2cG_htUocI2=aXNZ?=??LdKpVYF}<EgVR%
cC_85VWc(7s9aO?Lof8y(p00i_>zopr0HWJ9hyVZp

literal 0
HcmV?d00001

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index e6fda85f0..30a93419b 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -246,6 +246,15 @@ const selectOption: any = [
 			control: {
 			},
 			config: {}
+		},
+		{
+			type: 'signaturemap',
+			label: '签名板',
+			icon: 'faedit',
+			iconFont: 'fa-edit',
+			control: {
+			},
+			config: {}
 		}
 	  ]
 	},
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index b3e12d574..01dd78689 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -426,6 +426,7 @@ onMounted(()=>{
 					</div>
 					
 				</template>
+				<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" />
 				<OrgCitys v-else-if="element.type === 'organization'" :data="element" />
@@ -433,7 +434,7 @@ onMounted(()=>{
 				<SerialNumber  v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
 				<!--其他组件-->
 				<FormItem v-else :data="element" />
-		
+				
 				<!--组件设计外功能框架-->
 				<template v-if="type === 5">
 					<div class="drag-control">
diff --git a/src/views/sysworkflow/codepage/page.vue b/src/views/sysworkflow/codepage/page.vue
index f1aa6dd9a..e019ffec0 100644
--- a/src/views/sysworkflow/codepage/page.vue
+++ b/src/views/sysworkflow/codepage/page.vue
@@ -4,16 +4,17 @@
 @ 备注: 
 -->
 <template>
-	<baidu-map class="map" ak="ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF" v="3.0"  :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
-		<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
-  	</baidu-map>
+	<SignatureMap />
+	<PaintBoard @updataconbt="qianming" />
 </template>
 <script lang='ts' setup>
-import { BaiduMap } from 'vue-baidu-map-3x'
+import PaintBoard   from '@/views/knowledge/news/paintBoard.vue';
+
+const qianming = (val:any) =>{
+	console.log("图片回传--->",val)
+}
+
 </script>
 <style  lang='scss' scoped>
-.map {
-  width: 100%;
-  height: calc(100vh - 90px);
-}
+
 </style>
\ No newline at end of file
diff --git a/src/views/sysworkflow/codepage/page_black.vue b/src/views/sysworkflow/codepage/page_black.vue
new file mode 100644
index 000000000..f1aa6dd9a
--- /dev/null
+++ b/src/views/sysworkflow/codepage/page_black.vue
@@ -0,0 +1,19 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-12-07 16:49:57
+@ 备注: 
+-->
+<template>
+	<baidu-map class="map" ak="ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF" v="3.0"  :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
+		<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
+  	</baidu-map>
+</template>
+<script lang='ts' setup>
+import { BaiduMap } from 'vue-baidu-map-3x'
+</script>
+<style  lang='scss' scoped>
+.map {
+  width: 100%;
+  height: calc(100vh - 90px);
+}
+</style>
\ No newline at end of file
diff --git a/src/widget/index.ts b/src/widget/index.ts
index f6caab0c2..36df8d652 100644
--- a/src/widget/index.ts
+++ b/src/widget/index.ts
@@ -6,6 +6,7 @@ import urlLink from './urllink/index.vue'
 import orgCitys from './orgcitys/index.vue'
 import baiduMap from './baidumap/index.vue'
 import orgCentent from './org/index.vue'
+import signatureMap from './writingboard/index.vue'
 
 export default (app: any)	=> {
 	app.component('SerialNumber', serialNumber)
@@ -13,4 +14,5 @@ export default (app: any)	=> {
 	app.component('OrgCitys', orgCitys)
 	app.component('BaiduMap', baiduMap)
 	app.component('OrgCentent', orgCentent)
+	app.component('SignatureMap', signatureMap)
 }
diff --git a/src/widget/writingboard/index.vue b/src/widget/writingboard/index.vue
new file mode 100644
index 000000000..3dedb77c4
--- /dev/null
+++ b/src/widget/writingboard/index.vue
@@ -0,0 +1,186 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-12-08 16: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>
+
+    <PaintBoard @updataconbt="qianming" />
+</template>
+<script lang='ts' setup>
+import PaintBoard   from './paintBoard.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 qianming = (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>
\ No newline at end of file
diff --git a/src/widget/writingboard/paintBoard.vue b/src/widget/writingboard/paintBoard.vue
new file mode 100644
index 000000000..32358d032
--- /dev/null
+++ b/src/widget/writingboard/paintBoard.vue
@@ -0,0 +1,124 @@
+<template>
+   <div >
+      <div  v-show="pantareaisShow" id="canvasWrap" style="width:100%;">
+         <vueOnlineSignature ref="vueSignatureRef" v-bind="params"/>
+      </div>
+      <img v-if="imagesSRC" :src="imagesSRC" alt="" style="max-width: 100%">
+     <div class="buttonList" >
+         <div  class="button"  @click="confirm">签名完成</div>
+         <div  class="button"  @click="reset">重签</div>
+         
+     </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import vueOnlineSignature from '@/widget/writingboard/vueSignature.vue';
+import { ref, reactive } from 'vue'
+
+const pantareaisShow = ref<boolean>(true)
+
+const params = reactive<any>({
+      width: 751,//签名板宽      生成的图片长宽像素都会变小1px,需在此多设置1px
+      height: 301,//签名板长
+      lineWidth: 5,
+      lineColor: '#000',
+      canvasBack: new URL('@/assets/paintboard.png', import.meta.url).href,//签名板背景
+      isCrop: true,
+      edg: 0,
+      fullScreen: false,
+      domId: '',
+      imgType: 'image/png',
+      imgBack: new URL('@/assets/paintboard.png', import.meta.url).href,//生成签名背景
+      isRepeat: '',
+      noRotation: false,
+      backIsCenter: false,
+      verticalDeductWidth: 10,
+      verticalDeductHeight: 24,
+      acrossDeductWidth: 30,
+      acrossDeductHeight: 20,
+      recoverPoints: [],
+      isBrush: false,
+      brushLine: 20
+    })
+
+const emits = defineEmits(["updataconbt"]);
+   
+let vueSignatureRef = ref<any>(null)
+const imagesSRC = ref<string>('')
+const confirm = () => {
+   
+   vueSignatureRef.value.confirm()
+   .then((res:{base64: string, points: any}) => {
+      imagesSRC.value = res.base64
+      sessionStorage.setItem('points', JSON.stringify(res.points))
+      pantareaisShow.value = false
+      emits("updataconbt",res.base64)
+   })
+   .catch(() => {
+      alert('未曾签名')
+   })
+}
+const reset = () => {
+   imagesSRC.value = ''
+   pantareaisShow.value = true
+   if(vueSignatureRef.value != null){
+      vueSignatureRef.value.reset()
+   }
+   
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+#canvasWrap{
+   margin: 1px 0;
+}
+canvas{
+   border: 1px dashed #ccc
+}
+.input__wrap{
+   list-style-type: none;
+   width: 100%;
+   padding: 0;
+   li{
+      line-height: 30px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+   }
+   span{
+      width: 130px;
+      display: inline-block;
+      text-align: right;
+      margin-right: 10px
+   }
+   input[type="checkbox"]{
+      margin-left: 0
+   }
+   p{
+      margin: 0 0 10px 140px;
+      color:#aaa
+   }
+}
+.button{
+   width: 290px;
+   height: 35px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-size: 15px;
+   border: 1px solid #ccc;
+   border-radius: 5px;
+   cursor: pointer;
+}
+.buttonList{
+   display: flex;
+   .button ~ .button{
+      margin-left: 10px;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/widget/writingboard/vueSignature.vue b/src/widget/writingboard/vueSignature.vue
new file mode 100644
index 000000000..15186bbfb
--- /dev/null
+++ b/src/widget/writingboard/vueSignature.vue
@@ -0,0 +1,713 @@
+<template>
+  <canvas v-if="esignReset" ref="canvasRef" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
+  <!-- <img v-show="false" ref="penRef" :src="penImg" > -->
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, watch, computed, onMounted, nextTick, onBeforeMount, onUnmounted, toRaw } from 'vue'
+  const emits = defineEmits(['onDrawingStatus', 'onMouseDown', 'onMouseMove', 'onMouseUp', 'onTouchStart', 'onTouchMove', 'onTouchEnd'])
+  interface pointsType {
+    x: number,
+    y: number,
+    direction: string
+  }
+  interface Props {
+      width?: number,
+      height?: number,
+      lineWidth?: number,
+      lineColor?: string,
+      canvasBack?: string,
+      isCrop?: boolean,
+      edg?: number,
+      fullScreen?: boolean,
+      domId?: string,
+      imgBack?: string,
+      isRepeat?: string,
+      noRotation?: boolean,
+      imgType?: string,
+      backIsCenter?: boolean,
+      acrossDeductWidth?: number,
+      acrossDeductHeight?: number
+      verticalDeductWidth?: number,
+      verticalDeductHeight?: number,
+      recoverPoints?: pointsType[],
+      isBrush?: boolean,
+      brushLine?: number
+  }
+  const props = withDefaults(defineProps<Props>(), {
+      width: 0,  // 画布宽度，优先级三级 (此值不可大于当前屏幕的宽度)
+      height: 0, // 画布高度，优先级三级
+      lineWidth: 8,  // 画笔粗细
+      lineColor: '#000000', // 画笔颜色
+      canvasBack: '', // 画布背景，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red', 'http'、'https'、文件路径及'base64'类型图片链接
+      isCrop: false,  // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+      edg: 0, // 画布导出图需要旋转的角度,必须是90的倍数（如竖屏导出图会生成竖屏尺寸的图片，此参数值为270时,会生成一张横向的图片）
+      fullScreen: false, // 是否获取屏幕的宽高生成画布尺寸，优先级二级
+      domId: '', // 用于获取元素的宽高生成画布尺寸，优先级一级（建议使用canvas父级元素的ID, 父级元素的width值不可大于当前屏幕的宽度）
+      imgBack: '', //画布最终导出图的图片背景，如果此参数不为空，生成图片时会覆盖canvasBack的背景图，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red', 'http'、'https'、文件路径及'base64'类型图片链接
+      isRepeat: '', // 画布背景是否重复(参数:'repeat','repeat-x','repeat-y' )
+      noRotation: false, // 横屏时导出图是否旋转角度 (当值为true时，横屏时导出图不会旋转角度)
+      imgType: 'image/png', // 画布导出图的图片类型（可以是其他'image/jpeg'等）
+      backIsCenter: false, // 背景图片是否居中显示(使用domId或输入固定宽度时生效并且只有图片宽度大于canvas宽度才会生效)
+      verticalDeductWidth: 0, // 获取屏幕的宽高生成画布尺时，竖屏时宽度需要减除的尺寸
+      verticalDeductHeight: 0, // 获取屏幕的宽高生成画布尺时，竖屏时高度需要减除的尺寸
+      acrossDeductWidth: 0, // 获取屏幕的宽高生成画布尺时，横屏时宽度需要减除的尺寸
+      acrossDeductHeight: 0,  // 获取屏幕的宽高生成画布尺时，横屏时高度需要减除的尺寸
+      recoverPoints: () => [], // 初始生成布画时，需要恢复到canvas画布上的笔画数据（此数据结构必须是confirm方法返回的结构，结构：[{x:0,y:0,direction:'across'}], direction参数有across和vertical）
+      isBrush: false,  // 是否使用毛笔字画笔（开启后，imgBack以及屏幕转旋记录笔画功能无法生效）
+      brushLine: 20 // 毛笔画笔笔线尺寸，最小值20，isBrush为true时生效
+  })
+  const hasDrew = ref<boolean>(false)
+  const isOrientationchange = ref<boolean>(false)
+  const esignReset = ref<boolean>(true)
+  const resultImg = ref<string>('')
+  const points = ref<any[]>([])
+  let canvasTxt = ref<CanvasRenderingContext2D | null>(null)
+  let canvasRef = ref<HTMLCanvasElement | null>(null)
+  let cropCanvas = ref<HTMLCanvasElement | null>(null)
+  let cropCanvasTxt = ref<CanvasRenderingContext2D | null>(null)
+  const startX = ref<number>(0)
+  const startY = ref<number>(0)
+  const sratio = ref<number>(1)
+  const isDrawing = ref<boolean>(false)
+  const isLoad = ref<boolean>(false)
+  let imgBackDom = ref<any>(null)
+  let canvasBackDom = ref<any>(null)
+  let screenPatams = reactive<{ width:number, height: number }>({
+      width: 0,
+      height: 0
+  })
+  let domPatams = reactive<{ width:number, height: number }>({
+      width: 0,
+      height: 0
+  })
+  // 毛笔新加 --------------------------------
+  const hasPoints = ref<any[]>([])
+  const pointsArr = ref<any[]>([])
+  const smoothness = ref<number>(80)
+  const l = ref<number>(props.brushLine < 20 ? 20 : props.brushLine)
+  //const penImg = new URL('@/assets/pen2.png', import.meta.url).href
+  let penRef = ref<any>(null)
+  // 毛笔新加 --------------------------------
+
+  const ratio = computed(() => (domPatams.height ? domPatams.height : props.fullScreen ? screenPatams.height : props.height) / (domPatams.width ? domPatams.width : props.fullScreen ? screenPatams.width : props.width) )
+  const canvasBackground = computed(() => props.canvasBack ? props.canvasBack : 'rgba(255, 255, 255, 0)' )
+  watch(canvasBackground, async (newVal: string) => {
+      await nextTick()
+      canvasRef.value && (canvasRef.value.style.background = newVal)
+  })
+  watch(hasDrew, (newVal: boolean) => {
+      emits('onDrawingStatus', newVal)
+  })
+  const getSizeRatio = () => {
+    return !props.fullScreen && props.backIsCenter
+  }
+  const setCanvasImageBack = (status: any) => {
+    const canvas = canvasRef.value as HTMLCanvasElement
+    let pat = canvasTxt.value?.createPattern(canvasBackDom.value, (props.isRepeat || "no-repeat"));
+    canvasTxt.value?.rect(0,0,canvas.width ,canvas.height)
+    canvasTxt!.value!.fillStyle = (pat as any); 
+    canvasTxt.value?.fill();
+    if (status) {
+        autoDraw(null, null)
+    }
+  }
+  const setCanvasBack = (status: any) => {
+     const canvas = canvasRef.value as HTMLCanvasElement
+     if (props.canvasBack && canvasBackDom.value && isImgaes(props.canvasBack)) {
+      setCanvasImageBack(status)
+      } else {
+        canvas.style.background = canvasBackground.value
+      }
+  }
+  const getDomSize = () => {
+      const canvas = canvasRef.value as HTMLCanvasElement
+      if (props.domId) {
+          let dom = document.getElementById(props.domId)
+          let domWidth = dom ? dom.clientWidth || dom.offsetWidth : props.fullScreen ? screenPatams.width : props.width
+          let domHeight = dom ? dom.clientHeight || dom.offsetHeight : props.fullScreen ? screenPatams.height : props.height
+          canvas.height = domHeight
+          canvas.width = domWidth
+          domPatams.width = domWidth
+          domPatams.height = domHeight
+      } else {
+          canvas.height = props.fullScreen ? screenPatams.height : props.height
+          canvas.width = props.fullScreen ? screenPatams.width : props.width
+      }
+  }
+  const resizeHandler = (status: any) => {
+      if (isOrientationchange.value) return false
+      const canvas = canvasRef.value as HTMLCanvasElement
+      canvas.style.width = (domPatams.width ? domPatams.width : props.fullScreen ? screenPatams.width : props.width) + "px"
+      const realw = parseFloat(window.getComputedStyle(canvas).width)
+      canvas.style.height = ratio.value * realw + "px";
+      canvasTxt.value = canvas.getContext('2d')
+      canvasTxt.value?.scale(1 * sratio.value, 1 * sratio.value)
+      sratio.value = realw / (domPatams.width ? domPatams.width : props.fullScreen ? screenPatams.width : props.width)
+      canvasTxt.value?.scale(1 / sratio.value, 1 / sratio.value)
+      if (props.canvasBack) {
+        let IntervaId = setInterval(() => {
+          if ((canvasBackDom.value && isLoad.value) || !isImgaes(props.canvasBack)) {
+            setCanvasBack(status)
+            clearInterval(IntervaId)
+          }
+        }, 100)
+      } else {
+        if (status) {
+            autoDraw(null, null)
+        }
+      }
+  }
+  const orientationchangeEvent = () => {
+      let directionWidth = window.orientation == 0 || window.orientation == 180 ? props.verticalDeductWidth : props.acrossDeductWidth
+      let directionHeight = window.orientation == 0 || window.orientation == 180 ? props.verticalDeductHeight : props.acrossDeductHeight
+      screenPatams.width = window.navigator.platform.indexOf('Win') || window.navigator.platform.indexOf('Mac') ? (document.body.clientHeight || document.body.offsetHeight) - directionWidth : (document.body.clientWidth || document.body.offsetWidth) - directionWidth
+      screenPatams.height = window.navigator.platform.indexOf('Win') || window.navigator.platform.indexOf('Mac') ? (document.body.clientWidth || document.body.offsetWidth) - directionHeight : (document.body.clientHeight || document.body.offsetHeight) - directionHeight
+      getImages()
+      isOrientationchange.value = true
+      esignReset.value = false
+      let setIntervalId = setInterval(async() => {
+        if (isLoad.value) {
+          clearInterval(setIntervalId)
+          esignReset.value = true
+          isOrientationchange.value = false
+          await nextTick()
+          getDomSize()
+          resizeHandler(true)
+        }
+      }, 100)
+  }
+  const isImgaes = (params: string) => {
+    let imgType = ['.jpeg', '.bmp', '.jpg', '.gif', '.webp', '.pcx', '.tif', '.tga', '.exif', '.fpx', '.svg', '.cdr', '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.png', '.hdri', '.raw', '.wmf', '.flic', '.emf', '.ico', '.avif', '.apng']
+    let regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*?)\s*$/i;
+    let status = params.includes('http://') || params.includes('https://') || regex.test(params) || imgType.some(item => params.includes(item))
+    return status
+  }
+  const rotateBase64Img = (src: string, edg: number, type: string = 'not') => {
+    return new Promise((resolve, reject) => {
+      let canvas: HTMLCanvasElement = document.createElement("canvas");
+      let ctx = canvas.getContext("2d") as CanvasRenderingContext2D
+      let imgW;//图片宽度
+      let imgH;//图片高度
+      let size;//canvas初始大小
+      if (edg % 90 != 0) {
+          reject("旋转角度必须是90的倍数!");
+          throw '旋转角度必须是90的倍数!';
+      }
+      (edg < 0) && (edg = (edg % 360) + 360)
+      const quadrant = (edg / 90) % 4; //旋转象限
+      const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
+      let image = new Image();
+      image.crossOrigin = "anonymous"
+      image.src = src;
+      image.onload = function () {
+          imgW = image.width;
+          imgH = image.height;
+          //console.log(imgH, 'imgH')
+          size = imgW > imgH ? imgW : imgH;
+          canvas.width = size * 2;
+          canvas.height = size * 2;
+          let Cwidth = domPatams.width ? domPatams.width : props.fullScreen ? screenPatams.width : props.width
+          let ratio = getSizeRatio() && type == 'init'
+          switch (quadrant) {
+              case 0:
+                  cutCoor.sx = getSizeRatio() && type == 'init' && imgW > screenPatams.width ? size - ((imgW - (getDirection() == 'across' ? screenPatams.width : screenPatams.height)) / 2) : size
+                  cutCoor.sy = size;
+                  cutCoor.ex = size + imgW;
+                  cutCoor.ey = size + imgH;
+                  break;
+              case 1:
+                  cutCoor.sx = ratio ? size - props.height : window.orientation == 0 || window.orientation == 180 ? size - Cwidth : size - imgH
+                  cutCoor.sy = size
+                  cutCoor.ex = size;
+                  cutCoor.ey = size + imgW;
+                  break;
+              case 2:
+                  cutCoor.sx = size - imgW;
+                  cutCoor.sy = size - imgH;
+                  cutCoor.ex = size;
+                  cutCoor.ey = size;
+                  break;
+              case 3:
+                  cutCoor.sx = size;
+                  cutCoor.sy = size - imgW;
+                  cutCoor.ex = size + imgH;
+                  cutCoor.ey = size + imgW;
+                  break;
+          }
+          ctx.translate(size, size);
+          ctx.rotate(edg * Math.PI / 180);
+          ctx.drawImage(image, 0, 0);
+          var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
+          if (quadrant % 2 == 0) {
+              canvas.width = imgW;
+              canvas.height = imgH;
+          } else {
+              canvas.width = imgH;
+              canvas.height = imgW;
+          }
+          //putImageData() 将图像数据放回画布
+          ctx.putImageData(imgData, 0, 0);
+          resolve(canvas.toDataURL(props.imgType))
+      }
+    })
+  }
+  const getImages = async () => {
+      isLoad.value = false
+      let edg = window.orientation == 0 || window.orientation == 180 ? 90 : 0
+      let ratio = props.fullScreen ? edg : 0
+      if (isImgaes(props.imgBack)) {
+            let res = await rotateBase64Img(props.imgBack, ratio, 'init')
+            if (res) {
+              imgBackDom.value = new Image();
+              imgBackDom.value.crossOrigin = "anonymous"
+              imgBackDom!.value!.src = res;
+            }
+        }
+        if (isImgaes(props.canvasBack)){
+            let res = await rotateBase64Img(props.canvasBack, ratio, 'init')
+            if (res) {
+              canvasBackDom.value = new Image();
+              canvasBackDom.value.crossOrigin = "anonymous"
+              canvasBackDom!.value!.src = res;
+              canvasBackDom!.value.onload = () => {
+                isLoad.value = true
+              }
+            }
+        }
+  }
+  onMounted(() => {
+      // 根据当前屏幕转向获取需要裁减的宽度 
+      let directionWidth = window.orientation == 0 || window.orientation == 180 ? props.verticalDeductWidth : props.acrossDeductWidth
+      // 根据当前屏幕转向获取需要裁减的高度 
+      let directionHeight = window.orientation == 0 || window.orientation == 180 ? props.verticalDeductHeight : props.acrossDeductHeight
+      screenPatams.width = (document.body.clientWidth || document.body.offsetWidth) - directionWidth
+      screenPatams.height = (document.body.clientHeight || document.body.offsetHeight) - directionHeight
+      getImages()
+      getDomSize()
+      window.addEventListener("orientationchange", orientationchangeEvent)
+      resizeHandler(props.recoverPoints && props.recoverPoints.length && !props.isBrush ? true : false)
+      // 在画板以外松开鼠标后冻结画笔
+      document.onmouseup= () => {
+         isDrawing.value = false
+      }
+  })
+  const getDirection = () => {
+    return window.orientation == 90 || window.orientation == -90 ? 'across' : 'vertical'
+  }
+  //  毛笔新加----------------------------------------------------------------
+  const distance = (a: {x:number, y:number}, b: {x:number, y:number}) => {
+    let x = b.x - a.x , y = b.y - a.y;
+    return Math.sqrt(x*x+y*y);
+  }
+  const customMouseDown = (e: {x:number, y:number, direction: string}) => {
+    hasPoints.value = []
+    startX.value = e.x
+    startY.value = e.y
+    pointsArr.value.unshift(e);
+  }
+  const customMouseMove = (e: {x:number, y:number, direction: string}) => {
+    let of = e; //move
+    let up = {
+      x: startX.value,
+      y: startY.value,
+    }  //down
+    hasPoints.value.unshift({time:new Date().getTime() ,dis: distance(up,of)});
+    let dis = 0;
+    for (let n = 0; n < hasPoints.value.length-1; n++) {
+      dis += hasPoints.value[n].dis;
+      if (dis > smoothness.value)
+        break;
+    }
+    startX.value = of.x;
+    startY.value = of.y;
+    let len = Math.round(hasPoints.value[0].dis/2)+1;
+    for (let i = 0; i < len; i++) {
+        let x = up.x + (of.x-up.x)/len*i;
+        let y = up.y + (of.y-up.y)/len*i;
+        canvasTxt.value?.beginPath();
+
+        x = x-l.value /2;
+        y = y - l.value /2;
+        pointsArr.value.unshift({x,y,direction: e.direction});
+        canvasTxt.value?.drawImage(penRef.value,x,y,l.value ,l.value );
+        l.value  = l.value  - 0.2;
+        if( l.value  < 10) l.value  = 10;
+    }
+  }
+  const customMouseUp = () => {
+    l.value = props.brushLine < 20 ? 20 : props.brushLine;
+    if(pointsArr.value.length > 100){
+      for(var j = 0; j <60 ;j++){
+        pointsArr.value[j].x = pointsArr.value[j].x-l.value/4;
+        pointsArr.value[j].y = pointsArr.value[j].y - l.value/4;
+        canvasTxt.value?.drawImage(penRef.value,pointsArr.value[j].x,pointsArr.value[j].y,l.value,l.value);
+
+        l.value = l.value - 0.3;
+        if( l.value < 5) l.value = 5;
+      }
+      l.value = props.brushLine < 20 ? 20 : props.brushLine;
+      pointsArr.value = [];
+    }
+    if (pointsArr.value.length==1) {
+      canvasTxt.value?.drawImage(penRef.value,pointsArr.value[0].x - l.value/2,pointsArr.value[0].y - l.value/2,l.value,l.value);
+      pointsArr.value = [];
+    }
+  }
+  //  毛笔新加----------------------------------------------------------------
+  // pc
+  const onMouseDown = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    isDrawing.value = true
+    hasDrew.value = true
+    let params = {
+      x: e.offsetX,
+      y: e.offsetY,
+      direction: getDirection()
+    }
+    // 毛笔新加---------------------------------
+    if (props.isBrush) {
+      customMouseDown(params)
+    } else {
+      drawStart(params)
+    }
+    // 毛笔新加---------------------------------
+    emits('onMouseDown', e)
+  }
+  const onMouseMove = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    if (isDrawing.value) {
+      let obj = {
+        x: e.offsetX,
+        y: e.offsetY,
+        direction: getDirection()
+      }
+      // 毛笔新加---------------------------------
+      if (props.isBrush) {
+        customMouseMove(obj)
+      } else {
+        drawMove(obj)
+      }
+      // 毛笔新加---------------------------------
+    }
+    emits('onMouseMove', e)
+  }
+  const onMouseUp = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    let obj = {
+      x: e.offsetX,
+      y: e.offsetY,
+      direction: getDirection()
+    }
+    if (props.isBrush) {
+      customMouseUp()
+    } else {
+      drawEnd(obj)
+    }
+    isDrawing.value = false
+    emits('onMouseUp', e)
+  }
+  // mobile
+  const onTouchStart = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    hasDrew.value = true
+    if (e.touches.length === 1) {
+      let canvas = canvasRef.value as HTMLCanvasElement
+      let obj = {
+        x: e.targetTouches[0].clientX - canvas.getBoundingClientRect().left,
+        y: e.targetTouches[0].clientY - canvas.getBoundingClientRect().top,
+        direction: getDirection()
+      }
+      // 毛笔新加---------------------------------
+      if (props.isBrush) {
+        customMouseDown(obj)
+      } else {
+        drawStart(obj)
+      }
+      // 毛笔新加---------------------------------
+    }
+    emits('onTouchStart', e)
+  }
+  const onTouchMove = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    if (e.touches.length >= 1) {
+      let canvas = canvasRef.value as HTMLCanvasElement
+      let obj = {
+        x: e.targetTouches[0].clientX - canvas.getBoundingClientRect().left,
+        y: e.targetTouches[0].clientY - canvas.getBoundingClientRect().top,
+        direction: getDirection()
+      }
+      // 毛笔新加---------------------------------
+      if (props.isBrush) {
+        customMouseMove(obj)
+      } else {
+        drawMove(obj)
+      }
+      // 毛笔新加---------------------------------
+    }
+    emits('onTouchMove', e)
+  }
+  const onTouchEnd = (e: any) => {
+    e = e || event
+    e.preventDefault()
+    console.log(e.touches, 'e.touches')
+    if (e.touches.length === 1) {
+      let canvas = canvasRef.value as HTMLCanvasElement
+      let obj = {
+        x: e.targetTouches[0].clientX - canvas.getBoundingClientRect().left,
+        y: e.targetTouches[0].clientY - canvas.getBoundingClientRect().top,
+        direction: getDirection()
+      }
+      // 毛笔新加---------------------------------
+      if (props.isBrush) {
+        customMouseUp()
+      } else {
+        drawEnd(obj)
+      }
+      // 毛笔新加---------------------------------
+    } else {
+      if (props.isBrush) {
+        customMouseUp()
+      } else {
+        points.value.push({x: -1, y: -1, direction: getDirection()})
+      }
+    }
+    emits('onTouchEnd', e)
+  }
+  // 绘制
+  const drawStart = (params: { x: number, y: number}) => {
+    startX.value = params.x
+    startY.value = params.y
+    canvasTxt.value?.beginPath()
+    canvasTxt.value?.moveTo(startX.value, startY.value)
+    canvasTxt.value?.lineTo(params.x, params.y)
+    canvasTxt!.value!.lineCap = 'round'
+    canvasTxt!.value!.lineJoin = 'round'
+    canvasTxt!.value!.lineWidth = props.lineWidth * sratio.value
+    canvasTxt.value?.stroke()
+    canvasTxt.value?.closePath()
+    points.value.push(params)
+  }
+  const drawMove = (params: { x: number, y: number}) => {
+    canvasTxt.value?.beginPath()
+    canvasTxt.value?.moveTo(startX.value, startY.value)
+    canvasTxt.value?.lineTo(params.x, params.y)
+    canvasTxt!.value!.strokeStyle = props.lineColor
+    canvasTxt!.value!.lineWidth = props.lineWidth * sratio.value
+    canvasTxt!.value!.lineCap = 'round'
+    canvasTxt!.value!.lineJoin = 'round'
+    canvasTxt.value?.stroke()
+    canvasTxt.value?.closePath()
+    startY.value = params.y
+    startX.value = params.x
+    points.value.push(params)
+  }
+  const drawEnd = (params: { x: number, y: number}) => {
+    canvasTxt.value?.beginPath()
+    canvasTxt.value?.moveTo(startX.value, startY.value)
+    canvasTxt.value?.lineTo(params.x, params.y)
+    canvasTxt!.value!.lineCap = 'round'
+    canvasTxt!.value!.lineJoin = 'round'
+    canvasTxt.value?.stroke()
+    canvasTxt.value?.closePath()
+    points.value.push(params)
+    points.value.push({x: -1, y: -1})
+  }
+  const autoDraw = (canvasRefs: HTMLCanvasElement | null, canvas2d: CanvasRenderingContext2D | null) => {
+      if ((points.value && points.value.length || props.recoverPoints && props.recoverPoints.length) && !props.isBrush) {
+        let canvas = canvasRefs || canvasRef.value as HTMLCanvasElement
+        let canvasText = canvas2d || canvasTxt.value
+        let pointsList = props.recoverPoints && props.recoverPoints.length ? props.recoverPoints : points.value
+        if (pointsList && pointsList.length) {
+          hasDrew.value = true
+        }
+        pointsList.reduce((acc, cur) => {
+            if (cur.x != -1 && cur.y != -1 && acc.x != -1 && acc.y != -1) {
+                canvasText?.beginPath()
+                let position = { accX: acc.x, accY: acc.y, curX: cur.x, curY: cur.y }
+                if (props.fullScreen) {
+                  if ((window.orientation == 0 || window.orientation == 180) && acc.direction == 'across' && cur.direction == 'across') { // 横屏笔画横屏转竖屏
+                    position = { accX: canvas.width - acc.y, accY: acc.x, curX: canvas.width - cur.y, curY: cur.x }
+                  }  else if ((window.orientation == 90 || window.orientation == -90) && acc.direction == 'vertical' && cur.direction == 'vertical') { // 竖屏笔画竖屏转横屏
+                    position = { accX: acc.y, accY: canvas.height - acc.x, curX: cur.y, curY: canvas.height - cur.x }
+                  }
+                }
+                  canvasText!.moveTo(position.accX, position.accY)
+                  canvasText!.lineTo(position.curX, position.curY)
+                  canvasText!.strokeStyle = props.lineColor
+                  canvasText!.lineWidth = props.lineWidth * sratio.value
+                  canvasText!.lineCap = 'round'
+                  canvasText!.lineJoin = 'round'
+                  canvasText!.stroke()
+                  canvasText!.closePath()
+              }
+            return cur
+          })
+      }
+  }
+  // 操作
+  const confirm = () => {
+    return new Promise((resolve, reject) => {
+      if (!hasDrew.value) {
+        reject(`Warning: Not Signned!`)
+        return
+      }
+      let canvas = canvasRef.value as HTMLCanvasElement
+      let resImgData = (canvasTxt.value as CanvasRenderingContext2D).getImageData(0, 0, canvas.width, canvas.height)
+      canvasTxt!.value!.globalCompositeOperation = "destination-over"
+      if (props.canvasBack && props.imgBack && !props.isBrush) {
+        canvasTxt.value?.clearRect(0,0,canvas.width ,canvas.height);
+        autoDraw(null, null)
+      }
+      // canvas背景图没有的情况下才生成图片背景图
+      if (props.imgBack && isImgaes(props.imgBack) && !props.isBrush){
+        let pat = canvasTxt.value?.createPattern(imgBackDom.value, (props.isRepeat || "no-repeat"));
+        canvasTxt.value?.rect(0,0,canvas.width ,canvas.height);
+        canvasTxt!.value!.fillStyle = (pat as any);
+        canvasTxt.value?.fill();
+      } else if(props.imgBack && !isImgaes(props.imgBack) && !props.isBrush) {
+          canvasTxt!.value!.fillStyle = props.imgBack;
+          canvasTxt.value?.fillRect(0,0, canvas.width, canvas.height);
+      }
+      resultImg.value = canvas.toDataURL()
+      let resultImgs:any = resultImg.value
+      canvasTxt.value?.clearRect(0, 0, canvas.width ,canvas.height)
+      canvasTxt.value?.putImageData(resImgData, 0, 0)
+      canvasTxt!.value!.globalCompositeOperation = "source-over"
+      if (props.isCrop) {
+        const crop_area = getCropArea(resImgData.data) as [number, number, number,number]
+        let crop_canvas: HTMLCanvasElement | null = document.createElement('canvas')
+        const crop_ctx = crop_canvas.getContext('2d')
+        crop_canvas.width = crop_area[2] - crop_area[0]
+        crop_canvas.height = crop_area[3] - crop_area[1]
+        const crop_imgData = (cropCanvasTxt.value || canvasTxt.value)?.getImageData(...crop_area)
+        //const crop_imgData = (cropCanvasTxt.value || canvasTxt.value)?.getImageData.apply(null, crop_area)
+        crop_ctx!.globalCompositeOperation = "destination-over"
+        crop_ctx?.putImageData(crop_imgData!, 0, 0)
+        resultImgs = crop_canvas.toDataURL()
+        crop_canvas = null
+      }
+      let edg = (props.fullScreen && ((window.orientation == 0 || window.orientation == 180) || ((window.orientation == 90 || window.orientation == -90) && !props.noRotation))) || (window.orientation === undefined) && props.noRotation ? props.edg : 0
+      rotateBase64Img(resultImgs, edg)
+      .then(base64 => {
+          resolve({
+            base64, 
+            points: points.value
+          })
+      })
+    })
+  }
+ 
+  const reset = () => {
+    let canvas = canvasRef.value as HTMLCanvasElement
+    canvasTxt.value?.clearRect(
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    )
+    points.value = []
+    hasDrew.value = false
+    resultImg.value = ''
+    setCanvasBack(false)
+  }
+  const getCropArea = (imgData: any) => {
+      if (props.imgBack && !props.isBrush) {
+        cropCanvas.value = document.createElement('canvas')
+        if (props.domId) {
+            let dom = document.getElementById(props.domId)
+            let domWidth = dom ? dom.clientWidth || dom.offsetWidth : props.fullScreen ? screenPatams.width : props.width
+            let domHeight = dom ? dom.clientHeight || dom.offsetHeight : props.fullScreen ? screenPatams.height : props.height
+            cropCanvas.value.height = domHeight
+            cropCanvas.value.width = domWidth
+            domPatams.width = domWidth
+            domPatams.height = domHeight
+        } else {
+            cropCanvas.value.height = props.fullScreen ? screenPatams.height : props.height
+            cropCanvas.value.width = props.fullScreen ? screenPatams.width : props.width
+        }
+        cropCanvasTxt.value = cropCanvas.value.getContext('2d')
+        if (isImgaes(props.imgBack)){
+          let pat = cropCanvasTxt.value?.createPattern(imgBackDom.value, (props.isRepeat || "no-repeat"));
+          cropCanvasTxt.value?.rect(0,0,cropCanvas.value.width ,cropCanvas.value.height);
+          cropCanvasTxt!.value!.fillStyle = (pat as any);
+          cropCanvasTxt.value?.fill();
+        } else if(!isImgaes(props.imgBack)) {
+            cropCanvasTxt!.value!.fillStyle = props.imgBack;
+            cropCanvasTxt.value?.fillRect(0,0, cropCanvas.value.width, cropCanvas.value.height);
+        }
+        autoDraw(cropCanvas.value, cropCanvasTxt.value)
+      }
+      let canvas = cropCanvas.value as HTMLCanvasElement || canvasRef.value as HTMLCanvasElement
+      let topX = canvas.width;
+      var btmX = 0;
+      var topY = canvas.height;
+      var btnY = 0
+      for (var i = 0; i < canvas.width; i++) {
+          for (var j = 0; j < canvas.height; j++) {
+          var pos = (i + canvas.width * j) * 4
+          if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
+              btnY = Math.max(j, btnY)
+              btmX = Math.max(i, btmX)
+              topY = Math.min(j, topY)
+              topX = Math.min(i, topX)
+          }
+          }
+      }
+      topX++
+      btmX++
+      topY++
+      btnY++
+      const data = [topX, topY, btmX, btnY]
+      return data
+  }
+  const recoverDraw = (pointsList: pointsType[]) => {
+    if (props.isBrush) return false
+    let canvas = canvasRef.value as HTMLCanvasElement
+    canvasTxt.value?.clearRect(
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    )
+    points.value = pointsList
+    hasDrew.value = true
+    resultImg.value = ''
+    setCanvasBack(true)
+  }
+  onBeforeMount(() =>  {
+    if (props.fullScreen) {
+      // let bodyDom = document.getElementsByTagName('body')
+      // bodyDom[0].style = 'height: 100vh';
+      document.body.style.height = '100vh';
+    }
+    window.addEventListener('resize', resizeHandler)
+  })
+  onUnmounted(() => {
+    if (props.fullScreen) {
+      // let bodyDom = document.getElementsByTagName('body')
+      // bodyDom[0].style = '';
+      document.body.style.height = '';
+    }
+    window.removeEventListener('resize', resizeHandler)
+    window.removeEventListener("orientationchange", orientationchangeEvent)
+  })
+  defineExpose({
+      confirm: toRaw(confirm),
+      reset,
+      recoverDraw
+  })
+
+</script>
+
+<style scoped>
+canvas {
+max-width: 100%;
+display: block;
+}
+</style>
\ No newline at end of file

From f73b238b298c8d61e09fdd21c20697fdaaee806c Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Tue, 2 Jan 2024 16:25:09 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/assembly/index.ts   |  12 +-
 .../DesignForm/public/form/formGroup.vue      |   1 +
 src/views/sysworkflow/codepage/page.vue       |   2 +-
 src/widget/index.ts                           |   2 +
 src/widget/videoupload/index.vue              | 186 ++++++++++++++++++
 src/widget/videoupload/videoUploadPlay.vue    | 102 ++++++++++
 6 files changed, 303 insertions(+), 2 deletions(-)
 create mode 100644 src/widget/videoupload/index.vue
 create mode 100644 src/widget/videoupload/videoUploadPlay.vue

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 30a93419b..18b72abbe 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -306,7 +306,17 @@ const selectOption: any = [
 			modelValue: ''
 		  },
 		  config: {}
-		}
+		},
+		{
+			type: 'videoUpAndPlay',
+			label: '视频',
+			icon: '',
+			iconFont: 'fa-play-circle',
+			control: {
+			  modelValue: ''
+			},
+			config: {}
+		  }
 	  ]
 	},
 	{
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 01dd78689..cce0fabfb 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/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" />
diff --git a/src/views/sysworkflow/codepage/page.vue b/src/views/sysworkflow/codepage/page.vue
index e019ffec0..c4290aa65 100644
--- a/src/views/sysworkflow/codepage/page.vue
+++ b/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)
diff --git a/src/widget/index.ts b/src/widget/index.ts
index 36df8d652..6f6db8349 100644
--- a/src/widget/index.ts
+++ b/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)
 }
diff --git a/src/widget/videoupload/index.vue b/src/widget/videoupload/index.vue
new file mode 100644
index 000000000..3e6d0c451
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/widget/videoupload/videoUploadPlay.vue b/src/widget/videoupload/videoUploadPlay.vue
new file mode 100644
index 000000000..b1476f488
--- /dev/null
+++ b/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>
\ No newline at end of file

From 4dff74a20349cd48dbb41e20717203f10f1d0332 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 10 Jan 2024 08:19:44 +0800
Subject: [PATCH 03/11] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/lowcodevideo.ts | 52 +++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/store/modules/lowcodevideo.ts

diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts
new file mode 100644
index 000000000..4b5d70079
--- /dev/null
+++ b/src/store/modules/lowcodevideo.ts
@@ -0,0 +1,52 @@
+//定义组合式API仓库
+import { defineStore } from "pinia";
+import { ref, computed,watch,reactive} from 'vue';
+type VideoMsg = {
+    CreatedAt: string
+      UpdatedAt: string
+    fileSize: bigint
+    id: bigint
+    key: string
+    name: string
+    physicspath: string
+    size: string
+    tag: string
+    type: number
+    url: string
+  }
+  /* type VideoObj = {} */
+
+
+//创建小仓库
+let uselowcodevideoStore = defineStore('lowcodevideo', () => {
+
+    //视频地址
+    const videoResource = ref<string>();
+    //是否上传成功
+    const videoReady = ref(false);
+    //成功后接受的视频详细信息
+    const videoMsg = reactive<VideoMsg>({
+        CreatedAt: '',
+        UpdatedAt: '',
+        fileSize: 0n,
+        id: 0n,
+        key: '',
+        name: '',
+        physicspath: '',
+        size: '',
+        tag: '',
+        type: 0,
+        url: ''
+    });
+    //表单视频信息数组
+    /* const videoArr = reactive<> */
+
+    //务必要返回一个对象:属性与方法可以提供给组件使用
+    return {
+        videoReady,
+        videoResource,
+        videoMsg,
+    }
+});
+
+export default uselowcodevideoStore;
\ No newline at end of file

From a244d70a5fb1abd60d3a446f73b8cd407d82c651 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 10 Jan 2024 08:20:50 +0800
Subject: [PATCH 04/11] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/formControlAttr.vue |  74 ++++
 src/views/knowledge/news/index.vue            | 356 +-----------------
 src/widget/videoupload/videoUploadPlay.vue    |  96 +----
 3 files changed, 83 insertions(+), 443 deletions(-)

diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 9e6d340d7..e185c890e 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -14,6 +14,10 @@ import { PublicAtrr } from '@/api/DesignForm/types'
 
 import { chineseToPinyin } from '@/api/DesignForm/requestapi'
 
+import { uploadUrl } from '@/api/DesignForm'
+import { UploadFilled } from '@element-plus/icons-vue'
+import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
+
 const props = withDefaults(			//接收父级参数
     defineProps<{
       formData: any
@@ -584,6 +588,14 @@ const attrList = computed(() => {
 				path: 'config.componentName',
 				vShow: ['component']
 			},
+			{
+				label: '上传视频',
+				value: config.disabledAdd,
+				path: 'config.disabledAdd',
+				type: 'uploadvideo',
+				vIf: state.isSearch,
+				vHide: ['uploadvideo']
+			},
 			{
 				label: '上传地址',
 				value: control.action,
@@ -1206,6 +1218,53 @@ const isNotWrite = (val:any) =>{
 	}
 	return false
 }
+
+//liwenxuan 20240108 vidioupload  start
+import uselowcodevideoStore from '@/store/modules/lowcodevideo'
+const lowcodevideoStore = uselowcodevideoStore();
+
+//const emits = defineEmits(["addedVideo"]);
+//上传成功钩子
+function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
+	//更新pinia中的视频上传信息
+	lowcodevideoStore.videoResource = response.data.url;
+	lowcodevideoStore.videoReady = true;
+	console.log(response)
+	console.log(lowcodevideoStore);
+	lowcodevideoStore.videoMsg.CreatedAt = response.data.CreatedAt;
+	lowcodevideoStore.videoMsg.UpdatedAt = response.data.UpdatedAt;
+	lowcodevideoStore.videoMsg.fileSize = response.data.fileSize;
+	lowcodevideoStore.videoMsg.id = response.data.id;
+	lowcodevideoStore.videoMsg.key = response.data.key;
+	lowcodevideoStore.videoMsg.name = response.data.name;
+	lowcodevideoStore.videoMsg.physicspath = response.data.physicspath;
+	lowcodevideoStore.videoMsg.size = response.data.size;
+	lowcodevideoStore.videoMsg.tag = response.data.tag;
+	lowcodevideoStore.videoMsg.type = response.data.type;
+	lowcodevideoStore.videoMsg.url = response.data.url; 
+  	//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;
+  lowcodevideoStore.videoResource = resdurl;
+} */
+//liwenxuan 20240108 vidioupload  end
 </script>
 <template>
 	<div  class="sidebar-tools">
@@ -1239,6 +1298,19 @@ const isNotWrite = (val:any) =>{
 								v-model="item.value"
 								@change="controlChange(item, $event)"
 							/>
+							<el-row v-else-if="item.type === 'uploadvideo'">
+								<el-upload  
+								v-if="!lowcodevideoStore.videoReady"
+								:action="uploadUrl"  :before-remove="beforeRemove"
+								:on-success="videoUploadOk" :show-file-list="true"
+								:on-error="videoUploadErr"
+								accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
+									<el-button type="primary">点此上传</el-button>
+								</el-upload>
+								<el-button v-if="lowcodevideoStore.videoReady" type="primary">已上传</el-button>
+							</el-row>
+
+
 							<el-input
 								v-else
 								:type="item.inputStyle"
@@ -1246,8 +1318,10 @@ const isNotWrite = (val:any) =>{
 								:placeholder="item.placeholder"
 								@input="controlChange(item, $event)"
 							/>
+							
 						</el-form-item>
 					</template>
+					
 					<template v-if="controlData.config">
 						<el-form-item label="联动条件">
 							<el-switch v-model="controlData.config.linkKey" />
diff --git a/src/views/knowledge/news/index.vue b/src/views/knowledge/news/index.vue
index 25a56c0af..4a2673392 100644
--- a/src/views/knowledge/news/index.vue
+++ b/src/views/knowledge/news/index.vue
@@ -1,357 +1,13 @@
-<script lang='ts' setup>
-import { useUserStore } from "@/store/modules/user"
-
-import { ref } from 'vue'
-import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
-import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
-import Navili from '@/views/knowledge/knowledge/components/Navili.vue'
-import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue'
-import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
-import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll'
-import { useRouter } from 'vue-router'
-import errimg from '@/assets/404_images/imgNotFound.png'
-
-const active = ref(0); // 当前激活的导航索引
-
-
-const userStore = useUserStore();
-const { userKey, userToken } = userStore;
-
-
-const userDetail = ref<UserDetail>({
-  //证件号码
-  idcardno: ["1", "2"],
-  //姓名
-  name: 'a',
-  //头像url
-  icon: 'b',
-  //工号
-  wmNumber: '2',
-  //唯一识别码
-  wmKey: "1",
-  //adminorg
-  adminorg: "9999",
-});
-const tuijianPage = ref<Graphicform[]>();
-
-const naviList = ref<Navi[]>();
-const naviList1 = ref<Navi[]>();
-//用户信息查询参数
-const userQueryParam = reactive<UserQuery>({
-  userkey: userKey,
-  usertoken: userToken,
-});
-//navi查询参数
-const naviQueryParam = reactive<NaviQuery>({
-  atParentId: "",//知识库
-  userkey: userKey,
-  usertoken: userToken,
-});
-const pageParamTuijian = reactive<PageParam>({
-  total: 0,
-  page: 1,
-  pagesize: 7,
-  archivesTypeAtParentId: "",	//知识库or新闻资讯
-  gParentSun: "",
-  //唯一识别码
-  key: String(userDetail.value.wmKey),
-  //adminorg
-  adminorg: String(userDetail.value.adminorg),
-  userkey: userKey,
-  usertoken: userToken,
-
-})
-const carousel = ref<Graphicform[]>();
-function errorImg(e: any) {
-  e.srcElement.src = errimg;
-  //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
-  e.srcElement.onerror = null; //防止闪图
-}
-const fatherisReady = ref(0);
-
-const router = useRouter()
-const routerUrl = toRaw(router).currentRoute.value.fullPath
-onBeforeMount(() => {
-  //当前登录用户详细信息
-  getUserDetail(userQueryParam)
-    .then(({ data }) => {
-      userDetail.value = data
-    });
-
-})
-
-
-onMounted(() => {
-  // 监听滚动事件
-  window.addEventListener('scroll', jsScroll, false)
-
-  if (routerUrl.endsWith("index")) {//此时页面为知识库
-    naviQueryParam.atParentId = '16213848089876281'
-    pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
-  } else if (routerUrl.endsWith("news")) {//此时页面为新闻资讯
-    naviQueryParam.atParentId = '16213847972425134'
-    pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
-  }
-  getZxxyNavis(naviQueryParam)
-    .then(({ data }) => {
-      naviList.value = data
-      }).finally(() => {
-        fatherisReady.value = 100;
-      })
-  //推荐 
-  getTuijian(pageParamTuijian)
-    .then(({ data }) => {
-      tuijianPage.value = data.list
-      pageParamTuijian.page = data.pageNum
-      pageParamTuijian.total = data.total
-    });
-  getCarousel(pageParamTuijian)
-    .then(({ data }) => {
-      carousel.value = data.list
-    });
-});
-
-
-function jsScroll() {
-  active.value = onScroll();
-}
-
-onUnmounted(() => {
-  // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
-  window.removeEventListener('scroll', onScroll)
-});
-function handleCurrentChange() {
-
-  getTuijian(pageParamTuijian)
-    .then(({ data }) => {
-      tuijianPage.value = data.list
-      pageParamTuijian.page = data.pageNum
-      pageParamTuijian.total = data.total
-    });
-
-}
-
-//dialog
-const cardContentSource = ref<Graphicform>({});
-const showContentBox = ref(false);	//详情弹窗
-
-function showContentDialog(item: any) {
-  showContentBox.value = true;
-  cardContentSource.value = item;
-}
-
-
-</script>
 <template>
-  <div class="app-container">
-    <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
-    <!-- 内容区域 -->
-    <div class="content">
-
-      <div class="models ">
-
-        <div class="model-title">
-          <h3>推荐</h3>
-
-        </div>
-        <div class="grid-tuijian">
-          <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
-            <el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)">
-
-              <img style="width: 495px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
-                referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
-            </el-carousel-item>
-          </el-carousel>
-
-          <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
-            <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
-              referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
-
-            <div class="card-right">
-              <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
-              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
-
-              <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
-
-              <span class="myicons">
-                <span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span
-                  class="fa fa-thumbs-o-up"></span>赞(<span>{{
-                    item.gLikes }}</span>) <span class="fa fa-thumbs-o-down"></span>踩(<span>{{ item.gStepOn }}</span>)
-                <span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>)
-              </span>
-            </div>
-          </div>
-
-        </div>
-        <el-pagination class="pagi" v-model:current-page="pageParamTuijian.page" v-if="pageParamTuijian.total > 0"
-          v-model:page-size="pageParamTuijian.pagesize" layout="prev, pager, next, jumper" :total="pageParamTuijian.total"
-          @current-change="handleCurrentChange" />
-      </div>
-      <!-- 各知识/新闻分区 -->
-
-      <template v-for="(item, index) in naviList">
-        <Archivestype :liContent=item :index=(index) :fatherisReady="fatherisReady" :routerUrl="routerUrl"></Archivestype>
-      </template>
-
-
-
-
-    </div>
-
-    <!-- 导航区域 -->
-
-    <ul class="navs">
-      <li :class="{ active: active === 0 }" @click="scrollTo(0)">
-        推荐
-      </li>
-
-      <template v-for="(item, index) in naviList">
-        <Navili :class="{ active: active === index+1 }" :oneli=item :index=(index+1) v-if="item.hasCard" :active=active
-          @click="scrollTo(index + 1)"></Navili>
-      </template>
-
-    </ul>
-  </div>
+  <h1>test</h1>
 </template>
 
+<script setup lang="ts">
 
+</script>
 
 <style scoped>
-.content {
-  background-color: white;
-  width: 89.1%;
-  margin-left: 190px;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  border-radius: 5px;
-}
-
-
-
-
-/* 导航栏的样式 */
-.navs {
-
-
-
-  width: 192px;
-  position: fixed;
-  height: auto;
-  top: 95px;
-
-}
-
-.navs li {
-
-  text-align: center;
-  line-height: 3;
-  font-size: 15.5px;
-  color: #909399;
-  background-color: white;
-  margin-right: 15px;
-}
-
-.navs li:hover {
-  cursor: pointer;
-}
-
-/* 当导航被点亮后改变颜色 */
-.navs .active {
-  color: #409EFF;
-
-}
-
-.model-title {
-  margin-top: -9px;
-  height: 30px;
-}
-
-.grid-tuijian {
-
-
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 484px);
-  gap: 10px;
-  grid-auto-flow: row dense;
-
-}
-
-.tuijian-card {
-  display: flex;
-  width: 481px;
-  height: 140px;
-  padding: 3px;
-  border-radius: 8px;
-  flex-direction: row;
-  flex-wrap: wrap;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-
-.mycarousel {
-
-  grid-row-start: 1;
-  grid-row-end: 3;
-  border-radius: 15px;
-  width: 480px;
-  height: 290px;
-}
-
-.card-right {
-  display: flex;
-  width: 300px;
-  flex-direction: column;
-  flex-wrap: wrap;
-  padding-left: 8px;
-}
-
-.card-title {
-
-
-  height: 1.5em !important;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  -webkit-line-clamp: 1;
-
-
-
-}
-
-.card-text {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  height: 3.1em;
-  font-size: 14px;
-  color: #909399;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  -webkit-line-clamp: 2;
-}
-
-.time-span {
-  height: 1.5em;
-  align-self: end;
-  margin-top: auto;
-  font-size: 13px;
-  margin-right: 5px;
-  color: #909399;
-
-
-}
-
-.myicons {
-
-  align-self: end;
-  margin-right: 5px;
-  font-size: 13px;
-  color: #909399;
-}
-
-.el-pagination {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  justify-content: center;
-
-}
-</style>
+/*
 
+*/
+</style>
\ No newline at end of file
diff --git a/src/widget/videoupload/videoUploadPlay.vue b/src/widget/videoupload/videoUploadPlay.vue
index b1476f488..08128103a 100644
--- a/src/widget/videoupload/videoUploadPlay.vue
+++ b/src/widget/videoupload/videoUploadPlay.vue
@@ -1,102 +1,12 @@
 <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>
+  <video  :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></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;
-}
+import uselowcodevideoStore from '@/store/modules/lowcodevideo'
+const lowcodevideoStore = uselowcodevideoStore();
 
-//上传失败钩子
-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>
\ No newline at end of file

From f4b2191a48849e40bf0b0fb4be088df4ffec01c5 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Mon, 15 Jan 2024 14:59:17 +0800
Subject: [PATCH 05/11] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/types.ts                   |  21 ++
 src/components/DesignForm/assembly/index.ts   |  10 +
 src/components/DesignForm/formControlAttr.vue | 156 ++++++++++++---
 .../DesignForm/public/form/form.vue           |   2 +-
 .../DesignForm/public/form/formGroup.vue      |   1 +
 src/store/modules/lowcodevideo.ts             |  33 ++--
 src/views/sysworkflow/codepage/createform.vue |   3 +
 src/widget/carousel/index.vue                 | 181 ++++++++++++++++++
 src/widget/carousel/lowcodeCarousel.vue       |  40 ++++
 src/widget/index.ts                           |   2 +
 src/widget/videoupload/videoUploadPlay.vue    |   4 +-
 11 files changed, 409 insertions(+), 44 deletions(-)
 create mode 100644 src/widget/carousel/index.vue
 create mode 100644 src/widget/carousel/lowcodeCarousel.vue

diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 9ffa2ed06..0d5a359f1 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -154,3 +154,24 @@ export interface PublicAtrr{
 	inputStyle?:string;
 	vIf?:any;
 }
+//低代码视频单个属性对象
+export interface VideoMsg  {
+    CreatedAt: string
+    UpdatedAt: string
+    fileSize: bigint
+    id: bigint
+    key: string
+    name: string
+    physicspath: string
+    size: string
+    tag: string
+    type: number
+    url: string//视频地址
+	videoReady:boolean//当前视频是否成功上传
+	videoHeight?:number//视频高
+	videoWidth?:number//视频宽
+    videoAutoPlay:boolean//是否自动播放
+    attrId:string//字段标识  e.g : videoUpAndPlay1705024134559
+	poster?:string//海报帧url
+	loop:boolean//是否循环播放
+  }
diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 18b72abbe..f6cd8d7f2 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -316,6 +316,16 @@ const selectOption: any = [
 			  modelValue: ''
 			},
 			config: {}
+		  },
+		  {
+			type: 'lowcodeCarsusel',
+			label: '轮播图',
+			icon: '',
+			iconFont: 'fa-window-restore',
+			control: {
+			  modelValue: ''
+			},
+			config: {}
 		  }
 	  ]
 	},
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index e185c890e..cb103066a 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -588,13 +588,45 @@ const attrList = computed(() => {
 				path: 'config.componentName',
 				vShow: ['component']
 			},
+			{
+				label: '轮播图设置',
+				value: config.carousel,
+				path: 'config.carousel',
+				type: 'carousel',
+				vIf: state.isSearch,
+				vShow: ['lowcodeCarsusel']
+			},
 			{
 				label: '上传视频',
-				value: config.disabledAdd,
-				path: 'config.disabledAdd',
-				type: 'uploadvideo',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_url',
 				vIf: state.isSearch,
-				vHide: ['uploadvideo']
+				vShow: ['videoUpAndPlay']
+			},
+			{
+				label: '视频自动播放',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_autoPlay',
+				vIf: state.isSearch,
+				vShow: ['videoUpAndPlay']
+			},
+			{
+				label: '视频高度',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_height',
+				vIf: state.isSearch,
+				vShow: ['videoUpAndPlay']
+			},
+			{
+				label: '视频宽度',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_width',
+				vIf: state.isSearch,
+				vShow: ['videoUpAndPlay']
 			},
 			{
 				label: '上传地址',
@@ -1221,28 +1253,72 @@ const isNotWrite = (val:any) =>{
 
 //liwenxuan 20240108 vidioupload  start
 import uselowcodevideoStore from '@/store/modules/lowcodevideo'
+import { VideoMsg } from '@/api/DesignForm/types'
 const lowcodevideoStore = uselowcodevideoStore();
-
+const videoAutoPlay = ref(false);
+const videoHeight = ref(400);
+const videoWidth = ref(700);
 //const emits = defineEmits(["addedVideo"]);
 //上传成功钩子
 function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
-	//更新pinia中的视频上传信息
-	lowcodevideoStore.videoResource = response.data.url;
-	lowcodevideoStore.videoReady = true;
+	//当上传成功时,封装一个videoMsg对象
+	const videoMsg:VideoMsg = {
+		CreatedAt: '',
+		UpdatedAt: '',
+		fileSize: 0n,
+		id: 0n,
+		key: '',
+		name: '',
+		physicspath: '',
+		size: '',
+		tag: '',
+		type: 0,
+		url: '',
+		videoAutoPlay: false,
+		videoReady: false,
+		attrId: '',
+		loop: false
+	}
+	videoMsg.url = response.data.url;
+	videoMsg.videoReady = true;
 	console.log(response)
 	console.log(lowcodevideoStore);
-	lowcodevideoStore.videoMsg.CreatedAt = response.data.CreatedAt;
-	lowcodevideoStore.videoMsg.UpdatedAt = response.data.UpdatedAt;
-	lowcodevideoStore.videoMsg.fileSize = response.data.fileSize;
-	lowcodevideoStore.videoMsg.id = response.data.id;
-	lowcodevideoStore.videoMsg.key = response.data.key;
-	lowcodevideoStore.videoMsg.name = response.data.name;
-	lowcodevideoStore.videoMsg.physicspath = response.data.physicspath;
-	lowcodevideoStore.videoMsg.size = response.data.size;
-	lowcodevideoStore.videoMsg.tag = response.data.tag;
-	lowcodevideoStore.videoMsg.type = response.data.type;
-	lowcodevideoStore.videoMsg.url = response.data.url; 
-  	//emits("addedVideo",videoArr)
+	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;
+	
+  	//emits("addedVideo",videoArr)''
+	console.log("response.data.url----2------>",response.data.url)
+	//formConfig.value["hjk"] = 250
+	console.log("formConfig----3------>",formConfig.value)
+	console.log("attrList----1------>",attrList.value)
+
+	if(attrList.value.length > 0){
+		attrList.value.forEach((item:any)=>{
+			// console.log("attrList---item-1------>",item.type)
+			console.log("attrList---item-1------>",item)
+			if(item.type === "uploadvideo_url"){
+				item.config={
+					videoConfig:[
+						{
+							videoUrl:response.data.url,
+							videoAutoPlay:videoAutoPlay,
+							videoHeight:videoHeight,
+							videoWidth:videoWidth
+						}
+					]
+				}
+			}
+		});
+	}
+	console.log("attrList---item-2------>",attrList.value)
 }
 
 //删除钩子 禁止删除
@@ -1265,6 +1341,23 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
   lowcodevideoStore.videoResource = resdurl;
 } */
 //liwenxuan 20240108 vidioupload  end
+
+//liwenxuan 20240111 carousel  start
+const direction = ref('ltr')
+const drawer = ref(false)
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('Are you sure you want to close this?')
+    .then(() => {
+      done()
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+//liwenxuan 20240111 carousel  end  
+
+
+
 </script>
 <template>
 	<div  class="sidebar-tools">
@@ -1273,7 +1366,7 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
 				<el-form size="small" class="form">
 					<div class=""><h3>通用属性</h3></div>
 					<template v-for="(item, index) in attrList" :key="index">
-					{{ item.inputStyle }}
+				
 						<el-form-item :label="item.label">
 							<el-select
 								v-if="item.type === 'select'"
@@ -1298,18 +1391,34 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
 								v-model="item.value"
 								@change="controlChange(item, $event)"
 							/>
-							<el-row v-else-if="item.type === 'uploadvideo'">
+							
+							<el-row v-else-if="item.type === 'uploadvideo_url'">
 								<el-upload  
 								v-if="!lowcodevideoStore.videoReady"
 								:action="uploadUrl"  :before-remove="beforeRemove"
 								:on-success="videoUploadOk" :show-file-list="true"
 								:on-error="videoUploadErr"
+								
 								accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
 									<el-button type="primary">点此上传</el-button>
 								</el-upload>
-								<el-button v-if="lowcodevideoStore.videoReady" type="primary">已上传</el-button>
+								<el-button v-if="lowcodevideoStore.videoReady" type="primary">已上传,点击修改</el-button>
+							</el-row>
+							<el-row v-else-if="item.type === 'uploadvideo_autoPlay'">
+								<el-switch v-model="videoAutoPlay" />
+							</el-row>
+							<el-row v-else-if="item.type === 'uploadvideo_width'">
+								<el-input-number v-model="videoWidth" :step="50" :max="4096"/>
+							</el-row>
+							<el-row v-else-if="item.type === 'uploadvideo_height'">
+								<el-input-number v-model="videoHeight" :step="50" :max="2160"/>
 							</el-row>
 
+							<el-row v-else-if="item.type === 'carousel'">
+								<el-button  type="primary" append-to-body="true" modal="true" @click="drawer = true"  >轮播图设置</el-button>
+							</el-row>
+							
+
 
 							<el-input
 								v-else
@@ -1320,6 +1429,7 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
 							/>
 							
 						</el-form-item>
+						
 					</template>
 					
 					<template v-if="controlData.config">
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index 312ffa711..0d7f7c493 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -164,7 +164,7 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
 
 // 表单组件值改变事件 tProp为子表格相关
 provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any) => {
-	// console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)
+	console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)
 	if (typeof props.changeKeyVal === 'function') {
 		props.changeKeyVal(key, value,type,attribute)
 	}
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index cce0fabfb..b08ec4709 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -427,6 +427,7 @@ onMounted(()=>{
 					
 				</template>
 				<VideoUpAndPlay  v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
+				<LowcodeCarsusel  v-else-if="element.type === 'lowcodeCarsusel'" :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" />
diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts
index 4b5d70079..b303c3bbe 100644
--- a/src/store/modules/lowcodevideo.ts
+++ b/src/store/modules/lowcodevideo.ts
@@ -1,19 +1,7 @@
 //定义组合式API仓库
 import { defineStore } from "pinia";
 import { ref, computed,watch,reactive} from 'vue';
-type VideoMsg = {
-    CreatedAt: string
-      UpdatedAt: string
-    fileSize: bigint
-    id: bigint
-    key: string
-    name: string
-    physicspath: string
-    size: string
-    tag: string
-    type: number
-    url: string
-  }
+import { VideoMsg } from '@/api/DesignForm/types'
   /* type VideoObj = {} */
 
 
@@ -21,9 +9,9 @@ type VideoMsg = {
 let uselowcodevideoStore = defineStore('lowcodevideo', () => {
 
     //视频地址
-    const videoResource = ref<string>();
+    //const videoResource = ref<string>();
     //是否上传成功
-    const videoReady = ref(false);
+    //const videoReady = ref(false);
     //成功后接受的视频详细信息
     const videoMsg = reactive<VideoMsg>({
         CreatedAt: '',
@@ -36,16 +24,23 @@ let uselowcodevideoStore = defineStore('lowcodevideo', () => {
         size: '',
         tag: '',
         type: 0,
-        url: ''
+        url: '',
+        videoAutoPlay:false,
+		    videoHeight:400,
+		    videoWidth:700,
+        videoReady:false,
+        attrId:'',//字段标识  e.g : videoUpAndPlay1705024134559
     });
+    const videoMsgUse = reactive<VideoMsg[]>([])
+    const videoOnShowIndex = ref(0);//当当前表单有多个视频控件时,字段配置栏目前所展示的视频属性在pinia数组中的索引,用来在formControlAttr.vue中的dom属性上绑定显示数据
+  
     //表单视频信息数组
     /* const videoArr = reactive<> */
 
     //务必要返回一个对象:属性与方法可以提供给组件使用
     return {
-        videoReady,
-        videoResource,
-        videoMsg,
+        videoOnShowIndex,
+        videoMsgUse,
     }
 });
 
diff --git a/src/views/sysworkflow/codepage/createform.vue b/src/views/sysworkflow/codepage/createform.vue
index 112096af3..ff377d0e3 100644
--- a/src/views/sysworkflow/codepage/createform.vue
+++ b/src/views/sysworkflow/codepage/createform.vue
@@ -890,6 +890,9 @@ const editversionstaus = (id:string) =>{
 			:customerformid="props.formid"
       @open-dialog="openAceEditDrawer"
     />
+    <!-- liwenxuan 轮播图设置界面 20240112 start  -->
+   
+    <!-- liwenxuan 轮播图设置界面 20240112 end  -->
 		<ace-drawer
       v-model="drawer.visible"
       :title="drawer.title"
diff --git a/src/widget/carousel/index.vue b/src/widget/carousel/index.vue
new file mode 100644
index 000000000..f99d79198
--- /dev/null
+++ b/src/widget/carousel/index.vue
@@ -0,0 +1,181 @@
+<!--
+@ 作者: 李文轩
+@ 时间: 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>
+
+    <LowcodeCarousel></LowcodeCarousel>
+</template>
+<script lang='ts' setup>
+import LowcodeCarousel   from './lowcodeCarousel.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
+}
+
+
+
+
+
+
+
+
+</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>
\ No newline at end of file
diff --git a/src/widget/carousel/lowcodeCarousel.vue b/src/widget/carousel/lowcodeCarousel.vue
new file mode 100644
index 000000000..7d8d27f8e
--- /dev/null
+++ b/src/widget/carousel/lowcodeCarousel.vue
@@ -0,0 +1,40 @@
+<template>
+    <el-carousel class="lowcodeCarsousel">
+        <el-carousel-item v-for="item in 4" :key="item">
+            <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+        </el-carousel-item>
+    </el-carousel>
+</template>
+
+<script setup lang="ts">
+
+
+
+
+</script>
+
+<style scoped>
+.lowcodeCarsousel{
+    height:300px;
+    width:550px;
+}
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>
\ No newline at end of file
diff --git a/src/widget/index.ts b/src/widget/index.ts
index 6f6db8349..ae9f5da86 100644
--- a/src/widget/index.ts
+++ b/src/widget/index.ts
@@ -8,6 +8,7 @@ import baiduMap from './baidumap/index.vue'
 import orgCentent from './org/index.vue'
 import signatureMap from './writingboard/index.vue'
 import videoUpAndPlay from './videoupload/index.vue'
+import lowcodeCarsusel from './carousel/index.vue'
 
 export default (app: any)	=> {
 	app.component('SerialNumber', serialNumber)
@@ -17,4 +18,5 @@ export default (app: any)	=> {
 	app.component('OrgCentent', orgCentent)
 	app.component('SignatureMap', signatureMap)
 	app.component('VideoUpAndPlay',videoUpAndPlay)
+	app.component('LowcodeCarsusel',lowcodeCarsusel)
 }
diff --git a/src/widget/videoupload/videoUploadPlay.vue b/src/widget/videoupload/videoUploadPlay.vue
index 08128103a..f177ada20 100644
--- a/src/widget/videoupload/videoUploadPlay.vue
+++ b/src/widget/videoupload/videoUploadPlay.vue
@@ -1,11 +1,13 @@
 <template>
-  <video  :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></video>
+  <video  :src="videoUrl" loop controls></video>
 </template>
 
 <script setup lang="ts">
 
 import uselowcodevideoStore from '@/store/modules/lowcodevideo'
 const lowcodevideoStore = uselowcodevideoStore();
+const videoUrl = "";
+
 
 </script>
 

From b8d6b779455c67cad00e19e124d8e3fc39ea9bca Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Fri, 19 Jan 2024 15:50:43 +0800
Subject: [PATCH 06/11] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=AE=8C=E6=95=B4=E6=95=88=E6=9E=9C=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/types.ts                   |   2 +-
 src/components/DesignForm/assembly/index.ts   |  22 +-
 src/components/DesignForm/formControlAttr.vue | 232 ++++++++++++------
 .../DesignForm/public/form/form.vue           |   1 +
 src/main.ts                                   |   3 +-
 src/store/modules/lowcodevideo.ts             |  25 +-
 src/views/sysworkflow/codepage/createform.vue |   2 +-
 src/widget/videoupload/index.vue              |   2 +-
 src/widget/videoupload/videoUploadPlay.vue    |  26 +-
 9 files changed, 220 insertions(+), 95 deletions(-)

diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 0d5a359f1..7ccc7ee43 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -172,6 +172,6 @@ export interface VideoMsg  {
 	videoWidth?:number//视频宽
     videoAutoPlay:boolean//是否自动播放
     attrId:string//字段标识  e.g : videoUpAndPlay1705024134559
-	poster?:string//海报帧url
+	poster?:string//视频封面url
 	loop:boolean//是否循环播放
   }
diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index f6cd8d7f2..eb2808c34 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -313,7 +313,27 @@ const selectOption: any = [
 			icon: '',
 			iconFont: 'fa-play-circle',
 			control: {
-			  modelValue: ''
+				modelValue: '',
+				videoMsg:[{
+					CreatedAt: '',
+					UpdatedAt: '',
+					fileSize: "0n",
+					id: "0n",
+					key: '',
+					name: '',
+					physicspath: '',
+					size: '',
+					tag: '',
+					type: 0,
+					url: '',
+					videoReady: false,
+					videoHeight:400,
+					videoWidth:700,
+					videoAutoPlay: false,
+					attrId: '',
+					poster:'',
+					loop: false
+			}]
 			},
 			config: {}
 		  },
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index cb103066a..62821410c 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -39,6 +39,7 @@ const props = withDefaults(			//接收父级参数
 const emits = defineEmits<{
     (e: 'openDialog', data: any): void
     (e: 'update:formOtherData', data: any): void
+	(e: 'videoMsgChange', data: VideoMsg): void
     //(e: 'update:formData', data: any): void
     //(e: 'update:formConfig', data: any): void
 }>()
@@ -188,6 +189,7 @@ const attrList = computed(() => {
 				columnIndex = list[0].type === 'index'
 			}
 		}
+		
 		const temp =reactive<PublicAtrr[]>([
 			{
 				label: '自定义Class',
@@ -604,16 +606,24 @@ const attrList = computed(() => {
 				vIf: state.isSearch,
 				vShow: ['videoUpAndPlay']
 			},
+			/* {
+				label: '上传视频封面',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_poster',
+				vIf: state.isSearch,
+				vShow: ['videoUpAndPlay']
+			}, */
 			{
-				label: '视频自动播放',
+				label: '视频宽度(像素)',
 				value: config.uploadvideo,
 				path: 'config.uploadvideo',
-				type: 'uploadvideo_autoPlay',
+				type: 'uploadvideo_width',
 				vIf: state.isSearch,
 				vShow: ['videoUpAndPlay']
 			},
 			{
-				label: '视频高度',
+				label: '视频高度(像素)',
 				value: config.uploadvideo,
 				path: 'config.uploadvideo',
 				type: 'uploadvideo_height',
@@ -621,13 +631,23 @@ const attrList = computed(() => {
 				vShow: ['videoUpAndPlay']
 			},
 			{
-				label: '视频宽度',
+				label: '视频自动播放',
 				value: config.uploadvideo,
 				path: 'config.uploadvideo',
-				type: 'uploadvideo_width',
+				type: 'uploadvideo_autoPlay',
 				vIf: state.isSearch,
 				vShow: ['videoUpAndPlay']
 			},
+			{
+				label: '视频循环播放',
+				value: config.uploadvideo,
+				path: 'config.uploadvideo',
+				type: 'uploadvideo_loopPlay',
+				vIf: state.isSearch,
+				vShow: ['videoUpAndPlay']
+			},
+			
+			
 			{
 				label: '上传地址',
 				value: control.action,
@@ -817,6 +837,7 @@ watch(
       }
     }
 )
+
 const fileSignAry = reactive<any>([])
 const controlChange = (obj: any, val: any) => {
 	console.log("字段编辑----》",obj,val,controlData.value)
@@ -1252,17 +1273,10 @@ const isNotWrite = (val:any) =>{
 }
 
 //liwenxuan 20240108 vidioupload  start
-import uselowcodevideoStore from '@/store/modules/lowcodevideo'
+
 import { VideoMsg } from '@/api/DesignForm/types'
-const lowcodevideoStore = uselowcodevideoStore();
-const videoAutoPlay = ref(false);
-const videoHeight = ref(400);
-const videoWidth = ref(700);
-//const emits = defineEmits(["addedVideo"]);
-//上传成功钩子
-function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
-	//当上传成功时,封装一个videoMsg对象
-	const videoMsg:VideoMsg = {
+const videoIndex = ref(0);
+const videoMsgArr:VideoMsg[] = reactive<VideoMsg[]>([{
 		CreatedAt: '',
 		UpdatedAt: '',
 		fileSize: 0n,
@@ -1274,81 +1288,129 @@ function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: Uploa
 		tag: '',
 		type: 0,
 		url: '',
-		videoAutoPlay: false,
 		videoReady: false,
+		videoHeight:400,
+		videoWidth:700,
+		videoAutoPlay: false,
 		attrId: '',
+		poster:'',
 		loop: false
-	}
-	videoMsg.url = response.data.url;
-	videoMsg.videoReady = true;
-	console.log(response)
-	console.log(lowcodevideoStore);
-	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;
+}]);
+
+
 	
-  	//emits("addedVideo",videoArr)''
-	console.log("response.data.url----2------>",response.data.url)
-	//formConfig.value["hjk"] = 250
-	console.log("formConfig----3------>",formConfig.value)
-	console.log("attrList----1------>",attrList.value)
+/* //监听当前操作视频的变化
+watch(videoMsgArr[videoIndex.value], () => {
+  	// 在嵌套的属性变更时触发
+  	// 注意：`newValue` 此处和 `oldValue` 是相等的
+  	// 因为它们是同一个对象！
+	emits('videoMsgChange',videoMsgArr[videoIndex.value]);
+	
+},{deep:true})
 
-	if(attrList.value.length > 0){
-		attrList.value.forEach((item:any)=>{
-			// console.log("attrList---item-1------>",item.type)
-			console.log("attrList---item-1------>",item)
-			if(item.type === "uploadvideo_url"){
-				item.config={
-					videoConfig:[
-						{
-							videoUrl:response.data.url,
-							videoAutoPlay:videoAutoPlay,
-							videoHeight:videoHeight,
-							videoWidth:videoWidth
-						}
-					]
-				}
-			}
-		});
+
+
+function setVideoIndex(newValue:any,oldValue:any){
+	//alert(videoIndex.value)
+
+	const result = videoMsgArr.findIndex(function(item) {
+		item.attrId === newValue.activeKey;
+		
+	});
+	if(result!=-1){
+		videoIndex.value = result;
 	}
-	console.log("attrList---item-2------>",attrList.value)
+	//alert(videoIndex.value)
+}
+
+
+ */
+
+ /* const LastEdit = {
+	oldKey:'',
+	oldType:'',
+}
+//监听当前操作组件的变化,当新点击的组件是视频组件时,更新videoIndex
+watch(
+	() => store, (newValue, oldValue) => {
+		//alert("newValue:"+newValue+",oldValue:"+oldValue)
+		let newKey = newValue.activeKey;
+		//alert("newKey==="+newKey+"|||oldKey==="+LastEdit.oldKey)
+		
+		if(oldValue==undefined){
+			//alert('刚进入编辑页面')
+			
+		}else{
+			
+			// if(LastEdit.oldKey===''){
+			//	alert("首次选择控件")
+			//}else{
+			//	if(newKey===''){
+			//		alert('离开编辑页面')
+			//	}else{
+			//		alert("非首次选择控件")
+			//	}
+			//} 
+			//以下两行必须在本else的最后
+			LastEdit.oldKey = newKey
+			LastEdit.oldType = newValue.controlAttr.type
+		}
+
+		if(newValue.controlAttr.type==='videoUpAndPlay'){
+			console.log('是视频')
+		}
+		
+		
+		
+	},{deep:true}
+) */
+
+
+//上传成功钩子
+function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
+	const { control = {} } : { control: any } = controlData.value
+
+	control.videoMsg[videoIndex.value].url = response.data.url;
+	control.videoMsg[videoIndex.value].videoReady = true;
+	control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt;
+	control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt;
+	control.videoMsg[videoIndex.value].fileSize = response.data.fileSize;
+	control.videoMsg[videoIndex.value].id = response.data.id;
+	control.videoMsg[videoIndex.value].key = response.data.key;
+	control.videoMsg[videoIndex.value].name = response.data.name;
+	control.videoMsg[videoIndex.value].physicspath = response.data.physicspath;
+	control.videoMsg[videoIndex.value].size = response.data.size;
+	control.videoMsg[videoIndex.value].tag = response.data.tag;
+	control.videoMsg[videoIndex.value].type = response.data.type;
+	
+	// controlData.value.control.videoMsg = [videoMsgArr]
+	
+	
 }
 
 //删除钩子 禁止删除
 function beforeRemove(){
-  return false;
+	return false;
 }
 
 //上传失败钩子
 function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
-  alert("上传失败,请重试")
-  console.log("上传失败"+error);
-  
+	alert("上传失败,请重试")
+	console.log("上传失败"+error);
 }
-//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src
-/* function selectVideo(uploadFile: UploadFile){
- 
-  const res:any = uploadFile.response;
-  const resd = res.data;
-  const resdurl = resd.url;
-  lowcodevideoStore.videoResource = resdurl;
-} */
+
 //liwenxuan 20240108 vidioupload  end
 
+
+
+
 //liwenxuan 20240111 carousel  start
 const direction = ref('ltr')
 const drawer = ref(false)
 const handleClose = (done: () => void) => {
-  ElMessageBox.confirm('Are you sure you want to close this?')
+	ElMessageBox.confirm('Are you sure you want to close this?')
     .then(() => {
-      done()
+		done()
     })
     .catch(() => {
       // catch error
@@ -1393,8 +1455,9 @@ const handleClose = (done: () => void) => {
 							/>
 							
 							<el-row v-else-if="item.type === 'uploadvideo_url'">
+								<!-- {{ controlData.control }} -->
 								<el-upload  
-								v-if="!lowcodevideoStore.videoReady"
+								v-if="!controlData.control.videoMsg[videoIndex].videoReady"
 								:action="uploadUrl"  :before-remove="beforeRemove"
 								:on-success="videoUploadOk" :show-file-list="true"
 								:on-error="videoUploadErr"
@@ -1402,16 +1465,39 @@ const handleClose = (done: () => void) => {
 								accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
 									<el-button type="primary">点此上传</el-button>
 								</el-upload>
-								<el-button v-if="lowcodevideoStore.videoReady" type="primary">已上传,点击修改</el-button>
+								<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传<!-- ,点击修改 --></el-button>
 							</el-row>
+							<!-- <el-row v-else-if="item.type === 'uploadvideo_poster'">
+								<el-upload  
+								v-if="controlData.control.videoMsg[videoIndex].videoReady&&controlData.control.videoMsg[videoIndex].poster===''"
+								:action="uploadUrl"  :before-remove="beforeRemove"
+								:on-success="videoUploadOk" :show-file-list="true"
+								:on-error="videoUploadErr"
+								
+								accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
+									
+									<el-tooltip
+										class="box-item"
+										content="不上传则视频封面默认为视频第一帧"
+										placement="top-end"
+									>
+										<el-button type="primary">点此上传</el-button>
+									</el-tooltip>
+								</el-upload>
+								<el-button v-if="!controlData.control[videoIndex].videoReady" type="warning">请先上传视频</el-button>
+								<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady&&controlData.control.videoMsg[videoIndex].poster!=''" type="primary">已上传,点击修改</el-button>
+							</el-row>  -->
 							<el-row v-else-if="item.type === 'uploadvideo_autoPlay'">
-								<el-switch v-model="videoAutoPlay" />
+								<el-switch v-model="controlData.control.videoMsg[videoIndex].videoAutoPlay" />
+							</el-row>
+							<el-row v-else-if="item.type === 'uploadvideo_loopPlay'">
+								<el-switch v-model="controlData.control.videoMsg[videoIndex].loop" />
 							</el-row>
 							<el-row v-else-if="item.type === 'uploadvideo_width'">
-								<el-input-number v-model="videoWidth" :step="50" :max="4096"/>
+								<el-input-number v-model="controlData.control.videoMsg[videoIndex].videoWidth" :step="50" :max="4096"/>
 							</el-row>
 							<el-row v-else-if="item.type === 'uploadvideo_height'">
-								<el-input-number v-model="videoHeight" :step="50" :max="2160"/>
+								<el-input-number v-model="controlData.control.videoMsg[videoIndex].videoHeight" :step="50" :max="2160"/>
 							</el-row>
 
 							<el-row v-else-if="item.type === 'carousel'">
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index 0d7f7c493..5f5958a91 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -1006,6 +1006,7 @@ defineExpose({
 				'detail-form': type === 3 || type === 4
 			}"
 		>
+		
 			<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" />
 			<slot></slot>
 	  	</el-form>
diff --git a/src/main.ts b/src/main.ts
index 07f9c276a..d78a42f2d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,6 +26,7 @@ import '@/styles/workflowcss/override-element-ui.scss'
 import ComComponents from '@/components/DesignForm/index'
 import ComWidget from '@/widget/index'
 import AKDesign from '@/views/sysworkflow/codepage/index'
+import * as pinia  from './store/index'
 
 const app = createApp(App);
 // 全局注册 自定义指令(directive)
@@ -45,6 +46,6 @@ app.directive('focus', {
 
 app.use(router).use(i18n).use(ComComponents).use(ComWidget).use(ElementPlus, {
     locale: zhCn
-}).use(AKDesign).mount('#app');
+}).use(AKDesign).use(pinia.store).mount('#app');
 
 
diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts
index b303c3bbe..f820c8e73 100644
--- a/src/store/modules/lowcodevideo.ts
+++ b/src/store/modules/lowcodevideo.ts
@@ -14,22 +14,21 @@ let uselowcodevideoStore = defineStore('lowcodevideo', () => {
     //const videoReady = ref(false);
     //成功后接受的视频详细信息
     const videoMsg = reactive<VideoMsg>({
-        CreatedAt: '',
-        UpdatedAt: '',
+        CreatedAt: "",
+        UpdatedAt: "",
         fileSize: 0n,
         id: 0n,
-        key: '',
-        name: '',
-        physicspath: '',
-        size: '',
-        tag: '',
+        key: "",
+        name: "",
+        physicspath: "",
+        size: "",
+        tag: "",
         type: 0,
-        url: '',
-        videoAutoPlay:false,
-		    videoHeight:400,
-		    videoWidth:700,
-        videoReady:false,
-        attrId:'',//字段标识  e.g : videoUpAndPlay1705024134559
+        url: "",
+        videoReady: false,
+        videoAutoPlay: false,
+        attrId: "",
+        loop: false
     });
     const videoMsgUse = reactive<VideoMsg[]>([])
     const videoOnShowIndex = ref(0);//当当前表单有多个视频控件时,字段配置栏目前所展示的视频属性在pinia数组中的索引,用来在formControlAttr.vue中的dom属性上绑定显示数据
diff --git a/src/views/sysworkflow/codepage/createform.vue b/src/views/sysworkflow/codepage/createform.vue
index ff377d0e3..dd3308814 100644
--- a/src/views/sysworkflow/codepage/createform.vue
+++ b/src/views/sysworkflow/codepage/createform.vue
@@ -32,7 +32,7 @@ import AceDrawer from '@/components/DesignForm/aceDrawer.vue'
 import { ref, reactive, provide, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useLayoutStore } from '@/store/DesignForm/layout'
-import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types'
+import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types'
 import { customerFormVersionCont } from '@/api/DesignForm/type'
 import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion,judgeSubmitCancel } from '@/api/DesignForm/requestapi'
 
diff --git a/src/widget/videoupload/index.vue b/src/widget/videoupload/index.vue
index 3e6d0c451..843d4d233 100644
--- a/src/widget/videoupload/index.vue
+++ b/src/widget/videoupload/index.vue
@@ -14,7 +14,7 @@
         <input  v-model="value" type="hidden" >
     </el-form-item>
 
-    <VideoUploadPlay @added-video="addedVideo"></VideoUploadPlay>
+    <VideoUploadPlay :data="props.data" @added-video="addedVideo"></VideoUploadPlay>
 </template>
 <script lang='ts' setup>
 import VideoUploadPlay   from './videoUploadPlay.vue';
diff --git a/src/widget/videoupload/videoUploadPlay.vue b/src/widget/videoupload/videoUploadPlay.vue
index f177ada20..c262fd80c 100644
--- a/src/widget/videoupload/videoUploadPlay.vue
+++ b/src/widget/videoupload/videoUploadPlay.vue
@@ -1,12 +1,30 @@
 <template>
-  <video  :src="videoUrl" loop controls></video>
+  <!-- <p>{{ videoHeight }}</p>
+  <p>{{ videoWidth }}</p> -->
+  <video  
+    :src="data?.control.videoMsg[0].url"
+    :loop="data?.control.videoMsg[0].loop"
+    :autoplay="data?.control.videoMsg[0].videoAutoPlay"
+    :style="{height:videoHeight,width:videoWidth}"
+    controls
+    >
+  </video>
 </template>
 
 <script setup lang="ts">
 
-import uselowcodevideoStore from '@/store/modules/lowcodevideo'
-const lowcodevideoStore = uselowcodevideoStore();
-const videoUrl = "";
+
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  data: {
+    type: Object,
+  }
+})
+
+const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px'
+
+const videoWidth = props.data?.control.videoMsg[0].videoWidth+'px'
+
 
 
 </script>

From 799d6fde19620f74dfa8d89c780f418d10d2cc30 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Mon, 22 Jan 2024 09:43:01 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=8F=AF=E4=BF=AE=E6=94=B9=E5=B7=B2=E4=B8=8A=E4=BC=A0=E7=9A=84?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/formControlAttr.vue | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 62821410c..558484f01 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -1275,6 +1275,17 @@ const isNotWrite = (val:any) =>{
 //liwenxuan 20240108 vidioupload  start
 
 import { VideoMsg } from '@/api/DesignForm/types'
+import { genFileId } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+
+const upload = ref<UploadInstance>()
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  upload.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  upload.value!.handleStart(file)
+}
+
 const videoIndex = ref(0);
 const videoMsgArr:VideoMsg[] = reactive<VideoMsg[]>([{
 		CreatedAt: '',
@@ -1457,15 +1468,18 @@ const handleClose = (done: () => void) => {
 							<el-row v-else-if="item.type === 'uploadvideo_url'">
 								<!-- {{ controlData.control }} -->
 								<el-upload  
-								v-if="!controlData.control.videoMsg[videoIndex].videoReady"
+								
 								:action="uploadUrl"  :before-remove="beforeRemove"
 								:on-success="videoUploadOk" :show-file-list="true"
 								:on-error="videoUploadErr"
-								
+								:limit="1"
+								:on-exceed="handleExceed"
 								accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
-									<el-button type="primary">点此上传</el-button>
+									<el-button v-if="!controlData.control.videoMsg[videoIndex].videoReady" type="primary">点此上传</el-button>
+									<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传,点击修改</el-button>
 								</el-upload>
-								<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传<!-- ,点击修改 --></el-button>
+								<!-- <el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传,点击修改</el-button> 
+								v-if="!controlData.control.videoMsg[videoIndex].videoReady"-->
 							</el-row>
 							<!-- <el-row v-else-if="item.type === 'uploadvideo_poster'">
 								<el-upload  

From 8f5656715068fcbc1bd157c5ab1f68a2b7d082a6 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Tue, 23 Jan 2024 16:23:22 +0800
Subject: [PATCH 08/11] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F,=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/types.ts                   |  14 +-
 src/assets/404_images/untilUploadImg.png      | Bin 0 -> 3458 bytes
 src/components/DesignForm/assembly/index.ts   |  17 +-
 src/components/DesignForm/formControlAttr.vue | 227 ++++++++++--------
 src/views/sysworkflow/codepage/createform.vue |   2 +-
 src/widget/videoupload/index.vue              |   7 +-
 6 files changed, 146 insertions(+), 121 deletions(-)
 create mode 100644 src/assets/404_images/untilUploadImg.png

diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 7ccc7ee43..89c79cee5 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -158,8 +158,8 @@ export interface PublicAtrr{
 export interface VideoMsg  {
     CreatedAt: string
     UpdatedAt: string
-    fileSize: bigint
-    id: bigint
+    fileSize: number
+    id: number
     key: string
     name: string
     physicspath: string
@@ -174,4 +174,12 @@ export interface VideoMsg  {
     attrId:string//字段标识  e.g : videoUpAndPlay1705024134559
 	poster?:string//视频封面url
 	loop:boolean//是否循环播放
-  }
+}
+//低代码轮播图单个属性对象
+export interface CarsuselConfig  {
+    uploadFlag:boolean,
+	imgId:string,
+	sort:number,
+	imgUrl:string,
+	link:string
+}
diff --git a/src/assets/404_images/untilUploadImg.png b/src/assets/404_images/untilUploadImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..0557f939e109241e0bebee01854561fe015a1c3a
GIT binary patch
literal 3458
zcmeH|>06QsqsAZL0ogQg#dWYvbJEb>(yUV;YFfFpOwrUh_)b%lR$7|mg3t4SsEK7}
zYGwv%xm1Q$lcgEBB$}3cluMZAlICEV+nAp7p8w%|JNJkC<L|?LUBBzz>Fw#VCGZ$<
z444Ig<>lquw{O?f)YR72j*gE0`0?Y}vuE$$zyJF6>(tcL{rmTyJbCi@^XIy{y3*3p
zk&%%XFJ3GyEzQr*7ZnwK|Ni~XojcdBU%z$h)`JHR%F4==O6Ak1Ph~P$adB~ZdHG*|
z{Z&#@QczH^u&@vl6LaIn4Y^#NpPzs6;>CuBhRMmvxw*NDii+pYpEox*fBW|B;lqdj
z{PWM_$B!#3D<>u<s;jFzJ3A8-6Eib27Z(?=UcEX!Jv}osla`kD^5si~Lh<O)qr$?%
z<mBYk)YQ1RxYw^=-@SXcwY4=WDhh_-tgNh@oSfd?-rU^W?Ck88mX@ljDn6fo@7}%H
z+1W2&zFfI-MIw>3wY3R_!i<cJSFc`mbaY6i(!c-yyS~2u=FOXpjg4btV@*v>Jv}{d
z-n{AW@7HRzDwQfPFE2VeIx;dcHa7P1<;xn4Ml2SOkB@))^a(+bckkW_1cFPKE=5E{
z3=R&aq@;9rcc-VPCnY685HvJ2bm77UwOTC_iQ?nqySlorUAxxa-v0LO+k}LK;o;#A
zA3lVIg$)c0gocLp_4R%H_%S>@{QUXz!2jp}U;*oS@PDc6|I`0*0>Cc;D7=N2T&fh}
z4eXAp<g%K0%Bo%2UZuHpNwkfpdQ_!(^;hWZOBUW``3=`>_ZJ^+D7*7IgYie>v2~u1
z4+?XxuXYPC+?>sfomp&nbizN+J$}L6?o~c?gP@a{M*Oa6Pd#wYxXJZf@j)b@LeTr=
zu{7B(=$uy0%x#Dx?Mge!`xIBJyWV)cma=lS&h<^K;-=Ecg65Q;y;2IVZv5nxWneR>
z4Gb&Xo9ljTH_=w{j4874amfS_B}<GYZI>?fYp{6iUe`T%YHk8S&th<`vdp<Y%WiY<
z<4KH8Vh&Yxg}Ht3{durtrE`QsipU#}HQlVzvTE*%ttgx&np#d53#aG|m0lpykWTVG
zqoMxW#>=WYzJDZ8GURw`C_8RV8_?|GufTfPY5>xI9fRFS6fx|E`PVdEh_VW%uyLko
zfSci?UqU<qZNE{1rGn}NhF)3|fi?t;>0B?+w_XXZk<$TU3`OH+3Qh-lkPHMiY;obA
z8fK*RK?N$>S)0P<R+kpy&haW;de8fss&5cz(NYw3zu^Ie734DMVT|VR6nv6=2Eh!y
zXklS}QWV{37Z*b_L(fTNJ+Ze!6Fb9P4ErJSZ<TP1`6gQFU0}ONXLyAbO{)}d;3`<Z
z8RJ=XF#<bdUaY?cVxMS<du*z=#3*!CqPNrb0&aFadu!;w`*TK#GzSI3zv-|=iH+Rl
z?GXTjFc^C>pZGJ`$@Le2tgdD#acH@WVj4qZxtn03bx`u3?o)Df%+vjAu>n0?_}7LZ
z2KdKi*43}Y4-j`L9;j)7bui<y7L1t3%6~}7u2AZ%=WAFOiJ5Yb9AhxGM)%u3luqo<
ze4-rRY31sqXBjfaa|>TxDF@89g*s&Gr9mu1kL=08GgC{)YbYT{FS@H3lA})E%e&|(
zy+^0~*={cDsqs|z<9i+Wiqu(Qv!(p$#sC2-LLJI(-}|`Dr3s%3Fl_B%ytNB}BI4=p
zP>C-k&~pjH5ZbV7Nnv<59i~eWSeSe1!S8?UY_UeV8Por?0;el}L*a2`jYto7hmNBk
z$m2f2nH`9<zPL+3L$0AZHvMFzcmi|&*znvQMLy+sSxBtht#H@bp=wdkqY42gxRnvY
z%y*ygVUKcjx@D1Zhy3{lvM!q*qxwGyao~#q`m>#ByIU*tt+{dl)D;D~>uQ4n>uCBH
zlo6v&%gM*$iDBICW&^HUVIf7dg{(tZ#c!HzDnL{|9^lp#WIihdM~5^RCn?LMiXzq%
zu)+)@b5<w}tc<ta_oZbf6YLZ@B(fYTV@uJ$(Bmw}nc%=!0zl`nje6+7(uqt3$(Re-
zr1%25G(gvV4%BZ1I9C3;K@2HiG_fb3ictObxU;R<2TJ^kd;q(W2d@p5p)COxZaWt;
zQb_}yf@ok)Ib!54**4Vw0kl(q`gOZ^1(m-IECEej$C(mCAn*8UNM)&&+MfUsbU+GB
zi>B{C8`&=JOSA5LOo9SdQ3+awaNz*UgY~+NKu+|c4!&81PJ#5o=$_VG7&M{iQd}We
zKXWav=)IywG>_^`D>(kpIy<4y;I;|z1pciV>ew6;KD>{K-ZH2HXeXO3IGS`5HA1+=
zfNiJSGIq?d$X$t9y0_{#l^*Ur{i}0h&aH2Lr<VNbo9-212$lQd^}QhGI&S=v9v~w(
zupcypP?Wj0e+?({g3frlbcaCh&D-{(p7Phk>{DRT-wXDm?ffli2$@WW%#TBWGlje2
zET<X;wjvHZ2)hG-eH|71-vi3r6XOaJ!wa)f!XoK#(B^7-yO~6Wa;5Ol?!~4?<(gtw
zKGRaA=ya}>>4kHd)>cet9Ta$HBY-hK1)=dSTr?A}1T8eM<4G9~kt5V>jmU8>oNQ04
z4M>(^?MD>YbzU%Wsey_rq?fMqQkd&e;xU{Vy?;|`^wXsYcP<!F!_{o-yBe`ukCGTj
zM^oJoIk?Pd2-{nh6jLc`2zN|II?jak==YG|Gw#4XC>Wj2#oEx6M5H`O7of&(pYAWq
z>K$LXEh!<bi$&5^GjReatHW#DCtS2D*gFI0bGon!lY%yBRKyutXoSD}+lyW?@Ksjt
zh>Z_e7IviG=2V$p1QSM?5fPJZVHHJ(A%^1(<a;`cINXU3dClxM<gkF<wce*Ipd*I0
z8F<PmC2c$iyIAe_^7?NGtx68i_ee2}g8-X!6#e@-6?W`%wcg6?tEh1<j_JUrRS$T+
zd$qX+Q~34t`6TrGn~Yk7TLLgb#6}0DXb)TDsExlbHXl%JRKsW2tj976q$GIY%o4+~
z0nxf?p6u*`#HWMAJpvc9J>?zRfdZ@n0cQ&?+Tcyd=M9*{O};V!ZQP92trW{>d>Hl-
zayz2An9TbF<~R9+6RU5$2~<P+UQA>)Uq(0sC+U~Vd7wX3PoqM)ruM=we;zI=OGG5*
zcB4}vUd=(9nKwVq4NVfcDD~?ktX5GfEQ@S?m~$z&SA%m1mR>ocMxVj?jQrgGs%}Hq
zcZqKBKp6T_=Epx_GSk1&Vi4Nkra`UX?E1<J5~Gh}YseNMuyCz4q3B@vUr(DsgZtVp
z&E?5*n`Ue7K{}qYqS~yBiM7k`yl+T5?+HpVk9<)mT0&~sQbux|F!e)606(dCc~6Ki
zYAdLjaAMmiFy>8xdKWX<M&B61b#py^tFLZCiS=*<mwG0Z`8>l#7<L!K8}&I6*>*E0
ztjL6k=4Mv6giAvuWC+dvX`%jz&rI3PALBf~sP{_B1$0R7Isz|B{S))xv+f@g?1HG?
zv7CsCsarsp&bGq_z*rKQJ`ufQv2Us*Lg{R!J%6aOr(q#NwIM+3U|Z>dgD^!%$JC+g
z#Und5EP&BD(|LX|qgdj;j-<D%H@)}v=a(7gS$NoNR>th*tuV~Dt(#?^Y~+aj7C)IU
z&#C;XzGb{!9NM}(-*TmDy1?(pmm|vy?I$3#+0r=(V5|nn6g;N#Y|4a=W^u&tC5ng^
zApi66^w#aO4YyM;w%o<hojVp$A<*}!+e_%y*l`m9W>R3@3e0CfAcxZXl!BAT0wJ+F
z)(}23R+kQetpY3_wzQ5Vw?YI*0XPDGo?VO5Lg-eYJ08Ydh34PE-Lo)ZBo-|LG{eZS
ziEup+7=8z!yo6{OYz4=<BnS-f5VjS-(P01*fvvHlI)D)k*yRGP4HYmGD0Dt$%myBs
zMRw4j;aSn)5yVkNT{$N>%n|r<D0@_b?KCmQQQ*oEV_Aq93<31mnF7j@1d4tkVo!??
z<Ow}(<4=By5GSgrHsuLXUU9#w#S<oiMs{3^mpFn3{EQdjm<g8?sJ%}ieqnrYIpr)K
z*rtM)4~dd(#W*;gSC{}g#(CgH1vHU`3RzPQKeSC!&n78ol4=)8El2W-FHvPm8p|bS
JR0^>5zX3z@kD&kn

literal 0
HcmV?d00001

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index eb2808c34..006f543f5 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -336,18 +336,25 @@ const selectOption: any = [
 			}]
 			},
 			config: {}
-		  },
-		  {
+		},
+		{
 			type: 'lowcodeCarsusel',
 			label: '轮播图',
 			icon: '',
 			iconFont: 'fa-window-restore',
 			control: {
-			  modelValue: ''
+				modelValue: '',
+				carsuselConfigArr:[{
+							uploadFlag:false,
+							imgId:'',
+							sort:1,
+							imgUrl: '',
+							link: ''
+				}]
 			},
 			config: {}
-		  }
-	  ]
+		}
+	]
 	},
 	{
 	  title: '布局字段',
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 558484f01..5b5731eed 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -1278,109 +1278,21 @@ import { VideoMsg } from '@/api/DesignForm/types'
 import { genFileId } from 'element-plus'
 import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
 
+//更改已上传的视频:el-upload中设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。
 const upload = ref<UploadInstance>()
+
 const handleExceed: UploadProps['onExceed'] = (files) => {
   upload.value!.clearFiles()
   const file = files[0] as UploadRawFile
   file.uid = genFileId()
   upload.value!.handleStart(file)
 }
-
+//每个视频上传控件对应一个videoMsg[videoIndex]
 const videoIndex = ref(0);
-const videoMsgArr:VideoMsg[] = reactive<VideoMsg[]>([{
-		CreatedAt: '',
-		UpdatedAt: '',
-		fileSize: 0n,
-		id: 0n,
-		key: '',
-		name: '',
-		physicspath: '',
-		size: '',
-		tag: '',
-		type: 0,
-		url: '',
-		videoReady: false,
-		videoHeight:400,
-		videoWidth:700,
-		videoAutoPlay: false,
-		attrId: '',
-		poster:'',
-		loop: false
-}]);
-
-
-	
-/* //监听当前操作视频的变化
-watch(videoMsgArr[videoIndex.value], () => {
-  	// 在嵌套的属性变更时触发
-  	// 注意：`newValue` 此处和 `oldValue` 是相等的
-  	// 因为它们是同一个对象！
-	emits('videoMsgChange',videoMsgArr[videoIndex.value]);
-	
-},{deep:true})
-
-
-
-function setVideoIndex(newValue:any,oldValue:any){
-	//alert(videoIndex.value)
-
-	const result = videoMsgArr.findIndex(function(item) {
-		item.attrId === newValue.activeKey;
-		
-	});
-	if(result!=-1){
-		videoIndex.value = result;
-	}
-	//alert(videoIndex.value)
-}
-
-
- */
-
- /* const LastEdit = {
-	oldKey:'',
-	oldType:'',
-}
-//监听当前操作组件的变化,当新点击的组件是视频组件时,更新videoIndex
-watch(
-	() => store, (newValue, oldValue) => {
-		//alert("newValue:"+newValue+",oldValue:"+oldValue)
-		let newKey = newValue.activeKey;
-		//alert("newKey==="+newKey+"|||oldKey==="+LastEdit.oldKey)
-		
-		if(oldValue==undefined){
-			//alert('刚进入编辑页面')
-			
-		}else{
-			
-			// if(LastEdit.oldKey===''){
-			//	alert("首次选择控件")
-			//}else{
-			//	if(newKey===''){
-			//		alert('离开编辑页面')
-			//	}else{
-			//		alert("非首次选择控件")
-			//	}
-			//} 
-			//以下两行必须在本else的最后
-			LastEdit.oldKey = newKey
-			LastEdit.oldType = newValue.controlAttr.type
-		}
-
-		if(newValue.controlAttr.type==='videoUpAndPlay'){
-			console.log('是视频')
-		}
-		
-		
-		
-	},{deep:true}
-) */
-
 
 //上传成功钩子
 function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
 	const { control = {} } : { control: any } = controlData.value
-
 	control.videoMsg[videoIndex.value].url = response.data.url;
 	control.videoMsg[videoIndex.value].videoReady = true;
 	control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt;
@@ -1393,10 +1305,6 @@ function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: Uploa
 	control.videoMsg[videoIndex.value].size = response.data.size;
 	control.videoMsg[videoIndex.value].tag = response.data.tag;
 	control.videoMsg[videoIndex.value].type = response.data.type;
-	
-	// controlData.value.control.videoMsg = [videoMsgArr]
-	
-	
 }
 
 //删除钩子 禁止删除
@@ -1416,17 +1324,53 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
 
 
 //liwenxuan 20240111 carousel  start
-const direction = ref('ltr')
-const drawer = ref(false)
-const handleClose = (done: () => void) => {
-	ElMessageBox.confirm('Are you sure you want to close this?')
-    .then(() => {
-		done()
-    })
-    .catch(() => {
-      // catch error
-    })
+
+import { Delete,Plus } from '@element-plus/icons-vue'
+import { CarsuselConfig } from '@/api/DesignForm/types'
+import errimg from '@/assets/404_images/untilUploadImg.png'
+
+//轮播图设置弹窗显示控制
+const dialogTableVisible = ref(false)
+
+//图片展示显示控制
+const showImagePreview = ref(false)
+
+//轮播图图片上传成功钩子
+function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
+	alert('轮播图图片上传成功')
+}
+
+//轮播图所有已上传的图片的url,点击略缩图展示大图用
+const carouselImgUrlList = computed(() => {
+	const list:string[] = [];
+	const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
+	carsuselConfigData.forEach(element => {
+		if(element.uploadFlag===true){
+			list.push(element.imgUrl)
+		}
+	});
+	return list;
+})
+
+//轮播图设置table
+function createRow(){
+	//alert('新增一行')
+	
+}
+function deleteRow(){
+	//alert('删除一行')
+}
+
+//关闭大图展示
+const closePreview = () => {
+	showImagePreview.value = false
+}
+
+//开启大图展示
+const handlePreview = (index: number, row: any) => {
+    showImagePreview.value = true
 }
+
 //liwenxuan 20240111 carousel  end  
 
 
@@ -1515,7 +1459,8 @@ const handleClose = (done: () => void) => {
 							</el-row>
 
 							<el-row v-else-if="item.type === 'carousel'">
-								<el-button  type="primary" append-to-body="true" modal="true" @click="drawer = true"  >轮播图设置</el-button>
+
+								<el-button  type="primary" append-to-body="true" modal="true" @click="dialogTableVisible = true"  >轮播图设置</el-button>
 							</el-row>
 							
 
@@ -1529,6 +1474,8 @@ const handleClose = (done: () => void) => {
 							/>
 							
 						</el-form-item>
+
+						
 						
 					</template>
 					
@@ -2010,6 +1957,74 @@ const handleClose = (done: () => void) => {
 			</el-tab-pane>
 		</el-tabs>
 	</div>
+	<!-- 轮播图设置弹窗 20240122 start -->
+	
+		<el-dialog v-model="dialogTableVisible" title="轮播图设置" style="width:60%">
+		<el-table :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
+			<el-table-column  label="设置图片" width="180" >
+				<template #default="propFlag">
+					<el-upload 
+					:action="uploadUrl"  :before-remove="beforeRemove"
+					:on-success="carouselImgUploadSuccess" 
+					:on-error="videoUploadErr"
+					:limit="1"
+					accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
+						<el-button v-if="!propFlag.row.uploadFlag" type="primary">点此上传</el-button>
+						<el-button v-if="propFlag.row.uploadFlag" type="primary">已上传,点击修改</el-button>
+					</el-upload>
+				</template>
+			</el-table-column>
+			<el-table-column prop="imgUrl" label="查看图片" width="180">
+				<template #default="imgScope">
+					<!-- {{ imgScope.row.imgUrl }} -->
+					
+					<el-image style="width: 100px; height: 100px;cursor:pointer;" :src="imgScope.row.imgUrl" fit="contain" alt="暂未上传" @click="handlePreview(imgScope.$index, imgScope.row)" >
+						<template #error>
+							<div class="image-slot">
+								<el-image style="width: 100px; height: 100px;" :src="errimg" fit="contain" ></el-image>
+							</div>
+						</template>
+					</el-image>
+				</template>
+			</el-table-column>
+			<el-table-column prop="link" label="链接地址">
+				<template #default="linkScope">
+					
+					<el-input v-model="linkScope.row.link"  placeholder="输入图片的链接地址" />
+				</template>
+			</el-table-column>
+			<el-table-column fixed="right" label="操作" width="120" >
+				
+				<template #default="scope">
+					<el-tooltip
+						class="box-item"
+						content="删除本行"
+						placement="top-start">
+						<el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow"/>
+					</el-tooltip>
+					<!-- {{ tableData[tableDataLength-1] }} -->
+					<!-- {{ scope.row }} -->
+					<el-tooltip
+						class="box-item"
+						content="新增一行"
+						placement="top-start">
+						<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow" />
+					</el-tooltip>
+					
+				</template>
+				
+			</el-table-column>
+		</el-table>
+	</el-dialog>
+	<!-- 图片预览 -->
+	<el-image-viewer
+	v-if="showImagePreview"
+	:zoom-rate="1.2"
+	:url-list="carouselImgUrlList"
+	@close="closePreview"
+	/>
+	
+	<!-- 轮播图设置弹窗 liwenxuan 20240122 end -->
 </template>
 <style  lang='scss' scoped>
 
diff --git a/src/views/sysworkflow/codepage/createform.vue b/src/views/sysworkflow/codepage/createform.vue
index dd3308814..d31b6cc5a 100644
--- a/src/views/sysworkflow/codepage/createform.vue
+++ b/src/views/sysworkflow/codepage/createform.vue
@@ -891,7 +891,7 @@ const editversionstaus = (id:string) =>{
       @open-dialog="openAceEditDrawer"
     />
     <!-- liwenxuan 轮播图设置界面 20240112 start  -->
-   
+    
     <!-- liwenxuan 轮播图设置界面 20240112 end  -->
 		<ace-drawer
       v-model="drawer.visible"
diff --git a/src/widget/videoupload/index.vue b/src/widget/videoupload/index.vue
index 843d4d233..5c878ac5a 100644
--- a/src/widget/videoupload/index.vue
+++ b/src/widget/videoupload/index.vue
@@ -14,7 +14,7 @@
         <input  v-model="value" type="hidden" >
     </el-form-item>
 
-    <VideoUploadPlay :data="props.data" @added-video="addedVideo"></VideoUploadPlay>
+    <VideoUploadPlay :data="props.data"></VideoUploadPlay>
 </template>
 <script lang='ts' setup>
 import VideoUploadPlay   from './videoUploadPlay.vue';
@@ -158,12 +158,7 @@ const formatCustomRules = () => {
 
 
 
-const addedVideo = (val:any) =>{
-	console.log("最新视频上传列表--->",val)
 
-    value.value = val
-
-}
 </script>
 <style  lang='scss' scoped>
 .imgbox{

From dfd9775a12be0dae732a3f3d87e701e00f2b09d0 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 24 Jan 2024 13:06:44 +0800
Subject: [PATCH 09/11] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/types.ts                   |  2 +-
 src/components/DesignForm/assembly/index.ts   |  2 +-
 src/components/DesignForm/formControlAttr.vue | 84 +++++++++++++------
 src/store/modules/lowcodevideo.ts             |  4 +-
 4 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 89c79cee5..9868ed09a 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -179,7 +179,7 @@ export interface VideoMsg  {
 export interface CarsuselConfig  {
     uploadFlag:boolean,
 	imgId:string,
-	sort:number,
+	imgSort:number,
 	imgUrl:string,
 	link:string
 }
diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 006f543f5..96361afae 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -347,7 +347,7 @@ const selectOption: any = [
 				carsuselConfigArr:[{
 							uploadFlag:false,
 							imgId:'',
-							sort:1,
+							imgSort:1,
 							imgUrl: '',
 							link: ''
 				}]
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 5b5731eed..71124f3ea 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -1328,6 +1328,7 @@ function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: Uploa
 import { Delete,Plus } from '@element-plus/icons-vue'
 import { CarsuselConfig } from '@/api/DesignForm/types'
 import errimg from '@/assets/404_images/untilUploadImg.png'
+import { v4 as uuidv4 } from "uuid";
 
 //轮播图设置弹窗显示控制
 const dialogTableVisible = ref(false)
@@ -1335,15 +1336,39 @@ const dialogTableVisible = ref(false)
 //图片展示显示控制
 const showImagePreview = ref(false)
 
+//最近点击的上传按钮对应的imgId
+let currentUploadImgid = "";
+
+//刚拖拽视频组件时,初始化imgid监听designForm.activeKey,变化时,如果controlData.value.type=='lowcodeCarsusel',就遍历轮播图数组把imgid=''的都生成uuid
+watch(()=>store.activeKey, () => {
+	if(controlData.value.type==='lowcodeCarsusel'){
+		const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
+		carsuselConfigData.forEach(element => {
+			//console.log(element)
+			if(element.imgId==''){
+				//console.log("初始化imgid")
+				let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
+				element.imgId = onlyNumber;
+			}
+		});
+	}
+})
 //轮播图图片上传成功钩子
 function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
-	alert('轮播图图片上传成功')
+	const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
+		carsuselConfigData.forEach(element => {
+			if(element.imgId==currentUploadImgid){
+				element.imgUrl=response.data.url
+				element.uploadFlag=true
+			}
+		});
+	
 }
 
 //轮播图所有已上传的图片的url,点击略缩图展示大图用
 const carouselImgUrlList = computed(() => {
 	const list:string[] = [];
-	const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
+	const carsuselConfigData:CarsuselConfig[] = store.controlAttr.control.carsuselConfigArr
 	carsuselConfigData.forEach(element => {
 		if(element.uploadFlag===true){
 			list.push(element.imgUrl)
@@ -1353,12 +1378,30 @@ const carouselImgUrlList = computed(() => {
 })
 
 //轮播图设置table
-function createRow(){
-	//alert('新增一行')
-	
+function createRow(clickedRow:any){
+	const newRow:CarsuselConfig = {
+		uploadFlag:false,
+		imgId:'',
+		imgSort:1,
+		imgUrl: '',
+		link: ''
+	}
+	let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
+	newRow.imgId = onlyNumber;
+	const nextSort:number = clickedRow.sort+1;
+	newRow.imgSort = nextSort;
+	controlData.value.control.carsuselConfigArr.push(newRow)
 }
-function deleteRow(){
+
+function deleteRow(clickedRow:any){
 	//alert('删除一行')
+	const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
+	for (var i = 0; i < carsuselConfigData.length; i++) {
+		if(carsuselConfigData[i].imgId===clickedRow.imgId){
+			carsuselConfigData.splice(i, 1);
+			i--; // 如果不减，将漏掉一个元素
+		}
+	}
 }
 
 //关闭大图展示
@@ -1371,6 +1414,10 @@ const handlePreview = (index: number, row: any) => {
     showImagePreview.value = true
 }
 
+const changeCurrentUploadImgid = (clickedRow:any) => {
+	currentUploadImgid = clickedRow.imgId
+}
+
 //liwenxuan 20240111 carousel  end  
 
 
@@ -1959,8 +2006,8 @@ const handlePreview = (index: number, row: any) => {
 	</div>
 	<!-- 轮播图设置弹窗 20240122 start -->
 	
-		<el-dialog v-model="dialogTableVisible" title="轮播图设置" style="width:60%">
-		<el-table :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
+		<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="width:60%,margin-top:70px,margin-left:270px">
+		<el-table v-if="controlData.type=='lowcodeCarsusel'" :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
 			<el-table-column  label="设置图片" width="180" >
 				<template #default="propFlag">
 					<el-upload 
@@ -1969,7 +2016,7 @@ const handlePreview = (index: number, row: any) => {
 					:on-error="videoUploadErr"
 					:limit="1"
 					accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
-						<el-button v-if="!propFlag.row.uploadFlag" type="primary">点此上传</el-button>
+						<el-button v-if="!propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">点此上传</el-button>
 						<el-button v-if="propFlag.row.uploadFlag" type="primary">已上传,点击修改</el-button>
 					</el-upload>
 				</template>
@@ -1996,23 +2043,12 @@ const handlePreview = (index: number, row: any) => {
 			<el-table-column fixed="right" label="操作" width="120" >
 				
 				<template #default="scope">
-					<el-tooltip
-						class="box-item"
-						content="删除本行"
-						placement="top-start">
-						<el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow"/>
-					</el-tooltip>
-					<!-- {{ tableData[tableDataLength-1] }} -->
-					<!-- {{ scope.row }} -->
-					<el-tooltip
-						class="box-item"
-						content="新增一行"
-						placement="top-start">
-						<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow" />
-					</el-tooltip>
+					
+						<el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow(scope.row)"/>
+					
+						<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow(scope.row)" />
 					
 				</template>
-				
 			</el-table-column>
 		</el-table>
 	</el-dialog>
diff --git a/src/store/modules/lowcodevideo.ts b/src/store/modules/lowcodevideo.ts
index f820c8e73..3283f7d0d 100644
--- a/src/store/modules/lowcodevideo.ts
+++ b/src/store/modules/lowcodevideo.ts
@@ -16,8 +16,8 @@ let uselowcodevideoStore = defineStore('lowcodevideo', () => {
     const videoMsg = reactive<VideoMsg>({
         CreatedAt: "",
         UpdatedAt: "",
-        fileSize: 0n,
-        id: 0n,
+        fileSize: 0,
+        id: 0,
         key: "",
         name: "",
         physicspath: "",

From a3ec1f2d3b200482bb6ece569a7b5320349c6af5 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 24 Jan 2024 14:30:32 +0800
Subject: [PATCH 10/11] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/knowledge/news/index.vue      | 355 +++++++++++++++++++++++-
 src/widget/carousel/index.vue           |   2 +-
 src/widget/carousel/lowcodeCarousel.vue |  42 ++-
 3 files changed, 386 insertions(+), 13 deletions(-)

diff --git a/src/views/knowledge/news/index.vue b/src/views/knowledge/news/index.vue
index 4a2673392..585650fa6 100644
--- a/src/views/knowledge/news/index.vue
+++ b/src/views/knowledge/news/index.vue
@@ -1,13 +1,356 @@
+<script lang='ts' setup>
+import { useUserStore } from "@/store/modules/user"
+
+import { ref } from 'vue'
+import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
+import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
+import Navili from '@/views/knowledge/knowledge/components/Navili.vue'
+import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue'
+import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
+import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll'
+import { useRouter } from 'vue-router'
+import errimg from '@/assets/404_images/imgNotFound.png'
+
+const active = ref(0); // 当前激活的导航索引
+
+
+const userStore = useUserStore();
+const { userKey, userToken } = userStore;
+
+
+const userDetail = ref<UserDetail>({
+  //证件号码
+  idcardno: ["1", "2"],
+  //姓名
+  name: 'a',
+  //头像url
+  icon: 'b',
+  //工号
+  wmNumber: '2',
+  //唯一识别码
+  wmKey: "1",
+  //adminorg
+  adminorg: "9999",
+});
+const tuijianPage = ref<Graphicform[]>();
+
+const naviList = ref<Navi[]>();
+const naviList1 = ref<Navi[]>();
+//用户信息查询参数
+const userQueryParam = reactive<UserQuery>({
+  userkey: userKey,
+  usertoken: userToken,
+});
+//navi查询参数
+const naviQueryParam = reactive<NaviQuery>({
+  atParentId: "",//知识库
+  userkey: userKey,
+  usertoken: userToken,
+});
+const pageParamTuijian = reactive<PageParam>({
+  total: 0,
+  page: 1,
+  pagesize: 7,
+  archivesTypeAtParentId: "",	//知识库or新闻资讯
+  gParentSun: "",
+  //唯一识别码
+  key: String(userDetail.value.wmKey),
+  //adminorg
+  adminorg: String(userDetail.value.adminorg),
+  userkey: userKey,
+  usertoken: userToken,
+
+})
+const carousel = ref<Graphicform[]>();
+function errorImg(e: any) {
+  e.srcElement.src = errimg;
+  //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
+  e.srcElement.onerror = null; //防止闪图
+}
+const fatherisReady = ref(0);
+
+const router = useRouter()
+const routerUrl = toRaw(router).currentRoute.value.fullPath
+onBeforeMount(() => {
+  //当前登录用户详细信息
+  getUserDetail(userQueryParam)
+    .then(({ data }) => {
+      userDetail.value = data
+    });
+
+})
+
+
+onMounted(() => {
+  // 监听滚动事件
+  window.addEventListener('scroll', jsScroll, false)
+
+  if (routerUrl.endsWith("index")) {//此时页面为知识库
+    naviQueryParam.atParentId = '16213848089876281'
+    pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
+  } else if (routerUrl.endsWith("news")) {//此时页面为新闻资讯
+    naviQueryParam.atParentId = '16213847972425134'
+    pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
+  }
+  getZxxyNavis(naviQueryParam)
+    .then(({ data }) => {
+      naviList.value = data
+      }).finally(() => {
+        fatherisReady.value = 100;
+      })
+  //推荐 
+  getTuijian(pageParamTuijian)
+    .then(({ data }) => {
+      tuijianPage.value = data.list
+      pageParamTuijian.page = data.pageNum
+      pageParamTuijian.total = data.total
+    });
+  getCarousel(pageParamTuijian)
+    .then(({ data }) => {
+      carousel.value = data.list
+    });
+});
+
+
+function jsScroll() {
+  active.value = onScroll();
+}
+
+onUnmounted(() => {
+  // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
+  window.removeEventListener('scroll', onScroll)
+});
+function handleCurrentChange() {
+
+  getTuijian(pageParamTuijian)
+    .then(({ data }) => {
+      tuijianPage.value = data.list
+      pageParamTuijian.page = data.pageNum
+      pageParamTuijian.total = data.total
+    });
+
+}
+
+//dialog
+const cardContentSource = ref<Graphicform>({});
+const showContentBox = ref(false);	//详情弹窗
+
+function showContentDialog(item: any) {
+  showContentBox.value = true;
+  cardContentSource.value = item;
+}
+
+
+</script>
 <template>
-  <h1>test</h1>
+  <div class="app-container">
+    <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
+    <!-- 内容区域 -->
+    <div class="content">
+
+      <div class="models ">
+
+        <div class="model-title">
+          <h3>推荐</h3>
+
+        </div>
+        <div class="grid-tuijian">
+          <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
+            <el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)">
+
+              <img style="width: 495px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
+                referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
+            </el-carousel-item>
+          </el-carousel>
+
+          <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
+            <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+              referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
+
+            <div class="card-right">
+              <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
+              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
+
+              <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
+
+              <span class="myicons">
+                <span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span
+                  class="fa fa-thumbs-o-up"></span>赞(<span>{{
+                    item.gLikes }}</span>) <span class="fa fa-thumbs-o-down"></span>踩(<span>{{ item.gStepOn }}</span>)
+                <span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>)
+              </span>
+            </div>
+          </div>
+
+        </div>
+        <el-pagination class="pagi" v-model:current-page="pageParamTuijian.page" v-if="pageParamTuijian.total > 0"
+          v-model:page-size="pageParamTuijian.pagesize" layout="prev, pager, next, jumper" :total="pageParamTuijian.total"
+          @current-change="handleCurrentChange" />
+      </div>
+      <!-- 各知识/新闻分区 -->
+
+      <template v-for="(item, index) in naviList">
+        <Archivestype :liContent=item :index=(index) :fatherisReady="fatherisReady" :routerUrl="routerUrl"></Archivestype>
+      </template>
+
+
+
+
+    </div>
+
+    <!-- 导航区域 -->
+
+    <ul class="navs">
+      <li :class="{ active: active === 0 }" @click="scrollTo(0)">
+        推荐
+      </li>
+
+      <template v-for="(item, index) in naviList">
+        <Navili :class="{ active: active === index+1 }" :oneli=item :index=(index+1) v-if="item.hasCard" :active=active
+          @click="scrollTo(index + 1)"></Navili>
+      </template>
+
+    </ul>
+  </div>
 </template>
 
-<script setup lang="ts">
 
-</script>
 
 <style scoped>
-/*
+.content {
+  background-color: white;
+  width: 89.1%;
+  margin-left: 190px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: 5px;
+}
+
+
+
+
+/* 导航栏的样式 */
+.navs {
+
+
+
+  width: 192px;
+  position: fixed;
+  height: auto;
+  top: 95px;
+
+}
+
+.navs li {
+
+  text-align: center;
+  line-height: 3;
+  font-size: 15.5px;
+  color: #909399;
+  background-color: white;
+  margin-right: 15px;
+}
+
+.navs li:hover {
+  cursor: pointer;
+}
+
+/* 当导航被点亮后改变颜色 */
+.navs .active {
+  color: #409EFF;
+
+}
+
+.model-title {
+  margin-top: -9px;
+  height: 30px;
+}
+
+.grid-tuijian {
+
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 484px);
+  gap: 10px;
+  grid-auto-flow: row dense;
+
+}
+
+.tuijian-card {
+  display: flex;
+  width: 481px;
+  height: 140px;
+  padding: 3px;
+  border-radius: 8px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.mycarousel {
+
+  grid-row-start: 1;
+  grid-row-end: 3;
+  border-radius: 15px;
+  width: 480px;
+  height: 290px;
+}
+
+.card-right {
+  display: flex;
+  width: 300px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding-left: 8px;
+}
+
+.card-title {
+
+
+  height: 1.5em !important;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+
+
+
+}
+
+.card-text {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: 3.1em;
+  font-size: 14px;
+  color: #909399;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+}
+
+.time-span {
+  height: 1.5em;
+  align-self: end;
+  margin-top: auto;
+  font-size: 13px;
+  margin-right: 5px;
+  color: #909399;
+
+
+}
+
+.myicons {
+
+  align-self: end;
+  margin-right: 5px;
+  font-size: 13px;
+  color: #909399;
+}
+
+.el-pagination {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  justify-content: center;
 
-*/
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/widget/carousel/index.vue b/src/widget/carousel/index.vue
index f99d79198..895a669e3 100644
--- a/src/widget/carousel/index.vue
+++ b/src/widget/carousel/index.vue
@@ -14,7 +14,7 @@
         <input  v-model="value" type="hidden" >
     </el-form-item>
 
-    <LowcodeCarousel></LowcodeCarousel>
+    <LowcodeCarousel :data="props.data"></LowcodeCarousel>
 </template>
 <script lang='ts' setup>
 import LowcodeCarousel   from './lowcodeCarousel.vue';
diff --git a/src/widget/carousel/lowcodeCarousel.vue b/src/widget/carousel/lowcodeCarousel.vue
index 7d8d27f8e..383346888 100644
--- a/src/widget/carousel/lowcodeCarousel.vue
+++ b/src/widget/carousel/lowcodeCarousel.vue
@@ -1,16 +1,44 @@
 <template>
-    <el-carousel class="lowcodeCarsousel">
-        <el-carousel-item v-for="item in 4" :key="item">
-            <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+    <el-carousel arrow="always" style="width: 495px; height: 300px;">
+        <el-carousel-item v-for="item in carsouselData" :key="item.imgId" >
+          <!-- <img 
+            style="width:100%,height:100%"
+            referrerpolicy="no-referrer" 
+            :src="item.imgUrl" fit="fill"
+            @error="errorImg($event)"
+            /> -->
+            <el-image style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="contain" alt="暂未上传" @click="handleLink(item)" >
+						<template #error>
+							<div class="image-slot">
+								<el-image style="width: 100%; height: 100%;" :src="errimg" fit="contain" ></el-image>
+							</div>
+						</template>
+					</el-image>
         </el-carousel-item>
     </el-carousel>
 </template>
 
 <script setup lang="ts">
+import { CarsuselConfig } from '@/api/DesignForm/types'
+import errimg from '@/assets/404_images/imgNotFound.png'
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  data: {
+    type: Object,
+  }
+})
+const carsouselData:CarsuselConfig[] = props.data?.control.carsuselConfigArr
 
 
-
-
+function errorImg(e: any) {
+  e.srcElement.src = errimg;
+  //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
+  e.srcElement.onerror = null; //防止闪图
+}
+function handleLink(item:any){
+  alert(item.link)
+  window.open(item.link,'_blank')
+}
 </script>
 
 <style scoped>
@@ -23,7 +51,7 @@
 }
 
 .el-carousel__item h3 {
-  color: #475669;
+  color: black;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -37,4 +65,6 @@
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
 }
+
+
 </style>
\ No newline at end of file

From 3d9c023bd0f9bd7ac1987e226955dcb67aa3c938 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Thu, 25 Jan 2024 10:35:42 +0800
Subject: [PATCH 11/11] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/assembly/index.ts   |  7 +-
 src/components/DesignForm/formControlAttr.vue | 11 ++-
 src/widget/carousel/lowcodeCarousel.vue       | 90 ++++++++++++++-----
 3 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 96361afae..63b132672 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -350,7 +350,12 @@ const selectOption: any = [
 							imgSort:1,
 							imgUrl: '',
 							link: ''
-				}]
+				}],
+				config: {
+					carsuselWidth:448,
+					carsuselHeight:252,
+					interval:2000,
+				}
 			},
 			config: {}
 		}
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 71124f3ea..355341119 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -2006,7 +2006,12 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 	</div>
 	<!-- 轮播图设置弹窗 20240122 start -->
 	
-		<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="width:60%,margin-top:70px,margin-left:270px">
+		<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="margin-top:70px,margin-left:270px">
+			<div v-if="controlData.type=='lowcodeCarsusel'" style="margin-bottom: 30px;">
+				<span style="margin-right: 10px;">轮播图宽度(像素):</span><el-input-number v-model="controlData.control.config.carsuselWidth" :step="64" :max="4096" :min="178"/>
+				<span style="margin-left:15px;margin-right: 10px;">轮播图高度(像素):</span><el-input-number v-model="controlData.control.config.carsuselHeight" :step="36" :max="4096" :min="100"/>
+				<span style="margin-left:15px;margin-right: 10px;">切图间隔(毫秒):</span><el-input-number v-model="controlData.control.config.interval" :step="200"/>
+			</div>
 		<el-table v-if="controlData.type=='lowcodeCarsusel'" :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
 			<el-table-column  label="设置图片" width="180" >
 				<template #default="propFlag">
@@ -2017,7 +2022,7 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 					:limit="1"
 					accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
 						<el-button v-if="!propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">点此上传</el-button>
-						<el-button v-if="propFlag.row.uploadFlag" type="primary">已上传,点击修改</el-button>
+						<el-button v-if="propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">已上传,点击修改</el-button>
 					</el-upload>
 				</template>
 			</el-table-column>
@@ -2040,7 +2045,7 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 					<el-input v-model="linkScope.row.link"  placeholder="输入图片的链接地址" />
 				</template>
 			</el-table-column>
-			<el-table-column fixed="right" label="操作" width="120" >
+			<el-table-column fixed="right" label="操作（增/删）" width="120" >
 				
 				<template #default="scope">
 					
diff --git a/src/widget/carousel/lowcodeCarousel.vue b/src/widget/carousel/lowcodeCarousel.vue
index 383346888..8c7c41cde 100644
--- a/src/widget/carousel/lowcodeCarousel.vue
+++ b/src/widget/carousel/lowcodeCarousel.vue
@@ -1,51 +1,87 @@
 <template>
-    <el-carousel arrow="always" style="width: 495px; height: 300px;">
-        <el-carousel-item v-for="item in carsouselData" :key="item.imgId" >
-          <!-- <img 
-            style="width:100%,height:100%"
-            referrerpolicy="no-referrer" 
-            :src="item.imgUrl" fit="fill"
-            @error="errorImg($event)"
-            /> -->
-            <el-image style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="contain" alt="暂未上传" @click="handleLink(item)" >
-						<template #error>
-							<div class="image-slot">
-								<el-image style="width: 100%; height: 100%;" :src="errimg" fit="contain" ></el-image>
-							</div>
-						</template>
-					</el-image>
-        </el-carousel-item>
-    </el-carousel>
+  <el-carousel arrow="hover" :style="{height:carsuselHeight,width:carsuselWidth}" :interval = "interval" :height="carsuselHeight" trigger="click">
+    <el-carousel-item v-for="item in carsouselData" :key="item.imgId">
+      <el-image 
+        style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="cover" alt="暂未上传"
+        @click="handleLink(item)">
+        <template #error>
+          <!-- <div class="image-slot"> -->
+            <el-image style="width: 100%; height: 100%" :src="errimg" fit="fill" @click="noMsg" ></el-image>
+          <!-- </div> -->
+          <!-- <div class="image-slot">
+            <el-icon><icon-picture /></el-icon>
+          </div> -->
+        </template>
+      </el-image>
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
 <script setup lang="ts">
 import { CarsuselConfig } from '@/api/DesignForm/types'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
 import errimg from '@/assets/404_images/imgNotFound.png'
+//import errimg from '@/assets/404_images/untilUploadImg.png'
+
 const props = defineProps({
   // eslint-disable-next-line vue/require-default-prop
   data: {
     type: Object,
   }
 })
-const carsouselData:CarsuselConfig[] = props.data?.control.carsuselConfigArr
+const carsouselData: CarsuselConfig[] = props.data?.control.carsuselConfigArr
+
+const carsuselHeight = props.data?.control.config.carsuselHeight+'px'
+
+const carsuselWidth = props.data?.control.config.carsuselWidth+'px'
 
+const interval = props.data?.control.config.interval
 
 function errorImg(e: any) {
   e.srcElement.src = errimg;
   //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
   e.srcElement.onerror = null; //防止闪图
 }
-function handleLink(item:any){
-  alert(item.link)
-  window.open(item.link,'_blank')
+function handleLink(item: any) {
+  console.log("handleLink")
+  let url = "";
+  let urlStart = 'http://'
+  // http://  7
+  //https://  8
+  if (item.link.length < 7) {
+    if (item.link == '') {
+      alert("未配置跳转地址")
+      return
+    }
+    url = urlStart + "" + item.link
+  } else {
+    const linkStartComplete1 = item.link.startsWith("http://")
+    const linkStartComplete2 = item.link.startsWith("https://")
+    if (linkStartComplete1 || linkStartComplete2) {
+      url = item.link
+    } else {
+      url = urlStart + "" + item.link
+    }
+  }
+  window.open(url, '_blank')
+}
+function noMsg() {
+  alert("轮播图未配置")
 }
 </script>
 
 <style scoped>
-.lowcodeCarsousel{
-    height:300px;
-    width:550px;
+.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;
 }
+
 .demonstration {
   color: var(--el-text-color-secondary);
 }
@@ -66,5 +102,11 @@ function handleLink(item:any){
   background-color: #d3dce6;
 }
 
+/* .el-carousel__item:nth-child(2n) {
+  background-color: white;
+}
 
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: white;
+} */
 </style>
\ No newline at end of file