<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>