Jelajahi Sumber

参数保存到vuex

yunxing 4 tahun lalu
induk
melakukan
7c8926d72f
3 mengubah file dengan 159 tambahan dan 128 penghapusan
  1. 136 110
      src/store/index.ts
  2. 22 17
      src/views/editer.vue
  3. 1 1
      src/views/home.vue

+ 136 - 110
src/store/index.ts

@@ -1,118 +1,144 @@
-import Vue from 'vue'
-import { delete } from 'vue/types/umd';
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    editCmd: '', //编辑器编辑命令
-    legendObj: null, //获取的相关图例数据obj
-    graphId: '',    //图 id 用于读图
-    id: '',        // id  用于读图
-    isPub: 0,     // 用于读图 区分读取 已发布 or 未发布
-    projectId: 'Pj1101050029',  // projectId
-    categoryId: '',   //类型id 用于读图
-    folderId: '',// 文件夹id
-    tupoName: '',  //拓扑图名称
-    version: "", //版本号
-    equipmentItemList: [], // 图上相关的设备实例
-    equipmentItemNum: 0, // 图上相关的设备实例的数量
-    equipItemList: {},// 图上相关的设备实例
-    equipItemNum: 0,// 图上相关的设备的数量
-    zoneItemList: {},// 图上相关的空间实例
-    zoneItemNum: 0,// 图上相关的空间实例的数量
-    style: {},// 样式库信息
-    equiPos: {},// 设备位置信息
-  },
-  mutations: {
-    // 修改编辑器命令
-    SETCHOICELEHEND(state, data) {
-      state.editCmd = data;
-    },
-    // 修改编辑器图例
-    SETLEGENDOBJ(state, data) {
-      state.legendObj = data;
-    },
-    // 设置项目id
-    SETPROJECT(state, data) {
-      state.graphId = data.graphId;   //图 id 用于读图
-      state.id = data.id;       // id  用于读图
-      // projectId: ''  // projectId
-    },
-    // 设置项目id
-    SETISPUB(state, val) {
-      state.isPub = val;   // 是否发布 用于读图
-    },
-    // 设置类型id
-    SETCATEGROY(state, val) {
-      state.categoryId = val.categoryId;
-    //   state.folderId = val.folderId;
-      state.tupoName = val.name;  //拓扑图名称
-      state.version = val.version; //版本号
-    },
-    SETVERSION(state, val){
-      console.log('asdfasfas',val)
-      state.version = val; //版本号
-    },
-    // 增加设备实例 item
-    ADDEQUIPITEM(state, item): void {
-      state.equipmentItemList.push(item);
-      state.equipmentItemNum = state.equipmentItemList.length;
-    },
-    // 删除设备实例 item
-    EDITEQUIPITEM(state): void {
-      // 如果设备实例数组中parent 为null 则删除该数组
-      let arr1 = state.equipmentItemList;
-      if (!arr1.length) return;
+    state: {
+        editCmd: "", //编辑器编辑命令
+        legendObj: null, //获取的相关图例数据obj
 
-      for (var i = 0; i < arr1.length; i++) {
-        if (!arr1[i].parent) {
-          arr1.splice(i, 1);
-          i--;//i需要自减,否则每次删除都会讲原数组索引发生变化
-        }
-      };
-      state.equipmentItemList = arr1;
-      state.equipmentItemNum = state.equipmentItemList.length
-    },
-    // 初始化设备位置信息
-    INITEQUIPOS(state, data) {
-        state.equiPos = data;
-    },
-    // 初始化样式库信息
-    INITSTYLE(state, data) {
-        state.style = data;
-    },
-    // 添加样式信息
-    ADDSTYLE(state, data) {
-        // const {id, style} = {...data}
-        // state.style[data.id] = style
-    },
-    // 增加设备实例item
-    ADDEQUIP(state, item): void {
-        // @ts-ignore
-        if (!state.equipItemList[item.id]) {
-            // @ts-ignore
-            state.equipItemList[item.id] = item;
-            state.equipItemNum = Object.keys(state.equipItemList).length;
-        }
+        name: "", //图名称
+        folderId: "", //文件id
+        folderName: "", //文件夹名称
+        buildingId: "", //建筑id
+        floorId: "", //楼层id
+        floorMap: "", //floorMap
+        floorLocalName: "", //楼层本地名称
+        id: "", //图id
+        graphId: "", //图graphId
+        state: "", //图状态,  Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布
+
+        // graphId: '',    //图 id 用于读图
+        // id: '',        // id  用于读图
+        isPub: 0, // 用于读图 区分读取 已发布 or 未发布
+        projectId: "Pj1101050029", // projectId
+        categoryId: "", //类型id 用于读图
+        // folderId: '',// 文件夹id
+        tupoName: "", //拓扑图名称
+        version: "", //版本号
+        equipmentItemList: [], // 图上相关的设备实例
+        equipmentItemNum: 0, // 图上相关的设备实例的数量
+        equipItemList: {}, // 图上相关的设备实例
+        equipItemNum: 0, // 图上相关的设备的数量
+        zoneItemList: {}, // 图上相关的空间实例
+        zoneItemNum: 0, // 图上相关的空间实例的数量
+        style: {}, // 样式库信息
+        equiPos: {}, // 设备位置信息
     },
-    DELETEQUIP(state): void {
-        // 如果设备实例数组中parent 为null 则删除该数组
-        let arr1 = Object.keys(state.equipItemList);
-        if (!arr1.length) return;
-        
-        arr1.forEach(key => {
+    mutations: {
+        // 修改编辑器命令
+        SETCHOICELEHEND(state, data) {
+            state.editCmd = data;
+        },
+        // 修改编辑器图例
+        SETLEGENDOBJ(state, data) {
+            state.legendObj = data;
+        },
+        // 设置项目信息
+        SETPROJECT(state, data) {
+            // name:'',//图名称
+            // folderId: "", //文件id
+            // folderName: "", //文件夹名称
+            // buildingId: "", //建筑id
+            // floorId: "", //楼层id
+            // floorMap: "", //floorMap
+            // floorLocalName: "", //楼层本地名称
+            // id: "", //图id
+            // graphId: "", //图graphId
+            // state:'', //图状态,  Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布
+
+            // const { folderId, folderName, buildingId, floorId, floorMap, floorLocalName, id, graphId, state } = data;
+            const arr = ["name", "folderId", "folderName", "buildingId", "floorId", "floorMap", "floorLocalName", "id", "graphId", "state"];
+            arr.map((key) => {
+                // 对传入的参数进行修改
+                if (data[key] !== undefined) {
+                    // @ts-ignore
+                    state[key] = data[key];
+                }
+            });
+        },
+        // 设置项目id
+        SETISPUB(state, val) {
+            state.isPub = val; // 是否发布 用于读图
+        },
+        // 设置类型id
+        SETCATEGROY(state, val) {
+            state.categoryId = val.categoryId;
+            //   state.folderId = val.folderId;
+            state.tupoName = val.name; //拓扑图名称
+            state.version = val.version; //版本号
+        },
+        SETVERSION(state, val) {
+            console.log("asdfasfas", val);
+            state.version = val; //版本号
+        },
+        // 增加设备实例 item
+        ADDEQUIPITEM(state, item): void {
+            state.equipmentItemList.push(item);
+            state.equipmentItemNum = state.equipmentItemList.length;
+        },
+        // 删除设备实例 item
+        EDITEQUIPITEM(state): void {
+            // 如果设备实例数组中parent 为null 则删除该数组
+            let arr1 = state.equipmentItemList;
+            if (!arr1.length) return;
+
+            for (var i = 0; i < arr1.length; i++) {
+                if (!arr1[i].parent) {
+                    arr1.splice(i, 1);
+                    i--; //i需要自减,否则每次删除都会讲原数组索引发生变化
+                }
+            }
+            state.equipmentItemList = arr1;
+            state.equipmentItemNum = state.equipmentItemList.length;
+        },
+        // 初始化设备位置信息
+        INITEQUIPOS(state, data) {
+            state.equiPos = data;
+        },
+        // 初始化样式库信息
+        INITSTYLE(state, data) {
+            state.style = data;
+        },
+        // 添加样式信息
+        ADDSTYLE(state, data) {
+            // const {id, style} = {...data}
+            // state.style[data.id] = style
+        },
+        // 增加设备实例item
+        ADDEQUIP(state, item): void {
             // @ts-ignore
-            if (!state.equipItemList[key].parent) {
+            if (!state.equipItemList[item.id]) {
                 // @ts-ignore
-                delete state.equipItemList[key]
+                state.equipItemList[item.id] = item;
+                state.equipItemNum = Object.keys(state.equipItemList).length;
             }
-        })
-    }
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
+        },
+        DELETEQUIP(state): void {
+            // 如果设备实例数组中parent 为null 则删除该数组
+            let arr1 = Object.keys(state.equipItemList);
+            if (!arr1.length) return;
+
+            arr1.forEach((key) => {
+                // @ts-ignore
+                if (!state.equipItemList[key].parent) {
+                    // @ts-ignore
+                    delete state.equipItemList[key];
+                }
+            });
+        },
+    },
+    actions: {},
+    modules: {},
+});

+ 22 - 17
src/views/editer.vue

@@ -25,25 +25,16 @@
 // import topoEditer from "@/components/editview/topoEditer.vue";
 import planEditer from "@/components/editview/planEditer.vue";
 import bus from "@/bus/bus";
-import { mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
 export default {
     components: { planEditer },
     data() {
         return {
-            // categoryName: "", //项目分类
-            name: "", //图名称
-            folderId: "", //文件id
-            folderName: "", //文件夹名称
-            buildingId: "", //建筑id
-            floorId: "", //楼层id
-            floorMap: "", //floorMap
-            floorLocalName: "", //楼层本地名称
-            id: "", //图id
-            graphId: "", //图graphId
-            isPub: 0, //从用户页进入时,点击图是否是已发布的图 0: 未发布 1: 已发布
+            categoryName: "", //项目分类
         };
     },
     methods: {
+        ...mapMutations(["SETPROJECT"]),
         // 保存图片
         saveTopo() {
             bus.$emit("saveTopo");
@@ -58,10 +49,24 @@ export default {
         },
     },
     computed: {
-        ...mapState(["tupoName", "version"]),
+        ...mapState([
+            "tupoName",
+            "version",
+
+            "name",
+            "folderId",
+            "folderName",
+            "buildingId",
+            "floorId",
+            "floorMap",
+            "floorLocalName",
+            "id",
+            "graphId",
+            "state",
+        ]),
     },
     mounted() {
-        // this.categoryName = decodeURI(this.$route.query.categoryName);
+        this.categoryName = decodeURI(this.$route.query.categoryName);
         // console.log(decodeURI(decodeURI(window.location.href)));
 
         //     folderId: "", //文件id
@@ -73,9 +78,9 @@ export default {
         //     id: "", //图id
         //     graphId: "", //图graphId
         //     isPub: 0, /
-        // const { folderId, folderName, buildingId, floorId, floorMap, floorLocalName, id, graphId, isPub } = this.$route.query;
-        const arr = ["name", "folderId", "folderName", "buildingId", "floorId", "floorMap", "floorLocalName", "id", "graphId", "isPub"];
-        arr.map((key) => (this[key] = this.$route.query[key]));
+        // const { folderId, folderName, buildingId, floorId, floorMap, floorLocalName, id, graphId, state } = this.$route.query;
+        // this.SETPROJECT({ folderId, folderName, buildingId, floorId, floorMap, floorLocalName, id, graphId, state });
+        this.SETPROJECT(this.$route.query);
     },
 };
 </script>

+ 1 - 1
src/views/home.vue

@@ -397,7 +397,7 @@ export default {
                     graphId,
                     floorMap: floorMap || "",
                     // categoryName: encodeURI(this.categoryName),
-                    isPub: this.isPub,
+                    isPub: this.isPub === 1 ? "Publish" : "Draft", // 1: 已发布 0: 未发布
                 },
             });
         },