roomCountDrawer.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <el-drawer title="关联的业务空间" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="20%" custom-class="room-count">
  3. <div class="drawer-body">
  4. <div class="default-zone zone" v-show="1">
  5. <p>默认业务空间</p>
  6. <div v-for="item in defaultZoneList" :key="item.RoomID" class="zoneItem">
  7. {{item.Name}}
  8. <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('default')" v-if="!readonly"></i>
  9. </div>
  10. <div class="zoneItem" style="text-align:center;" @click="addZoneItem('default')" v-if="!readonly">
  11. <i class="iconfont icon-add-control" style="position:static"></i>
  12. </div>
  13. </div>
  14. <div class="tenant-zone zone" v-show="1">
  15. <p>租户业务空间</p>
  16. <div v-for="item in tenantZoneList" :key="item.RoomID" class="zoneItem">
  17. {{item.Name}}
  18. <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('tenant')" v-if="!readonly"></i>
  19. </div>
  20. <div class="zoneItem" style="text-align:center;" @click="addZoneItem('tenant')" v-if="!readonly">
  21. <i class="iconfont icon-add-control" style="position:static"></i>
  22. </div>
  23. </div>
  24. <div class="btn" v-if="!readonly">
  25. <el-button type="primary" @click="save">保存</el-button>
  26. </div>
  27. </div>
  28. </el-drawer>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. drawer: false,
  35. direction: 'rtl',
  36. defaultZoneList: [
  37. { RoomID: 1, Name: "哈哈哈哈军军" },
  38. { RoomID: 2, Name: "哈哈哈哈军军" },
  39. { RoomID: 3, Name: "哈哈哈哈军军" },
  40. ],
  41. tenantZoneList: [
  42. { RoomID: 1, Name: "哈哈哈哈军军" },
  43. { RoomID: 2, Name: "哈哈哈哈军军" },
  44. { RoomID: 3, Name: "哈哈哈哈军军" },
  45. ]
  46. }
  47. },
  48. props: {
  49. readonly: {
  50. default: true
  51. }
  52. },
  53. methods: {
  54. showDrawer() {
  55. this.drawer = true;
  56. },
  57. handleClose(done) {
  58. done();
  59. },
  60. // 删除
  61. deleteZoneItem(type) {
  62. console.log(type)
  63. },
  64. // 添加
  65. addZoneItem(type) {
  66. console.log(type)
  67. },
  68. save() { }
  69. }
  70. }
  71. </script>
  72. <style lang="less" scoped>
  73. .room-count {
  74. .drawer-body {
  75. position: relative;
  76. padding: 0 10px;
  77. height: 100%;
  78. .zone {
  79. padding: 6px 14px 22px;
  80. box-shadow: 0 0 3px #cacaca;
  81. p {
  82. margin-bottom: 4px;
  83. }
  84. .zoneItem {
  85. position: relative;
  86. padding: 2px 10px;
  87. border: 1px solid #ccc;
  88. border-radius: 4px;
  89. i {
  90. position: absolute;
  91. right: 10px;
  92. top: 50%;
  93. transform: translateY(-50%);
  94. }
  95. }
  96. .zoneItem + .zoneItem {
  97. margin-top: 6px;
  98. }
  99. }
  100. .zone + .zone {
  101. margin-top: 10px;
  102. }
  103. .btn {
  104. position: absolute;
  105. width: calc(100% - 20px);
  106. bottom: 20px;
  107. right: 20px;
  108. text-align: right;
  109. }
  110. }
  111. }
  112. </style>