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

<template>
  <page-header-wrapper>
    <a-card class="my-card">
      <AntQueryTable
        ref="user-table"
        height="100%"
        :queryConfig="queryConfig"
        :tableConfig="tableConfig"
        :pageConfig="pageConfig"
        :showTool="showTool"
      >
        <template #toolbar-left>
          <a-button icon="plus" type="primary" style="margin-right: 10px" @click="handleOpenAddModal">新增</a-button>
        </template>
        <template #tablecell-action="{ record }">
          <a-button size="small" type="primary" @click="handleOpenEditModal(record)">编辑</a-button>
          <a-button size="small" type="danger" @click="handleDelete(record)" style="margin-left: 15px">删除</a-button>
        </template>
      </AntQueryTable>
    </a-card>
    <AntFormModal
      :visible.sync="AEModal.visible"
      :title="AEModal.title"
      :formItems="AEModal.formItems"
      :formRules="AEModal.formRules"
      :formData="AEModal.formData"
      :onSubmit="handleSubmitAE"
      @success="handleSubmitAESuccess"
    >
    </AntFormModal>
  </page-header-wrapper>
</template>

<script>
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
export default {
  name: 'User',
  data() {
    return {
      queryConfig: {
        items: [{ label: '关键字', prop: 'filter' }],
      },
      tableConfig: {
        table: { rowKey: 'id' },
        query: (params) => getAction('/system/user/list', params),
        columns: [
          { dataIndex: 'serial' },
          { title: '账号', dataIndex: 'userName' },
          { title: '姓名', dataIndex: 'nickName' },
          { title: '角色', dataIndex: 'roleName', width: 'auto', minWidth: 160 },
          { title: '邮箱', dataIndex: 'email' },
          { title: '手机号', dataIndex: 'phoneNumber' },
          { title: '性别', dataIndex: 'sex', customRender: (text) => ['男', '女'][text] },
          { dataIndex: 'action' },
        ],
      },
      pageConfig: true,
      showTool: true,

      AEModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          { label: '账号', prop: 'userName' },
          { label: '姓名', prop: 'nickName' },
          {
            label: '角色',
            prop: 'roles',
            component: 'AntOriginSelect',
            options: {
              dataSource: () =>
                getAction('system/role/getList', { pageSize: 999 }).then((res) => ({ data: res.data.data })),
              labelKey: 'roleName',
              multiple: true,
            },
          },
          { label: '邮箱', prop: 'email' },
          { label: '手机号', prop: 'phoneNumber' },
          {
            label: '性别',
            prop: 'sex',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { title: '男', id: 0 },
                  { title: '女', id: 1 },
                ],
              }),
            },
          },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.title = '新增用户'
      this.AEModal.mode = 'add'
      this.AEModal.formData = {}
      this.AEModal.visible = true
    },
    handleOpenEditModal(record) {
      this.AEModal.title = '编辑用户'
      this.AEModal.mode = 'edit'
      this.AEModal.formData = { ...record }
      this.AEModal.visible = true
    },
    handleSubmitAE(formData) {
      if (this.AEModal.mode === 'add') {
        return postAction('/system/user/create', formData)
      }
      if (this.AEModal.mode === 'edit') {
        return putAction('/system/user/update', formData)
      }
    },
    handleSubmitAESuccess() {
      this.$refs['user-table'].commitAction('query')
    },
    async handleDelete(record) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该用户吗？' })
        const res = await deleteAction('/system/user/delete?userId=' + record.id)
        this.$message.success(res.message)
        this.$refs['user-table'].commitAction('query')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

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