后台管理系统——个人中心页面和下一级的添加修改删除

后台管理系统——个人中心页面和下一级的添加修改删除

一、后台管理系统 - 个人中心页面

一）代码

<template>
    <div style="width: 35%">
    <el-form :model="form" size="large" >
      <el-form-item label="账户">
        <el-input v-model="form.account" class="w-50 m-2"  />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name"   label-width="50px" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone"  />
      </el-form-item>
      <el-form-item label="QQ号">
        <el-input v-model="form.qq"  />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password"   />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="radio">
          <el-radio label="1" >男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
    </el-form>
</div>
  </template>
  <script  setup>
  import { ElMessage,ElMessageBox} from 'element-plus';
  import { reactive,ref } from 'vue'
  import {UserList,UserAdd} from '../network/index.js';
  // 数据默认值
  const form=reactive({
    account:'xiaobian@qq.com',
    password:'',
    name:'小编1',
    phone:'1885656765',
    qq:'123456',
    status:'1',
    uid:0,
   })
  //  拿到登录人的信息
    let user=window.localStorage.getItem("user");
    let tableData=JSON.parse(user);
  // 数据给到表单
    form.account=tableData.account;
    form.name=tableData.name;
    form.phone=tableData.phone;
    form.qq=tableData.qq;
    form.uid=tableData.uid;
    form.group_id=tableData.group_id;
    const radio = ref(JSON.stringify(tableData.sex));
  // 修改数据的提交
    const onSubmit=()=>{
      console.log(form);
      UserAdd(form).then((e)=>{
    if(e.data.code != 0){
      ElMessage.error(e.data.msg);
    }else{
      ElMessage({
         message:e.data.msg,
         type:'success',
        });
        // window.location.href='';
    }
   })
    }
  </script>

二）实现效果图

二、后台管理系统 - 导航管理 - 下一级：添加、修改、删除

一）、下一级的添加和修改

、1.代码

、1）vue代码关键代码

 // 添加页面开始-------------------
  const form=reactive({
        group_name:'',
        status:1,
    })
    const add=()=>{
      // 默认值
      form.label='';
      form.type=0;
      form.src='';
      form.sort=1;
      form.status=1;
      form.mid=0;
      form.fid=sate.fid,
    //  按钮弹出
      sate.is_show=true;
    }
    const add_php=()=>{
      console.log(form);
         MenusAdd(form).then((e)=>{
               if(e.data.code!=0){
                     ElMessage.error(e.data.msg);
                 } else{
                   ElMessage({  message:e.data.msg,  type:'success',});
                  sate.is_show=false; }
               }) 
      }
   // 添加页面结束-------------------
       //  修改页面开始----------------
    const edit=(e)=>{
          form.mid=e.mid;
          form.label=e.label;;
          form.type=e.type;
          form.src=e.src;
          form.sort=e.sort;
          form.status=e.status;
          form.fid=sate.fid,//传一个父id
          sate.is_show=true;
         sate.button_text='修改';
     }
 //  修改页面结束----------------

、2）路由代码

// 组的下一级添加
export function MenusAdd(datas={}){
    return request({
        method:"post",
        url:'/Index/menus_add',
        data:datas,
    }) 
}

、3）php关键代码

//  下一级添加（修改）菜单开始
public function menus_add(){
       $post =  input('post.');;
       print_r($post);
      if(empty($post['label'])){
         $this->returnCode(1,[],'请输入菜单名');
         exit;
     }
      $data = [
         'label'=>$post['label'],
         'parent_id'=>$post['fid'],
         'type'=>$post['type'],
         'src'=>$post['type']==0?'':$post['src'],
         'sort'=>$post['sort'],
         'status'=>$post['status'],
      ];
    // //  判断是添加还是修改开始
     if($post['mid']==0){      $add=Db::table('bew_admin_sys_menu')->insertGetId($data);
        if(empty($add)){
            $this->returnCode(1,[],'添加失败');
        } else{
            $this->returnCode(0,[],'添加成功');
        }
      }
      else{
       $edit= Db::table('bew_admin_sys_menu')->where('mid',$post['mid'])->update($data);
       if(empty($edit)){
        $this->returnCode(1,[],'修改失败');
     } else{
        $this->returnCode(0,[],'修改成功');
     }
     }
//    判断是添加还是修改结束
}
// 下一级添加（修改）菜单结束

、2.效果图

二）、下一级的删除

、1.代码

、1）vue代码关键代码

//  删除开始
const del=(id)=>{
  console.log(id);
  ElMessageBox.confirm('你确定删除吗', '删除不能恢复', {
    confirmButtonText: 'ok',
    cancelButtonText: 'cancel',
    type:'warning',
  }).then(()=>{
    MenusDel({id: id}).then((e)=>{
    if(e.data.code!=0){
          ElMessage.error(e.data.msg);
        }else{
          ElMessage({
         message:e.data.msg,
         type:'success',
        });
       }
  })
      }).catch(()=>{
  })
}
// 删除结束

、2）路由代码

// 组的下一级删除
export function MenusDel(datas={}){
    return request({
        method:"post",
        url:'/Index/menus_del',
        data:datas,
    }) 
}

、3）php关键代码

// 下一级删除菜单
public function menus_del(){
    $id=input('post.id',0);
    if(empty($id)){
        $this->returnCode(1,[],'请选择要删除的菜单'); 
  } 
  $count=Db::table('bew_admin_sys_menu')->where('parent_id',$id)->count();
   if($count>=1){
      $this->returnCode(1,[],'请先删除子菜单');
   }
  $del = Db::table('bew_admin_sys_menu')->where('mid',$id)->delete();
  if(empty($del)){
    $this->returnCode(1,[],'删除失败'); 
  } else{
    $this->returnCode(0,[],'删除成功'); 
   }
}
// 下一级删除菜单结束

、2.效果图