mirror of https://gitee.com/lmlz_0/dc-ui.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.9 KiB
101 lines
2.9 KiB
1 year ago
|
<template>
|
||
|
|
<MyComponent :data = "config.data" :mesh = "config.mesh" @callfun = "callfun" ></MyComponent>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref,defineComponent,defineProps} from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
meshObj: {
|
||
|
|
type: Object,
|
||
|
|
required: {}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const { config } = props;
|
||
|
|
|
||
|
|
const callfun = (obj) =>{
|
||
|
|
showMsg.value = '参数编码:'+ obj.code +'参数值:' + obj.value;
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// setTimeout(() => {
|
||
|
|
// let meshObj = getMesh()
|
||
|
|
// mesh.value = meshObj.struct
|
||
|
|
// data.value = meshObj.params
|
||
|
|
// }, 3000);
|
||
|
|
})
|
||
|
|
|
||
|
|
const MyComponent = defineComponent({
|
||
|
|
|
||
|
|
props: {
|
||
|
|
data:{
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
mesh:{
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
emits: ['callfun'], // 子组件发送自定义事件
|
||
|
|
|
||
|
|
setup(props,{ emit }) {
|
||
|
|
return () => {
|
||
|
|
return props.mesh != false ? h(props.mesh.type, { id: props.mesh.key, style: props.mesh.type, class: props.mesh.class }, [
|
||
|
|
// 第二层 tr
|
||
|
|
props.mesh.items.map(tr => {
|
||
|
|
return h(tr.type, { style: tr.style, key: tr.rowIndex }, [
|
||
|
|
// 第三层 td
|
||
|
|
tr.items.map(td => {
|
||
|
|
return td.valueType == 0 ? h(td.type, { key: td.key, style:td.style }, [ td.value ]) :
|
||
|
|
td.valueType == 1 ? h(td.type, { key: td.key, style:td.style }, [ props.data[td.code] ]) :
|
||
|
|
td.valueType == 2 ? h(td.type, { key: td.key, style:td.style }, [
|
||
|
|
// 第四层
|
||
|
|
td.items.map(content => {
|
||
|
|
return content.valueType == 1 ? h(content.type, { style:content.style } ,props.data[content.code]) :
|
||
|
|
content.valueType == 3 ? h(content.type, { style:content.style, class:content.class ,onClick: () => emit(content.fun, {code:content.param.value,value:props.data[content.param.value]} ) },content.value) : null
|
||
|
|
})
|
||
|
|
]) : h(td.type, { key: td.key, style:td.style }, ["???"])
|
||
|
|
})
|
||
|
|
])
|
||
|
|
})
|
||
|
|
]) : h('span', '正在加载！')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.bg{
|
||
|
|
margin: 1rem;
|
||
|
|
}
|
||
|
|
.tw {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border: 2px solid rgb(49, 47, 47) ;
|
||
|
|
:deep(td) {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border: 1px solid rgb(29, 28, 28);
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
:deep(th) {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border: 1px solid rgb(29, 28, 28);
|
||
|
|
background-color: cornflowerblue;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
:deep(.btn) {
|
||
|
|
float: left;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
margin-left: 5px;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
background-image: url("../../../assets/icons/png/edit.png");
|
||
|
|
background-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|