menduner/src/views/recruit/teacher/organization/index.vue

<template>
  <CtFilter :items="formItems" @reset="handleReset" @search="handleSearch">
    <template #appendBtn>
      <v-btn class="ml-3 elevation-5" color="#00897B" @click="handleAdd">
        <v-icon left>mdi-plus</v-icon>
        {{ t('common.add') }} 
      </v-btn>
    </template>
  </CtFilter>

  <v-card class="pa-5 card-box mt-3">
    <CtTable
      :items="items"
      :headers="headers"
      :loading="loading"
      :showPage="true"
      :total="total"
      :page-info="pageInfo"
      itemKey="id"
      :isTools="false"
      @pageHandleChange="handleChangePage"
    >
      <template #status="{ item }">
        <v-chip :color="item.status === '0' ? 'success' : 'error'" size="small" label>{{ item.statusName }}</v-chip>
      </template>
      <template #actions="{ item }">
        <v-btn variant="text" color="primary" @click="handleEdit(item)">编辑</v-btn>
        <v-btn variant="text" color="error" @click="handleDel(item)">删除</v-btn>
      </template>
    </CtTable>
  </v-card>

  <CtDialog :visible="show" :widthType="2" :title="editItem ? '编辑院系' : '新增院系'" @close="show = false" @submit="handleSubmit">
    <FormPage ref="formPageRef" :editItem="editItem" />
  </CtDialog>
</template>

<script setup>
defineOptions({ name: 'organization' })
import { ref } from 'vue'

import { useI18n } from '@/hooks/web/useI18n'
import Confirm from '@/plugins/confirm'
import Snackbar from '@/plugins/snackbar'
import { formatDate } from '@/utils/date'
import { deleteOrganization, getOrganizationPage } from '@/api/school'
import FormPage from './FormPage.vue'


const { t } = useI18n()
const total = ref(10)
const items = ref([])
const show = ref(false)
const loading = ref(false)
const formPageRef = ref()
const editItem = ref(null)

// 检索框
const formItems = ref({
  options: [
		{
      type: 'text',
      key: 'name',
      value: '',
      label: '院系名称',
			clearable: true,
			hideDetails: true,
			width: 200
    }
  ]
})

const query = ref({
  name: null
})
const pageInfo = ref({
  pageNo: 1,
  pageSize: 10,
  type: 0
})

const headers = [
  { title: '院系名称', key: 'name', align: 'left', sortable: false },
  { title: '创建时间', key: 'createTime', value: (e) => formatDate(e.createTime), sortable: false },
  { title: t('common.actions'), key: 'actions', sortable: false }
]
// 列表
const getPage = async () => {
  loading.value = true
  try {
    const res = await getOrganizationPage({ ...pageInfo.value, ...query.value })
    items.value = res.list || []
    total.value = res.total
  } finally {
    loading.value = false
  }
}

// 检索
const handleSearch = (obj) => {
  pageInfo.value.pageNo = 1
  query.value = obj
  getPage()
}

// 重置
const handleReset = (obj) => {
  pageInfo.value.pageNo = 1
  query.value = obj
  getPage()
}

// 新增
const handleAdd = () => {
  editItem.value = null
  show.value = true
}

// 编辑
const handleEdit = (item) => {
  editItem.value = item
  show.value = true
}

// 新增、编辑提交
const handleSubmit = async () => {
	await formPageRef.value.submit()
	show.value = false
	getPage()
}

// 删除
const handleDel = async (item) => {
  Confirm(t('common.confirmTitle'), '是否确定删除？').then(async () => {
    await deleteOrganization(item.id)
    Snackbar.success('删除成功')
    getPage()
  })
}

// 分页
const handleChangePage = (index) => {
  pageInfo.value.pageNo = index
  getPage()
}

getPage()
</script>