learn_admin/src/views/user/student/index.vue

<template>
  <div class="main animate__animated animate__backInRight">
    <custom-search-bar
      v-model="searchForm"
      :fields="fields.filter((f) => f.filter)"
      @search="search"
      @reset="toReset"
    ></custom-search-bar>
    <custom-table
      :data="data"
      :fields="fields"
      @search="search"
      :total="total"
      :opera="opera"
      @view="toView"
      @exam="toExam"
      @delete="toDelete"
    >
      <template #role="{ row }">
        <div class="tags">
          <el-tag type="primary">{{ getRole(row.role) }}</el-tag>
        </div>
      </template>
    </custom-table>
    <el-dialog
      v-model="dialog.show"
      :title="dialog.title"
      :destroy-on-close="false"
      @close="toClose"
    >
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <user></user>
        </el-col>
        <el-col :span="24" v-if="dialog.type == '2'">
          <custom-form
            v-model="examForm"
            :fields="examFormFields"
            :rules="examRules"
            @save="toExamSave"
          >
            <template #status>
              <el-option
                v-for="i in statusList"
                :key="i._id"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </template>
          </custom-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
// 组件
import user from './parts/user.vue'
// API 引用
import { StudentStore } from '@/store/api/user/student'
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 = StudentStore()
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.user.account'), model: 'account', filter: true },
  { label: t('pages.user.nick_name'), model: 'nick_name', filter: true },
  { label: t('pages.user.email'), model: 'email' },
  { label: t('pages.user.phone'), model: 'phone', filter: true },
  { label: t('pages.user.role'), model: 'role', custom: true },
  { label: t('pages.user.status'), model: 'status', format: (i) => getDict(i) }
]
const opera = [
  { label: t('common.view'), method: 'view' },
  { label: t('common.exam'), method: 'exam', type: 'warning', display: (i) => i.status === '0' },
  {
    label: t('common.delete'),
    method: 'delete',
    confirm: true,
    type: 'danger'
  }
]
const searchForm = ref({})
const dialog = ref({ type: '1', show: false, title: t('pages.user.dialogTitle') })
// 查询
const search = async (query = { skip: 0, limit }) => {
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data
    total.value = res.total
  }
}
// 表单验证
const ruleFormRef = ref()
const form = ref({})
// 审核
const examFormFields = [{ label: t('pages.user.status'), model: 'status', type: 'select' }]
const examRules = reactive({
  status: [{ required: true, message: t('common.statusMessage'), trigger: 'blur' }]
})
const examForm = ref({})
// 字典表
const statusList = ref([])
const roleList = ref([])
const genderList = ref([])
const searchOther = async () => {
  let result
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 性别
  result = await dictDataStore.query({ code: 'gender', is_use: '0' })
  if ($checkRes(result)) genderList.value = result.data
  // 角色
  result = await roleStore.query({ is_use: '0' })
  if ($checkRes(result)) roleList.value = result.data
}

const toDelete = async (data) => {
  const res = await store.del(data._id)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const getRole = (data) => {
  const res = roleList.value.find((f) => f.code === data)
  return get(res, 'name')
}
const getDict = (data) => {
  const res = statusList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 查看
const toView = async (data) => {
  form.value = data
  dialog.value = { type: '1', show: true, title: t('pages.user.dialogTitle') }
}
// 审核
const toExam = (data) => {
  examForm.value = data
  dialog.value = { type: '2', show: true, title: t('pages.user.examDialogTitle') }
}
// 审核保存
const toExamSave = async () => {
  const data = cloneDeep(examForm.value)
  let res = await store.update(data)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
const toClose = () => {
  form.value = {}
  dialog.value = { show: false }
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
// provide
provide('cloneDeep', cloneDeep)
provide('ruleFormRef ', ruleFormRef)
provide('form', form)
// 字典
provide('statusList', statusList)
provide('genderList', genderList)
// 方法
provide('getRole', getRole)
</script>
<style scoped lang="scss">
.tags {
  display: flex;
  justify-content: center;
  grid-gap: 0.5rem;
  gap: 0.5rem;
}
</style>