sl-sfy-safety/src/views/system/user/user.vue

<template>
  <div class="user-page">
    <UserQuery :departmentList="departmentList" />
    <div class="user-list">
      <BasicTable
        :columns="columns"
        :data-source="userList"
        :row-key="(row) => row.userId"
        ref="basicTableRef"
        :pagination="{ total: totalCount, pageSize: pageSize, hideOnSinglePage: false }"
        :actionColumn="actionColumn"
        :tableSetting="{
          size: false,
          redo: false,
          fullscreen: false,
          striped: false,
          setting: false,
        }"
        @update:checked-row-keys="onCheckedRow"
        virtual-scroll
        @page-num-change="handlePageNumChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #tableTitle>
          <el-space align="center">
            <el-button type="primary" @click="openAddSingleDrawer">
              <template #icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
              添加用户
            </el-button>
            <el-button @click="openAddAdminDrawer" v-if="userStore?.info?.username === ROOT_USER">
              <template #icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
              添加租户管理员
            </el-button>
            <el-button
              color="#1890FF"
              @click="openAddMultipleDrawer"
              style="margin-left: 18px"
              plain
            >
              <template #icon>
                <el-icon>
                  <DocumentAdd />
                </el-icon>
              </template>
              批量导入
            </el-button>
          </el-space>
        </template>
      </BasicTable>
    </div>
    <CreateDrawer
      ref="createDrawerRef"
      :title="drawerTitle"
      @change="reloadTable"
      :departmentList="departmentList"
    />
    <ResetCodeDrawer ref="ResetCodeDrawerRef" :title="drawerTitle" @change="reloadTable" />
    <CreateAdminDrawer
      v-if="userStore?.info?.username === ROOT_USER"
      ref="createAdminDrawer"
      :title="createAdminTitle"
      @change="reloadTable"
      :editType="createAdminType"
    />
    <AddUser
      v-if="showAddPopover"
      :colseAddUser="setShowAddPopoverFalse"
      v-model="showAddPopover"
      class="add-popover"
      @change="reloadTable"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref, onMounted, onBeforeUnmount } from 'vue';
  import { BasicTable, BasicColumn } from '@/components/Table';
  import { Plus, DocumentAdd } from '@element-plus/icons-vue';
  import { roleAllList } from '@/api/system/role';
  import editIcon from '@/assets/images/table/table-edit.png';
  import deleteIcon from '@/assets/images/table/table-delete.png';
  import { useUserStore } from '@/store/modules/user';
  import CreateDrawer from './CreateDrawer.vue';
  import ResetCodeDrawer from './ResetCodeDrawer.vue';
  import CreateAdminDrawer from './CreateAdminDrawer.vue';
  import { columns } from './columns';
  import ActionColomns from './component/ActionColomns.vue';
  import AddUser from './component/AddUser.vue';
  // import { Search } from '@element-plus/icons-vue';
  import UserQuery from './component/UserQuery.vue';
  import useUser from './hooks/use-user';
  import { storeToRefs } from 'pinia';
  import { EditType } from './types';
  import { ROOT_USER } from './types';
  import { deptTreeList } from '@/api/auth/dept';
  import useSceneInfos from '@/hooks/useSceneInfos';
  import { ElMessage, ElMessageBox } from 'element-plus';
  // import { TreeProps,ElTreeItem } from 'element-plus/es/components/tree-v2/src/types';

  const sceneInfos = useSceneInfos();
  const { calculateTreeData } = sceneInfos;

  const useUserDetail = useUser();
  const { userList, page, pageSize, totalCount } = storeToRefs(useUserDetail);
  const { conditionSearch, userDel, getList, resetArgs } = useUserDetail;

  const userStore = useUserStore();

  const basicTableRef = ref();
  const rowKeys = ref([]);
  const rowKeysName = ref([]);
  const tableData = ref();
  const createDrawerRef = ref();
  const ResetCodeDrawerRef = ref();
  const createAdminDrawer = ref();
  const drawerTitle = ref('添加用户');
  const createAdminTitle = ref('添加租户管理员');
  const roleData = ref([]);
  const departmentList = ref<any[]>([]);

  const createAdminType = ref(EditType.create);

  const handlePageNumChange = (pageNum) => {
    console.log('pageNum', pageNum);

    page.value = pageNum;
    conditionSearch();
  };
  const handlePageSizeChange = (size) => {
    page.value = 1;
    pageSize.value = size;
    conditionSearch();
  };

  const actionColumn: BasicColumn = reactive({
    width: 150,
    title: '操作',
    prop: 'action',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(ActionColomns as any, {
        space: 20,
        color: '#629bf9',
        style: 'img',
        size: 16,
        actionIcons: [
          {
            label: '编辑',
            icon: editIcon,
            onClick: handleEdit.bind(null, record.row),
          },
          {
            label: '删除',
            icon: deleteIcon,
            onClick: handleDelete.bind(null, record.row),
          },
          {
            label: '重置密码',
            onClick: handleResetCode.bind(null, record.row),
          },
        ],
      });
    },
  });

  function onCheckedRow(keys) {
    rowKeys.value = keys;
    rowKeysName.value = tableData.value
      .filter((item) => {
        return keys.includes(item.id);
      })
      .map((item) => {
        return item.username;
      })
      .join('，');
  }

  function reloadTable() {
    conditionSearch();
  }

  const openAddSingleDrawer = () => {
    drawerTitle.value = '添加用户';
    const { openDrawer } = createDrawerRef.value;
    openDrawer();
  };
  const openAddAdminDrawer = () => {
    createAdminTitle.value = '添加租户管理员';
    const { openDrawer } = createAdminDrawer.value;
    openDrawer();
  };

  const showAddPopover = ref<boolean>(false);

  const openAddMultipleDrawer = () => {
    showAddPopover.value = true;
    console.log('showAddPopover', showAddPopover.value);
  };

  //传个方法到子组件，当上传成功后把showAddPopover的值改为false；
  const setShowAddPopoverFalse = () => {
    showAddPopover.value = false;
  };

  function handleEdit(record: Recordable) {
    console.log('点击了编辑', record);
    drawerTitle.value = '编辑用户';
    const { openDrawer } = createDrawerRef.value;
    openDrawer(record.userId);
  }

  function handleResetCode(record: Recordable) {
    drawerTitle.value = '重置密码';
    const { openDrawer } = ResetCodeDrawerRef.value;
    openDrawer(record.username, record.userId);
  }

  function handleDelete(record: Recordable) {
    const delDetail = {
      userId: record.userId,
      nickname: record.nickname,
      username: record.username,
      mobile: record.mobile,
      staffNo: record.staffNo,
    };
    ElMessageBox.confirm('确认要删除该用户吗', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        userDel(delDetail);
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  }

  onMounted(async () => {
    getList();
    deptTreeList().then((res) => {
      departmentList.value = calculateTreeData(
        res,
        { level: 3, valueKey: 'deptId', labelKey: 'deptName' },
        1,
      );
    });
    const res = await roleAllList();
    roleData.value = res.list.map((item: any) => {
      return {
        value: item.roleId,
        label: item.roleName,
      };
    });
  });

  onBeforeUnmount(() => {
    resetArgs();
  });
</script>
<style scoped>
  .user-page {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
  }

  .user-list {
    padding: 0 21px;
  }

  .add-popover {
    position: absolute;
    width: 593px;
    height: 435px;
    left: 50%;
    top: 50%;
    margin-top: -218px;
    margin-left: -297px;
    z-index: 99;
  }
</style>