CEES-manage/src/views/system/departUser/components/DepartUserInfoTab.vue

<template>
  <!--引用表格-->
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="selectAddUser">添加已有用户</a-button>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="createUser">新建用户</a-button>
      <template v-if="selectedRowKeys.length > 0">
        <a-dropdown>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="onUnlinkDepartUserBatch">
                <icon icon="bx:bx-unlink"/>
                <span>取消关联</span>
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>
            <span>批量操作 </span>
            <icon icon="akar-icons:chevron-down"/>
          </a-button>
        </a-dropdown>
      </template>
    </template>
    <!-- 插槽：行内操作按钮 -->
    <template #action="{ record }">
      <TableAction
          :actions="getTableAction(record)"
          :dropDownActions="getDropDownAction(record)"
      />
    </template>
  </BasicTable>
  <UserDrawer @register="registerDrawer" @success="onUserDrawerSuccess"/>
  <DepartRoleUserAuthDrawer @register="registerUserAuthDrawer"/>
  <UserSelectModal rowKey="id" @register="registerSelUserModal" @getSelectResult="onSelectUserOk"/>
</template>

<script lang="ts" setup>
import { computed, inject, ref, unref, watch } from 'vue'
import { ActionItem, BasicTable, TableAction } from '/@/components/Table'
import { useModal } from '/@/components/Modal'
import { useDrawer } from '/@/components/Drawer'
import { useListPage } from '/@/hooks/system/useListPage'

import UserDrawer from '/@/views/system/user/UserDrawer.vue'
import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue'
import DepartRoleUserAuthDrawer from './DepartRoleUserAuthDrawer.vue'
import { departUserList, linkDepartUserBatch, unlinkDepartUserBatch } from '../depart.user.api'
import { userInfoColumns, userInfoSearchFormSchema } from '../depart.user.data'
import { ColEx } from '/@/components/Form/src/types'

const prefixCls = inject('prefixCls')
const props = defineProps({
  data: { require: true, type: Object },
})
// 当前选中的部门ID，可能会为空，代表未选择部门
const departId = computed(() => props.data?.id)

// 自适应列配置
const adaptiveColProps: Partial<ColEx> = {
  xs: 24, // <576px
  sm: 24, // ≥576px
  md: 24, // ≥768px
  lg: 12, // ≥992px
  xl: 12, // ≥1200px
  xxl: 8, // ≥1600px
}
// 列表页面公共参数、方法
const { tableContext, createMessage } = useListPage({
  tableProps: {
    api: departUserList,
    columns: userInfoColumns,
    canResize: false,
    formConfig: {
      schemas: userInfoSearchFormSchema,
      baseColProps: adaptiveColProps,
      labelAlign:"left",
      labelCol: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 9,
        xl: 7,
        xxl: 5,
      },
      wrapperCol: {},
      // 操作按钮配置
      actionColOptions: {
        ...adaptiveColProps,
        style: { textAlign: 'left' },
      },
    },
    // 请求之前对参数做处理
    beforeFetch(params) {
      params.depId = departId.value
    },
  },
})

// 注册 ListTable
const [registerTable, {
  reload,
  setProps,
  setLoading,
  updateTableDataRecord,
}, { rowSelection, selectedRowKeys }] = tableContext

watch(() => props.data, () => reload())
//注册drawer
const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer()
const [registerUserAuthDrawer, userAuthDrawer] = useDrawer()
// 注册用户选择 modal
const [registerSelUserModal, selUserModal] = useModal()

// 清空选择的行
function clearSelection() {
  selectedRowKeys.value = []
}

// 查看部门角色
function showDepartRole(record) {
  userAuthDrawer.openDrawer(true, { userId: record.id, departId })
}

// 创建用户
function createUser() {
  if (!departId.value) {
    createMessage.warning('请先选择一个部门')
  } else {
    openDrawer(true, {
      isUpdate: false,
      departDisabled: true,
      // 初始化负责部门
      nextDepartOptions: { value: props.data?.key, label: props.data?.title },
      record: {
        activitiSync: 1,
        userIdentity: 1,
        selecteddeparts: departId.value,
      },
    })
  }
}

// 查看用户详情
function showUserDetail(record) {
  openDrawer(true, {
    record,
    isUpdate: true,
    departDisabled: true,
    showFooter: false,
  })
}

// 编辑用户信息
function editUserInfo(record) {
  openDrawer(true, { isUpdate: true, record, departDisabled: true })
}

// 选择添加已有用户
function selectAddUser() {
  selUserModal.openModal()
}

// 批量取消关联部门和用户之间的关系
async function unlinkDepartUser(idList, confirm) {
  if (!departId.value) {
    createMessage.warning('请先选择一个部门')
  } else {
    setLoading(true)
    let userIds = unref(idList).join(',')
    try {
      await unlinkDepartUserBatch({ depId: departId.value, userIds }, confirm)
      return reload()
    } finally {
      setLoading(false)
    }
  }
  return Promise.reject()
}

// 批量取消关联事件
async function onUnlinkDepartUserBatch() {
  try {
    await unlinkDepartUser(selectedRowKeys, true)
    // 批量删除成功后清空选择
    clearSelection()
  } catch (e) {
  }
}

// 选择用户成功
async function onSelectUserOk(options, userIdList) {
  if (userIdList.length > 0) {
    try {
      setLoading(true)
      await linkDepartUserBatch(departId.value, userIdList)
      reload()
    } finally {
      setLoading(false)
    }
  }
}

/**
 * 用户抽屉表单成功回调
 */
function onUserDrawerSuccess({ isUpdate, values }) {
  isUpdate ? updateTableDataRecord(values.id, values) : reload()
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    { label: '编辑', onClick: editUserInfo.bind(null, record) },
  ]
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    { label: '部门角色', onClick: showDepartRole.bind(null, record) },
    { label: '用户详情', onClick: showUserDetail.bind(null, record) },
    {
      label: '取消关联',
      color: 'error',
      popConfirm: {
        title: '确认取消关联吗？',
        confirm: unlinkDepartUser.bind(null, [record.id], false),
      },
    },
  ]
}
</script>