# HrhxListMixin 混入组件使用文档

##使用方法引入组件 import {JeecgListMixin} from '@/mixins/JeecgListMixin'并放入公共组件 mixin 中

```vue
import { HrhxListMixin } from '@/mixins/HrhxListMixin' export default { mixins: [HrhxListMixin] }
```

## table 列表参数

| 参数       | 说明                                                                                 |
| ---------- | ------------------------------------------------------------------------------------ |
| size       | 表格大小 default、middle、small                                                      |
| bordered   | 是否展示外边框和列边框                                                               |
| rowKey     | 表格行 key 的取值，可以是字符串或一个函数 保证唯一否则有警告                         |
| columns    | 表格的表头 array 数组                                                                |
| dataSource | 数据数组 array 数组                                                                  |
| pagination | 分页器 参数 ipagination 是混入里封装的方法进行分页                                   |
| loading    | 页面是否加载中 参数 true false 默认是 false 查询或者加载中是 true 查询完毕变回 false |
| scroll     | 设置横向或纵向滚动，也可用于指定滚动区域的宽和高                                     |
| change     | 分页、排序、筛选变化时触发 handleTableChange 触发混入排序方法                        |

## rowSelection 参数

| 参数     | 说明                                                                                              |
| -------- | ------------------------------------------------------------------------------------------------- |
| onChange | 选中项发生变化时的回调 onSelectChange 方法触发混入 记录当前选择的 id 数组和当前选择的行数据       |
| onSelect | 用户手动选择/取消选择某列的回调 onSelect 方法触发混入 获取的 selectRowList 是选择数据数组支持跨页 |
| type     | 类型 单选/多选 单选 radio 多选 checkbox                                                           |

## 使用示例

```vue
<a-table
  size="small"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  :loading="loading"
  :scroll="{ x: 10 * 147 + 50 }"
  :rowSelection="{ onChange: onSelectChange, onSelect: onSelect, type: 'checkbox' }"
  @change="handleTableChange"
>
        //如果需要自定义列加列表查询 此处写下面示例代码      
        
        //操作
        <span slot="action" slot-scope="text, record">
            //按钮
            <a @click="handleProcess(record)">进度</a>
        </span>
    </a-table>
```

## 自定义列加列表查询使用示例

```vue
<!-- 过滤工具 -->
<div
  slot="filterDropdown"
  slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
  style="padding: 8px"
>
        <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`使用 ${column.title} 搜索`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => advancedSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => advancedSearch(selectedKeys, confirm, column.dataIndex)"
        >
            搜索
        </a-button>
        <a-button size="small" style="width: 90px"
                  @click="() => advancedClear(clearFilters, column.dataIndex)">
            重置
        </a-button>
    </div>
<!-- 过滤图标-->
<a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : '' }" />

<div slot="filterSetting">
        <a-card>
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns"
                              :defaultValue="settingColumns">
                <a-row>
                    <template v-for="(item,index) in defColumns">
                        <template v-if="item.key!='rowIndex' && item.dataIndex!='action'">
                            <a-col :span="12">
                                <a-checkbox :disabled="item.disabled" :value="item.dataIndex">{{
                                    item.title }}
                                </a-checkbox>
                            </a-col>
                        </template>
                    </template>
                </a-row>
            </a-checkbox-group>
        </a-card>
    </div>
<a-icon slot="filterSettingIcon" type="setting" :style="{ fontSize: '16px', color: '#108ee9' }" />
```

## 新增、修改、查看操作示例

```vue
//新增编辑 ref固定写 modalForm
<contract-manage-edit-modal ref="modalForm" @ok="modalFormOk" />
//查看 ref固定写 detailForm
<contract-manage-detail-modal ref="detailForm" />

<template slot="action" slot-scope="text, record">
  <a @click="handleAdd">编辑</a>
  <a-divider type="vertical" />
  <a @click="handleEdit(record)">编辑</a>
  <a-divider type="vertical" />
  <a @click="handleView(record)">查看</a>
  <a-divider type="vertical" />
  <a @click="handleDelete(record.id)">删除</a>
</template>

//在mixinsApi.js配置url 如下 selectContractManageListPage: '/ticket/contractManage/selectContractManageListPage',
removeContractManage: '/ticket/contractManage/removeContractManage' //列表和删除需要配置url 在mixinsApi.js配置完成后
用this.apis.变量名 如下： url: { list: this.apis.selectContractManageListPage, delete: this.apis.removeContractManage },
//新增编辑页面方法 add() { this.visible = true this.edit({}) }, edit(record) { this.visible = true this.form =
JSON.parse(JSON.stringify(record)) } //查看页面方法 view(record) { this.visible = true this.form =
JSON.parse(JSON.stringify(record)) },
```

## 示例页面

- 列表页面参考: @/views/contract/contractManage/ContractManageList.vue
- 新增编辑页参考: @/views/contract/contractManage/ContractManageEditModal.vue
- 查看页面参考: @/views/contract/contractManage/ContractManageDetailModal.vue
- 选择+自定义列+列表查询参考: @/views/workorderManagement/components/spareReplace/SpareReplaceApplicationChooseList.vue
