前端问题 elementui
进入项目后，点击上面的 项目列表 未显示列表页
我想要的效果是：
一、点返回时，还在列表第N页上，不重新加载
二、点击上面的 项目列表或其它，直接显示相关的内容，是重新加载的内容
本人不是技术人员，请讲详细点，或者改好我复制，:)谢谢了
列表页代码
<template>
<div>
<div v-if="listDetails">
<ProjectList v-if="activeName == 'projectList'" :allindex="allindex" :projectItemAll="projectItemAll"></ProjectList>
<ProjectChao v-if="activeName == 'projectChao'" :allindex="allindex" :projectItemAll="projectItemAll"></ProjectChao>
<ProjectEnd v-if="activeName == 'projectEnd'" :allindex="allindex" :projectItemAll="projectItemAll"></ProjectEnd>
<AddProject v-if="activeName == 'addProject'"></AddProject>
</div>
<div v-else>
<ProjectDetails
:projectItem="projectItem"
:projectItemAll="projectItemAll"
></ProjectDetails>
</div>
</div>
</template>
<script>
import bus from "@/utils/eventBus.js";
import ProjectList from "./projectList/projectList.vue";
import ProjectChao from "./projectList/projectList_chao.vue";
import ProjectEnd from "./projectList/projectList_end.vue";
import AddProject from "./projectList/addProject.vue";
import ProjectDetails from "../project/projectDetails/detailsIndex.vue";
import PlusApi from "@/api/plus.js";
export default {
components: {
ProjectList,
ProjectChao,
ProjectEnd,
AddProject,
ProjectDetails,
},
data() {
return {
// 显示列表还是详情
listDetails: true,
// 项目列表页的tab切换
activeName: "projectList",
/*参数*/
param: {},
/*切换数组原始数据*/
sourceList: [
{
key: "projectList",
value: "项目列表",
path: "/plus/project/projectList/projectList",
},
{
key: "projectChao",
value: "超预算",
path: "/plus/project/projectList/projectList_chao",
},
{
key: "projectEnd",
value: "已结束",
path: "/plus/project/projectList/projectList_end",
},
{
key: "addProject",
value: "添加项目",
path: "/plus/project/projectList/addProject",
},
],
/*权限筛选后的数据*/
tabList: [],
// 统计页面跳转过来的
allindex: true,
// projectItemAll:''
};
},
mounted() {
this.tabList = this.authFilter();
console.log('=========');
console.log(this.tabList);
if (this.tabList.length > 0) {
this.activeName = this.tabList[0].key;
}
if (this.$route.query.type != null) {
this.activeName = this.$route.query.type;
}
console.log('====1=====');1
console.log(this.activeName);
// 监听子组件传递的项目id
bus.$on("projectItem", (res) => {
this.projectItem = res;
});
// 监听子组件传递的切换选中页面的值
bus.$on("listDetails", (res) => {
this.listDetails = res;
});
/*监听传插件的值*/
bus.$on("activeValue", (res) => {
this.activeName = res;
});
//发送类别切换
let params = {
active: this.activeName,
list: this.tabList,
tab_type: "distribution",
};
bus.$emit("tabData", params);
},
beforeDestroy() {
//发送类别切换
bus.$emit("tabData", { active: null, tab_type: "distribution", list: [] });
bus.$off("activeValue");
},
methods: {
/*权限过滤*/
authFilter() {
let list = [];
for (let i = 0; i < this.sourceList.length; i++) {
let item = this.sourceList[i];
// if (this.$filter.isAuth(item.path)) {
// console.log(item);
list.push(item);
// }
}
console.log(list);
return list;
},
},
};
</script>
内容页代码
<template>
<div>
<el-page-header @back="goBack" :content="projectItem.project_name">
</el-page-header>
<el-tabs v-model="activeDetailsTab" @tab-click="handleProject">
<el-tab-pane label="进展" name="evolve">
<Evolve
:projectItem="projectItem"
:projectItemAll="projectItemAll"
></Evolve>
</el-tab-pane>
<el-tab-pane label="成员" name="member">
<Member
:projectItem="projectItem"
:projectItemAll="projectItemAll"
></Member>
</el-tab-pane>
<el-tab-pane label="详情" name="details">
<Details
:projectItem="projectItem"
:projectItemAll="projectItemAll"
></Details>
</el-tab-pane>
<el-tab-pane label="文件" name="file">
<File
:projectItem="projectItem"
:projectItemAll="projectItemAll"
></File>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import bus from "@/utils/eventBus.js";
import Evolve from "./evolve";
import Member from "./member";
// import Details from "./details";
import Details from "../projectList/addProject.vue";
import File from "./file";
export default {
components: {
Evolve,
Member,
Details,
File,
},
props: ["projectItem", "projectItemAll"],
data() {
return {
// 详情页tab切换
activeDetailsTab: "evolve",
};
},
created() {
},
methods: {
// 点击返回项目列表页
goBack() {
bus.$emit("listDetails", true);
},
handleProject(tab, event) {
},
},
};
</script>
<style>
.el-page-header {
margin-bottom: 30px;
}
</style>
php
<?php
namespace app\shop\controller\project;
use app\shop\controller\Controller;
use think\facade\Db;
use think\facade\Log;
use think\facade\Request;
use think\facade\Session;
/**
* 规则====
*/
class Rule extends Controller
{
/**
* 表单添加的fromsn
*/
public function get_from_sn(){
$my_store = Session::get('grownet_store');
$app_id = $my_store['app']['app_id'];
$sn=time().'_'.$app_id.'_'.rand(10000,99999);
return_success($sn);
}
/**
* 获取项目的状态
*/
public function project_status(){
$type=array();
$type[0]=array(
'value'=>1,
'name'=>'未开始',
);
$type[1]=array(
'value'=>2,
'name'=>'进行中',
);
$type[2]=array(
'value'=>3,
'name'=>'已结束',
);
return $type;
}
/**
* 获取项目的状态
*/
public function project_status_str($status){
switch ($status){
case 1:
return '未开始';
break;
case 2:
return '进行中';
break;
case 3:
return '已结束';
break;
default:
return '--';
break;
}
}
/**
* 获取项目状态列表
*/
public function get_period_status(){
return_success(self::project_status());
}
/**
* 获取项目列表
*/
public function project_list(){
$my_store = Session::get('grownet_store');
$app_id = $my_store['app']['app_id'];
$where = array(
'app_id'=>$app_id,
'is_delete'=>0,
);
@$page_now = !empty($_REQUEST['page']) ? intval($_REQUEST['page']) : 1; //当前页码
@$pagesize = !empty($_REQUEST['list_rows']) ? intval($_REQUEST['list_rows']) : 10;//每页展示数量
$start_limit = ($page_now - 1) * $pagesize;
if(@Input('get.type')){
$type=Input('get.type');
if($type==1){
$where['is_chao']=1;
}
if($type==2){
$where['project_status']=3;
}
}else{
$where['is_chao']=0;
$where=[
['app_id','=',$app_id],
['is_delete','=',0],
['is_chao','=',0],
['project_status','in',[1,2,4]],
];
}
//pre($where);
$listData = Db::name('project')
->where($where)
->limit($start_limit, $pagesize)
->order("project_id desc")
->select();
foreach($listData as $k=>$v){
$clerkInfo=Db::name('store_clerk')->where('user_id',$v['project_userid'])->find();
$v['real_name']=$clerkInfo['real_name'];
$v['project_status_str']=self::project_status_str($v['project_status']);
$v['project_add_time_str']=date('Y-m-d H:i:s',$v['project_add_time']);
$listData[$k]=$v;
}
$data=array();
$list=array();
$current_page=$page_now;
$total=Db::name('project')->where($where)->count();
$per_page=$_REQUEST['list_rows'];
$last_page=ceil($total/$per_page);
$list['current_page']=$current_page;
$list['total']=$total;
$list['per_page']=$per_page;
$list['last_page']=$last_page;
$list['data']=$listData;
$data['list']=$list;
return_success($data);
}
/**
* 项目详情
*/
public function project_detail(){
$my_store = Session::get('grownet_store');
$app_id = $my_store['app']['app_id'];
$idData=Input('get.id');
$where=array(
'app_id'=>$app_id,
'project_id'=>Input('get.id'),
);
$res=Db::name('project')->where($where)->find();
$clerkInfo=Db::name('store_clerk')->where('user_id',$res['project_userid'])->find();
$res['real_name']=$clerkInfo['real_name'];
$res['admin_user']=Db::name('store_clerk')->where('clerk_id',$res['project_userid'])->find();
return_success($res);
}
/**
* 项目添加
*/
public function project_add_do(){
$my_store = Session::get('grownet_store');
$app_id = $my_store['app']['app_id'];
$postData=Input('post.');
unset($postData['admin_user']);
unset($postData['real_name']);
$projectId=0;
$clerkInfo=Db::name('store_clerk')->where('user_id',$postData['project_userid'])->order('clerk_id desc')->find();
$postData['project_clerk_id']=$clerkInfo['clerk_id'];
if($postData['project_id'] && $postData['project_id']!=0){
$projectId=$postData['project_id'];
$list = Db::name('project')->update($postData);
}else{
$postData['project_add_time']=time();
$postData['app_id']=$app_id;
$postData['project_add_time']=time();
$list = Db::name('project')->insertGetId($postData);
$projectId=$list;
}
$updatepManhour=array(
'manhour_project_id'=>$projectId,
);
Db::name('project_manhour')->where('manhour_from_sn',$postData['project_from_sn'])->update($updatepManhour);
//更新是否超期
self::updataTotal($postData['project_id']);
return_success($list);
}
/**
* 项目删除
*/
public function project_delete(){
$my_store = Session::get('grownet_store');
$app_id = $my_store['app']['app_id'];
$where=array(
'app_id'=>$app_id,
'project_id'=>Input('post.id'),
);
$updateData=array('is_delete'=>1);
$res=Db::name('project')->where($where)->update($updateData);
// Db::name('project_json')->where('json_projectid',Input('post.id'))->delete();
return_success($res);
}
方便把完整代码发来吗
以下内容部分参考ChatGPT模型：
根据代码分析，问题可能出在列表页和详情页的切换上。在列表页中，点击进入详情页后，通过事件总线 bus.$emit("listDetails", false); 将 listDetails 设为 false，从而显示详情页。而在详情页中，点击返回按钮后，通过事件总线 bus.$emit("listDetails", true); 将 listDetails 设为 true，从而显示列表页。但是这样的实现方式可能会导致每次切换都重新加载页面。要达到你想要的效果，可以尝试使用路由的方式进行页面切换，这样可以避免页面的重复加载，同时利用路由的参数传递功能可以实现在切换页面时保持当前页面的状态。具体操作可以参考 Vue Router 的相关文档。
如果我的建议对您有帮助、请点击采纳、祝您生活愉快