main.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <div :id="'grade-editor-' + _uid" class="grade-editor" v-loading="loading">
  3. <div v-for="(column, columnIndex) in data" class="column" :style="columnWdith">
  4. <div class="search-column">
  5. <input type="text" v-model="searchKeywords[columnIndex]" class="input-search" placeholder="输入关键词查找"
  6. @input="handleSearchKeywordChange(columnIndex)">
  7. <i class="icon-search"></i>
  8. </div>
  9. <div class="inner-column">
  10. <a v-if="checkPermission(['region:add'])" href="javascript:;" class="add-column" @click="handleClickAdd(columnIndex)">
  11. <i class="icon-add"></i>
  12. 添加{{ ['一', '二', '三', '四', '五', '六'][columnIndex] }}级{{ typeText }}
  13. </a>
  14. <div v-for="(item, itemIndex) in column" :key="item.$id" v-show="!item.$hidden"
  15. @click="handleClickItem(item, itemIndex, columnIndex)"
  16. :class="['item', item.$active && 'active', item.$hover && 'hover']">
  17. <div class="text-item">{{ item.$text }}</div>
  18. <div v-if="btns && btns.length > 0" class="btns-item">
  19. <div class="inner-btns">
  20. <a v-for="(btn, btnIndex) in btns" :style="{ color: btn.color || '#0a89c7' }"
  21. @click="handleClickItemBtn(item, btn, btnIndex, columnIndex)" href="javascript:;">{{ btn.text }}</a>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div v-if="placeLevel !== null" class="column" :style="columnWdith">
  28. <div class="search-column">
  29. <input type="text" v-model="searchKeywords[placeLevel]" class="input-search" placeholder="输入关键词查找"
  30. @input="handleSearchKeywordChange(placeLevel)">
  31. <i class="icon-search"></i>
  32. </div>
  33. <div class="inner-column">
  34. <a v-if="checkPermission(['region:add'])" href="javascript:;" class="add-column" @click="handleClickAdd(placeLevel)">
  35. <i class="icon-add"></i>
  36. 添加{{ ['一', '二', '三', '四', '五', '六'][placeLevel] }}级{{ typeText }}
  37. </a>
  38. </div>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import mixin from './mixin'
  44. export default {
  45. name: 'EnGradeEditor',
  46. mixins: [mixin]
  47. }
  48. </script>
  49. <style type="text/scss" lang="scss" scoped>
  50. @import "./styles";
  51. </style>