Newer
Older
DH_Apicture / src / components / RightToolbar / index.vue
@zhangqy zhangqy on 29 Nov 2 KB first commit
  1. <template>
  2. <div class="top-right-btn" :style="style">
  3. <el-row>
  4. <el-tooltip
  5. class="item"
  6. effect="dark"
  7. :content="showSearch ? '隐藏搜索' : '显示搜索'"
  8. placement="top"
  9. v-if="search"
  10. >
  11. <el-button circle icon="Search" @click="toggleSearch()" />
  12. </el-tooltip>
  13. <el-tooltip class="item" effect="dark" content="刷新" placement="top">
  14. <el-button circle icon="Refresh" @click="refresh()" />
  15. </el-tooltip>
  16. <el-tooltip
  17. class="item"
  18. effect="dark"
  19. content="显隐列"
  20. placement="top"
  21. v-if="columns"
  22. >
  23. <el-button circle icon="Menu" @click="showColumn()" />
  24. </el-tooltip>
  25. </el-row>
  26. <el-dialog :title="title" v-model="open" append-to-body>
  27. <el-transfer
  28. :titles="['显示', '隐藏']"
  29. v-model="value"
  30. :data="columns"
  31. @change="dataChange"
  32. ></el-transfer>
  33. </el-dialog>
  34. </div>
  35. </template>
  36.  
  37. <script setup>
  38. const props = defineProps({
  39. showSearch: {
  40. type: Boolean,
  41. default: true,
  42. },
  43. columns: {
  44. type: Array,
  45. },
  46. search: {
  47. type: Boolean,
  48. default: true,
  49. },
  50. gutter: {
  51. type: Number,
  52. default: 10,
  53. },
  54. });
  55.  
  56. const emits = defineEmits(["update:showSearch", "queryTable"]);
  57.  
  58. // 显隐数据
  59. const value = ref([]);
  60. // 弹出层标题
  61. const title = ref("显示/隐藏");
  62. // 是否显示弹出层
  63. const open = ref(false);
  64.  
  65. const style = computed(() => {
  66. const ret = {};
  67. if (props.gutter) {
  68. ret.marginRight = `${props.gutter / 2}px`;
  69. }
  70. return ret;
  71. });
  72.  
  73. // 搜索
  74. function toggleSearch() {
  75. emits("update:showSearch", !props.showSearch);
  76. }
  77.  
  78. // 刷新
  79. function refresh() {
  80. emits("queryTable");
  81. }
  82.  
  83. // 右侧列表元素变化
  84. function dataChange(data) {
  85. for (let item in props.columns) {
  86. const key = props.columns[item].key;
  87. props.columns[item].visible = !data.includes(key);
  88. }
  89. }
  90.  
  91. // 打开显隐列dialog
  92. function showColumn() {
  93. open.value = true;
  94. }
  95.  
  96. // 显隐列初始默认隐藏列
  97. for (let item in props.columns) {
  98. if (props.columns[item].visible === false) {
  99. value.value.push(parseInt(item));
  100. }
  101. }
  102. </script>
  103.  
  104. <style lang="scss" scoped>
  105. :deep(.el-transfer__button) {
  106. border-radius: 50%;
  107. display: block;
  108. margin-left: 0px;
  109. }
  110. :deep(.el-transfer__button:first-child) {
  111. margin-bottom: 10px;
  112. }
  113.  
  114. .my-el-transfer {
  115. text-align: center;
  116. }
  117. </style>