123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- <template>
- <div>
- <a-card
- :body-style="{padding: '24px 32px'}"
- :bordered="false"
- :tabList="operationTabList"
- :activeTabKey="operationActiveTabKey"
- @tabChange="(key) => {this.operationActiveTabKey = key; searchUser()}"
- >
- <div class="opraiont">
- <div class="left">
- <span>已选用 {{ selectedRowKeys.length }} 条数据</span>
- <a-button size="small" @click="stopUser">
- {{ operationActiveTabKey === '1' ? '停用' : '启用' }}
- </a-button>
- <a-popconfirm
- title="你确定要删除这些角色吗?"
- ok-text="Yes"
- cancel-text="No"
- @confirm="deleteUser"
- >
- <a-button size="small">
- 删除
- </a-button>
- </a-popconfirm>
- <span>
- <a-input-search
- style="width: 400px"
- placeholder="支持手机号或者姓名搜索"
- enter-button
- @search="onSearch"
- />
- </span>
- </div>
- <div class="right">
- <a-button type="primary" @click="openModel({id: ''}, {id: '1'}, 'add')">新增员工</a-button>
- </div>
- </div>
- <a-table
- :rowKey="record => record.id"
- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
- :columns="columns"
- :data-source="staffList"
- :loading="loading"
- :pagination="pagination"
- >
- <template slot="dataAuthority" slot-scope="text">
- <span>{{ text === 0 ? '全部' : '个人(团队)' }}</span>
- </template>
- <template slot="action" slot-scope="text, records">
- <a @click="openModel(text,records, 'edit')">编辑</a>
- </template>
- </a-table>
- </a-card>
- <a-modal v-model="visible" :width="700" style="height: 500px" :title="type === 'add' ? '新增员工' : '编辑员工信息'" @ok="handleOk">
- <edit ref="editForm" :type="type"/>
- </a-modal>
- </div>
- </template>
- <script>
- import edit from './edit'
- import { searchUser, postUser, searchUserDetail, stopUser, deleteUser } from '@/api/role'
- const columns = [
- {
- title: '员工编号',
- dataIndex: 'id'
- },
- {
- title: '姓名',
- dataIndex: 'label'
- },
- {
- title: '部门',
- dataIndex: 'departmentLabel'
- },
- {
- title: '手机号',
- dataIndex: 'phone'
- },
- {
- title: '邮箱',
- dataIndex: 'email'
- },
- {
- title: '微信绑定',
- dataIndex: 'wechat'
- },
- {
- title: '角色',
- dataIndex: 'roleLabel'
- },
- {
- title: '数据权限',
- dataIndex: 'dataAuthority',
- scopedSlots: { customRender: 'dataAuthority' }
- },
- {
- title: '操作',
- dataIndex: 'action',
- key: 'action',
- scopedSlots: { customRender: 'action' }
- }
- ]
- export default {
- name: 'StaffAdmin',
- components: {
- edit
- },
- props: {
- departmentId: {
- type: String,
- required: true
- }
- },
- watch: {
- departmentId: {
- handler () {
- this.searchUser()
- }
- // immediate: true
- }
- // searchUserId () {
- // }
- },
- data () {
- return {
- columns,
- visible: false,
- operationTabList: [
- {
- key: '1',
- tab: '使用中'
- },
- {
- key: '0',
- tab: '已停用'
- }
- ],
- operationActiveTabKey: '1',
- selectedRowKeys: [], // Check here to configure the default column
- loading: false,
- pagination: {
- page: 1,
- pageSize: 10,
- total: 1
- },
- staffList: [],
- searchUserId: '',
- searchText: '',
- searchUserDetailData: {},
- type: 'add' // 当前弹窗是增加还是编辑
- }
- },
- methods: {
- // 删除多个
- async deleteUser () {
- const { code, data } = await deleteUser(this.selectedRowKeys)
- this.selectedRowKeys = []
- if (code === 0) {
- console.log(data)
- this.searchUser()
- }
- },
- // 停用 或者 启用 多个账户
- async stopUser () {
- const { code, data } = await stopUser(this.selectedRowKeys, this.operationActiveTabKey)
- this.selectedRowKeys = []
- if (code === 0) {
- console.log(data)
- this.searchUser()
- }
- },
- // 查询用户详情
- async searchUserDetail () {
- const { code, data } = await searchUserDetail(this.searchUserId)
- if (code === 0) {
- console.log(data)
- this.searchUserDetailData = data || {}
- this.$refs.editForm.formData = this.searchUserDetailData
- this.$refs.editForm.backfillForm({ label: this.searchUserDetailData.label, phone: this.searchUserDetailData.phone })
- }
- },
- // 打开编辑弹窗
- openModel (text, records, type) {
- // if (records.id === '') {
- // this.searchUserDetail = {}
- // }
- this.searchUserId = records.id
- this.visible = true
- this.type = type
- this.searchUserDetail()
- },
- // 搜索框
- onSearch (records) {
- this.searchText = records
- this.searchUser()
- },
- // 搜索人员
- async searchUser () {
- const $par = {
- departmentId: this.departmentId,
- keyWord: this.searchText,
- state: Number(this.operationActiveTabKey),
- curPage: 1
- }
- this.loading = true
- const { code, data } = await searchUser($par)
- this.loading = false
- if (code === 0) {
- console.log(data)
- const { records, total } = data
- this.staffList = records
- this.pagination.total = total
- }
- },
- // 编辑员工 或者新增员工
- async handleOk () {
- const $par = await this.$refs.editForm.handleSubmit()
- if ($par.code === 500) return
- const { code, data } = await postUser($par)
- if (code === 0) {
- console.log(data)
- }
- this.visible = false
- console.log($par, '$par')
- },
- // 选中行
- onSelectChange (selectedRowKeys) {
- console.log('selectedRowKeys changed: ', selectedRowKeys)
- this.selectedRowKeys = selectedRowKeys
- }
- }
- }
- </script>
- <style scoped lang="less">
- .opraiont {
- margin-bottom: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left {
- display: flex;
- align-items: center;
- }
- span {
- margin-right: 10px;
- }
- .ant-btn {
- margin-right: 10px;
- }
- }
- </style>
|