123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <template>
- <el-drawer title="关联的业务空间" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="20%" custom-class="room-count">
- <div class="drawer-body">
- <div class="default-zone zone" v-show="1">
- <p>默认业务空间</p>
- <div v-for="item in defaultZoneList" :key="item.RoomID" class="zoneItem">
- {{item.Name}}
- <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('default')" v-if="!readonly"></i>
- </div>
- <div class="zoneItem" style="text-align:center;" @click="addZoneItem('default')" v-if="!readonly">
- <i class="iconfont icon-add-control" style="position:static"></i>
- </div>
- </div>
- <div class="tenant-zone zone" v-show="1">
- <p>租户业务空间</p>
- <div v-for="item in tenantZoneList" :key="item.RoomID" class="zoneItem">
- {{item.Name}}
- <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('tenant')" v-if="!readonly"></i>
- </div>
- <div class="zoneItem" style="text-align:center;" @click="addZoneItem('tenant')" v-if="!readonly">
- <i class="iconfont icon-add-control" style="position:static"></i>
- </div>
- </div>
- <div class="btn" v-if="!readonly">
- <el-button type="primary" @click="save">保存</el-button>
- </div>
- </div>
- </el-drawer>
- </template>
- <script>
- export default {
- data() {
- return {
- drawer: false,
- direction: 'rtl',
- defaultZoneList: [
- { RoomID: 1, Name: "哈哈哈哈军军" },
- { RoomID: 2, Name: "哈哈哈哈军军" },
- { RoomID: 3, Name: "哈哈哈哈军军" },
- ],
- tenantZoneList: [
- { RoomID: 1, Name: "哈哈哈哈军军" },
- { RoomID: 2, Name: "哈哈哈哈军军" },
- { RoomID: 3, Name: "哈哈哈哈军军" },
- ]
- }
- },
- props: {
- readonly: {
- default: true
- }
- },
- methods: {
- showDrawer() {
- this.drawer = true;
- },
- handleClose(done) {
- done();
- },
- // 删除
- deleteZoneItem(type) {
- console.log(type)
- },
- // 添加
- addZoneItem(type) {
- console.log(type)
- },
- save() { }
- }
- }
- </script>
- <style lang="less" scoped>
- .room-count {
- .drawer-body {
- position: relative;
- padding: 0 10px;
- height: 100%;
- .zone {
- padding: 6px 14px 22px;
- box-shadow: 0 0 3px #cacaca;
- p {
- margin-bottom: 4px;
- }
- .zoneItem {
- position: relative;
- padding: 2px 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
- i {
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- .zoneItem + .zoneItem {
- margin-top: 6px;
- }
- }
- .zone + .zone {
- margin-top: 10px;
- }
- .btn {
- position: absolute;
- width: calc(100% - 20px);
- bottom: 20px;
- right: 20px;
- text-align: right;
- }
- }
- }
- </style>
|