<!--<template>-->
<!--  <div class="top-right-btn" :style="style">-->
<!--    <el-row>-->
<!--      <el-tooltip-->
<!--        class="item"-->
<!--        effect="dark"-->
<!--        :content="showSearch ? '隐藏搜索' : '显示搜索'"-->
<!--        placement="top"-->
<!--        v-if="search"-->
<!--      >-->
<!--        <el-button size="small" circle icon="Search" @click="toggleSearch()" />-->
<!--      </el-tooltip>-->
<!--      <el-tooltip class="item" effect="dark" content="刷新" placement="top">-->
<!--        <el-button size="small" circle icon="Refresh" @click="refresh()" />-->
<!--      </el-tooltip>-->
<!--      <el-tooltip-->
<!--        class="item"-->
<!--        effect="dark"-->
<!--        content="显隐列"-->
<!--        placement="top"-->
<!--        v-if="columns"-->
<!--      >-->
<!--        <el-button-->
<!--          size="small"-->
<!--          circle-->
<!--          icon="Menu"-->
<!--          @click="showColumn()"-->
<!--          v-if="showColumnsType == 'transfer'"-->
<!--        />-->
<!--        <el-dropdown-->
<!--          trigger="click"-->
<!--          :hide-on-click="false"-->
<!--          style="padding-left: 12px"-->
<!--          v-if="showColumnsType == 'checkbox'"-->
<!--        >-->
<!--          <el-button size="small" circle icon="Menu" />-->
<!--          <template #dropdown>-->
<!--            <el-dropdown-menu>-->
<!--              <el-dropdown-item v-for="item in columns" :key="item.key">-->
<!--                <el-checkbox-->
<!--                  :checked="item.visible"-->
<!--                  @change="checkboxChange($event, item.label)"-->
<!--                  :label="item.label"-->
<!--                />-->
<!--              </el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </template>-->
<!--        </el-dropdown>-->
<!--      </el-tooltip>-->
<!--    </el-row>-->
<!--    <el-dialog :title="title" v-model="open" append-to-body>-->
<!--      <el-transfer-->
<!--        :titles="['显示', '隐藏']"-->
<!--        v-model="value"-->
<!--        :data="columns"-->
<!--        @change="dataChange"-->
<!--      ></el-transfer>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { ref, computed, onMounted } from 'vue'-->

<!--// 定义类型-->
<!--interface Column {-->
<!--  key: string | number-->
<!--  label: string-->
<!--  visible: boolean-->
<!--  [key: string]: any-->
<!--}-->

<!--interface Props {-->
<!--  /* 是否显示检索条件 */-->
<!--  showSearch?: boolean-->
<!--  /* 显隐列信息 */-->
<!--  columns?: Column[]-->
<!--  /* 是否显示检索图标 */-->
<!--  search?: boolean-->
<!--  /* 显隐列类型（transfer穿梭框、checkbox复选框） */-->
<!--  showColumnsType?: string-->
<!--  /* 右外边距 */-->
<!--  gutter?: number-->
<!--}-->

<!--interface Emits {-->
<!--  (e: 'update:showSearch', value: boolean): void-->
<!--  (e: 'queryTable'): void-->
<!--}-->

<!--// 定义props和emits-->
<!--const props = withDefaults(defineProps<Props>(), {-->
<!--  showSearch: true,-->
<!--  columns: () => [],-->
<!--  search: true,-->
<!--  showColumnsType: 'checkbox',-->
<!--  gutter: 10-->
<!--})-->

<!--const emit = defineEmits<Emits>()-->

<!--// 响应式数据-->
<!--const value = ref<(string | number)[]>([])-->
<!--const title = ref("显示/隐藏")-->
<!--const open = ref(false)-->

<!--// 计算属性-->
<!--const style = computed(() => {-->
<!--  const ret: { marginRight?: string } = {}-->
<!--  if (props.gutter) {-->
<!--    ret.marginRight = `${props.gutter / 2}px`-->
<!--  }-->
<!--  return ret-->
<!--})-->

<!--// 生命周期-->
<!--onMounted(() => {-->
<!--  if (props.showColumnsType == 'transfer') {-->
<!--    // 显隐列初始默认隐藏列-->
<!--    props.columns?.forEach((item, index) => {-->
<!--      if (item.visible === false) {-->
<!--        value.value.push(index)-->
<!--      }-->
<!--    })-->
<!--  }-->
<!--})-->

<!--// 方法-->
<!--// 搜索-->
<!--const toggleSearch = () => {-->
<!--  emit('update:showSearch', !props.showSearch)-->
<!--}-->

<!--// 刷新-->
<!--const refresh = () => {-->
<!--  emit('queryTable')-->
<!--}-->

<!--// 右侧列表元素变化-->
<!--const dataChange = (data: (string | number)[]) => {-->
<!--  props.columns?.forEach((item) => {-->
<!--    const key = item.key-->
<!--    item.visible = !data.includes(key)-->
<!--  })-->
<!--}-->

<!--// 打开显隐列dialog-->
<!--const showColumn = () => {-->
<!--  open.value = true-->
<!--}-->

<!--// 勾选-->
<!--const checkboxChange = (event: boolean, label: string) => {-->
<!--  const column = props.columns?.find(item => item.label === label)-->
<!--  if (column) {-->
<!--    column.visible = event-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--:deep(.el-transfer__button) {-->
<!--  border-radius: 50%;-->
<!--  padding: 12px;-->
<!--  display: block;-->
<!--  margin-left: 0px;-->
<!--}-->
<!--:deep(.el-transfer__button:first-child) {-->
<!--  margin-bottom: 10px;-->
<!--}-->
<!--</style>-->
