web-template-vue3-js/src/views/user/admin/index.vue

<template>
  <div class="main animate__animated animate__backInRight">
    <custom-search-bar v-model="searchForm" :fields="fields.filter((f) => f.filter)" @search="search"></custom-search-bar>
    <custom-button-bar :fields="buttonFields" @add="toAdd"></custom-button-bar>
    <custom-table :data="data" :fields="fields" @search="search" :total="total" :opera="opera" @edit="toEdit" @changeUse="toChangeUse" @delete="toDelete" @rp="toResetPwd"></custom-table>
    <el-dialog v-model="dialog" :title="$t('pages.menus.dialogTitle')" :destroy-on-close="false" @close="toClose">
      <custom-form v-model="form" :fields="formFields" @save="toSave">
        <template #is_use>
          <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
        </template>
        <template #role>
          <el-option v-for="i in roleList" :key="i._id" :label="i.name" :value="i.code"></el-option>
        </template>
      </custom-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { AdminStore } from '@/store/api/user/admin'
import { LoginStore } from '@/store/api/login'
import { RoleStore } from '@/store/api/system/role'
import { DictDataStore } from '@/store/api/system/dictData'
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
const store = AdminStore()
const loginStore = LoginStore()
const dictDataStore = DictDataStore()
const roleStore = RoleStore()
const { t } = useI18n()
const loading = ref(false)
let skip = 0
let limit = inject('limit')
const data = ref([])
const total = ref(0)
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})

const fields = [
  { label: t('pages.admin.account'), model: 'account', filter: true },
  { label: t('pages.admin.nick_name'), model: 'nick_name' },
  { label: t('pages.admin.role'), model: 'role', format: (i) => getRole(i) },
  { label: t('pages.admin.is_super'), model: 'is_super', format: (i) => (i === '0' ? t('common.yes') : t('common.no')) },
  { label: t('pages.admin.is_use'), model: 'is_use', format: (i) => getDict(i) }
]
const opera = [
  { label: t('common.update'), method: 'edit', display: (i) => i.is_super !== '0' },
  // { label: t('pages.admin.bind'), method: 'bind' },
  { label: t('pages.admin.rp'), method: 'rp', type: 'warning', confirm: true, confirmWord: t('pages.admin.rpConfirm') },
  {
    label: t('common.is_use_disabled'),
    method: 'changeUse',
    type: 'warning',
    confirm: true,
    confirmWord: t('pages.admin.changeToDisabled'),
    display: (i) => i.is_use === '0' && i.is_super !== '0'
  },
  {
    label: t('common.is_use_abled'),
    method: 'changeUse',
    type: 'success',
    confirm: true,
    confirmWord: t('pages.admin.changeToAbled'),
    display: (i) => i.is_use === '1' && i.is_super !== '0'
  },
  { label: t('common.delete'), method: 'delete', confirm: true, type: 'danger', display: (i) => i.is_super !== '0' }
]
const buttonFields = [{ label: t('common.add'), method: 'add' }]
const searchForm = ref({})
const search = async (query = { skip: 0, limit }) => {
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value, is_del: '0' }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data
    total.value = res.total
  }
}
const isUseList = ref([])
const roleList = ref([])
const searchOther = async () => {
  const result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) {
    isUseList.value = result.data
  }
  const roleResult = await roleStore.query()
  if ($checkRes(roleResult)) {
    roleList.value = roleResult.data
  }
}

const toDelete = async (data) => {
  const res = await store.del(data._id)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const userType = 'Admin'
const toResetPwd = async (data) => {
  const res = await loginStore.rpNoNewPassword({ type: userType, _id: data._id })
  if ($checkRes(res, true)) {
    ElMessageBox.confirm(`新密码为:${res.data}`, '请确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  }
}
const toChangeUse = async (data) => {
  const udata = { _id: data._id, is_use: data.is_use === '0' ? '1' : '0' }
  const res = await store.update(udata)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const dialog = ref(false)
const form = ref({})
const defaultForm = { is_use: '0' }

const formFields = ref([])
const formFieldsForCreate = [
  { label: t('pages.admin.account'), model: 'account' },
  { label: t('pages.admin.nick_name'), model: 'nick_name' },
  { label: t('pages.admin.password'), model: 'password', type: 'password' },
  { label: t('pages.admin.is_use'), model: 'is_use', type: 'radio' }
]
const formFieldsForUpdate = [
  { label: t('pages.admin.account'), model: 'account' },
  { label: t('pages.admin.nick_name'), model: 'nick_name' },
  { label: t('pages.admin.is_use'), model: 'is_use', type: 'radio' }
]
const roleField = { label: t('pages.admin.role'), model: 'role', type: 'select' }
const toAdd = () => {
  formFields.value = formFieldsForCreate
  formFields.value.push(roleField)
  form.value = cloneDeep(defaultForm)
  dialog.value = true
}
const toEdit = (data) => {
  formFields.value = cloneDeep(formFieldsForUpdate)
  form.value = data
  if (data.is_super !== '0') formFields.value.push(roleField)
  dialog.value = true
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  let res
  if (get(data, '_id')) res = await store.update(data)
  else res = await store.create(data)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
const getRole = (data) => {
  const res = roleList.value.find((f) => f.code === data)
  return get(res, 'name')
}
const getDict = (data) => {
  const res = isUseList.value.find((f) => f.value == data)
  return get(res, 'label')
}
const toClose = () => {
  form.value = {}
  dialog.value = false
}
</script>
<style scoped></style>