menduner/src/views/recruit/enterprise/systemManagement/userManagement/index.vue

<template>
  <v-card class="pa-5 card-box">
    <div class="mb-3">
      <v-btn color="primary" variant="tonal" :disabled="!selected.length" @click="handleAction('all', 0, {})">{{ $t('enterprise.userManagement.enable') }}</v-btn>
      <v-btn class="ml-3" color="primary" variant="tonal" :disabled="!selected.length" @click="handleAction('all', 1, {})">{{ $t('enterprise.userManagement.disable') }}</v-btn>
    </div>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="items"
      show-select
      hide-default-header
      height="70vh"
      item-value="id"
    >
      <template #bottom></template>
      <template v-slot:item.actions="{ item }">
        <v-btn v-if="item.status === '1' && item.userType !== '1'" color="primary" variant="text" @click="handleAction('', 0, item)">{{ $t('enterprise.userManagement.enable') }}</v-btn>
        <v-btn v-if="item.status === '0' && item.userType !== '1'" color="primary" variant="text" @click="handleAction('', 1, item)">{{ $t('enterprise.userManagement.disable') }}</v-btn>
      </template>
    </v-data-table>
    <CtPagination
      :total="total"
      :page="query.pageNo"
      :limit="query.pageSize"
      @handleChange="handleChangePage"
    ></CtPagination>
  </v-card>
</template>

<script setup>
defineOptions({ name: 'system-management-user'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { useI18n } from '@/hooks/web/useI18n'
import { getEnterpriseUserList, systemUserEnable, systemUserDisable } from '@/api/enterprise'
import Confirm from '@/plugins/confirm'
import Snackbar from '@/plugins/snackbar'

const { t } = useI18n()
const total = ref(10)
const items = ref([])
const selected = ref([])
const query = ref({
  pageNo: 1,
  pageSize: 10
})

const headers = [
  { title: t('login.username'), key: 'name' },
  { title: t('enterprise.userManagement.affiliatedEnterprise'), key: 'enterpriseName' },
  { title: t('enterprise.userManagement.phone'), key: 'phone' },
  { title: t('enterprise.userManagement.email'), key: 'email' },
  { title: t('enterprise.userManagement.accountType'), key: 'userType', value: item => item.userType === '1' ? t('enterprise.userManagement.administrators') : t('enterprise.userManagement.regularUser')},
  { title: t('enterprise.userManagement.lastLoginTime'), key: 'loginDate', value: item => timesTampChange(item.loginDate) },
  { title: t('common.actions'), key: 'actions' }
]

// 获取企业用户列表
const getData = async () => {
  const { list, total: number } = await getEnterpriseUserList(query.value)
  items.value = list
  total.value = number
}
getData()

const handleChangePage = (e) => {
  query.value.pageNo = e
  getData()
}

const apiList = [
  { api: systemUserEnable, desc: t('enterprise.userManagement.enableAccount') }, 
  { api: systemUserDisable, desc: t('enterprise.userManagement.disableAccount') }
]

// 启用、禁用账户
const handleAction = (type, index, item) => {
  const ids = type ? selected.value : [item.id]
  Confirm(t('common.confirmTitle'), apiList[index].desc).then(async () => {
    await apiList[index].api(ids)
    Snackbar.success(t('common.operationSuccessful'))
    selected.value = []
    query.value.pageNo = 1
    getData()
  })
}
</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important
}
:deep(.v-selection-control__input) {
  color: #767778
}
</style>