选择设备
This commit is contained in:
shijingjing
@@ -8,7 +8,7 @@
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import TaskList from './components/taskList'
|
||||
import TaskList from './components/TaskList'
|
||||
|
||||
export default {
|
||||
label: '广播设备管理',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
:selectList="equipmentList"></ai-select>
|
||||
<!-- <el-input size="small" placeholder="请选择..." class="equipment" disabled v-model="formData.serialNo">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user