学校-应用策略

src/api/appgroup.js

@@ -30,7 +30,10 @@ export const appgroup_list_app = (data) =>
  * 5.2.1 应用-列表
  */
 export const app_list = (data) => setRequest("app/list", data);
-
+/**
+ * 5.2.1.1 应用-选择列表
+ */
+export const app_list_sel = (data) => setRequest("app/list_sel", data);
 /**
  * 5.2.2 应用-添加
  */
@@ -80,7 +83,8 @@ export const app_edit_enable = (data) => setRequest("app/edit_enable", data);
 /**
  * 5.2.11 应用-禁用
  */
-export const app_edit_unenable = (data) => setRequest("app/edit_unenable", data);
+export const app_edit_unenable = (data) =>
+  setRequest("app/edit_unenable", data);
 /**
  * 5.3 设备-列表(分组下设备)
  */

src/views/schoolSection/applicationStrategy/appStrategyTemplateAdd.vue

@@ -4,7 +4,10 @@
       <div class="add_strategy_left">
         <div class="name_form">
           <div class="name_form_item">名称</div>
-          <Input placeholder="请输入名称"></Input>
+          <Input
+            placeholder="请输入名称"
+            v-model="appStrategyInfo.name"
+          ></Input>
         </div>
         <div class="time_strategy">
           时间策略
@@ -26,28 +29,94 @@
       <div class="add_strategy_right">
         <div class="optional_applications">
           <div>可选应用</div>
-          <div><Checkbox>全选</Checkbox></div>
+          <div>
+            <Checkbox
+              :disabled="appList.length === 0"
+              :value="appAllCheck"
+              @on-change="appAllCheckChange"
+              >全选</Checkbox
+            >
+          </div>
         </div>
         <div class="app_list">
-          <div class="app_item">
-            <div><img src="" /></div>
-            <div>洋葱学院</div>
-            <div><Checkbox></Checkbox></div>
+          <div
+            class="app_item"
+            :title="appItem.appName"
+            v-for="appItem in appList"
+            :key="appItem.appid"
+            @click="toSelectApp(appItem.appid)"
+          >
+            <div class="app_item_top">
+              <img :src="$api.showImageUrl + appItem.appIcon" />
+            </div>
+            <div class="app_item_name">
+              {{ appItem.appName }}
+            </div>
+            <div class="app_item_check">
+              <Checkbox
+                :value="tempStrategyInfo.apps.includes(appItem.appid)"
+              ></Checkbox>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="strategy_list_title">应用策略列表</div>
+    <div
+      class="strategy_item"
+      v-for="(groupItem, groupIndex) in appStrategyInfo.groups"
+      :key="groupIndex"
+    >
+      <table class="my_table">
+        <tr>
+          <th colspan="7">
+            <div class="table_header">
+              <div class="table_header_title">应用策略列表</div>
+              <div class="table_header_action">
+                <div>编辑</div>
+                <div class="del">删除</div>
+              </div>
+            </div>
+          </th>
+        </tr>
+        <tr>
+          <td v-for="weekItem in weekDay" :key="weekItem.value">
+            {{ weekItem.label }}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="7">
+            <div class="table_app_list">
+              <div
+                class="table_app_item"
+                v-for="appItem in groupItem.apps"
+                :key="appItem.appid"
+              >
+                <div class="app_top"></div>
+                <div class="app_name">
+                  {{ appsInfo[appItem.appid].appName }}
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
+import { weekDay } from "@/utils";
 import TimeStrategy from "@/components/TimeStrategy/TimeStrategy";
+import { app_list_sel } from "@/api/appgroup";
 export default {
   components: {
     TimeStrategy
   },
   data() {
     return {
+      weekDay,
+      appList: [],
       // 应用策略信息
       appStrategyInfo: {
         name: "",
@@ -61,13 +130,63 @@ export default {
       }
     };
   },
-  created() {},
+  created() {
+    this.getAppList();
+  },
   computed: {
     powerParams() {
       return this.$store.getters.powerParams;
+    },
+    appAllCheck() {
+      let allAppids = this.appList.map((appItem) => appItem.appid);
+      let isCheck = true;
+      for (const appid of allAppids) {
+        if (!this.tempStrategyInfo.apps.includes(appid)) {
+          isCheck = false;
+        }
+      }
+      return allAppids.length > 0 ? isCheck : false;
+    },
+    appsInfo() {
+      let info = {};
+      this.appList.forEach((item) => {
+        info[item.appid] = item;
+      });
+      return info;
     }
   },
   methods: {
+    appAllCheckChange(selected) {
+      if (selected) {
+        this.tempStrategyInfo.apps = this.appList.map(
+          (appItem) => appItem.appid
+        );
+      } else {
+        this.tempStrategyInfo.apps = [];
+      }
+    },
+    toSelectApp(appid) {
+      if (this.tempStrategyInfo.apps.includes(appid)) {
+        this.tempStrategyInfo.apps = this.tempStrategyInfo.apps.filter(
+          (id) => id !== appid
+        );
+      } else {
+        this.tempStrategyInfo.apps.push(appid);
+      }
+    },
+    getAppList() {
+      app_list_sel({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.appList = data.obj;
+        } else {
+          this.appList = [];
+          this.$Message.error(data.msg);
+        }
+      });
+    },
     timesChange(times) {
       this.tempStrategyInfo.times = times;
     },
@@ -100,7 +219,6 @@ export default {
   margin: 16px 16px 0;
   .add_strategy_left {
     width: calc(50% - 20px);
-    height: 500px;
     .name_form {
       display: flex;
       justify-content: flex-start;
@@ -139,7 +257,8 @@ export default {
   }
   .add_strategy_right {
     width: 50%;
-    height: 500px;
+    // max-height: 400px;
+    overflow: auto;
     .optional_applications {
       display: flex;
       justify-content: space-between;
@@ -153,17 +272,143 @@ export default {
       justify-content: flex-start;
       flex-wrap: wrap;
       width: 100%;
-      min-height: calc(100% - 33px);
+      // max-height: calc(100% - 33px);
       overflow: auto;
       .app_item {
-        margin-top: 16px;
-        margin-right: 16px;
+        position: relative;
+        margin: 8px;
         width: 100px;
-        height: 110px;
+        height: 100px;
         border-radius: 10px;
         border: 1px solid #798cb51a;
         background: #ffffff;
         cursor: pointer;
+        &:hover {
+          box-shadow: 4px 4px 8px 0 #339dff26;
+        }
+        .app_item_top {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 10px;
+          padding-top: 10px;
+          height: calc(100% - 44px);
+          img {
+            width: 38px;
+            height: 38px;
+          }
+        }
+        .app_item_name {
+          margin: 10px 0;
+          line-height: 1;
+          font-size: 14px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .app_item_check {
+          position: absolute;
+          right: 8px;
+          top: 8px;
+          /deep/.ivu-checkbox-wrapper {
+            margin-right: 0;
+            .ivu-checkbox-inner {
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.strategy_list_title {
+  margin: 16px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.strategy_item {
+  margin: 16px;
+  .my_table {
+    width: 100%;
+    empty-cells: show;
+    border-collapse: collapse;
+    table-layout: fixed;
+    border: 1px solid #dcdee2;
+    border-spacing: 0;
+    box-sizing: border-box;
+    font-size: 12px;
+    th {
+      padding: 0;
+      line-height: 30px;
+      font-weight: normal;
+      text-align: center;
+      vertical-align: middle;
+      white-space: nowrap;
+      background-color: #fff;
+      border: 1px solid #ced9f2;
+    }
+    td {
+      position: relative;
+      padding: 0;
+      line-height: 30px;
+      text-align: center;
+      vertical-align: middle;
+      white-space: nowrap;
+      border: 1px solid #ced9f2;
+    }
+  }
+  .table_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    background-color: #edf3ff;
+    .table_header_title {
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .table_header_action {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      > div {
+        margin-left: 4px;
+        padding: 0 4px;
+        cursor: pointer;
+        &:hover {
+          color: #339dff;
+        }
+        &.del {
+          color: #f0153f;
+        }
+      }
+    }
+  }
+  .table_app_list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    .table_app_item {
+      margin: 10px;
+      .app_top {
+        margin: 0 auto;
+        width: 56px;
+        height: 56px;
+        border-radius: 6px;
+        border: 1px solid #e5e5e5;
+        background: #ffffff;
+      }
+      .app_name {
+        margin-top: 10px;
+        max-width: 100px;
+        line-height: 1;
+        font-size: 14px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }