feat:新增皮肤选择页面、页面优化

sample-form-manager-ui/admin/src/App.vue

@@ -10,7 +10,7 @@ export default {
     return {};
   },
   created() {
-    this.readVueXData();
+    // this.readVueXData();
   },
   methods: {
     // 解决刷新store初始化问题
@@ -36,9 +36,8 @@ export default {
 <style lang="less" scoped>
 .app {
   width: 100%;
-  min-width: 1400px;
-  min-height: 100%;
+  height: 100%;
   background-color: #f0f2f5;
-  display: flex;
+  // display: flex;
 }
 </style>

sample-form-manager-ui/admin/src/assets/css/common.css

 /* 颜色 */
 .primary {
-    color: #1890FF;
+  color: #1890ff;
 }
 
 .delete {
-    color: #FF4D4F;
+  color: #ff4d4f;
 }
 
 .green {
-    color: #1BBC9B;
+  color: #1bbc9b;
 }
 
 .clofff {
@@ -20,15 +20,15 @@
 }
 
 .bgdel {
-    background-color: #FF4D4F;
+  background-color: #ff4d4f;
 }
 
 .bgpr {
-    background-color: #1890FF;
+  background-color: #1890ff;
 }
 
 .bgg {
-    background-color: #1BBC9B;
+  background-color: #1bbc9b;
 }
 
 /* 版心 */
@@ -42,7 +42,7 @@
 }
 
 .flex1 {
-    flex: 1
+  flex: 1;
 }
 
 .flexc {
@@ -87,7 +87,7 @@
 
 /* margin */
 .m10 {
-    margin: 10px
+  margin: 10px;
 }
 
 .m15 {
@@ -304,12 +304,28 @@
   text-align: right;
 }
 
+/* title */
+.color_title {
+  margin-left: 15px;
+  position: relative;
+  margin-bottom: 15px;
+}
+.color_title::before {
+  content: "";
+  width: 4px;
+  height: 20px;
+  position: absolute;
+  top: 0px;
+  left: -16px;
+  background-color: #1890ff;
+}
+
 /**
     element-ui
 */
 /* el-table列数据为空自动显示-- */
 .cell:empty::before {
-    content: '--';
+  content: "--";
   color: gray;
 }
 
@@ -328,27 +344,27 @@
 
 .el-card__body {
   width: 100%;
-    flex:1;
-    padding-bottom:10px !important;
+  flex: 1;
+  padding-bottom: 10px !important;
 }
 
 .gutter {
   width: 6px !important;
 }
 
-.el-table__body-wrapper::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 6px;
   overflow-y: auto;
 }
 
-.el-table__body-wrapper::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   border-radius: 6px;
-    background-color: rgba(144, 147, 153, .5);
+  background-color: rgba(144, 147, 153, 0.5);
 }
 
-.el-table__body-wrapper::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   border-radius: 6px;
-    background: #fff;
+  background: rgba(0, 0, 0, 0);
 }
 
 .autoWidth {
@@ -370,4 +386,4 @@
 }
 .el-tooltip__popper {
   max-width: 20%;
-  }
\ No newline at end of file
+}

sample-form-manager-ui/admin/src/pages/hardware/NumberWriteDevice.vue

@@ -297,7 +297,11 @@ export default {
 <style lang="less" scoped>
 .device {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
+  display: flex;
+  :deep(.el-card) {
+    height: auto;
+  }
 }
 // .table-content {
 //   height: 550px;

sample-form-manager-ui/admin/src/pages/layouts/Layouts.vue

@@ -88,12 +88,13 @@ export default {
 <style lang="less" scoped>
 .layouts {
   width: 100%;
-  height: auto;
+  min-width: 1500px;
+  height: 100%;
   padding-bottom: 10px;
-  .crumbs {
-    margin: 10px 0px;
-    width: 98%;
-  }
+  // .crumbs {
+  //   margin: 10px 0px;
+  //   width: 98%;
+  // }
   .out-box {
     width: 98%;
     margin-top: 10px;

sample-form-manager-ui/admin/src/pages/software/basics/BasicsSet.vue

@@ -171,8 +171,8 @@ export default {
 <style lang="less" scoped>
 .basics-set {
   width: 100%;
-  height: 100%;
-
+  min-height: 100%;
+  display: flex;
   .title {
     font-size: 15px;
     color: #000;
@@ -180,7 +180,7 @@ export default {
 }
 
 :deep(.el-card) {
-  height: 100%;
+  height: auto;
 }
 
 .header {

sample-form-manager-ui/admin/src/pages/software/librarymanage/LibraryManage.vue

@@ -264,8 +264,12 @@ export default {
 
 <style lang="less" scoped>
 .library-manage {
+  display: flex;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
+  :deep(.el-card) {
+    height: auto;
+  }
   .short {
     overflow: hidden;
     text-overflow: ellipsis;

sample-form-manager-ui/admin/src/pages/software/materials/MaterialsManage.vue

@@ -533,7 +533,7 @@ export default {
 <style lang="less" scoped>
 .materias-manage {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   .short {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -555,10 +555,10 @@ export default {
 
 .left {
   width: 40%;
-  height: 100%;
+  height: auto;
 }
 .right {
   width: 60%;
-  height: 100%;
+  height: auto;
 }
 </style>
\ No newline at end of file

sample-form-manager-ui/admin/src/pages/software/matter/MatterManage.vue

@@ -533,7 +533,8 @@ export default {
 <style lang="less" scoped>
 .matter-manage {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
+  display: flex;
   .short {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -546,18 +547,15 @@ export default {
     white-space: nowrap;
   }
 }
-/deep/.el-card {
-  height: 100%;
-}
 // .table-content {
 //   height: 550px;
 // }
 .left {
   width: 50%;
-  height: 100%;
+  height: auto;
 }
 .right {
   width: 50%;
-  height: 100%;
+  height: auto;
 }
 </style>

sample-form-manager-ui/admin/src/pages/software/skinManage/SkinManage.vue

+<template>
+  <div class="skin-set">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>皮肤管理</span>
+      </div>
+      <!-- 皮肤列表 -->
+      <div class="skin-box">
+        <div class="skin-category">
+          <div class="color_title">分类一</div>
+          <div class="skin-list">
+            <div
+              class="skin-item flex flexc aic"
+              v-for="v in skinList"
+              :key="v.skin_id"
+            >
+              <span>{{ v.skin_name }}</span>
+              <div class="skin-img-box">
+                <img
+                  class="skin-img"
+                  :src="v.previewImagePath"
+                  @click="handlePreview(v.previewImagePath)"
+                />
+              </div>
+              <el-button
+                size="small"
+                :class="{ active: v.check === '1' }"
+                @click="changeSkin('pdj', v)"
+                >{{
+                  v.check === "1" ? "使用中(点击取消)" : "点击使用"
+                }}</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 图片预览 -->
+      <el-image-viewer
+        v-if="previewImg"
+        :on-close="
+          () => {
+            (previewImg = false), (previewUrl = '');
+          }
+        "
+        :url-list="previewUrl"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import local from "@/utils/local";
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+export default {
+  components: {
+    ElImageViewer,
+  },
+  data() {
+    return {
+      siteId: local.getLocal("sampleSiteId")
+        ? local.getLocal("sampleSiteId")
+        : "",
+      skinList: [
+        {
+          id: 1,
+          skin_name: "样表普通皮肤",
+          previewImagePath: require("../../../assets/img/tiandan.png"),
+          check: "1",
+        },
+      ],
+      previewImg: false,
+      previewUrl: "",
+    };
+  },
+  created() {},
+  methods: {
+    // 选择使用皮肤
+    async changeSkin(device, row) {
+      if (row.check === "1") {
+        // let obj = {
+        //   skin_id: "",
+        //   css_path: "",
+        //   skin_name: "",
+        //   previewImagePath: "",
+        //   skinFieldList: "",
+        //   device,
+        // };
+        row.check = "0";
+        console.log(check, device);
+        // if (code === 1) {
+        //   this.$message.success("设置" + msg);
+        // }
+      } else {
+        row.check = "1";
+      }
+    },
+    // 预览皮肤
+    handlePreview(url) {
+      this.previewUrl = [url];
+      this.previewImg = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.skin-set {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+}
+:deep(.el-card) {
+  height: auto;
+}
+.skin-category {
+  margin-bottom: 30px;
+}
+.skin-list {
+  display: flex;
+  flex-wrap: wrap;
+  .skin-item {
+    text-align: center;
+    margin-top: 30px;
+    margin-right: 30px;
+    width: 200px;
+    .skin-img-box {
+      width: 100%;
+      height: 130px;
+      margin: 10px 0px;
+      background-color: #ccc;
+      .skin-img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.active {
+  border: 1px solid #1a73e8;
+  color: #1a73e8;
+}
+</style>

sample-form-manager-ui/admin/src/router/index.js

@@ -92,6 +92,20 @@ const dynamicRouter = [
       },
     ],
   },
+  {
+    path: "/skinmanage",
+    component: Layouts,
+    meta: {
+      icon: "el-icon-orange",
+      title: "皮肤管理",
+    },
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/software/skinManage/SkinManage"),
+      },
+    ],
+  },
   {
     path: "/numberwritedevice",
     component: Layouts,

sample-form-manager-ui/admin/src/utils/resetMessage.js

 //防止element点击多次弹出message弹框
 //创建一个js文件将此内容放入即可
 
-import { Message } from 'element-ui';
+import { Message } from "element-ui";
 
 let messageval = null;
 
 const Messages = (opt) => {
+  if (messageval) {
+    // 如果已经有一个message
 
-  if (messageval ) { // 如果已经有一个message
-
-    messageval.close() // 将上一个关闭
-
+    messageval.close(); // 将上一个关闭
   }
 
-  messageval = Message(opt)
-
+  messageval = Message(opt);
 };
 
-['error', 'success', 'info', 'warning'].forEach(type => { // 判断弹窗类型
-
-  Messages [type] = opt=> {
-
-    if (typeof opt === 'string') {
-
-      opt= {
-
-        message: opt
-
-      }
+["error", "success", "info", "warning"].forEach((type) => {
+  // 判断弹窗类型
 
+  Messages[type] = (opt) => {
+    if (typeof opt === "string") {
+      opt = {
+        message: opt,
+        duration: 1000,
+      };
     }
 
-    opt.type = type
-
-    return Messages (opt)
-
-  }
+    opt.type = type;
 
-})
+    return Messages(opt);
+  };
+});
 
-export const message = Messages 
\ No newline at end of file
+export const message = Messages;