140 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			140 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <box-content>
 | 
						|
    <div class="search">
 | 
						|
      <SearchForm
 | 
						|
        size="mini"
 | 
						|
        :that="this"
 | 
						|
        :search-data="searchData"
 | 
						|
        :search-form="searchForm"
 | 
						|
        :search-handle="searchHandle"
 | 
						|
        @search="handleSearch"
 | 
						|
        @reset="handleReset"
 | 
						|
      />
 | 
						|
      <el-button
 | 
						|
        type="primary"
 | 
						|
        size="mini"
 | 
						|
        style="margin-left:auto;"
 | 
						|
        @click="handleAddUser"
 | 
						|
      >New</el-button>
 | 
						|
    </div>
 | 
						|
    <base-table
 | 
						|
      v-loading="loading"
 | 
						|
      :columns="columns"
 | 
						|
      :list="users"
 | 
						|
      :search-data="searchData"
 | 
						|
      :total="total"
 | 
						|
      @getList="getList"
 | 
						|
      @editCb="handleEditUser"
 | 
						|
      @deleteCb="handleDeleteUser"
 | 
						|
      @sortByColumn="sortByColumn"
 | 
						|
    >
 | 
						|
      <!-- 选择自定义slot -->
 | 
						|
      <template slot="genderSlot" slot-scope="{scope}">
 | 
						|
        {{ scope.row.Sex?'Male':'Female' }}
 | 
						|
      </template>
 | 
						|
      <template slot="roleSlot" slot-scope="{scope}">
 | 
						|
        {{ scope.row.RoleNameList.map(role => role.RoleName).join(',') }}
 | 
						|
      </template>
 | 
						|
      <template slot="statusSlot" slot-scope="{scope}">
 | 
						|
        {{ scope.row.Status?'Enable':'Disable' }}
 | 
						|
      </template>
 | 
						|
    </base-table>
 | 
						|
  </box-content>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { getUserList, getUserTypeList, deleteSysUser } from '@/api/admin'
 | 
						|
import { searchForm, searchHandle, columns } from './list'
 | 
						|
import BoxContent from '@/components/BoxContent'
 | 
						|
import SearchForm from '@/components/BaseForm/search-form'
 | 
						|
import BaseTable from '@/components/BaseTable'
 | 
						|
import tableMixins from '@/mixins/table'
 | 
						|
const searchDataDefault = () => {
 | 
						|
  return {
 | 
						|
    UserName: null,
 | 
						|
    Phone: null,
 | 
						|
    OrganizationName: null,
 | 
						|
    UserState: null,
 | 
						|
    UserType: null,
 | 
						|
    PageIndex: 1,
 | 
						|
    PageSize: 20,
 | 
						|
    Asc: true,
 | 
						|
    SortField: ''
 | 
						|
  }
 | 
						|
}
 | 
						|
export default {
 | 
						|
  name: 'UserList',
 | 
						|
  components: { BoxContent, SearchForm, BaseTable },
 | 
						|
  mixins: [tableMixins],
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      searchData: searchDataDefault(),
 | 
						|
      searchForm,
 | 
						|
      searchHandle,
 | 
						|
      columns,
 | 
						|
      userTypeOptions: [],
 | 
						|
      loading: false,
 | 
						|
      total: 0,
 | 
						|
      users: []
 | 
						|
    }
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    this.getList()
 | 
						|
    this.getInfo()
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    // 获取用户信息
 | 
						|
    getList() {
 | 
						|
      this.loading = true
 | 
						|
      getUserList(this.searchData).then(res => {
 | 
						|
        this.loading = false
 | 
						|
        this.users = res.Result.CurrentPageData
 | 
						|
        this.total = res.Result.TotalCount
 | 
						|
      }).catch(() => {
 | 
						|
        this.loading = false
 | 
						|
      })
 | 
						|
    },
 | 
						|
    findItemIndex(key) {
 | 
						|
      return this.searchForm.findIndex(value => value.prop && value.prop === key
 | 
						|
      )
 | 
						|
    },
 | 
						|
    // 获取用户类型下拉选项信息
 | 
						|
    async getInfo() {
 | 
						|
      const res = await getUserTypeList()
 | 
						|
      const index = this.findItemIndex('UserType')
 | 
						|
      this.$set(this.searchForm[index], 'options', res.Result)
 | 
						|
    },
 | 
						|
    // 新增用户
 | 
						|
    handleAddUser() {
 | 
						|
      this.$router.push({ path: '/system/user/add' })
 | 
						|
    },
 | 
						|
    // 编辑用户
 | 
						|
    handleEditUser(data) {
 | 
						|
      this.$router.push({ path: '/system/user/edit', query: { Id: data.Id }})
 | 
						|
    },
 | 
						|
    // 删除用户
 | 
						|
    handleDeleteUser(data) {
 | 
						|
      this.$confirm('Sure to delete?', {
 | 
						|
        type: 'warning',
 | 
						|
        distinguishCancelAndClose: true,
 | 
						|
        confirmButtonText: 'Ok',
 | 
						|
        cancelButtonText: 'Cancel'
 | 
						|
      })
 | 
						|
        .then(() => {
 | 
						|
          deleteSysUser(data.Id)
 | 
						|
            .then(res => {
 | 
						|
              if (res.IsSuccess) {
 | 
						|
                this.users.splice(this.users.findIndex(item => item.Id === data.Id), 1)
 | 
						|
                this.$message.success('Deleted successfully!')
 | 
						|
              }
 | 
						|
            })
 | 
						|
        })
 | 
						|
    },
 | 
						|
    // 重置列表查询
 | 
						|
    handleReset() {
 | 
						|
      this.searchData = searchDataDefault()
 | 
						|
      this.getList()
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 |