Merge remote-tracking branch 'origin/master'

base-manager-ui/admin/src/pages/basicset/surface/appraiseskin/AppraiseSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="call-out-skin-across"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -60,41 +60,6 @@
             background: filterItem('4', i),
           }"
         ></div>
-        <!-- <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 1) }"
-          :style="{
-            background: filterItem('4', 1),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 2) }"
-          :style="{
-            background: filterItem('4', 2),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 3) }"
-          :style="{
-            background: filterItem('4', 3),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 4) }"
-          :style="{
-            background: filterItem('4', 4),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 5) }"
-          :style="{
-            background: filterItem('4', 5),
-          }"
-        ></div> -->
       </div>
     </div>
     <!-- 空数据显示 -->
@@ -112,6 +77,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -123,48 +91,26 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
   methods: {
-    // 过滤图片
-    // filterImg(val) {
-    //   let url = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "2";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         url = v.fieldValue;
-    //       }
-    //     });
-    //   return url;
-    // },
-    // // 过滤颜色
-    // filterColor(val) {
-    //   let str = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "1";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         str = v.fieldValue;
-    //       }
-    //     });
-    //   return str;
-    // },
-
     // 过滤属性类型
     filterItem(type, index) {
       let arr = this.skinFieldList.filter((v) => {

base-manager-ui/admin/src/pages/basicset/surface/calloutskin/CallOutSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="call-out-skin-across"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -138,6 +138,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -149,48 +152,26 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
   methods: {
-    // 过滤图片
-    // filterImg(val) {
-    //   let url = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "2";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         url = v.fieldValue;
-    //       }
-    //     });
-    //   return url;
-    // },
-    // // 过滤颜色
-    // filterColor(val) {
-    //   let str = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "1";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         str = v.fieldValue;
-    //       }
-    //     });
-    //   return str;
-    // },
-
     // 过滤属性类型
     filterItem(type, index) {
       let arr = this.skinFieldList.filter((v) => {

base-manager-ui/admin/src/pages/basicset/surface/centralizeskin/CentralizeSkin.vue

@@ -4,7 +4,7 @@
     <div
       class="centralize-across"
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -161,7 +161,7 @@
     <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -288,6 +288,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -299,48 +302,26 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
   methods: {
-    // 过滤图片
-    // filterImg(val) {
-    //   let url = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "2";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         url = v.fieldValue;
-    //       }
-    //     });
-    //   return url;
-    // },
-    // // 过滤颜色
-    // filterColor(val) {
-    //   let str = "";
-    //   this.skinFieldList
-    //     .filter((v) => {
-    //       return v.fieldType === "1";
-    //     })
-    //     .forEach((v) => {
-    //       if (v.fieldName !== "" && v.fieldName === val) {
-    //         str = v.fieldValue;
-    //       }
-    //     });
-    //   return str;
-    // },
-
     // 过滤属性类型
     filterItem(type, index) {
       let arr = this.skinFieldList.filter((v) => {

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

@@ -24,7 +24,7 @@
           >
             <img :src="v.previewImagePath" />
             <div class="name">
-              {{ v.name }}
+              {{ v.name }}-{{ filterItems(v.imageResolution, imageResolution) }}
             </div>
           </div>
         </div>
@@ -44,6 +44,7 @@
 import { getSkinList } from "@/services/surface";
 import { Empty } from "ant-design-vue";
 import { mapMutations, mapState } from "vuex";
+import { filterItems } from "@/utils";
 export default {
   props: {
     classifyList: {
@@ -56,6 +57,7 @@ export default {
   },
   data() {
     return {
+      filterItems,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       categoryId: "", // 分类ID
       previewList: [], // 皮肤列表
@@ -63,7 +65,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("site", ["curSkinIndex", "curProduct"]),
+    ...mapState("site", ["curSkinIndex", "curProduct", "imageResolution"]),
   },
   watch: {
     curProduct(newVal) {
@@ -198,9 +200,10 @@ export default {
         left: 0px;
         bottom: 0px;
         text-align: center;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
     }
     .active {

base-manager-ui/admin/src/pages/basicset/surface/defaultshow/DefaultShow.vue

@@ -4,22 +4,21 @@
     <div
       :id="componentsId"
       class="across-skin"
-      v-if="imageResolution === '1'"
       :style="{
         background: filterItem('1', 0),
       }"
     ></div>
     <!-- 竖版 1080*1920 -->
-    <div
+    <!-- <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
-    ></div>
+    ></div> -->
     <!-- 空数据显示 -->
-    <div class="empty flex aic jcc" v-else>
+    <!-- <div class="empty flex aic jcc" v-else>
       <a-empty
         :image="require('../../../../assets/img/original.png')"
         :image-style="{
@@ -28,11 +27,14 @@
       >
         <span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
       </a-empty>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     // imgItem: {
@@ -51,13 +53,20 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,

base-manager-ui/admin/src/pages/basicset/surface/desSelfservice/DesSelfService.vue

@@ -3,7 +3,7 @@
     <!-- 桌面自助服务终端 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -95,6 +95,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -106,13 +109,20 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,

base-manager-ui/admin/src/pages/basicset/surface/infoDisSkin/InfoDisSkin.vue

@@ -4,7 +4,7 @@
     <div
       class="vertical-skin flex flexc aic"
       :id="componentsId"
-      v-if="imageResolution === '2'"
+      v-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -51,15 +51,11 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
-    // imgItem: {
-    //   type: Array,
-    //   required: true,
-    //   default: () => {
-    //     return [];
-    //   },
-    // },
     skinFieldList: {
       type: Array,
       required: true,
@@ -69,18 +65,26 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
       type: String,
     },
   },
+
   data() {
     return {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/informationskin/InformationSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="across-skin flex flexc"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
     >
       <div
         class="header"
@@ -47,7 +47,7 @@
     <div
       :id="componentsId"
       class="vertical-skin flex flexc"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
     >
       <div
         class="header"
@@ -101,6 +101,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -112,7 +115,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -124,6 +127,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

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

@@ -244,7 +244,7 @@ export default {
       formData: {
         categoryId: undefined, // 所属种类
         name: "", // 皮肤名称
-        imageResolution: "1", // 分辨率
+        imageResolution: undefined, // 分辨率
         skinFieldList: [], // 字段属性列表
         previewImagePath: "", // 预览图地址
       },
@@ -469,6 +469,7 @@ export default {
     onAdd() {
       Object.assign(this.formData, this.$options.data().formData);
       this.formData.id && this.$delete(this.formData, "id");
+      this.formData.imageResolution = Object.keys(this.imageResolution)[0];
     },
     // 编辑
     onEdit(row) {

base-manager-ui/admin/src/pages/basicset/surface/queuingSkin/LandscapeMode.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="across-skin"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -76,7 +76,7 @@
     <div
       class="vertical-skin"
       :id="componentsId"
-      v-else-if="imageResolution === '2'"
+      v-else-if="resolution === '1080x1920'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -153,15 +153,11 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
-    // imgItem: {
-    //   type: Array,
-    //   required: true,
-    //   default: () => {
-    //     return [];
-    //   },
-    // },
     skinFieldList: {
       type: Array,
       required: true,
@@ -171,7 +167,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -183,6 +179,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/sampleFormSkin/SampleFormSkin.vue

@@ -3,7 +3,7 @@
     <!-- 样表机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="sample_form_skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -127,6 +127,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -138,7 +141,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -150,6 +153,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/selfservice/SelfService.vue

@@ -3,7 +3,7 @@
     <!-- 自助服务终端 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -95,6 +95,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -106,7 +109,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -118,6 +121,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/signdeviceskin/SignDeviceSkin.vue

@@ -3,7 +3,7 @@
     <!-- 导视机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="across-skin flex flexc aic"
     >
       <!-- 头部 -->
@@ -74,6 +74,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -85,7 +88,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -97,6 +100,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/windowskin/WindowSkin.vue

@@ -4,7 +4,7 @@
     <div
       :id="componentsId"
       class="window-skin-across flex jcb aic"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -71,6 +71,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -82,7 +85,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -94,6 +97,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

base-manager-ui/admin/src/pages/basicset/surface/writeFormSkin/WriteFormSkin.vue

 <template>
   <div class="skin-box">
-    <!-- 样表机 横板 -->
+    <!-- 填单机 横板 -->
     <div
       :id="componentsId"
-      v-if="imageResolution === '1'"
+      v-if="resolution === '1920x1080'"
       class="sample_form_skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
@@ -166,6 +166,9 @@
 </template>
 
 <script>
+import { unifyResolution } from "@/utils";
+import { filterItems } from "@/utils";
+import { mapGetters } from "vuex";
 export default {
   props: {
     skinFieldList: {
@@ -177,7 +180,7 @@ export default {
     },
     imageResolution: {
       required: true,
-      default: "1",
+      default: "",
     },
     componentsId: {
       required: true,
@@ -189,6 +192,13 @@ export default {
       api: process.env.VUE_APP_API_IMG_URL,
     };
   },
+  computed: {
+    ...mapGetters("site", ["imageResolutions"]),
+    resolution() {
+      let data = filterItems(this.imageResolution, this.imageResolutions);
+      return unifyResolution(data);
+    },
+  },
   methods: {
     // 过滤属性类型
     filterItem(type, index) {

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

@@ -39,6 +39,9 @@ export default {
     siteId(state) {
       return state.siteId;
     },
+    imageResolutions(state) {
+      return state.imageResolution;
+    },
   },
   mutations: {
     SET_path(state, path) {

base-manager-ui/admin/src/utils/index.js

@@ -17,3 +17,7 @@ export const transverter = (obj) => {
     };
   });
 };
+// 统一分辨率格式
+export const unifyResolution = (resolution) => {
+  return resolution.replace(/[xX*]/, "x");
+};