hjjc-workbench-web/src/layout/components/worker/index.vue

<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>