2020-2021暑期项目实训第三周——渲染企业用户列表以及主要代码（二）

主要实现了渲染企业用户列表。
企业用户可以通过查看企业信息来查看处于同一企业中的用户。

<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;
    },