hlt_gis_admin/src/views/systemAdmin/system/account/index.vue

<template>
  <div class="p-4">
    <div class="account-body">
      <BasicTable @register="registerTable" class="basic-table">
        <template #toolbar>
          <Button type="primary" @click="handleAdd">
            新增用户
          </Button>
          <!-- 接口不支持多选后统一绑定角色，所以暂时隐藏 -->
          <!-- <Button type="primary" @click="handlePermissionEdit">
            角色绑定
          </Button> -->
        </template>
        <template #SEX="{ record }">
          <span>{{ record.SEX ? '男' : '女' }}</span>
        </template>
        <template #action="{ record }">
          <TableAction :actions="[
            {
              label: '编辑',
              tooltip: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              tooltip: '删除',
              color: 'error',
              onClick: handleDelete.bind(null, record),
            },
          ]" />
        </template>
      </BasicTable>
    </div>
    <AccountModal1 v-if="ifShowModal" :title="modalTitle" :formData="formData" @closeModal="ifShowModal = false"
      @onSubmit="onSubmit" />
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode } from 'vue';

// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import AccountModal1 from './AccountModal1.vue';
// 操作用户数据api
import { deleteUser, getAccountList } from '/@/api/system/system';

import { FormOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { Button, Modal, message } from 'ant-design-vue';
import { getUserInfoByLoginCode } from '/@/api/system/system';
import { getUserIdInfo } from '/@/api/sys/user';
import { session } from '/@/utils/Memory';

export default defineComponent({
  name: 'account',
  components: { BasicTable, TableAction, Button, AccountModal1, ExclamationCircleOutlined },
  setup() {
    const getAllData = () => {
      return new Promise((resolve) => {
        let params = {
          keyStr: '',
          page: 1,
          pageSize: 100000000,
        }
        getAccountList(params).then(res => {
          if (res.items?.length) {
            resolve(res.items)
          } else {
            message.info('未查询到用户数据')
            resolve([])
          }
        })
      })
    }
    const columns = [
      {
        title: '用户姓名',
        dataIndex: 'NAME',
        align: 'center'
      },
      {
        title: '登录名',
        dataIndex: 'LOGIN_NAME',
        align: 'center'
      },
      // {
      //   title: '用户ID',
      //   dataIndex: 'EMPLOYEE_ID',
      //   align: 'center'
      // },
      {
        title: '性别',
        dataIndex: 'SEX',
        align: 'center',
        slots: { customRender: 'SEX' },
      },
    ]
    //注册表格
    const [
      registerTable,
      { reload },
    ] = useTable({
      title: '用户列表', //'菜单列表'
      api: getAllData, //加载数据
      // dataSource: [],
      columns: columns,
      useSearchForm: false,     //开启搜索区域
      bordered: false,
      striped: false,
      showTableSetting: true,  // 显示表格设置
      tableSetting: {
        redo: true,
        size: true,
        setting: false,
        fullScreen: false
      },
      canResize: true,
      showIndexColumn: true,
      pagination: {
        // pageSize: 10,
        hideOnSinglePage: false
      },
      actionColumn: {
        width: 100,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      // rowSelection: {
      //   type: 'checkbox',
      // },
    });
    const formData = ref(null)
    const ifShowModal = ref(false)
    const modalTitle = ref('新增用户')
    //绑定权限
    const handlePermissionEdit = () => {

    }
    // 新增
    const handleAdd = () => {
      formData.value = {
        loginName: "",
        userName: "",
        pwd: '',
        mobile: "",
        sex: '0',
        sszw: "",
        ssgw: "",
        userjs: [],
        userid: ""
      }
      modalTitle.value = '新增用户'
      ifShowModal.value = true
    }
    // 编辑
    const handleEdit = (record) => {
      getUserInfoByLoginCode(record.LOGIN_NAME).then(res => {
        if (res.user?.userid) {
          getUserIdInfo(res.user.userid).then(roleRes => {
            //组合信息传给修改弹窗
            formData.value = {
              loginName: res.user.loginName,
              userName: res.user.userName,
              pwd: "",
              mobile: res.user.mobile,
              sex: res.user.sex,
              ssjg: res.department[0]?.departid || '',
              sszw: res.zw[0]?.departid || '',
              ssgw: res.gw[0]?.id || '',
              userjsArr: roleRes,
              userjs: roleRes.join(';'),
              userid: res.user.userid
            }
            modalTitle.value = '修改用户'
            ifShowModal.value = true
          })
        } else {
          message.error('用户信息查询失败')
        }
      })
    }
    // 删除
    const handleDelete = (record) => {
      if(record.EMPLOYEE_ID === session.getItem('userId')){
        message.error('不能删除当前登录用户');
        return;
      }
      Modal.confirm({
        title: '删除提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定删除该用户？',
        centered: true,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: (() => {
          deleteUser(record.EMPLOYEE_ID).then(res => {
            reload();
          })
        })
      });
    }
    //新增或修改的提交
    const onSubmit = (e) => {
      ifShowModal.value = false
      e && reload();
    }

    return {
      formData,
      ifShowModal,
      modalTitle,
      registerTable,
      handlePermissionEdit,
      handleAdd,
      handleEdit,
      handleDelete,
      onSubmit
    };
  },
});
</script>

<style lang="less" scoped>
.p-4 {
  height: 100%;

  .account-body {
    padding: 0 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;

    .basic-table {
      height: 100%;

      ::v-deep .ant-table-title {
        padding: 0 !important;

        .vben-basic-title {
          font-family: '阿里巴巴普惠体 2.0';
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }

      }
    }
  }
}
</style>