hreenshan112
1 year ago
5 changed files with 333 additions and 5 deletions
@ -0,0 +1,305 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-10-18 09:21:25 |
|||
@ 备注: 表单表格属性解析 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import FormItem from '@/components/DesignForm/public/form/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 |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-10-11 14:49:23 |
|||
@ 功能: 计算有options属性的结果 |
|||
*/ |
|||
const optToString = (timeVal:any,item:any) => { |
|||
let timeStr = "" |
|||
if(item.options && Array.isArray(item.options)){ |
|||
if(Array.isArray(timeVal)){ |
|||
let strArt = new Array |
|||
switch(item.type){ |
|||
case "radio": |
|||
timeVal.forEach((tim:any)=>{ |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == tim){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
}) |
|||
break; |
|||
case "checkbox": |
|||
timeVal.forEach((tim:any)=>{ |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == tim){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
}) |
|||
break; |
|||
case "select": |
|||
timeVal.forEach((tim:any)=>{ |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == tim){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if(strArt.length > 0){ |
|||
timeStr = strArt.toString() |
|||
} |
|||
}else{ |
|||
let strArt = new Array |
|||
switch(item.type){ |
|||
case "radio": |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == timeVal){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
break; |
|||
case "checkbox": |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == timeVal){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
break; |
|||
case "select": |
|||
item.options.forEach((it:any)=>{ |
|||
if(it.value == timeVal){ |
|||
strArt.push(it.label) |
|||
} |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if(strArt.length > 0){ |
|||
timeStr = strArt.toString() |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
return timeStr |
|||
} |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-card v-for="(cardItem,cardIndex) in tableDataNew" :key="cardIndex" style="width: 100%;margin-bottom: 10px;" shadow="always"> |
|||
<!-- {{cardItem}}<br><br><br> |
|||
{{data.list}} --> |
|||
|
|||
<template v-for="(item, index) in data.list"> |
|||
<span v-if="item.type === 'index'"></span> |
|||
<form-item |
|||
v-else |
|||
v-model="cardItem[item.name]" |
|||
:tProp="`${data.name}.${cardIndex}.${item.name}`" |
|||
:data="item" |
|||
/> |
|||
</template> |
|||
<template #footer class="footBody"> |
|||
<div class="footBody"> |
|||
<el-button link type="danger" @click="delColumn(cardIndex)">{{ data.config.delBtnText }}</el-button> |
|||
</div> |
|||
</template> |
|||
</el-card> |
|||
<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> |
|||
.cardTable{ |
|||
width: 100%; |
|||
margin-bottom: 10px; |
|||
} |
|||
.footBody{ |
|||
text-align: right; |
|||
deep:el-card__footer{ |
|||
text-align: right; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue