轮播图属性设置

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
 }

src/components/DesignForm/assembly/index.ts

@@ -347,7 +347,7 @@ const selectOption: any = [
 				carsuselConfigArr:[{
 							uploadFlag:false,
 							imgId:'',
-							sort:1,
+							imgSort:1,
 							imgUrl: '',
 							link: ''
 				}]

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>

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: "",