<script setup>
import IntegratedQuery from './integrated-query.vue'

</script>

# 综合查询

## 示例

<ClientOnly>
    <IntegratedQuery/>
</ClientOnly>


## 注意点
### 1. 自定义列表
自定义列表中需要注意的点，自定义列表中有使用route路由相关的代码无法在说明文档中演示 
* 1.columns中有type:slot插槽类型，需要添加一个title:  表头名称
* 2.如果需要禁用某列让其无法配置，需要添加字段disabled: true

```js
const columns = [
  {
    type: 'slot',
    slotName: 'test',
    title: "测试"
  },
  {
    key: "instanceType",
    title: "普通",
    disabled: true,
  },
]
```

### 完整代码

<div class="composition-api">

```vue
<script setup>
  import { CommonTable, KsSearch,KsPagin } from '@ksconsole/components'
  import { usePageSearch,useColumnsSet,usePageDownload } from "@ksconsole/hooks";
  import { Icon, TableColumn, Button} from '@king-design/vue';
  import { ref } from 'vue'
  import { getList } from "./getList";
  
  // 页面查询逻辑 推荐使用vue响应式包裹
  const searchParams = ref({
    name: ''
  })
  const {
    tableData,
    pageNum,
    pageChange,
    total,
    search,
    isLoading
  } = usePageSearch(getList, searchParams)

  const searchOptions = ref([
    {
      key: 'name',
      label: '实例名称',
    },
    {
      key: 'id',
      label: '实例ID',
    },
  ])
  const selectKeys = ref(0)
  function onSearch(v) {
    console.log("🚀 ~ onSearch ~ v:", v)
    searchParams.value.name = v.name
    search()
  }

  const columns = ref([
    {
      key: "instanceType",
      title: "数据1"
    },
    {
      key: "productType",
      title: "数据2"
    },
    {
      key: "instanceName",
      title: "数据3"
    },
    {
      key: "region",
      title: "数据4"
    }
  ]);
  const option = {
  instanceType: [
    {label: "数据1", value: 1},
    {label: "数据2", value: 2}
  ],
  productType: [
    {label: "数据0", value: 0},
    {label: "数据1", value: 1}
  ]
}
/** 
 * 自定义列表配置逻辑 
 * columns: 表头数据
 * key: 唯一标识
 */
const columnKey = 'onlyKey'
const { columnDatas,columnsChange } = useColumnsSet(columns, columnKey)
// test是下载的文件名
const { getDownDatas } = usePageDownload(columns,tableData,'test',option);

  const tableInstance = ref(null)
  function clickRow() {
    setTimeout(() => {
      selectKeys.value = tableInstance.value.getCheckedData().length
    })
  }

</script>

<template>
  <div class="main-content">
    <div class="margin-bottom-20">
      <KsSearch
          :search-options="searchOptions"
          hasRefresh
          @onSearch='onSearch'
          hasDown
          @onExport="getDownDatas"
          :columnDatas="columnDatas"
          :columnKey='columnKey'
          @changeColumns='columnsChange'
      >
        <Button type='primary' ><Icon class="k-icon-add" /> 关联成员 </Button>
        <Button > 删除</Button>
      </KsSearch>
    </div>
    <CommonTable
        ref="tableInstance"
        :data="tableData"
        :columns="columnDatas"
        :loading="isLoading"
        class="margin-bottom-20"
        @clickRow="clickRow"
    >
      <TableColumn fixed="right" title="操作" key="test2">
        <template v-slot:template="[data, index]">
          <div>
            <Button type="link">编辑</Button>
            <Button type="link">删除</Button>
          </div>
        </template>
      </TableColumn>
    </CommonTable>
    <KsPagin v-model="pageNum" :total="total" :select-keys="selectKeys" ref="__test" @change="pageChange"/>
  </div>
</template>

<style scoped lang="less">
  .flex {
    display: flex;
  }
  .right {
    justify-content: right;
  }
  .margin-bottom-20 {
    margin-bottom: 20px;
  }
</style>



```

</div>
