LSSE-front/src/views/isystem/userList.vue

<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="queryData">
          <div class="shaixuan_float_left">
            <a-form-item label="关键字">
              <a-input placeholder="请输入" v-model="queryParam.filter" />
            </a-form-item>
          </div>
          <div class="shaixuan_float_left">
            <a-form-item>
              <a-button type="primary" @click="queryData">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetQuery">重置</a-button>
            </a-form-item>
          </div>
          <div style="clear: both;"></div>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button icon="plus" type="primary" style="margin-right: 10px;" @click="handleAdd">新增</a-button>
      </div>
      <a-table :columns="tableColumn" :dataSource="tableData" :pagination="pagination" :scroll="{x:true}" bordered>
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="isAdmin" slot-scope="text">
          <span v-if="text == 1">是</span>
          <span v-if="text == 0">否</span>
        </template>
        <template slot="thirdRole" slot-scope="text">
          <span v-if="text == 0">教员</span>
          <span v-if="text == 1">训练员</span>
        </template>
        <template slot="optionColumn" slot-scope="text, record">
          <a-button size="small" type="primary" @click="handleEdit(record)" style="margin-left: 15px;">编辑</a-button>
          <a-button size="small" type="danger" @click="handleDelete(record)" style="margin-left: 15px;">删除</a-button>
          <a-button size="small" type="primary" @click="handleResetpwdCpp(record)" style="margin-left: 15px;">重置密码</a-button>
        </template>
      </a-table>
    </a-card>
    <AEuser :visible="aeuser.visible" :formTitile="aeuser.title" :formData="aeuser.formData" @close="closeAEuser" />
  </page-header-wrapper>
  
</template>

<script>
import {
  deleteAction,
  getAction,
  postAction,
  putAction1
} from '@/api/manage'
import AEuser from './modules/AEuser.vue'
export default {
  name: 'User',
  components: {
    AEuser
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
          pageNum: 1,
          pageSize: 10, // 默认每页显示数量
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
          showTotal: (total) => `共${total}条`, // 显示总数
          onChange: this.onPageChange.bind(this), //点击页码事件
          onShowSizeChange: this.onPageSizeChange.bind(this), // pageSize 变化的回调
          total: 0, //总条数
          current: 0,
          buildOptionText: (pageSizeOptions) => `${pageSizeOptions.value}条 / 页`
      },
      tableColumn: [
        {
          title: '序号',
          scopedSlots: {
            customRender: 'serial'
          },
          width: 60
        },
        {
          title: '账号',
          key: 'userName',
          dataIndex: 'userName',
          scopedSlots: {
            customRender: 'userName'
          }
        },
        {
          title: '姓名',
          key: 'realName',
          dataIndex: 'realName',
          scopedSlots: {
            customRender: 'realName'
          }
        },
        {
          title: '是否为管理员',
          key: 'isAdmin',
          dataIndex: 'isAdmin',
          scopedSlots: {
            customRender: 'isAdmin'
          }
        },
        {
          title: '第三方用户角色',
          key: 'thirdRole',
          dataIndex: 'thirdRole',
          scopedSlots: {
            customRender: 'thirdRole'
          }
        },
        {
          title: '工作单位',
          key: 'company',
          dataIndex: 'company',
          scopedSlots: {
            customRender: 'company'
          }
        },
        {
          title: '职务职称',
          key: 'positional',
          dataIndex: 'positional',
          scopedSlots: {
            customRender: 'positional'
          }
        },
        {
          title: '专业方向',
          key: 'specialDirect',
          dataIndex: 'specialDirect',
          scopedSlots: {
            customRender: 'specialDirect'
          }
        },
        {
          title: '创建人',
          key: 'createUserId',
          dataIndex: 'createUserId',
          scopedSlots: {
            customRender: 'createUserId'
          }
        },
        {
          title: '操作',
          key: 'optionColumn',
          dataIndex: 'optionColumn',
          scopedSlots: {
            customRender: 'optionColumn'
          }
        },
      ],
      tableData: [],
      aeuser: {
        visible: false,
        title: '',
        formData: {
          userName: undefined,
          passWord: undefined,
          realName: undefined,
          isAdmin: undefined,
          deducType: undefined,
          thirdRole: undefined,
          company: undefined,
          positional: undefined,
          specialDirect: undefined,
          // roles: [],
        }
      }
    }
  },
  computed: {
    
  },
  created () {
    
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList() {
      const param = {
          pageNum: this.pagination.current ?
              this.pagination.pageSize >= this.pagination.total ?
                  1 :
                  this.pagination.current :
              1,
          pageSize: this.pagination.pageSize,
          ...this.queryParam
      }
      getAction('/cssystem/user/getList',{
        ...param
      }).then((res) => {
          this.tableData = res.data
          // this.pagination.total = res.data.totalCount
          // console.log(this.tableData, 'this.tableData')
      })
    },
    // 分页No
    onPageChange(page, pageSize) {
        this.pagination.current = page
        this.getList(this.request_Url, this.parentId)
    },
    // 分页Size
    onPageSizeChange(current, pageSize) {
        this.pagination.pageSize = pageSize
        this.getList(this.request_Url, this.parentId)
    },
    queryData() {
        this.getList(this.request_Url, this.parentId)
    },
    resetQuery() {
        this.queryParam = {}
        this.getList(this.request_Url, this.parentId)
    },
    handleAdd() {
      this.aeuser.title = '新增'
      this.aeuser.visible = true
    },
    handleEdit(record) {
      this.aeuser.title = '编辑'
      this.aeuser.formData = record
      this.aeuser.visible = true
    },
    handleDelete(record) {
      this.$confirm({
        title: '温馨提示',
        content: '确定要删除该用户吗？',
        onOk: () => {
          deleteAction('/cssystem/user/delete?id='+record.id).then((res) => {
            if(res.code == 200 && res.data) {
              this.vueMessage('success', res.message)
              this.getList()
            } else {
              this.vueMessage('error', res.message)
            }
          })
        }
      })
    },
    handleResetpwdCpp (record) {
      this.$confirm({
        title: '温馨提示',
        content: '确定要重置密码吗？',
        onOk: () => {
          putAction1('/cssystem/user/reset?id='+record.id).then((res) => {
            if(res.code == 200 && res.data) {
              this.vueMessage('success', res.message)
              this.getList()
            } else {
              this.vueMessage('error', res.message)
            }
          })
        }
      })
    },
    vueMessage(type,msgText) {
      this.$message[type](msgText)
    },
    closeAEuser() {
      this.aeuser.title = ''
      this.aeuser.visible = false
      this.aeuser.formData = {
        userName: undefined,
        password: undefined,
        nickName: undefined,
        sex: 0,
        phoneNumber: undefined,
        email: undefined,
        roles: [],
        avatar: null,
      }
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>

</style>