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 {
-    color: #fff;
+  color: #fff;
 }
 
 .orange {
-    color: orange;
+  color: orange;
 }
 
 .bgdel {
-    background-color: #FF4D4F;
+  background-color: #ff4d4f;
 }
 
 .bgpr {
-    background-color: #1890FF;
+  background-color: #1890ff;
 }
 
 .bgg {
-    background-color: #1BBC9B;
+  background-color: #1bbc9b;
 }
 
 /* 版心 */
 .container {
-    width: 1200px;
+  width: 1200px;
 }
 
 /* 弹性布局 */
 .flex {
-    display: flex;
+  display: flex;
 }
 
 .flex1 {
-    flex: 1
+  flex: 1;
 }
 
 .flexc {
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .flexwrap {
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .jcc {
-    justify-content: center;
+  justify-content: center;
 }
 
 .jca {
-    justify-content: space-around;
+  justify-content: space-around;
 }
 
 .jcb {
-    justify-content: space-between;
+  justify-content: space-between;
 }
 
 .jce {
-    justify-content: space-evenly;
+  justify-content: space-evenly;
 }
 
 .aic {
-    align-items: center;
+  align-items: center;
 }
 
 .aca {
-    align-content: space-around;
+  align-content: space-around;
 }
 
 .acb {
-    align-content: space-between;
+  align-content: space-between;
 }
 
 .ace {
-    align-content: space-evenly;
+  align-content: space-evenly;
 }
 
 /* margin */
 .m10 {
-    margin: 10px
+  margin: 10px;
 }
 
 .m15 {
-    margin: 15px;
+  margin: 15px;
 }
 
 .m20 {
-    margin: 20px;
+  margin: 20px;
 }
 
 .mt10 {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .mt15 {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .mt20 {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .mt50 {
-    margin-top: 50px;
+  margin-top: 50px;
 }
 
 .ml10 {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .ml15 {
-    margin-left: 15px;
+  margin-left: 15px;
 }
 
 .ml20 {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .ml25 {
-    margin-left: 25px;
+  margin-left: 25px;
 }
 
 .mr10 {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 .mr15 {
-    margin-right: 15px;
+  margin-right: 15px;
 }
 
 .mr20 {
-    margin-right: 20px;
+  margin-right: 20px;
 }
 
 .mr25 {
-    margin-right: 25px;
+  margin-right: 25px;
 }
 
 .mr50 {
-    margin-right: 50px;
+  margin-right: 50px;
 }
 
 .mb10 {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .mb15 {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 .mb20 {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .mb25 {
-    margin-bottom: 25px;
+  margin-bottom: 25px;
 }
 
 /* padding */
 .pd10 {
-    padding: 10px;
+  padding: 10px;
 }
 
 .pd15 {
-    padding: 15px;
+  padding: 15px;
 }
 
 .pd20 {
-    padding: 20px;
+  padding: 20px;
 }
 
 .pdt10 {
-    padding-top: 10px;
+  padding-top: 10px;
 }
 
 .pdt15 {
-    padding-top: 15px;
+  padding-top: 15px;
 }
 
 .pdt20 {
-    padding-top: 20px;
+  padding-top: 20px;
 }
 
 .pdt30 {
-    padding-top: 30px;
+  padding-top: 30px;
 }
 
 .pdl8 {
-    padding-left: 8px;
+  padding-left: 8px;
 }
 
 .pdl10 {
-    padding-left: 10px;
+  padding-left: 10px;
 }
 
 .pdl15 {
-    padding-left: 15px;
+  padding-left: 15px;
 }
 
 .pdl20 {
-    padding-left: 20px;
+  padding-left: 20px;
 }
 
 .pdr10 {
-    padding-right: 10px;
+  padding-right: 10px;
 }
 
 .pdr15 {
-    padding-right: 15px;
+  padding-right: 15px;
 }
 
 .pdr20 {
-    padding-right: 20px;
+  padding-right: 20px;
 }
 
 .pdb10 {
-    padding-bottom: 10px;
+  padding-bottom: 10px;
 }
 
 .pdb15 {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
 .pdb20 {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
 }
 
 /* 字体大小 */
 .font16 {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .font18 {
-    font-size: 18px;
+  font-size: 18px;
 }
 
 .font20 {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 .font22 {
-    font-size: 22px;
+  font-size: 22px;
 }
 
 .font24 {
-    font-size: 24px;
+  font-size: 24px;
 }
 
 .font26 {
-    font-size: 26px;
+  font-size: 26px;
 }
 
 .font28 {
-    font-size: 28px;
+  font-size: 28px;
 }
 
 .font30 {
-    font-size: 30px;
+  font-size: 30px;
 }
 
 /* 字体位置 */
 .tac {
-    text-align: center;
+  text-align: center;
 }
 
 .tal {
-    text-align: left;
+  text-align: left;
 }
 
 .tar {
-    text-align: right;
+  text-align: right;
 }
 
 /* 加粗 */
 .fontw600 {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .fontw700 {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .fontw800 {
-    font-weight: 800;
+  font-weight: 800;
 }
 
 /* 手型鼠标 */
 .pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .pagination {
-    margin-top: 10px;
-    text-align: right;
+  margin-top: 10px;
+  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;
 }
 
 /**
@@ -309,50 +325,50 @@
 */
 /* el-table列数据为空自动显示-- */
 .cell:empty::before {
-    content: '--';
-    color: gray;
+  content: "--";
+  color: gray;
 }
 
 .el-dialog__body {
-    border-top: 1px solid #ececec;
-    border-bottom: 1px solid #ececec;
-    padding: 20px !important;
+  border-top: 1px solid #ececec;
+  border-bottom: 1px solid #ececec;
+  padding: 20px !important;
 }
 
 .el-card {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .el-card__body {
-    width: 100%;
-    flex:1;
-    padding-bottom:10px !important;
+  width: 100%;
+  flex: 1;
+  padding-bottom: 10px !important;
 }
 
 .gutter {
-    width: 6px !important;
+  width: 6px !important;
 }
 
-.el-table__body-wrapper::-webkit-scrollbar {
-    width: 6px;
-    overflow-y: auto;
+::-webkit-scrollbar {
+  width: 6px;
+  overflow-y: auto;
 }
 
-.el-table__body-wrapper::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    background-color: rgba(144, 147, 153, .5);
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: rgba(144, 147, 153, 0.5);
 }
 
-.el-table__body-wrapper::-webkit-scrollbar-track {
-    border-radius: 6px;
-    background: #fff;
+::-webkit-scrollbar-track {
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0);
 }
 
 .autoWidth {
-    min-width: 120px;
+  min-width: 120px;
 }
 .autoWidth .el-input__prefix {
   position: relative;
@@ -369,5 +385,5 @@
   position: absolute;
 }
 .el-tooltip__popper {
-    max-width: 20%;
-  }
+  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弹框 
+//防止element点击多次弹出message弹框
 //创建一个js文件将此内容放入即可
- 
-import { Message } from 'element-ui';
- 
-let messageval = null;
 
-const Messages = (opt) => {
+import { Message } from "element-ui";
 
-  if (messageval ) { // 如果已经有一个message
+let messageval = null;
 
-    messageval.close() // 将上一个关闭
+const Messages = (opt) => {
+  if (messageval) {
+    // 如果已经有一个message
 
+    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 
+export const message = Messages;
\ No newline at end of file