element-puls实现增删改查

<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <!-- 查询部分 -->
        <div class="flex justify-between">
          <div>
            <el-form :model="searchForm">
              <el-form-item label="关键词">
                <el-input
                  v-model="searchForm.keyword"
                  clearable
                  placeholder="请输入管理员名称"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button type="primary" @click="getList()">搜索</el-button>
            <el-button @click="reseSearchForm">重置</el-button>
          </div>
        </div>
        <!-- 新增/刷新 -->
        <div class="flex justify-between">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button size="default">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </div>
      </template>
      <!-- 数据显示区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="管理员" width="250">
          <!-- 自定义管理员信息 -->
          <template #default="{ row }">
            <div class="flex items-center">
              <el-avatar :size="40" src="row.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <div class="ml-3">
                <h6>{{ row.username }}</h6>
                <small>ID:{{ row.id }}</small>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属管理员" align="center">
          <template #default="{ row }">
            {{ row.role ? row.role.name : "" }}
          </template>
        </el-table-column>
        <el-table-column width="100" label="状态">
          <template #default="{ row }">
            <el-switch
              :modelValue="row.status"
              :disabled="row.super == 1"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChang($event, row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <!-- 判断是不是超级管理员 -->
            <small v-if="scope.row.super == 1" class="text-sm text-gray-500"
              >暂无操作</small
            >
            <div v-else>
              <el-button @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="danger" @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template> </el-table-column
        >>
      </el-table>
      <!-- 分页 -->
      <!-- 分页 -->
      <div class="flex items-centet justify-center mt-5">
        <el-pagination
          background
          layout="prev,pager,next"
          :total="total"
          :page-size="limit"
          :current-page="currentPage"
          @current-change="getList"
        />
      </div>
    </el-card>

    <!-- 新增/修改弹框 -->
    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form :model="form" ref="formRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item  label="头像" prop="avatar">
          <!-- 上传头像 -->
          <el-upload
                    :http-request="httpRequest"
                    multiple
                    :show-file-list="true"
                    list-type="picture-card"
            >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item  label="所属角色" prop="role_id">
          <el-select v-model="form.role_id" placeholder="选择所属角色">
            <el-option v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item  label="状态" prop="status">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
    </FormDrawer>
  </div>
</template>
<script setup>
import { reactive, ref,computed} from "vue";
import FormDrawer from "@/components/FormDrawer.vue";
import {toast} from '@/utils/utils'
import {
  getManagerList,
  updataStatus,
  addManager,
  deleteManager,
  editManager,
} from "@/api/manager";
const tableData = ref([]);
//分页数据
const currentPage = ref(1); //当前的页码
const total = ref(0); //总数据
const limit = ref(10); //每页多少条
//搜索功能数据，搜索功能还是用获取数据的方法，传入关键词
const searchForm = reactive({
  keyword: "",
});
const roles = ref([])
// 获取管理员列表
function getList(p = null) {
  if (typeof p == "number") {
    currentPage.value = p;
  }
  getManagerList(currentPage.value, searchForm).then((res) => {
    console.log(res);
    tableData.value = res.list;
    total.value = res.totalCount;
    roles.value = res.roles;
  });
}
getList();
//重置，搜索框赋值为'',重新获取数据
const reseSearchForm = () => {
  searchForm.keyword = "";
  getList();
};
//修改管理员状态
const handleStatusChang = (status, row) => {
  updataStatus(row.id, status).then((res) => {
    toast("修改状态成功");
    //把当前对象状态改为修改状态
    row.status = status;
  });
};
//删除功能
const handleDelete = (id) => {
  deleteManager(id).then((res) => {
    toast("删除成功");
    getList();
  });
};

   //判断新增还是修改
   const editId = ref(0)
    //弹窗标识
    const drawerTitle = computed(() => editId.value ? '修改' : '新增')
    //新增
    const formDrawerRef = ref(null)
    const formRef = ref(null)
    const form = reactive({
        username:'',
        password:"",
        role_id:null,
        status:1,
        avatar:''
    })
    const handleAdd = ()=>{
        editId.value = 0
        resetForm({
          username:'',
          password:"",
          role_id:null,
          status:1,
          avatar:''
        })
        //打开表单弹框
        formDrawerRef.value.openDrawer()
    }
    //提交,新增和修改同用一个submit,要判断是新增还是修改
    const handleSubmit = ()=>{
        //验证表单
        formRef.value.validate((valid)=>{
            if(!valid) return
            //
            const fun = editId.value ? editManager(editId.value,form) : addManager(form)
            fun.then(res=>{
                ElMessage({
                    message: `${drawerTitle.value}成功`,
                    type: 'success',
                })
                //修改刷新当前页，新增刷新第一页
                getList(editId.value ? false : 1)
                formDrawerRef.value.closeDrawer()
            })
        })
    }
    //重置表单,点击修改表单有内容
    const resetForm = (row=false)=>{
        //去除验证规则
        if(formRef.value) formRef.value.clearValidate()
        if(row){
            for(const key in form){
                form[key] = row[key]
            }
        }
    }
    //编辑
    const handleEdit =(row)=>{
        editId.value = row.id
        resetForm(row)
        formDrawerRef.value.openDrawer()
        
    }
</script>
<style>
</style>

formdrawer抽屉组件

<template>
    <el-drawer v-model="showDrawer" 
    :title='title' 
    :size="size" 
    :close-on-click-modal="false"
    :destroy-on-close="destoryOnClose">
        <div class="formDrawer">
            <div class="body">
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading">{{ confireText }}</el-button>
                <el-button type="default" @click="closeDrawer">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup>
    import {ref} from 'vue'
    const showDrawer = ref(false)

    //按钮loading效果
    const loading = ref(false)
    const showLoding = ()=> loading.value = true
    const hideLoding = ()=> loading.value = false

    const props = defineProps({
        title: {
            type: String,
        },
        size: {
            type: String,
            default: '45%'
        },
        //控制是否在关闭 Drawer 之后将子元素全部销毁
        destoryOnClose: {
            type: Boolean,
            default: false
        },
        confireText: {
            type: String,
            default: '提交'
        }
    })

    //打开抽屉方法
    const openDrawer = () => {
        showDrawer.value = true
    }

    //关闭抽屉方法
    const closeDrawer = () => {
        showDrawer.value = false
    }

    //提交
    const emit = defineEmits(['submit'])
    const submit = ()=>{
        emit('submit')
    }

    //向父组件暴露以下方法
    defineExpose({
        openDrawer,
        closeDrawer,
        showLoding,
        hideLoding
    })
</script>
<style>
    .formDrawer {
        display: flex;
        position: relative;
        flex-direction:column;
        width: 100%;
        height: 100%;
    }
    .formDrawer .body {
        flex: 1;
        overflow-y: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
    }
    .formDrawer .actions{
        display: flex;
        align-items: center;
        height: 50px;
        margin-top: auto;
        /* background-color: skyblue; */
    }
</style>

效果