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"
      hide-default-header
      height="70vh"
      item-value="id"
    >
      <template #bottom></template>
      <template v-slot:item.actions="{ item }">
        <v-btn color="primary" variant="text" @click="handleBinding(item)">{{ $t('enterprise.userManagement.jobBinding') }}</v-btn>
        <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>

  <CtDialog :visible="show" :widthType="2" titleClass="text-h6" :title="$t('enterprise.userManagement.selectBinding')" @close="handleClose" @submit="handleSubmit">
    <CtForm ref="formPageRef" :items="formItems"></CtForm>
  </CtDialog>
</template>

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

const { t } = useI18n()
const show = ref(false)
const total = ref(10)
const items = ref([])
const selected = ref([])
const formPageRef = ref()
const bindQuery = ref({})
const query = ref({
  pageNo: 1,
  pageSize: 10
})
const postList = ref([])
const headers = [
  { title: t('login.username'), key: 'name' },
  { title: t('enterprise.userManagement.affiliatedEnterprise'), key: 'enterpriseAnotherName' },
  { title: t('enterprise.userManagement.post'), key: 'post.nameCn' },
  { 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'), sortable: false },
  { title: t('enterprise.userManagement.lastLoginTime'), key: 'loginDate', value: item => timesTampChange(item.loginDate), sortable: false },
  { title: t('common.actions'), key: 'actions' }
]
const formItems = ref({
  options: [
    {
      type: 'autocomplete',
      key: 'postId',
      value: null,
      label: '岗位 *',
      noAttach: false,
      itemText: 'nameCn',
      itemValue: 'id',
      rules: [v => !!v || '请选择要绑定的岗位'],
      items: []
    }
  ]
})

// 获取企业用户列表
const getData = async () => {
  const { list, total: number } = await getEnterpriseUserList(query.value)
  items.value = list
  total.value = number
  // 岗位列表
  const res = await getEnterprisePostPage({ pageNo: 1, pageSize: 100 })
  postList.value = res.list
}
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()
  })
}

// 绑定岗位
const handleBinding = async (item) => {
  if (!postList.value.length) {
    Snackbar.warning(t('enterprise.userManagement.postNodataToAdd'))
    return
  }
  bindQuery.value.id = item.id
  const obj = formItems.value.options.find(e => e.key === 'postId')
  obj.items = postList.value
  obj.value = item.postId
  show.value = true
}

const handleClose = () => {
  show.value = false
  query.value = {}
}

const handleSubmit = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const postId = formItems.value.options.find(e => e.key === 'postId').value
  await systemUserBindingPost(bindQuery.value.id, postId)
  Snackbar.success(t('common.operationSuccessful'))
  handleClose()
  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>