appFormLowcode/src/components/formTable/formItemGroup - 副本.vue

<!--
@ 作者: 秦东
@ 时间: 2024-11-14 10:00:42
@ 备注: 组件集合
-->
<script lang='ts' setup>
import { onBeforeRouteLeave } from 'vue-router'
import { FormList } from "@/api/lowCode/form/type"
import { jsonParseStringify,getGroupName } from '@/utils/lowCode/item/index'
import { constFormBtnEvent,constFormProps } from '@/api/lowCode/utils';
import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm'
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'

const props = withDefaults(
    defineProps<{
        data: FormList[]
        dataType?: String
        tableinfo?:formTableInfo
		alldata?:any
    }>(),
    {
        data: () => {
            return []
        }
    }
)
const store = useDesignFormStore() as any //自定义表单存储器
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
    return formProps.value.type
})
const state = reactive({
    clone: true, // 允许clone
    gridAdd: false
})
const dataList = ref(props.data)
const unWatch = watch(
    () => props.data,
    (v: FormList[]) => {
        dataList.value = v
    }
)
const activeKey = computed(() => {
    return store.activeKey
})
onMounted(() => {
    // console.log("初始", state)
    // console.log("初始1", dataList.value)
})
watch(()=>dataList.value,(val:any) => {
    // console.log("监听组件列表变化", val)
},{
    deep: true,
})
onBeforeRouteLeave(() => {
    unWatch() //销毁监听器
})
onUnmounted(() => {
    // console.log('onUnmounted')
    dataList.value = {}
    store.setActiveKey('')
    store.setControlAttr({})
})
const getFormItemLableStyle = (ele: any) => {
    if(ele?.labelStyle){ 
    //   console.log("返回栅格宽度3",AnalysisCss(ele))
    	return AnalysisCss(ele?.labelStyle)
    }
}
const injectBtnEvent:any = inject(constFormBtnEvent)
const clickBtn = (control: any) => {
	console.log(control)
    // 0: '提交表单',
    // 1: '重置表单',
    // 2: '取消返回',
    // 3: '无动作(自定义)'
    if (type.value !== 15) {
		// 非设计模式才触发事件
		injectBtnEvent && injectBtnEvent(control)
    }
}
</script>
<template>
    <div>
        <div v-for="(element,index) in dataList" :key="index">
		
            <template v-if="element.type === 'tabs'">
                <!--选项卡-->
                <el-tabs
					v-bind="element.control"
					:class="[element.config?.className]"
				>
					<el-tab-pane
						v-for="(item, tIndex) in element.columns"
						:label="item.label"
						:key="tIndex"
					>
                        <FormItemGroup :data="item.list" data-type="not-nested" />
						
					</el-tab-pane>
				</el-tabs>
            </template>          
            <template v-if="element.type === 'title'">
                <!--标题-->
                <div
					class="title"
					:class="[element.config.className]"
					v-bind="element.control"
					:style="getFormItemLableStyle(element.styles)"
				>
					<span  v-html="element.control.modelValue"></span>
					<Tooltips
						:content="element.config.help"
						v-if="element.config.help"
					/>
				</div>
            </template>
            <template v-if="element.type === 'txt'">
                <!--文字-->
                <div
				    v-bind="element.control"
				    :class="[element.config.className]"
				    v-html="element.control.modelValue"
				>
				</div>
            </template>
            <template v-if="element.type === 'table'">
				<el-text v-if="element.item&&element.item.name">{{element.item.name}}}</el-text>
                <TablePage  :data="element" :type="type"  />
            </template>
            <template v-if="element.type === 'grid'">
                <el-row class="form-row" :style="type === 15?'padding: 0 0 20px 0;':''" :class="[element.className]">
					<el-col
							class="form-col"
							:class="{
								'active-col': activeKey === getGroupName(col),
								[col.className]: col.className
							}"
							v-bind="col.attr"
							v-for="(col, i) in element.columns"
							:key="i"
							
					>
                            <FormItemGroup :data="col.list" data-type="not-nested" />
					    <div class="drag-control" v-if="type === 15">
							<div class="item-control">
								<i
									class="icon-del"
									@click.stop="click('delGridChild', i as number, element.columns)"
								>
								</i>
							</div>
						</div>
					</el-col>
				</el-row>
            </template>
            <template v-if="element.type === 'card'">
                <el-collapse model-value="1">
					<el-collapse-item :title="element.item.label" name="1">
							<template #title v-if="element.help">
								{{ element.item.label }}
								<Tooltips :content="element.help" />
							</template>
							<FormItemGroup :data="element.list" data-type="not-nested" />
					</el-collapse-item>
				</el-collapse>
            </template>
            <template v-if="element.type === 'divider'">
                <!--分割线-->
                <el-divider v-bind="element.control">{{ element.item && element.item.label }}</el-divider>
            </template>
            <template v-if="element.type === 'div'">
                <!--div容器-->
                <div
					class="div-layout"
					v-bind="element.control"
					:class="{
						[element.className]: element.className,
						inline: element.config?.inline,
						[element.config?.textAlign]: element.config?.textAlign
					}"
				>
					<FormItemGroup :data="element.list" data-type="not-nested" />
				</div>
            </template>
            <template v-if="element.type === 'flex'">
              
                <!---->
                <FormItemGroup :tableinfo="props.tableinfo" :data="element.list" :alldata="props.alldata" data-type="not-flex" v-if="type === 15" />
                <flex-box :data="element" v-else />
                <el-button
					style="position: relative; top: 0px; left: 10px"
					v-if="element.config.addBtnText && type === 15"
					size="small"
				>
					{{ element.config.addBtnText }}
				</el-button>
               
            </template>
            <template v-if="element.type === 'button'">
          
                <div
					:class="[element.config?.className]"
					:style="{ 'text-align': element.config?.textAlign }"
				>
					<el-button
						v-bind="element.control"
						@click="clickBtn(element.control)"
						color="#626aef"
					>
						<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td>
					</el-button>
				</div>
            </template>
			<FormItem v-else :data="element" />
        </div>
    </div>
</template>
<style  lang='scss' scoped>

</style>