## 选择器对话框

### ClDialog基础用法

`ClDialog`是以对话框显示选择数据的组件，可以用来构建选择器。   
`select-label`属性指定选择框中选中选项后，弹框右侧已选择的中显示内容的key。`quick-search-props`属性指定对话框中搜索框中允许搜索的内容的key，为必填项。`data`指定弹框表格显示内容。`table-columns`指定表格列显示内容。`search-placeholder`属性指定弹框搜索框中占位文本。

```html
<template>
  <div v-if="selectResult.length" class="top-title">弹框确认返回的值:</div>
  <div v-for="item in selectResult" class="result-line">
    {{JSON.stringify(item)}}
  </div>
  <div>
    <el-button @click="showDia">打开弹框选择用户</el-button>
  </div>
  <cl-dialog 
    ref="clDialog" 
    quick-search-props="name,phone"
    :data="data"
    :table-columns="tableColumns"
    :pagination="pagination"
    search-placeholder="姓名或者电话"
    @load="handleLoad"
    @onConfirm="onConfirm"
  ></cl-dialog>
</template>
<script>
  import { dialogGetList } from '$exp/api/dialog'
  export default {
    data () {
      return {
        timeVal: "",
        data: [],
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "phone", label: "手机" },
          { prop: "email", label: "邮箱" }
        ],
        pagination: {
          page: 1,
          pageSize: 50,
          total: 0
        },
        selectResult: []
      }
    },
    methods: {
      showDia() {
        this.$refs.clDialog.showDialog(this.selectResult)
      },
      handleLoad(param, cb) {
        dialogGetList(param)
          .then((response) => {
            this.data = response.data
            this.pagination = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.totalCount,
            }
          })
          .finally(() => cb())
      },
      onConfirm(result) {
        this.selectResult = result
      }
    }
  }
</script>
<style>
  .top-title{
    margin-bottom: 10px;
  }
  .result-line{
    margin-bottom: 10px;
  }
</style>
<!-- dialog-1.vue -->
```

### 单选
添加`single`属性后，弹框中只允许单选

```html
<template>
  <div v-if="selectResult.length" class="top-title">弹框确认返回的值:</div>
  <div v-for="item in selectResult" class="result-line">{{JSON.stringify(item)}}</div>
  <div>
    <el-button @click="showDia">打开弹框选择用户</el-button>
  </div>
  <cl-dialog 
    ref="clDialog" 
    quick-search-props="name,phone"
    :data="data"
    :table-columns="tableColumns"
    :pagination="pagination"
    single
    @load="handleLoad"
    @onConfirm="onConfirm"
  ></cl-dialog>
</template>
<script>
  export default {
    data () {
      return {
        timeVal: "",
        data: [],
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "phone", label: "手机" },
          { prop: "email", label: "邮箱" }
        ],
        pagination: {
          page: 1,
          pageSize: 50,
          total: 0
        },
        selectResult: []
      }
    },
    methods: {
      showDia() {
        this.$refs.clDialog.showDialog(this.selectResult);
      },
      handleLoad(param, cb) {
        dialogGetList(param)
          .then((response) => {
            this.data = response.data
            this.pagination = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.totalCount,
            }
          })
          .finally(() => cb())
      },
      onConfirm(result) {
        this.selectResult = result
      }
    }
  }
</script>
<style>
  .top-title{
    margin-bottom: 10px;
  }
  .result-line{
    margin-bottom: 10px;
  }
</style>
<!-- dialog-2.vue -->
```

### ClUserSelectorInput 用户选择器

```html
<template>
  <el-form v-form>
    <cl-form-item label="姓名">
      <cl-user-selector-input
        v-model="fullname"
        permission="b"
        :config="{ account: 'account', mobile: 'mobile', email: 'email' }"
        select-current
        single
      ></cl-user-selector-input>
    </cl-form-item>
    <cl-form-item label="姓名">
      <cl-input v-model="fullname"></cl-input>
    </cl-form-item>
    <cl-form-item label="账号">
      <cl-input v-model="account"></cl-input>
    </cl-form-item>
    <cl-form-item label="手机">
      <cl-input v-model="mobile"></cl-input>
    </cl-form-item>
    <cl-form-item label="邮箱">
      <cl-input v-model="email"></cl-input>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        fullname: "",
        account: "",
        mobile: "",
        email: "",
      };
    },
  };
</script>

<!-- dialog-3.vue -->
```

### 在多行数据中的用户选择器

```html
<template>
  <el-form v-form>
    <table>
      <thead>
        <tr>
          <th colspan="3" align="left">
            <el-button type="primary" @click="add">添加</el-button>
          </th>
        </tr>
        <tr>
          <th>姓名</th>
          <th>姓名</th>
          <th>账号</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index" data-subname="rows" :data-index="index">
          <td>
            <cl-user-selector-input
              v-model="row.fullname"
              :config="{ account: 'row.account' }"
              single
            ></cl-user-selector-input>
          </td>
          <td>
            <cl-input v-model="row.fullname"></cl-input>
          </td>
          <td>
            <cl-input v-model="row.account"></cl-input>
          </td>
        </tr>
      </tbody>
    </table>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        rows: [
          {
            fullname: "",
            account: "",
            mobile: "",
            email: "",
          },
        ],
      };
    },
    methods: {
      add(){
        this.rows.push({
          fullname: "",
          account: "",
          mobile: "",
          email: "",
        })
      }
    }
  };
</script>

<!-- dialog-user-1.vue -->
```

### ClOrgSelectorInput 组织选择器

```html
<template>
  <el-form v-form>
    <cl-form-item label="组织">
      <cl-org-selector-input
        v-model="name"
        permission="b"
        :config="{ code: 'code', pathName: 'pathName' }"
        select-current
        single
      ></cl-org-selector-input>
    </cl-form-item>
    <cl-form-item label="编码">
      <cl-input v-model="code"></cl-input>
    </cl-form-item>
    <cl-form-item label="路径">
      <cl-input v-model="pathName"></cl-input>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        code: "",
        pathName: "",
      };
    },
  };
</script>

<!-- dialog-4.vue -->
```

### ClRoleSelectorInput 角色选择器

```html
<template>
  <el-form v-form>
    <cl-form-item label="角色">
      <cl-role-selector-input
        v-model="name"
        permission="b"
        :config="{ code: 'code' }"
        single
      ></cl-role-selector-input>
    </cl-form-item>
    <cl-form-item label="编码">
      <cl-input v-model="code"></cl-input>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        code: "",
      };
    },
  };
</script>

<!-- dialog-5.vue -->
```

### ClPostSelectorInput 岗位选择器

```html
<template>
  <el-form v-form>
    <cl-form-item label="岗位">
      <cl-post-selector-input
        v-model="name"
        permission="b"
        :config="{ code: 'code', pathName: 'pathName' }"
        select-current
        single
      ></cl-post-selector-input>
    </cl-form-item>
    <cl-form-item label="编码">
      <cl-input v-model="code"></cl-input>
    </cl-form-item>
    <cl-form-item label="所属组织路径">
      <cl-input v-model="pathName"></cl-input>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        code: "",
        pathName: "",
      };
    },
  };
</script>

<!-- dialog-6.vue -->
```

### ClJobSelectorInput 职务选择器

```html
<template>
  <el-form v-form>
    <cl-form-item label="职务">
      <cl-job-selector-input
        v-model="name"
        permission="b"
        :config="{ code: 'code' }"
        select-current
        single
      ></cl-job-selector-input>
    </cl-form-item>
    <cl-form-item label="编码">
      <cl-input v-model="code"></cl-input>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        code: "",
      };
    },
  };
</script>

<!-- dialog-7.vue -->
```

### ClDialog 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| quick-search-props | string/number | - | 绑定值 |
| single | boolean | false | 是否单选 |
| title | string | - | 设置对话框的标题 |
| data | array | - | 列表数据 |
| table-columns | array | - | 列表属性列配置 |
| pagination | object | {page: 1,pageSize: 50,total: 0} | 分页配置 |
| select-label | string | name | 已选数据显示的label |
| search-placeholder | string | 请输入查询内容 | 搜索框占位文本 |
| append-to-body | boolean | false | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true |
| destroy-on-close | boolean | false | 关闭时销毁 Dialog 中的元素 |

### ClDialog 方法说明
| 方法名称 | 说明 | 参数 |
| :--- | :--- | :--- |
| showDialog | 显示对话框 | - |

### C;Dialog 事件说明
| 事件名称 | 说明 | 回调参数 |
| :--- | :--- | :--- |
| onConfirm | 对话框确认时回调方法 | selectors,选中的数据数组 |
| load | 获取类表数据方法 params为queryFilter, cb为加载数据后的回调函数 | params,cb |

### ClXXXSelectorInput 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| v-model | string | - | 绑定值，选择器中一般绑定`name`,`fullname`属性 |
| single | boolean | false | 是否单选 |
| config | object | - | 属性值绑定关系，以`ClUserSelectorInput`组件为例，`:config="{ account: 'account', mobile: 'mobile', email: 'email' }"`时表示将所选用户数据的`account`属性绑定到`account`数据上，当选择器是多选时多个值以`,`分隔。 |
| append-to-body | boolean | false | 对话框是否挂载到`body`元素上 |
| select-current | boolean | false | 仅对`ClUserSelectorInput`,`ClOrgSelectorInput`,`ClPostSelectorInput`生效，表示默认选中当前登录用户、当前用户所属组织、当前用户所拥有的岗位 |
