// 導(dǎo)入request
import request from '@/utils/request.js'
// 導(dǎo)出登錄方法
export function GetStaffList(data){
    return request.get("/api/user",{params:data})
}
export function DelStaff(id){
    return request.delete("/api/user/"+id)
}
// 導(dǎo)出獲取用戶組件的角色
export function GetUserGroup(data){
    return request.get("/api/yp/user_group",{params:data})
}
// 定義菜單管理的api
export function GetMenu(data){
    return request.get("/api/yp/permission",{params:data})
}
// 獲取當(dāng)前用戶的菜單
export function GetUserMenu(data){
    return request.get("/api/yp/user_permission",{params:data})
}

<template>
    <template v-for="item in children" :key="item.id">
            <!-- 沒有子菜單就是菜單項 -->
            <el-sub-menu v-if="item.children" :index="item.path">
                <template #title>                    
                    <span>{{item.name}}</span>
                </template>  
                <!-- 形成了遞歸嵌套 -->
                <SubMenu :children="item.children"></SubMenu>          
            </el-sub-menu>
            <el-menu-item :index="item.path" v-else>
            <span>{{item.name}}</span>
            </el-menu-item>
    </template>
</template>
<script>
export default {
    // 默認(rèn)有子選項children 默認(rèn)值是[]
    props:{
        children:{type:Array,default:()=>[]}
    }
}
</script>

<template>
    <div>
        <h1>員工管理</h1>
        <el-form :inline="true"  ref="searchRef"   :model="searchObj"  >
            <el-form-item label="id" prop="id">
                <el-input v-model="searchObj.id"  />
            </el-form-item>           
            <el-form-item>
                <el-button type="primary" @click="getStaffList">查詢</el-button>
                <el-button type="primary" @click="resetSearch()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="staffList" style="width: 100%">
            <el-table-column prop="id" label="賬號" width="180" />
            <el-table-column prop="name" label="真實姓名" width="180" />
            <el-table-column prop="shop" label="所屬門店" />
            <el-table-column prop="tel" label="手機號" />
            <el-table-column prop="user_group" label="角色id" />
            <el-table-column prop="gname" label="角色" />
            <el-table-column prop="state" label="狀態(tài)" />
            <el-table-column prop="lastTime" label="最后登錄時間" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span>編輯</span> <span  @click="delStaff(scope.row)">刪除</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 導(dǎo)入api方法
import { GetStaffList,DelStaff} from '@/api/permission.js'
// 導(dǎo)入響應(yīng)式創(chuàng)建方法
import { ref } from 'vue'
// 定義引用對象
const searchRef = ref();
// 定義搜索條件
var searchObj = ref({id:'',order:'asc'})
// 定義員工列表
var staffList = ref([]);
// 執(zhí)行獲取員工列表方法
getStaffList();
// 定義獲取員工列表的方法（需要多次使用）
function getStaffList() {
    // 使用api方法
    GetStaffList(searchObj.value)
        .then(res => {
            if (res.data.code == 0) {
                staffList.value = res.data.data;
            } else {
                alert(res.data.msg || "員工列表獲取失敗")
            }

        })
}
// 重置
function resetSearch(){
    searchRef.value.resetFields()
    getStaffList();
}
// type導(dǎo)入不用
// import type { FormInstance, FormRules } from 'element-plus'
// 帶泛型的去掉泛型<> 對象或數(shù)組的類型
// const ruleFormRef = ref<FormInstance>()   =>  const ruleFormRef = ref()
// 帶類型的函數(shù)去掉類型  :代表參數(shù)的類型
/* 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
=>    */  
/* 
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
*/  
function delStaff(row){
    // 正常情況應(yīng)該會有個彈框
    DelStaff(row.id)
    .then(res=>{
        if(res.data.code==0){
            getStaffList() //重新獲取員工列表
        }else{
            alert(res.data.msg)
        }
    })
}
</script>

<template>
    <div>
        角色管理
        <el-table :data="userGroup.reverse()" style="width: 100%">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名稱"  />
            <el-table-column prop="ranges" label="范圍" />
            <el-table-column prop="description" label="描述" width="480"  />
            <el-table-column prop="permission" label="權(quán)限" width="480"  />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span  @click="editGroup(scope.row)">操作</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 導(dǎo)入獲取用組的api
import {GetUserGroup} from '@/api/permission'
// 導(dǎo)入引用對象
import {ref} from 'vue'
// 定義用戶組件數(shù)據(jù)
const userGroup = ref([]);
// 獲取用戶組
GetUserGroup({size:30,order:'asc'})
.then(res=>{
    if(res.data.code==0){
        // 更新用戶組信息
        userGroup.value = res.data.data;
    }else{
        alert(res.data.msg)
    }
})
// 定義操作api
function editGroup(row){
    console.log(row)
}
</script>

<template>
    <div>
        菜單管理
        <!-- 有children的時候默認(rèn)會有子表格 -->
        <el-table :data="menuList" style="width: 100%"  
         row-key="id">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名稱"  />
            <el-table-column prop="icon" label="圖表" />
            <el-table-column prop="path" label="URL" />
            <el-table-column prop="des" label="描述" />
            <el-table-column prop="component" label="組件" />
        </el-table>
    </div>
</template>
<script setup>
// 獲取菜單api
import  {GetMenu} from '@/api/permission'
import {ref} from 'vue';
const menuList = ref([]);
GetMenu()
.then(res=>{
    if(res.data.code==0){
        menuList.value = res.data.list;
    }else{
        alert("菜單獲取失敗");
    }
})
</script>