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>
        <a-upload action="" :customRequest="handleImport" accept=".xlsx,.xls" :showUploadList="false">
          <a-button icon="import" type="primary" style="margin-right: 10px">导入</a-button>
        </a-upload>
      </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()
    },
    async handleImport(file) {
      try {
        const formData = new FormData()
        formData.append('file', file)
        await this.$http({
          url: '/upload',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        this.$message.success('导入成功')
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
</style>