back_town/src/views/roleIng/staff/staffAdmin.vue

<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>已选用&nbsp; {{ selectedRowKeys.length }} &nbsp;条数据</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>