search

博客列表 >vue列表多级管理和管理组增删改查操作

vue列表多级管理和管理组增删改查操作

kiraseo_wwwkiraercom
kiraseo_wwwkiraercom原创
2022年09月14日 13:02:53660浏览

1、列表多级管理。2、管理组列表。3、添加管理组。4、修改管理组。5、删除管理组。

列表多级管理

#

  1.         public function MenuList(){
  2.             $data=   Db::table('bew_admin_sys_menu')->where(['status'=>1])->order('parent_id')->select()->toArray();
  3.             $tmp = [];
  4.             if(!empty($data)){
  5.                 foreach ($data as  &$data_v){
  6.                     if($data_v['status']==1){
  7.                         $data_v['status_v'] = '开启';
  8.                     }else{
  9.                         $data_v['status_v'] = '关闭';
  10.                     }
  11.                     if($data_v['type']==0){
  12.                         $data_v['type_v'] = '分组';
  13.                     }elseif ($data_v['type']==1){
  14.                         $data_v['type_v'] = '内部链接';
  15.                     }elseif ($data_v['type']==2){
  16.                         $data_v['type_v'] = '外部链接';
  17.                     }
  18.                     if($data_v['parent_id'] == 0){
  19.                         $tmp[$data_v['mid']] = $data_v;
  20.                     }else{
  21.                         $tmp[$data_v['parent_id']]['son'][] = $data_v;
  22.                     }                
  23.                 }
  24.             }
  25.             $arr =[
  26.                 'code'=>0,
  27.                 'msg'=>'成功',
  28.                 'data'=> array_merge($tmp),
  29.             ];
  30.             echo json_encode($arr);
  31.         }
  1.    <el-table :data="tableData.lists" border style="width: 100%" size="large">
  2.         <el-table-column  type="expand">
  3.             <template #default="scope">
  4.             <el-table :data="scope.row.son" border style="width: 100%" size="large">
  5.                 <el-table-column prop="sort" label="排序" />
  6.                 <el-table-column prop="mid" label="ID" />
  7.                 <el-table-column prop="label" label="菜单名"/>
  8.                 <el-table-column prop="type_v" label="类型" />
  9.                 <el-table-column prop="src" label="跳转链接" />
  10.                 <el-table-column prop="icon_class" label="图标" />
  11.                 <el-table-column prop="status_v" label="状态" />
  13.                 <el-table-column label="操作">
  14.                     <template #default="scope">
  15.                         <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
  16.                         <el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
  17.                             <template #reference>
  18.                                 <el-button size="small" type="danger">删除</el-button>
  19.                             </template>
  20.                         </el-popconfirm>
  21.                     </template>
  22.                 </el-table-column>
  23.             </el-table>
  24.         </template>
  26.         </el-table-column>
  27.         <el-table-column prop="sort" label="排序" />
  28.         <el-table-column prop="mid" label="ID" />
  29.         <el-table-column prop="label" label="菜单名"/>
  30.         <el-table-column prop="type_v" label="类型" />
  31.         <el-table-column prop="src" label="跳转链接" />
  32.         <el-table-column prop="icon_class" label="图标" />
  33.         <el-table-column prop="status_v" label="状态" />
  35.         <el-table-column label="操作">
  36.             <template #default="scope">
  37.                 <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
  38.                 <el-popconfirm title="确认删除吗？" @confirm="del(scope.row)">
  39.                     <template #reference>
  40.                         <el-button size="small" type="danger">删除</el-button>
  41.                     </template>
  42.                 </el-popconfirm>
  43.             </template>
  44.         </el-table-column>
  45.     </el-table>

效果如下

管理组vue引用方法如下

  1.  import { MenuList,GroupList,GrouAdd,GroupDel } from "../../network/admin.js";

管理组列表

#

  1.         public function GroupList(){
  2.             $group=   Db::table('bew_user_group')->where(['status'=>1])->select()->toArray();
  3.             if(!empty($group)){
  4.                 foreach ($group as  &$group_v){
  5.                     if($group_v['status']==1){
  6.                         $group_v['status_v'] = '开启';
  7.                     }else{
  8.                         $group_v['status_v'] = '关闭';
  9.                     }
  10.                     if(!empty($group_v['qx'])){
  11.                         $group_v['qx_s'] = json_decode($group_v['qx'],true);
  12.                     }else{
  13.                         $group_v['qx_s'] = [];
  14.                     }                           
  15.                 }
  16.             }
  18.             $arr =[
  19.                 'code'=>0,
  20.                 'msg'=>'成功',
  21.                 'data'=>$group,
  22.             ];
  23.             echo json_encode($arr);
  24.         }
  1. //循环列表
  2.         <el-table :data="tableData.lists" border  size="large">
  3.           <el-table-column prop="gid" label="ID"  />
  4.           <el-table-column prop="name" label="部门名" />
  5.           <el-table-column prop="status_v" label="状态" />
  6.           <el-table-column label="操作">
  7.           <template #default="scope">
  8.             <el-button size="small" @click="add(scope.row)">编辑</el-button>
  9.             <el-popconfirm title="确认删除吗?"  @confirm="del(scope.row)">
  10.               <template #reference>
  11.                 <el-button  size="small"  type="danger"    >删除</el-button>
  12.               </template>
  13.             </el-popconfirm>
  15.           </template>
  16.         </el-table-column>
  17.         </el-table>
  18. //查询方法
  19.     GroupList().then(res=>{
  20.             console.log(res.data);
  21.            tableData.lists = res.data
  22.         })

效果如下

添加管理组和修改

#

  1.         public  function GroupSave(){
  2.             if(Request::isPost()){
  3.                 $data = Request::param();
  4.                 //提交值
  5.                 $datalist = [
  6.                     'name'=>$data['name'],
  7.                     'status'=>$data['status'],
  8.                     'qx'=>json_encode($data['qx_s']),
  9.                 ];
  10.                 if(!empty($data['gid'])){
  11.                     $datalist['gid'] =$data['gid'];
  12.                 }
  13.                 //修改与提交方法
  14.                 $res =  Db::name('bew_user_group')->save($datalist);
  15.                 if (!empty($res)){
  16.                     $rest = ['code'=>0,'msg'=>"操作成功"];
  17.                     echo json_encode($rest);
  18.                 }else{
  19.                     $rest = ['code'=>1,'msg'=>"操作失败"];
  20.                     echo json_encode($rest);
  21.                     exit;
  22.                 }
  23.             }else{
  24.                 $rest = ['code'=>1,'msg'=>"非法请求"];
  25.                 echo json_encode($rest);
  26.                 exit;
  27.             }
  28.         }
  1. //表单处理
  3.         <el-dialog   v-model="data.is_form"   :title="data.title"  >
  4.           <!-- 表单 -->
  5.           <el-form :model="fromData" label-width="120px" size="large" >
  6.           <el-form-item label="部门名">
  7.             <el-input v-model="fromData.name" placeholder="请输入部门名" />
  8.           </el-form-item>
  9.           <el-form-item label="权限">
  10.             <el-checkbox-group v-model="fromData.qx_s">
  11.                     <template v-for="(item,index,key) in tableData.menu"  >
  12.                         <el-checkbox size="large" :label="item.mid">
  13.                             {{item.label}}
  14.                         </el-checkbox>
  15.                         <br/>
  16.                         <template v-if="item.son">
  17.                             <el-checkbox size="large" v-for="(items,indexs,keys) in item.son" :label="items.mid">
  18.                                 {{items.label}}
  19.                             </el-checkbox>
  20.                         </template>
  21.                         <hr/>
  22.                     </template>
  23.                 </el-checkbox-group>
  24.     </el-form-item>
  25.           <el-form-item label="状态">
  26.                     <el-select v-model="fromData.status" placeholder="请选择状态">
  27.                         <el-option label="开启" :value="1" />
  28.                         <el-option label="关闭" :value="0" />
  29.                     </el-select>
  30.                 </el-form-item>
  31.           <el-button type="success" @click="fun()" size="large">确定</el-button>
  32.         </el-form>
  33.         <!-- 表单 -->
  34.       </el-dialog>
  35. //参数接收
  36.     const  fromData = reactive({
  37.       gid :'',
  38.           name : '',
  39.           status : 1,
  40.           qx : [],
  41.         qx_s : [],
  42.     })

效果如下

添加成功数据

添加成功数据

修改前后对比

修改前

修改后

效果如下

删除管理组

#

  1.         public function GroupDel(){
  2.             if(Request::isPost()){
  3.                 $gid = Request::param();
  4.                 if(empty($gid['gid'])){
  5.                     $rest = ['code'=>1,'msg'=>"删除不存在数据"];
  6.                     echo json_encode($rest);
  7.                     exit;
  8.                 }
  9.                 $del =  Db::table('bew_user_group')->where('gid', $gid['gid'])->update(['status' => 0]);
  10.                 if (!empty($del)){
  11.                     $rest = ['code'=>0,'msg'=>"操作成功"];
  12.                     echo json_encode($rest);
  13.                 }else{
  14.                     $rest = ['code'=>1,'msg'=>"操作失败"];
  15.                     echo json_encode($rest);
  16.                     exit;
  17.                 }
  18.             }else{
  19.                 $rest = ['code'=>1,'msg'=>"非法请求"];
  20.                 echo json_encode($rest);
  21.                 exit;
  22.             }
  23.         }
  1.     const del = (e)=>{
  2.       console.log(e.gid);
  3.       GroupDel({gid:e.gid}).then(e =>{
  4.         console.log(e.code);
  5.         console.log(e.msg);
  6.         if(e.code == 0){
  7.                     ElMessage({
  8.                         message: e.msg,
  9.                         type: 'success'
  10.                     });
  11.                 }else{
  12.                     ElMessage({
  13.                         message: e.msg,
  14.                         type: 'error'
  15.                     });
  16.                 }
  17.                 GroupList().then(res=>{
  18.             console.log(res);
  19.             tableData.lists = res;
  20.         })
  21.       })
  22.     }

效果如下

删除前

删除后

上一条：程序员35岁之后的出路在哪里？下一条：Vue组件和路由
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多