选择设备

packages/device/AppEquipmentManage/AppEquipmentManage.vue

@@ -8,7 +8,7 @@
 
 <script>
 import List from './components/List'
-import TaskList from './components/taskList'
+import TaskList from './components/TaskList'
 
 export default {
   label: '广播设备管理',

packages/device/AppMediaManage/components/List.vue

@@ -68,7 +68,7 @@
 
       <div class="dialog-footer" slot="footer">
         <el-button @click="detailDialog=false" size="medium">关闭</el-button>
-        <el-button @click="play(info.id)" size="medium">新建广播</el-button>
+        <el-button @click="play(info.id)" type="primary" size="medium">新建广播</el-button>
       </div>
     </ai-dialog>
 
@@ -242,7 +242,6 @@ export default {
     width: 100%;
     height: 200px;
     overflow-y: auto;
-    overflow-y: scroll;
   }
 }
 </style>

packages/device/AppMediaManage/components/Play.vue

@@ -1,5 +1,5 @@
 <template>
-  <ai-detail>
+  <ai-detail class="Play">
     <template #title>
       <ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
     </template>
@@ -11,8 +11,13 @@
               <ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
             </el-form-item>
             <el-form-item label="播放设备" prop="serialNo">
-              <ai-select v-model="formData.serialNo" placeholder="播放设备" clearable
+              <!-- <el-input size="small" placeholder="请选择..." class="equipment" disabled v-model="formData.serialNo">
-                         :selectList="equipmentList"></ai-select>
+                <el-button slot="append" @click="detailDialog = true">选择</el-button>
+              </el-input> -->
+              <div class="equipments">
+                <div>已选择<span>{{ formData.serialNo.length }}</span>个设备</div>
+                <el-button slot="append" @click="detailDialog = true">选择</el-button>
+              </div>
             </el-form-item>
             <el-form-item label="播发级别" prop="messageLevel">
               <ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable
@@ -61,6 +66,58 @@
           </el-form>
         </template>
       </ai-card>
+      <ai-dialog 
+        title="选择设备"
+        :visible.sync="detailDialog"
+        :customFooter="true"
+        :destroyOnClose="true"
+        width="1080px">
+        <ai-detail style="background: #FFF;">
+          <template #content>
+            <el-alert title="温馨提示：请先在设备管理中绑定行政区划" type="warning" show-icon :closable="false" style="margin-bottom: 12px;"></el-alert>
+            <div class="container">
+              <div class="item">
+                <div class="title">
+                  <div>行政区划</div>
+                  <div>
+                    <el-input placeholder="请输入" v-model="input3" class="input-with-select" size="small">
+                      <el-button slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                  </div>
+                </div>
+                <div class="content">
+                  <el-tree :data="data" :props="defaultProps" :accordion="true" @node-click="handleNodeClick"></el-tree>
+                </div>
+              </div>
+              <div class="item">
+                <div class="title">
+                  <div class="checkBox">
+                    <el-checkbox v-model="checked">全选</el-checkbox>
+                  </div>
+                  <div>
+                    <el-input placeholder="请输入" v-model="input3" class="input-with-select" size="small">
+                      <el-button slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                  </div>
+                </div>
+                <div class="content"></div>
+              </div>
+              <div class="item">
+                <div class="title">
+                  <div>已选择</div>
+                  <el-button type="info" size="small">清空</el-button>
+                </div>
+                <div class="content"></div>
+              </div>
+            </div>
+          </template>
+        </ai-detail>
+
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="detailDialog=false" size="medium">关闭</el-button>
+          <el-button @click="play(info.id)" type="primary" size="medium">确认</el-button>
+        </div>
+      </ai-dialog>
     </template>
     <template #footer>
       <el-button @click="cancel">取消</el-button>
@@ -152,7 +209,49 @@ export default {
         ],
       },
       mediaList: [],
-      equipmentList: []
+      equipmentList: [],
+      detailDialog: false,
+      checked: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      data: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+
     }
   },
   computed: {
@@ -193,6 +292,9 @@ export default {
         }
       })
     },
+    handleNodeClick(data) {
+      console.log(data);
+    },
     confirm() {
       this.$refs['ruleForm'].validate((valid) => {
         if (valid) {
@@ -250,5 +352,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.Play {
+  .equipment {
+    position: relative;
+    .select {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
 
+  .equipments {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid #DDD;
+    justify-content: space-between;
+  }
+
+  .container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .item {
+      flex: 1;
+      display: inline-block;
+      width: 100%;
+      height: auto;
+      border: 1px solid #DDD;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px;
+        box-sizing: border-box;
+        height: 50px;
+        align-items: center;
+        border-bottom: 1px solid #DDD;
+        .checkBox {
+          align-self: center;
+        }
+      }
+    }
+  }
+}
 </style>