pref:修改皮肤设置时的产品选择

base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue

@@ -24,6 +24,7 @@
 
 <script>
 import { getProductList } from "@/services/surface";
+import { mapMutations } from "vuex";
 export default {
   data() {
     return {
@@ -35,6 +36,7 @@ export default {
     this.getProductList();
   },
   methods: {
+    ...mapMutations("site", ["SET_curProduct"]),
     // 获取产品列表
     async getProductList(search = {}) {
       let res = await getProductList({ page: 1, size: -1, ...search });
@@ -54,9 +56,12 @@ export default {
         productId: row.id,
         productName: row.productName,
       };
-      this.$emit("clickFacility", obj);
+      this.SET_curProduct(obj);
     },
   },
+  beforeDestroy() {
+    this.SET_curProduct({});
+  },
 };
 </script>
 

base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue

@@ -53,12 +53,18 @@ export default {
     return {
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       categoryId: "", // 分类ID
-      facilityInfo: {}, // 设备信息
       previewList: [], // 皮肤列表
     };
   },
   computed: {
-    ...mapState("site", ["curSkinIndex"]),
+    ...mapState("site", ["curSkinIndex", "curProduct"]),
+  },
+  watch: {
+    curProduct(newVal) {
+      if (Object.keys(newVal).length) {
+        this.getSkinList({ productId: newVal.productId });
+      }
+    },
   },
   created() {
     // this.getSkinList();
@@ -80,8 +86,8 @@ export default {
       "SET_curSkinIndex",
     ]),
     // 获取设备信息
-    getFacilityInfo(info) {
-      this.facilityInfo = info;
+    getcurProduct(info) {
+      this.curProduct = info;
       this.getSkinList({ productId: info.id });
     },
     //   获取皮肤列表
@@ -90,7 +96,7 @@ export default {
       let res = await getSkinList({
         page: 1,
         size: -1,
-        productName: this.facilityInfo.productName,
+        productName: this.curProduct.productName,
         categoryId: this.categoryId,
         ...search,
       });
@@ -114,7 +120,7 @@ export default {
     },
     // 新增
     AddSurface() {
-      if (this.facilityInfo.productId) {
+      if (this.curProduct.productId) {
         this.$emit("addSkin");
       } else {
         this.$message.warning("请先选择设备");

base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue

 <template>
   <div class="add-surface" v-if="show">
     <a-card :bordered="false">
-      <span slot="title">{{ facilityInfo.productName + "皮肤" }}</span>
+      <span slot="title">{{ curProduct.productName + "皮肤" }}</span>
       <a-button slot="extra" @click="backOne">返回上一级</a-button>
       <div class="add-surface-preview">
         <div ref="content" class="add-surface-preview-content">
@@ -227,7 +227,6 @@ export default {
       formLoading: false,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       accept: "image/jpeg,image/png,image/gif", // 上传类型
-      facilityInfo: {}, // 设备信息
       skinTemplate: [], // 皮肤模板列表
       curSkinTemplate: undefined, //当前选择皮肤模板
       isEdit: false, // 是否编辑状态
@@ -267,7 +266,7 @@ export default {
     },
     component() {
       let str = "";
-      switch (this.facilityInfo.productName) {
+      switch (this.curProduct.productName) {
         case "排号机":
           str = "LandscapeMode";
           break;
@@ -304,7 +303,7 @@ export default {
       }
       return str;
     },
-    ...mapState("site", ["imageResolution"]),
+    ...mapState("site", ["imageResolution", "curProduct"]),
   },
   created() {},
   watch: {
@@ -325,11 +324,6 @@ export default {
       this.loading = false;
       this.skinTemplate = [];
       this.curSkinTemplate = undefined;
-      this.facilityInfo = {};
-    },
-    // 获取设备信息
-    getFacilityInfo(info) {
-      this.facilityInfo = info;
     },
     // 获取皮肤模板
     async getTemplateList(search = {}) {
@@ -337,7 +331,7 @@ export default {
       let res = await getTemplateList({
         page: 1,
         size: -1,
-        productId: this.facilityInfo.productId,
+        productId: this.curProduct.productId,
         ...search,
       });
       let { data } = res.data.data;
@@ -407,7 +401,6 @@ export default {
           html2canvas(conponentsId, {
             backgroundColor: null,
             useCORS: true,
-            dpi: window.devicePixelRatio * 4, //设备像素比
             width: width,
             height: height,
             scale: 0.9,
@@ -429,7 +422,7 @@ export default {
               if (code === 1) {
                 this.formData.previewImagePath = res.data.url;
                 let result = await skinSave({
-                  ...this.facilityInfo,
+                  ...this.curProduct,
                   ...this.formData,
                 });
                 let { code, msg } = result.data;

base-manager-ui/admin/src/store/modules/site.js

@@ -11,6 +11,7 @@ export default {
     appDict: {}, // 应用字典
     curSkin: {}, // 当前选中预览皮肤
     curSkinIndex: 0, // 当前选中皮肤索引
+    curProduct: {}, // 皮肤设置当前选中产品
   },
   getters: {
     SiteTree(state) {
@@ -33,6 +34,9 @@ export default {
     },
   },
   mutations: {
+    SET_curProduct(state, curProduct) {
+      state.curProduct = curProduct;
+    },
     SET_curSkinIndex(state, curSkinIndex) {
       state.curSkinIndex = curSkinIndex;
     },