主要实现了渲染企业用户列表。
企业用户可以通过查看企业信息来查看处于同一企业中的用户。
<a-tabs default-active-key="1">
<a-tab-pane key="1">
<span slot="tab" @click="search">
<a-icon type="apple" />
用户
</span>
<div
style="margin-bottom: 16px"
v-if="role === 'founder' || role === 'admin'"
>
<a-button
type="primary"
:disabled="hasSelected"
:loading="loading"
@click="invite"
>
邀请
</a-button>
<!-- 批量解雇员工按钮 -->
<a-button
type="danger"
:disabled="!hasSelected"
:loading="loading"
@click="deleted"
style="margin-left: 5%"
>
解雇
</a-button>
<a-input-search
placeholder="请输入员工姓名"
style="width: 200px"
@search="onSearch"
/>
<span style="margin-left: 8px">
<template v-if="hasSelected">
{{ `选中 ${selectedRowKeys.length} 条数据` }}
</template>
</span>
</div>
<a-table
bordered
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns"
:data-source="data"
:scroll="{ x: 1500, y: 300 }"
>
<div
slot="action"
v-if="role === 'founder' || role === 'admin'"
>
<a @click="edit">修改</a>
<a @click="fire" style="margin-left: 7%">解雇</a>
</div>
</a-table>
<a-modal
title="更改员工部门"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
<a-form :form="form">
<a-form-item
ref="department"
label="选择部门"
prop="department"
>
<a-select
v-decorator="['department', { initialValue: ' ' }]"
>
<a-select-option value="Option1">
Option1 </a-select-option
><a-select-option value="Option2">
Option2
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-modal>
</a-tab-pane>
fetchPerson() {
fetchPerson(this.companyId).then(this.afterFetch);
},
afterFetch(res) {
this.data = res.data.data;
},