设置壁纸获取设备型号

src/views/regionSection/setting/wallpaper.vue

@@ -23,6 +23,11 @@
             <img v-if="row.hpath" :src="$api.showImageUrl + row.hpath" />
           </div>
         </template>
+        <template slot-scope="{ row }" slot="vpath">
+          <div class="hpath">
+            <img v-if="row.vpath" :src="$api.showImageUrl + row.vpath" />
+          </div>
+        </template>
         <template slot-scope="{ row }" slot="actionSlot">
           <div class="action_list">
             <div @click="toView(row)">查看</div>
@@ -66,29 +71,60 @@
             placeholder="请输入壁纸名称"
           ></Input>
         </FormItem>
-        <FormItem label="壁纸" style="width: 100%">
-          <div class="up">
-            <Upload
-              class="Upload"
-              action
-              :show-upload-list="false"
-              :before-upload="
-                (file) => {
-                  upLoad(file);
-                  return false;
-                }
-              "
-              accept=".png,.jpeg,.jpg,.gif"
-            >
-              <div v-if="wallpaperInfo.hpath" class="hpath">
-                <img :src="$api.showImageUrl + wallpaperInfo.hpath" />
-              </div>
-              <div v-else class="icon">
-                <Icon type="ios-cloud-upload-outline" size="42"></Icon>
-                <div>横屏壁纸</div>
-              </div>
-            </Upload>
-            <span>支持图片格式：jpg、jgeg、gif、png</span>
+        <FormItem label="壁纸" class="require" style="width: 100%">
+          <div class="wallpaper_upload_box">
+            <div class="wallpaper_h">
+              <Upload
+                action
+                :show-upload-list="false"
+                class="wallpaper_upload"
+                :before-upload="
+                  (file) => {
+                    upLoad(file, 1);
+                    return false;
+                  }
+                "
+                accept=".png,.jpeg,.jpg,.gif"
+              >
+                <div class="wallpaper_img_box" v-if="wallpaperInfo.hpath">
+                  <img :src="$api.showImageUrl + wallpaperInfo.hpath" />
+                </div>
+                <div v-else class="upload_tip">
+                  <div>
+                    <Icon type="ios-cloud-upload-outline" size="42"></Icon>
+                    <div>横屏壁纸</div>
+                  </div>
+                </div>
+              </Upload>
+            </div>
+            <div class="wallpaper_v">
+              <Upload
+                action
+                :show-upload-list="false"
+                class="wallpaper_upload"
+                :before-upload="
+                  (file) => {
+                    upLoad(file, 2);
+                    return false;
+                  }
+                "
+                accept=".png,.jpeg,.jpg,.gif"
+              >
+                <div class="wallpaper_img_box" v-if="wallpaperInfo.vpath">
+                  <img :src="$api.showImageUrl + wallpaperInfo.vpath" />
+                </div>
+                <div v-else class="upload_tip">
+                  <div>
+                    <Icon type="ios-cloud-upload-outline" size="42"></Icon>
+                    <div>竖屏壁纸</div>
+                  </div>
+                </div>
+              </Upload>
+            </div>
+            <div class="wallpaper_tip">
+              <div>支持格式：jpg、jpeg、gif、png</div>
+              <div>最大限制：2MB</div>
+            </div>
           </div>
         </FormItem>
         <FormItem label="适配类型" class="require" style="width: 100%">
@@ -121,11 +157,13 @@
       <div class="view_titles">{{ viewInfo.wname }}</div>
       <div class="view_content">
         <div class="view_title">壁纸效果</div>
-        <div class="hpath">
-          <img
-            v-if="viewInfo.hpath"
-            :src="$api.showImageUrl + viewInfo.hpath"
-          />
+        <div class="view_wallpaper_box">
+          <div class="view_img_box h" v-if="viewInfo.hpath">
+            <img :src="$api.showImageUrl + viewInfo.hpath" />
+          </div>
+          <div class="view_img_box v" v-if="viewInfo.vpath">
+            <img :src="$api.showImageUrl + viewInfo.vpath" />
+          </div>
         </div>
       </div>
       <div class="view_content" style="margin-top: 20px">
@@ -169,7 +207,6 @@ import {
   wallpaper_list_device,
   wallpaper_list_devicewp
 } from "@/api/setting";
-import { device_list } from "@/api/appgroup";
 export default {
   components: {
     CheckboxDevice
@@ -184,25 +221,17 @@ export default {
         list: [],
         total: 0
       },
-      // 新建
+      // 新建/编辑
       wallpaperInfo: {
         show: false,
         id: null,
         wname: "",
         hpath: "",
+        vpath: "",
         wlevel: "",
         objectid: "",
         deviceids: []
       },
-      // 编辑
-      modifyRegion: {
-        show: false,
-        regionid: null,
-        name: "",
-        regionCode: "",
-        comm: "",
-        rversion: null
-      },
       // 查看
       viewInfo: {
         show: false,
@@ -240,6 +269,11 @@ export default {
           slot: "hpath",
           align: "center"
         },
+        {
+          title: "竖屏壁纸",
+          slot: "vpath",
+          align: "center"
+        },
         {
           title: "壁纸名称",
           key: "wname",
@@ -295,17 +329,23 @@ export default {
         this.$Message.error(res.msg);
       }
     },
-    upLoad(file) {
+    upLoad(file, type) {
+      //type 1横屏 2竖屏
       let str = file.name.split(".");
+      let size = file.size / 1024 / 1024;
       let suffix = str[str.length - 1];
       suffix = suffix.toLowerCase();
       if (suffix !== "png" && suffix !== "jpeg" && suffix !== "jpg") {
         this.$Message.warning("请上传png、jpeg、jpg类型的文件");
         return false;
       }
+      if (size > 2) {
+        this.$Message.error("图片太大，不能超过2M！");
+        return false;
+      }
       let formData = new FormData();
       formData.append("file", file);
-      formData.append("savefolder", "app");
+      formData.append("savefolder", "wallpaper");
       formData.append("isrename", "1");
       let Url = this.$api.baseImageUrl + "up/upfile";
       this.showLoading = true;
@@ -316,7 +356,11 @@ export default {
         .then((res) => {
           this.showLoading = false;
           if (res.data.code === 0) {
-            this.wallpaperInfo.hpath = res.data.obj;
+            if (type === 1) {
+              this.wallpaperInfo.hpath = res.data.obj;
+            } else {
+              this.wallpaperInfo.vpath = res.data.obj;
+            }
             this.$Message.success(res.data.msg);
           } else {
             this.$Message.error(res.data.msg);
@@ -324,7 +368,7 @@ export default {
         })
         .catch(() => {
           this.showLoading = false;
-          this.$Message.error("图片上传失败");
+          this.$Message.error("壁纸上传失败");
         });
     },
     // 搜索
@@ -377,6 +421,7 @@ export default {
             id: null,
             wname: "",
             hpath: "",
+            vpath: "",
             wlevel: "",
             objectid: "",
             deviceids: []
@@ -401,8 +446,8 @@ export default {
             this.$Message.error("请选择设备!");
             return;
           }
-          if (!this.wallpaperInfo.hpath) {
-            this.$Message.error("请上传横屏壁纸!");
+          if (!this.wallpaperInfo.hpath && !this.wallpaperInfo.vpath) {
+            this.$Message.error("请上传壁纸!");
             return;
           }
           let api = this.wallpaperInfo.wallpaperid
@@ -411,6 +456,7 @@ export default {
           let form = {
             wname: this.wallpaperInfo.wname,
             hpath: this.wallpaperInfo.hpath,
+            vpath: this.wallpaperInfo.vpath,
             wlevel: 2,
             rtype: this.powerParams.rtype,
             objectid: this.powerParams.objectid,
@@ -426,6 +472,7 @@ export default {
             this.showLoading = false;
             if (data.code === 0) {
               this.wallpaperInfo.show = false;
+              this.init();
               this.searchList();
               this.$Message.success(data.msg);
             } else {
@@ -449,6 +496,7 @@ export default {
             show: true,
             wname: data.obj.wname,
             hpath: data.obj.hpath,
+            vpath: data.obj.vpath,
             devices: data.obj.devices
           };
         } else {
@@ -483,6 +531,7 @@ export default {
           wallpaperid: res.obj.wallpaperid,
           wname: res.obj.wname,
           hpath: res.obj.hpath,
+          vpath: res.obj.vpath,
           wlevel: res.obj.wlevel,
           objectid: res.obj.objectid,
           deviceids: res.obj.devices,
@@ -556,17 +605,32 @@ export default {
       flex: none;
       margin: 0 10px;
     }
-    .hpath {
-      width: 180px;
-      height: 120px;
-      border-radius: 8px;
-      overflow: hidden;
-      border: 3px solid #333333;
-      background-color: #f0f6fc;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+    .view_wallpaper_box {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-end;
+      .view_img_box {
+        position: relative;
+        margin-right: 20px;
+        border-radius: 6px;
+        border: 5px solid #333;
+        background: #f0f6fc;
+        &.h {
+          width: 180px;
+          height: 120px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        &.v {
+          width: 120px;
+          height: 180px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
       }
     }
     .view_devices {
@@ -590,55 +654,99 @@ export default {
 
 .table_wrap {
   .hpath {
-    width: 100px;
-    height: 60px;
+    max-width: 100px;
+    max-height: 60px;
     margin: 10px auto;
     img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+      max-width: 100px;
+      max-height: 60px;
     }
   }
 }
-.up {
+.wallpaper_upload_box {
   display: flex;
-  .Upload {
-    width: 180px;
-    height: 120px;
-    border-radius: 8px;
-    border: 3px solid #333333;
-    background-color: #f0f6fc;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    .icon {
-      color: #b8c2d9;
-      text-align: center;
-    }
+  justify-content: flex-start;
+  align-items: flex-start;
+  .wallpaper_h {
+    position: relative;
+    margin-top: 60px;
+    margin-right: 50px;
+    width: 190px;
+    height: 130px;
+    border-radius: 6px;
+    opacity: 1;
+    border: 5px solid #333;
+    background: #f0f6fc;
     &:hover {
       background: #eaf5ff;
-      .icon {
-        color: #339cff;
+      .upload_tip {
+        color: #339cff !important;
       }
     }
-    .hpath {
+    .wallpaper_upload {
       width: 180px;
       height: 120px;
-      border-radius: 8px;
-      overflow: hidden;
-      padding: 3px;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+      cursor: pointer;
+      .wallpaper_img_box {
+        width: 180px;
+        height: 120px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .upload_tip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 180px;
+        height: 120px;
+        text-align: center;
+        color: #b8c2d9;
       }
     }
   }
-  span {
-    margin-left: 20px;
-    color: #7c8db5;
+  .wallpaper_v {
+    position: relative;
+    margin-right: 20px;
+    width: 130px;
+    height: 190px;
+    border-radius: 6px;
+    opacity: 1;
+    border: 5px solid #333;
+    background: #f0f6fc;
+    &:hover {
+      background: #eaf5ff;
+      .upload_tip {
+        color: #339cff !important;
+      }
+    }
+    .wallpaper_upload {
+      width: 120px;
+      height: 180px;
+      cursor: pointer;
+      .wallpaper_img_box {
+        width: 120px;
+        height: 180px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .upload_tip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 120px;
+        height: 180px;
+        text-align: center;
+        color: #b8c2d9;
+      }
+    }
+  }
+  .wallpaper_tip {
     font-size: 16px;
+    color: #7c8db5;
   }
 }
 </style>

src/views/schoolSection/setting/wallpaper.vue

@@ -8,7 +8,13 @@
         @on-search="searchList()"
         style="width: 150px"
       />
-      <Button type="primary" class="primary_btn" @click="toAdd()">新建</Button>
+      <Button
+        type="primary"
+        v-if="add_has === 1"
+        class="primary_btn"
+        @click="toAdd()"
+        >新建</Button
+      >
     </div>
     <div class="table_wrap">
       <Table :columns="columns" :data="searchForm.list">
@@ -283,13 +289,17 @@ import {
   wallpaper_add,
   wallpaper_edit,
   wallpaper_detail,
-  wallpaper_delete
+  wallpaper_delete,
+  wallpaper_list_device,
+  wallpaper_list_devicewp,
+  wallpaper_add_has
 } from "@/api/setting";
 import { device_list } from "@/api/appgroup";
 export default {
   data() {
     return {
       userInfo: {},
+      add_has: false,
       searchForm: {
         name: "",
         page: 1,
@@ -385,6 +395,7 @@ export default {
     this.userInfo = JSON.parse(
       localStorage.getItem("xh_control_userInfo")
     ).content;
+    this.init();
     this.searchList();
   },
   computed: {
@@ -393,6 +404,18 @@ export default {
     }
   },
   methods: {
+    async init() {
+      //是否显示添加按钮
+      let res = await wallpaper_add_has({
+        wlevel: 3,
+        objectid: this.powerParams.objectid
+      });
+      if (res.code === 0) {
+        this.add_has = res.obj;
+      } else {
+        this.$Message.error(res.msg);
+      }
+    },
     // 搜索
     searchList() {
       this.searchForm.page = 1;
@@ -432,24 +455,30 @@ export default {
     },
     // 新建
     toAdd() {
-      this.wallpaperInfo = {
-        show: true,
-        wallpaperid: null,
-        rversion: null,
-        wname: "",
-        hpath: "",
-        hLoading: false,
-        vpath: "",
-        vLoading: false,
-        // 2区域3学校
+      wallpaper_list_device({
         wlevel: 3,
-        // 对应的区域/学校ID
-        objectid: this.powerParams.objectid,
-        deviceids: [],
-        deviceList: []
-      };
-      this.getDeviceList().then((list) => {
-        this.wallpaperInfo.deviceList = list;
+        objectid: this.powerParams.objectid
+      }).then((res) => {
+        if (res.code === 0) {
+          this.wallpaperInfo = {
+            show: true,
+            wallpaperid: null,
+            rversion: null,
+            wname: "",
+            hpath: "",
+            hLoading: false,
+            vpath: "",
+            vLoading: false,
+            // 2区域3学校
+            wlevel: 3,
+            // 对应的区域/学校ID
+            objectid: this.powerParams.objectid,
+            deviceids: [],
+            deviceList: res.obj
+          };
+        } else {
+          this.$Message.error(res.msg);
+        }
       });
     },
     // 获取设备列表
@@ -603,6 +632,9 @@ export default {
             this.$Message.error("请上传壁纸");
             return;
           }
+          if (this.wallpaperInfo.deviceids.length === 0) {
+            this.$Message.error("请选择设备!");
+          }
           this.wallpaperInfo.show = false;
           let form = {
             rtype: this.powerParams.rtype,
@@ -623,6 +655,7 @@ export default {
               : wallpaper_add;
           api(form).then((data) => {
             if (data.code === 0) {
+              this.init();
               this.searchList();
               this.$Message.success(data.msg);
             } else {
@@ -658,7 +691,16 @@ export default {
       });
     },
     // 编辑
-    toEdit(row) {
+    async toEdit(row) {
+      //获取选择设备包含自己
+      let res1 = await wallpaper_list_devicewp({
+        wlevel: this.powerParams.rtype,
+        objectid: this.powerParams.objectid,
+        wallpaperid: row.wallpaperid
+      });
+      if (res1.code != 0) {
+        this.$Message.error(res1.msg);
+      }
       this.wallpaperInfo = {
         show: true,
         wallpaperid: row.wallpaperid,
@@ -673,7 +715,7 @@ export default {
         // 对应的区域/学校ID
         objectid: row.objectid,
         deviceids: [],
-        deviceList: []
+        deviceList: res1.obj
       };
       this.getWallpaperDetail(row.wallpaperid).then((data) => {
         if (data) {
@@ -686,9 +728,6 @@ export default {
           this.wallpaperInfo.deviceids = _deviceids;
         }
       });
-      this.getDeviceList().then((list) => {
-        this.wallpaperInfo.deviceList = list;
-      });
     },
     getWallpaperDetail(wallpaperid) {
       return new Promise((resolve) => {