<template>
<el-form
ref="temFormRef"
label-width="120px"
v-if="type === 'edit'"
:model="ruleForm"
>
<div class="moreRulesIn" v-for="(item, i) in ruleForm.cloneCustomList" :key="item.TemplateID">
<el-form-item :label="item.FileName + ':'" :prop="'cloneCustomList.' + i +'.DefaultValue'" :rules="{ required: item.IsRequired === 1, message: item.Tip, trigger: ['blur', 'change'] }">
<el-input v-if="item.FieldType === 1" v-model="item.DefaultValue" :placeholder="item.Tip"></el-input>
<el-input-number v-if="item.FieldType === 2" v-model="item.DefaultValue" />
<el-select v-if="item.FieldType === 3" v-model="item.DefaultValue" class="m-2" :placeholder="item.Tip" size="large">
<el-option
v-for="ops in item.Options"
:key="ops.OptionID"
:label="ops.OptionValue"
:value="ops.OptionID"
/>
</el-select>
<el-radio-group v-if="item.FieldType === 4" v-model="item.DefaultValue">
<el-radio v-for="ops in item.Options" :label="ops.OptionID" :key="ops.OptionID">{{ops.OptionValue}}</el-radio>
</el-radio-group>
<el-checkbox-group v-if="item.FieldType === 5" v-model="item.DefaultValue">
<el-checkbox v-for="ops in item.Options" :key="ops.OptionID" :label="ops.OptionID">{{ ops.OptionValue }}</el-checkbox>
</el-checkbox-group>
<el-date-picker
v-if="item.FieldType === 6"
v-model="item.DefaultValue"
type="date"
:placeholder="item.Tip"
value-format="YYYY-MM-DD"
/>
<el-time-picker v-if="item.FieldType === 7" v-model="item.DefaultValue" value-format="HH:mm:ss" :placeholder="item.Tip" />
</el-form-item>
</div>
</el-form>
<el-form v-else>
<el-form-item v-for="(item, index) in cloneCustomList" :key="index" :label="item.FileName + ':'">
<div>
<span v-if="item.FieldType === 1">{{getVal(item.TemplateID)}}</span>
<span v-if="item.FieldType === 2">{{getVal(item.TemplateID)}}</span>
<span v-if="item.FieldType === 3">{{getOption(item.Options, item.TemplateID)}}</span>
<span v-if="item.FieldType === 4">{{getOption(item.Options, item.TemplateID)}}</span>
<span v-if="item.FieldType === 5">{{getCheckbox(item.Options, item.TemplateID)}}</span>
<span v-if="item.FieldType === 6">{{getVal(item.TemplateID)}}</span>
<span v-if="item.FieldType === 7">{{getVal(item.TemplateID)}}</span>
</div>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, PropType, watch, onMounted } from 'vue';
import { ITemplate } from "@/types/activitySet";
const props = defineProps({
customList: {
type: Array as PropType<ITemplate[]> ,
defalut:() => []
},
type: {
type: String,
default: 'view'
},
tems: {
type: Array,
default: () => []
}
})
const temFormRef = ref();
const isvalid = ref(false);
const { tems, type} = toRefs(props)
const ruleForm = reactive({
cloneCustomList:[] as ITemplate[]
})
const { cloneCustomList } = toRefs(ruleForm)
const formEl = () => {
isvalid.value = false;
temFormRef.value!.validate((valid: any) => {
if (valid) {
isvalid.value = true;
}
})
}
const getVal = (id:string) => {
let val:any = ''
val = tems.value.find((item:any) => {
return item.TemplateID === id
})
return val.FileValue
}
const getOption = (option:any,id:string) => {
let val:any = ''
let Te:any = tems.value.find((item:any) => {
return item.TemplateID === id
})
val = option.find((op:any) => {
return op.OptionID === Te.FileValue
})
return val.OptionValue
}
const getCheckbox = (option:any,id:string) => {
let val:any = []
let Te:any = tems.value.find((item:any) => {
return item.TemplateID === id
})
option.map((op:any) => {
if(Te.FileValue.split(',').includes(op.OptionID)){
val.push(op.OptionValue)
}
})
return val.join(',')
}
onMounted(() => {
if(props.type === 'view') {
ruleForm.cloneCustomList = JSON.parse(JSON.stringify(props.customList))
ruleForm.cloneCustomList.forEach((item:any) => {
switch(item.FieldType) {
case 3:
item.DefaultValue = item.Options.find((item:any) => {
return item.DefaultType === 1
})?.OptionID;
break;
case 4:
item.DefaultValue = item.Options.find((item:any) => {
return item.DefaultType === 1
})?.OptionID;
break;
case 5:
item.DefaultValue = item.Options.map((item:any) => {
if(item.DefaultType === 1){
return item?.OptionID
}
}).filter(Boolean);
break;
}
})
}
})
watch(() => props.customList, (newVal, OldVal) => {
if(newVal) {
ruleForm.cloneCustomList = JSON.parse(JSON.stringify(newVal))
ruleForm.cloneCustomList.forEach((item:any) => {
switch(item.FieldType) {
case 3:
item.DefaultValue = item.Options.find((item:any) => {
return item.DefaultType === 1
})?.OptionID;
break;
case 4:
item.DefaultValue = item.Options.find((item:any) => {
return item.DefaultType === 1
})?.OptionID;
break;
case 5:
item.DefaultValue = item.Options.map((item:any) => {
if(item.DefaultType === 1){
return item?.OptionID
}
}).filter(Boolean);
break;
}
})
console.log(ruleForm.cloneCustomList,'cloneCustomList')
}
},{
deep:true
})
defineExpose({
formEl,
isvalid,
cloneCustomList
})
</script>