index.vue

<template>
  <div class="kanban">
    <div v-for="(item, i) in muuriSwap" :Key="i">{{ item }}</div>
    <div v-for="(item, i) in muuriSaveData" :Key="i">{{ item }}</div>
    <el-steps :active="1" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>
    <el-row>
      <el-col :span="8">
        <div class="grid grid0" muuri-group="0">
          <div class="item" swapindex="-1">
            <div class="item-content">占位数据</div>
          </div>
          <div
            class="item"
            v-for="(item, i) in kanbanData.filter((temp) => temp.type === '0')"
            :swapindex="item.index"
            :swapsort="item.sort"
            :swapuid="item.uid"
            :swaptype="item.type"
            :key="i"
          >
            <div class="item-content">grid0--{{ item.name }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid grid1" muuri-group="1">
          <div class="item" swapindex="-1">
            <div class="item-content">占位数据</div>
          </div>
          <div
            class="item"
            v-for="(item, i) in kanbanData.filter((temp) => temp.type === '1')"
            :swapindex="item.index"
            :swapsort="item.sort"
            :swapuid="item.uid"
            :swaptype="item.type"
            :key="i"
          >
            <div class="item-content">grid1--{{ item.name }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid grid2" muuri-group="2">
          <div class="item" swapindex="-1">
            <div class="item-content">占位数据</div>
          </div>
          <div
            class="item"
            v-for="(item, i) in kanbanData.filter((temp) => temp.type === '2')"
            :swapindex="item.index"
            :swapsort="item.sort"
            :swapuid="item.uid"
            :swaptype="item.type"
            :key="i"
          >
            <div class="item-content">grid2--{{ item.name }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style></style>

<script>
/* eslint-disable no-unused-vars */
require(`./style.scss`);
import muuriMethod from "@/utils/muuri-util";
export default {
  //商城主页面
  name: "kanban-demo",
  componentsUsed: {
    name: "kanban-demo",
  },
  routerUsed: {
    path: "/kanban/demo",
    name: "kanban-demo",
    meta: {
      keepAlive: true,
      name: "kanban-demo",
    },
    component: (r) =>
      require.ensure([], () => r(require("./index")), "kanban-bs"),
  },
  data() {
    return {
      //#region ===========网格变量 start
      kanbanData: [], // 从数据库获取
      muuriGrid: [], // muuri html 对象
      muuriSwap: [], // muuri html 和 vue 数据过度对象
      muuriSaveData: [], // 入库的数据
      //#endregion ===========网格变量 end
    };
  },
  props: {},
  created() {},
  mounted() {
    let that = this;
    that.handleGetGrid();
  },
  computed: {},
  methods: {
    handleReloadGrid() {
      let that = this;
      that.kanbanData = JSON.parse(that.kanbanDataStr);
      that.$nextTick(() => {
        that.handleLoadData();
      });
    },
    handleConvertGrid() {
      //
    },
    handleGetSwaps() {
      muuriMethod.swaps(this);
    },
    handleLoadData() {
      let that = this;
      if (that.muuriGrid) {
        that.muuriGrid.forEach((temp) => {
          temp.destroy(); //true
        });
        that.muuriGrid = [];
      }
      // eslint-disable-next-line no-undef
      loadjs.ready("muuri", () => {
        let options = muuriMethod.options(that);
        // eslint-disable-next-line no-undef
        options.dragSort = getAllGrids;
        // // eslint-disable-next-line no-undef
        // Muuri.defaultOptions.showDuration = 400;
        // // eslint-disable-next-line no-undef
        // Muuri.defaultOptions.dragSortPredicate.action = "swap";
        // eslint-disable-next-line no-undef
        that.muuriGrid.push(new Muuri(".kanban .grid0", options));
        // eslint-disable-next-line no-undef
        that.muuriGrid.push(new Muuri(".kanban .grid1", options));
        // eslint-disable-next-line no-undef
        that.muuriGrid.push(new Muuri(".kanban .grid2", options));

        muuriMethod.data = that.kanbanData;
        muuriMethod.events(that);

        function getAllGrids(item) {
          return that.muuriGrid;
        }
        that.muuriGrid.forEach((grid) => {
          grid.refreshItems();
        });
      });
    },
    handleGetGrid() {
      let that = this;
      let dataT = [];
      let indexT = 0;
      [1, 2, 3, 4, 5, 6].forEach((temp, i) => {
        dataT.push({
          name: temp,
          sort: temp,
          type: "0",
          index: indexT,
          uid: `guid-0-uid-${temp}`,
        });
        indexT = indexT + 1;
      });
      [7, 8, 9].forEach((temp, i) => {
        dataT.push({
          name: temp,
          sort: temp,
          type: "1",
          index: indexT,
          uid: `guid-1-uid-${temp}`,
        });
        indexT = indexT + 1;
      });
      //10, 11, 12, 13
      [].forEach((temp, i) => {
        dataT.push({
          name: temp,
          sort: temp,
          type: "2",
          index: indexT,
          uid: `guid-2-uid-${temp}`,
        });
        indexT = indexT + 1;
      });
      that.kanbanData = dataT;
      // this.muuriGrid.refreshItems();
      // this.muuriGrid.refreshSortData();

      that.$nextTick(() => {
        that.handleLoadData();
      });
    },
  },
  watch: {},
  components: {},
};
</script>