Files
pengchen-exam-vue/src/views/system/white/index.vue

125 lines
4.1 KiB
Vue

<template>
<ContentWrap>
<!-- 搜索栏 -->
<el-form :inline="true" :model="queryParams" class="mb-4">
<el-form-item label="名称"> <el-input v-model="queryParams.name" placeholder="请输入白名单名称" clearable class="!w-240px" @keyup.enter="getList" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">
<Icon icon="ep:search" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" /> 重置
</el-button>
<el-button type="success" plain @click="openForm('create')">
<Icon icon="ep:plus" />
新增 </el-button>
</el-form-item>
</el-form>
<!-- 表格区域 -->
<el-table :data="list" v-loading="loading" border stripe>
<el-table-column prop="id" label="ID" align="center" width="80" />
<el-table-column prop="name" label="名称" align="center" />
<el-table-column label="操作" align="center" width="180">
<template #default="scope">
<el-button type="primary" link @click="openForm('update', scope.row.id)">
<Icon icon="ep:edit" /> 修改
</el-button>
<el-button type="danger" link @click="handleDelete(scope.row.id)">
<Icon icon="ep:delete" /> 删除
</el-button>
</template>
</el-table-column>
</el-table>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 新增/修改弹窗 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
<el-form ref="formRef" :model="form" label-width="80px">
<el-form-item label="名称" prop="name" required>
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</template>
</el-dialog>
</ContentWrap> </template> <script lang="ts" setup> import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as WhiteApi from '@/api/system/whiteList'
// 你可以把 API 封装在这个文件里 // 数据
const loading = ref(false)
const list = ref([])
const total = ref(0)
const queryParams = reactive({ pageNo: 1, pageSize: 10, name: '' })
// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref()
const form = reactive({ id: '', name: '', path: '', remark: '' })
// 获取列表
const getList = async () => { loading.value = true
const params = {
...queryParams,
}
try { const res = await WhiteApi.getAppWhiteListCenter(params)
list.value = res.list
total.value = res.total
} finally
{
loading.value = false
} }
// 重置
const resetQuery = () => {
queryParams.name = ''
getList()
}
// 打开弹窗
const openForm = async (type: string, id?: string) => {
dialogVisible.value = true
if (type === 'create') {
dialogTitle.value = '新增白名单'
Object.assign(form, { id: '', name: '', path: '', remark: '' })
} else {
dialogTitle.value = '修改白名单'
const data = await WhiteApi.getWhite(id)
Object.assign(form, data) }
} // 提交
const submitForm = async () => {
if (!form.name) {
ElMessage.warning('请输入名称')
return
}
if (form.id) {
await WhiteApi.updateAppWhite(form)
ElMessage.success('修改成功')
} else {
await WhiteApi.addAppWhite(form)
ElMessage.success('新增成功')
}
dialogVisible.value = false
getList()
}
// 删除
const handleDelete = async (id: string) => {
ElMessageBox.confirm('确认删除该白名单?', '提示', {
type: 'warning'
}).then(async () => {
await WhiteApi.delWhite(id)
ElMessage.success('删除成功')
getList() }) }
// 初始化
getList()
</script>