您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

列出当前用户的所有Task(laravel11集成Element plus Tabs标签页的使用)

发布时间：2024-11-09 14:09:16编辑：雪饮阅读（）

其实要说列出当前用的所有task，那么也应该列出其他用户的所有task，这样才能实现之前当前用户可能编辑到非当前用户的task的情况，就能促成前面说的编辑权限问题。
那么首先我需要封装一个table，因为不管是当前用户还是其他用户，数据列表还是共用的。
Y:\root\example-app\resources\js\Pages\UserTask\Partials\Tasktable.vue
<script setup>
import { Edit,Plus,Delete } from '@element-plus/icons-vue'
defineProps(['tasks']);
</script>

<template>
    <el-table :data="tasks" border>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="job_id" label="JobId" />
        <el-table-column fixed="right" label="Operations" >
            <template v-slot="scope">
                <div style="width: 100%;display: flex;justify-content:flex-start;">
                    <div style="display: flex;gap:1rem;">
                        <el-link :icon="Edit" :href="'/user_task/add?id='+scope.row.id">Edit</el-link>
                        <el-link :icon="Delete"  @click="$emit('deleteFunc',scope.row.id)">Delete</el-link>
                    </div>

                </div>

            </template>
        </el-table-column>
    </el-table>
</template>
这里使用了element plus的table组件。
接下来要在user Task列表进行拆分并调用各自的数据列表
<div style="display: flex;justify-content:flex-end;">
    <el-link :icon="Plus" :href="'/user_task/add'">Add</el-link>
</div>

<div style="">
    <h1 style="text-align: center;">task列表</h1>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange" :before-leave="beforeLeave">
        <el-tab-pane label="AllUserTask" name="AllUser">
            <Tasktable :tasks="tasks" />
        </el-tab-pane>
        <el-tab-pane label="CurrentUserTask" name="CurrentUser">
            <Tasktable :tasks="tasks" @deleteFunc="deleteFunc" />
        </el-tab-pane>

    </el-tabs>
</div>
这里有个before-leave事件需要特别注意下，默认情况下你切换tab时候就直接切换过去了，确实没有问题，但我们是要带有请求的，除非你一开始就直接全部查询出来再区分。一般是不建议这样做。
所以我们需要使用before-leave进行阻止默认行为，然后手动实现什么时候再切换
const beforeLeave=(activeName,oldActiveName)=>{
    console.log("beforeLeave.activeName",activeName);
    console.log("beforeLeave.oldActiveName",oldActiveName);
    console.log("user_task.index",route('user_task.index'));
    let visitObject={
        method: 'get',
        data: {type:activeName},
        replace: false,
        preserveState: false,
        preserveScroll: false,
        only: [],
        headers: {},
        errorBag: null,
        forceFormData: false,
        onCancelToken: cancelToken => {

        },
        onCancel: () => {

        },
        onBefore: visit => {

        },
        onStart: visit => {

        },
        onProgress: progress => {

        },
        onSuccess: page => {

        },
        onError: errors => {

        },
        onFinish: visit => {

        },
    }
    router.visit(route('user_task.index'),visitObject)
    return false;
}
这里虽然最后才return false，但由于请求是异步的，并且使用了inertia的缘故，所以这里也无需处理回来时候的数据同步，一般的是自动同步切换数据的。
那么别忘了导入子组件
import Tasktable from './Partials/Tasktable.vue';
props与form别忘了同步切换的类型
const props=defineProps(['tasks','type']);
const form = useForm({
    id: 0,
    type:''
});
所以删除的时候也最好携带上当前所在的tab
const deleteFunc=(taskId)=>{
    console.log("deleteFunc taskId",taskId);
    form.id=taskId;
    form.type=activeName.value;
    form.delete(route('user_task.delete'), {
        preserveScroll: true,
        onSuccess: () => {

        },
        onError: (errors) => {

        },
        onFinish: () => {

        }
    });
}
那么进入user task列表的时候同样要携带是从什么类型来的，同步类型初始化到tab上
const activeName = ref('AllUser');
activeName.value=props.type;
比如说我们可能是从删除逻辑来的，所以我们删除的后端接口也需要处理下
public function delete(Request $request):RedirectResponse
{
    $id=$request->input("id");
    $type=$request->input("type",'AllUser');
    DB::beginTransaction();
    try{
        $userTask=\App\Models\UserTask::find($id);
        $job=Jobs::find($userTask->job_id);
        if($job){
            $job->delete();
        }
        $userTask->delete();
        DB::commit();
    }
    catch(\Exception $e){
        DB::rollBack();
        return back()->with([
            'message' => $e->getMessage(),
        ]);
    }
    return Redirect::route('user_task.index',["type"=>$type]);
}
那么同样的，这里区分了当前用户与所有用户，则userTask控制器的index方法的实现也需要调整下
public function index(Request $request){
    $type=$request->input("type",'AllUser');
    $tasks=\App\Models\UserTask::where(function($query) use($type,$request){
        if($type=="CurrentUser"){
                $query->where("uid",$request->user()->id);
        }
    })->orderBy("id","desc")->get();
    return Inertia::render('UserTask/Index',[
        'tasks'=>$tasks,
        'type'=>$type
    ]);
}
完成后的效果图

本期词汇
props 属性
Partials 局部模板
pail 桶，提桶