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.
89 lines
1.8 KiB
89 lines
1.8 KiB
<template>
|
|
<div>
|
|
<grid-layout
|
|
id="grid-card"
|
|
class="gird-card"
|
|
:layout.sync="layoutList"
|
|
:col-num="12"
|
|
:row-height="40"
|
|
:is-draggable="false"
|
|
:is-resizable="false"
|
|
:is-mirrored="false"
|
|
:vertical-compact="true"
|
|
:margin="[10, 10]"
|
|
:autoSize="true"
|
|
:use-css-transforms="true"
|
|
>
|
|
<grid-item
|
|
v-for="item in layoutList"
|
|
:x="item.x"
|
|
:y="item.y"
|
|
:w="item.w"
|
|
:h="item.h"
|
|
:i="item.i"
|
|
:key="item.i"
|
|
style="touch-action: none"
|
|
>
|
|
<component
|
|
style="position: absolute; inset: 0 0 0 0"
|
|
:is="item.component"
|
|
></component>
|
|
</grid-item>
|
|
</grid-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueGridLayout from "vue-grid-layout";
|
|
import path from "path";
|
|
const files = require.context(
|
|
"@/views/system/workerComponents",
|
|
false,
|
|
/.vue$/
|
|
);
|
|
let cpns = files.keys().map((key) => {
|
|
return files(key).default || files(key);
|
|
});
|
|
const componentsRegister = () => {
|
|
let obj = {};
|
|
cpns.forEach((cpn) => {
|
|
Object.defineProperty(obj, cpn.name, {
|
|
value: cpn,
|
|
enumerable: true,
|
|
writable: true,
|
|
configurable: true,
|
|
});
|
|
});
|
|
obj["GridLayout"] = VueGridLayout.GridLayout;
|
|
obj["GridItem"] = VueGridLayout.GridItem;
|
|
return obj;
|
|
};
|
|
let layout = cpns.map((item) => {
|
|
return {
|
|
...item.layout,
|
|
component: item,
|
|
};
|
|
});
|
|
export default {
|
|
components: componentsRegister(),
|
|
data() {
|
|
return {
|
|
layoutList:[]
|
|
}
|
|
},
|
|
methods: {},
|
|
computed: {},
|
|
created() {
|
|
this.layoutList = this.$store.state.app.workerLayout.map(item => {
|
|
layout.forEach(lay => {
|
|
lay.i === item.i ? item.component = lay.component : ''
|
|
})
|
|
return item
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|