ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/public/form/childTable.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-14 08:51:25
@ 备注: 表单子表
-->
<script lang='ts' setup>
import FormItem from './formItem.vue'
import { inject, computed } from 'vue'
import Tooltips from '@/components/DesignForm/tooltip.vue'
import {constFormProps } from '@/api/DesignForm/utils'
import { jsonParseStringify } from '@/utils/DesignForm'
import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue'
import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'

import LokOrgCentent from '@/widget/org/cont.vue' 


const props = withDefaults(
    defineProps<{
      	data: any
    }>(),
    {
		data: () => {
			return {}
		}
    }
)
const formProps = inject(constFormProps, {}) as any
const tableDataNew = computed(() => {
	// console.log("如果编辑页禁用时-----1---->",props.data.name)
	// console.log("如果编辑页禁用时-----2---->",formProps.value.model[props.data.name])
	// console.log("如果编辑页禁用时-----3---->",formProps.value.model)
	// console.log("如果编辑页禁用时-----4---->",formProps.value)
    return formProps.value.model[props.data.name]
})
const type = computed(() => {
    return formProps.value.type
})
// 如果编辑页禁用时，则返回true
const editDisabled = computed(() => {
    return formProps.value.type === 2 && props.data.config?.editDisabled
})
const addColumn = () => {
	// console.log("如果编辑页禁用时--------->",tableDataNew.value)
    const temp: any = {}
    if (props.data.list) {
		props.data.list.forEach((item: any) => {
			if (item.name) {
				temp[item.name] = item.control.modelValue
			}
		})
		tableDataNew.value.push(jsonParseStringify(temp))
    }
}
const getText = (text: any,val:any,name:any) => {
	// console.log("text===>",text)
	// console.log("name===>",name)
	// console.log("val===>",val)
    if (typeof text === 'string') {
      	return text
    } else {
      	return text && text.toString()
    }
}
const delColumn = (index: number) => {
    tableDataNew.value.splice(index, 1)
}
/**
@ 作者: 秦东
@ 时间: 2024-08-02 13:22:14
@ 功能: 时间戳转换对象
*/
const timeToAry = (timestamp:number) => {
	const date = new Date(timestamp);
	const year = date.getFullYear();
	const month = ('0' + (date.getMonth() + 1)).slice(-2);
	const day = ('0' + date.getDate()).slice(-2);
	const hours = ('0' + date.getHours()).slice(-2);
	const minutes = ('0' + date.getMinutes()).slice(-2);
	const seconds = ('0' + date.getSeconds()).slice(-2);
	return {
		year:year,
		month:month,
		day:day,
		hours:hours,
		minutes:minutes,
		seconds
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-08-02 13:02:49
@ 功能: 将时间戳转换成字符串
*/
const timeToString = (timeVal:any,types:int) => {
	// console.log("将时间戳转换成字符串",timeVal,types)
	let timeStr = ""
	if(Array.isArray(timeVal)){
		if(timeVal.length >= 2){
			let startTime = timeToAry(timeVal[0])
			let endTime = timeToAry(timeVal[1])
			switch(types){
			case "year":	//年
				timeStr = `${startTime.year} 至 ${endTime.year}`;
				break;
			case "month":	//月
				timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
				break;
			case "datetime": //日期+时间
				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
				break;
			case  "week":	//周
				let startWeek = getYearWeek(startTime)
				let endWeek = getYearWeek(endTime)
				timeStr = `${startWeek} 至 ${endWeek}`;
				break;
			case "timeCalss": //时间
				timeStr = `${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
				break;
			case "datetimerange":
				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
				break;
			case "daterange":
				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
				break;
			case "monthrange":
				timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
				break;
			default:
				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
				break;
			}
		}else if(timeVal.length == 1){
			let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal[0])
			switch(types){
				case "year":	//年
					timeStr = `${year}`;
					break;
				case "month":	//月
					timeStr = `${year}-${month}`;
					break;
				case "datetime": //日期+时间
					timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					break;
				case  "week":	//周
					timeStr = getYearWeek(timeVal)
					break;
				case "timeCalss": //时间
					timeStr = `${hours}:${minutes}:${seconds}`;
					break;
				default:
					timeStr = `${year}-${month}-${day}`
					break;
			}
		}else{
			timeStr = "未知时间"
		}
	}else{
		let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal)
		switch(types){
			case "year":	//年
				timeStr = `${year}`;
				break;
			case "month":	//月
				timeStr = `${year}-${month}`;
				break;
			case "datetime": //日期+时间
				timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				break;
			case  "week":	//周
				timeStr = getYearWeek(timeVal)
				break;
			case "timePicker": //时间
				timeStr = `${hours}:${minutes}:${seconds}`;
				break;
			default:
				timeStr = `${year}-${month}-${day}`
				break;
		}
	}
	
	return timeStr
}
</script>
<template>
	
	<div class="form-table form-table-add">
		<el-table
			v-bind="data.control"
			:class="[data.className]"
			:data="tableDataNew"
		>
			<el-table-column
				v-for="(item, index) in data.list"
				:key="index"
				:prop="item.name"
				:label="item.item.label"
				:width="item.item.span"
			>
				<template #default="scope">

					<span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>
					<div v-if="type === 4 || editDisabled">
						<LokOrgCentent  v-if="item.type == 'orgCentent'" :orgid="scope.row[item.name].toString()" />
						<div v-else-if="item.type=='lowcodeImage'">
							<LowcodeImagePage :data="item" 
								v-model="scope.row[item.name]" />
						</div>
						<div v-else-if="item.type=='upload'" >
							<UploadPageList   :data="item" :img-list="scope.row[item.name]" :control="item.control" />
						</div>
						<div v-else-if="item.type=='datePicker'" v-html="timeToString(scope.row[item.name],item.control.type)">
						</div>
						<div v-else-if="item.type=='timePicker'" v-html="timeToString(scope.row[item.name],item.type)">
						</div>
						<div v-else>{{ getText(scope.row[item.name],scope.row,item.name) }}</div>
					</div>
					<div v-else>
				
						<form-item
						v-model="scope.row[item.name]"
						:tProp="`${data.name}.${scope.$index}.${item.name}`"
						:data="item"
						/>
					</div>
				</template>
				<template #header="scope" v-if="item.help">
					{{ scope.column.label }}
					<Tooltip :content="item.help" />
				</template>
			</el-table-column>
			<el-table-column
				prop="del"
				label="操作"
				v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled"
			>
				<template #default="scope">
					<el-button link type="primary" @click="delColumn(scope.$index)">{{ data.config.delBtnText }}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div
			class="table-btn"
			v-if="[1, 2].includes(type as number) && data.config.addBtnText && !editDisabled"
		>
			<el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
		</div>
	</div>
</template>
<style  lang='scss' scoped>

</style>