@egova/components/src/components/person-selector/index.html

components

<i-modal
    v-model="show"
    width="1000"
    transfer
    class-name="e-person-selector-modal diy-modal"
    @on-visible-change="onVisibleChange"
>
    <header slot="header">
        选择关联机构人员
    </header>
    <main class="e-choose-person-modal-body">
        <div class="choose-left">
            <div class="choose-title">按机构查询</div>
            <div class="tree-wrapper">
                <div class="tree">
                    <i-tree
                        :data="treeData"
                        :expand="true"
                        @on-select-change="onTreeSelectChange"
                    ></i-tree>
                </div>
            </div>
        </div>

        <div class="choose-middle">
            <i-input
                icon="ios-search"
                maxlength="30"
                v-model.trim="condition.name"
                placeholder="输入人员名称进行查询"
                @on-enter="onQuery"
                @on-click="onQuery"
            >
            </i-input>

            <div class="choose-tables">
                <i-table
                    :columns="columns"
                    :data="list"
                    style="overflow: hidden;"
                >
                    <template slot="name" slot-scope="{row, index}">
                        <i-tooltip :content="row.name" theme="light" transfer>
                            {{row.name}}
                        </i-tooltip>
                    </template>
                    <template slot="phone" slot-scope="{row, index}">
                        <i-tooltip :content="row.phone" theme="light" transfer>
                            {{row.phone}}
                        </i-tooltip>
                    </template>
                    <template slot="departmentName" slot-scope="{row, index}">
                        <i-tooltip
                            :content="row.departmentName"
                            theme="light"
                            transfer
                        >
                            {{row.departmentName}}
                        </i-tooltip>
                    </template>
                    <template slot="action" slot-scope="{row, index}">
                        <i-radio
                            :value="tableSelectedId===row.id"
                            @on-change="onRadioChange(row)"
                        ></i-radio>
                    </template>
                </i-table>
                <div class="pagination">
                    <i-page
                        class="diy-page"
                        :total="paging.totalCount"
                        :current="paging.pageIndex"
                        :page-size="paging.pageSize"
                        :page-size-opts="[10,20,40,80]"
                        @on-change="onPageIndexChange"
                        @on-page-size-change="onPageSizeChange"
                        show-total
                        show-sizer
                        transfer
                    >
                        {{ paging.totalCount }}
                    </i-page>
                </div>

                <i-spin class="diy-spin" fix v-if="loading"></i-spin>
            </div>
        </div>

        <div class="choose-right">
            <div class="choose-title">已选人员</div>
            <div class="choose-result">
                <i-table
                    class="diy-table"
                    :columns="chooseColumn"
                    :show-header="false"
                    :data="chooseList"
                >
                    <template slot="action" slot-scope="{row, index}">
                        <span title="移除" @click.stop="toRemove(row)">
                            <i-icon size="25" type="ios-close"></i-icon>
                        </span>
                    </template>
                </i-table>
            </div>
        </div>
    </main>

    <footer slot="footer">
        <i-button type="text" @click.native="cancel">取消</i-button>
        <i-button type="primary" @click.stop="onOkClick">确定</i-button>
    </footer>
</i-modal>