问题说明: 项目需求是做一个 PCB 管理的功能，功能模块主要分为我的洗板，我的领板，我的贴片和我的加洗。对我的已完成的洗板进行领板申请，申请成功后需要跳转至我的领板 -> 进行中，刷新我的领板数据。目前遇到的问题是有成功跳转到我的领板，但跳转到我的领板 -> 已完成。
下图是网站的主页
点击已完成
对其中一条数据，点击领板操作
跳转至我的领板 -> 已完成
实际上是希望跳转至我的领板 -> 进行中，显示新的领板申请记录，如下图所示
截取部分代码如下：
<!-- 页面操作 -->
<el-table-column
fixed="right"
align="center"
min-width="80"
>
<template slot="header">
{{ $t('pcb.tableView.Operation') }}
<br>
Operation
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="success"
@click="onShowDialog(scope.row)"
>
{{ $t('pcb.button.Recieve') }}</el-button>
</template>
</el-table-column>
<!-- 逻辑方法 -->
// 显示领板对话框
onShowDialog(row) {
if (row.store_num !== 0) {
this.dialogFormVisible = true;
} else {
this.$notify.error({ message: this.$t('pcb.message.NoStock') });
}
this.form.pcb_number = row.pcb_number;
this.form.store_num = row.store_num;
this.pcb_number = row.pcb_number;
this.resetForm('form');
this.form.number = null;
},
// 申请领板
dialogFormSubmit(formName) {
const param = {
pcb_number: this.pcb_number,
num: this.form.number
};
// 表单提交验证
this.$refs[formName].validate((valid) => {
if (!valid) {
this.$notify.warning({ message: this.$t('pcb.message.WrongNum') });
return;
}
this.$api.modules.pcb.recieveApply(param).then((res) => {
if (res.errCode !== 0) {
this.$notify.warning({ message: res.message });
return;
} else {
this.$notify.success({ message: this.$t('pcb.message.Recieve') });
this.dialogFormVisible = false;
// 更新数据
this.$store.dispatch('pcb/getMyRecieveData');
}
}).then(() => {
// 标签切换
this.$store.commit('pcb/setPcbTab', 'recieve');
});
});
}
代码的逻辑比较简单，点击领板按钮，弹出领板填写对话框，然后提交表单。提交表单是调用了接口函数 reciveveApply, 网络请求成功后就进行数据更新，这里是用了 vuex 对全局变量我的领板数据进行更新。更新完用用了一次 vuex 去修改全局变量 pcbTab, 这个就是 tabs 页签跳转的功能，使完成领板后可以跳转到我的领板。但是结果是跳转至我的领板 -> 已完成，原因是因为之前我们是在我的洗板 -> 已完成中操作的，这个切换按钮是一个通用组件，在我的洗板改变了这个状态值，这个数据就一直保留，并没有更新。所以解决的方法应该有很多，我这里想到两种。
方法一：可以使用 vuex 来管理这个状态值，设置变量名为 activeStatus。 在代码中加一句代码 this.$store.commit('pcb/setActiveStatus', 'doing')，在 store pcb.js mutations 中添加方法
setActiveStatus(state, value) {
state.activeStatus = value;
}
通过状态管理 vuex 应该是可以实现这个功能的。
方法二：可以通过传值的方式更新 currentStatus 的值，在代码中加一句 this.$emit('changeStatus', 'doing')，在它的父组件中添加代码如下：
<!-- 已完成列表 -->
<FinishTable
v-else-if="activeStatus === 'finish'"
:table-data="myPrintingData.finish"
:param="param"
@changeStatus="changeStatus"
/>
<script>
// 切换状态按钮
changeStatus(value) {
this.currentStatus = value;
console.log(this.currentStatus);
this.$emit('changeActive', 'doing');
}
</script>
但是值传到这里的时候，发现这个值并没有影响到我的洗板功能，只是改变了父组件我的洗板的状态值。所以在 changeStatus 方法中继续给它的父组件传值，通过 this.$emit('changeActive', 'doing') 这句代码实现，然后找他爷爷组件，在组件添加如下代码：
<!-- 我的洗板 -->
<el-tab-pane
:label="tabs[0].label"
:name="tabs[0].name"
>
<MyPrinting :active-status="activeStatus" @changeActive="changeActive" />
</el-tab-pane>
<!-- 我的领板 -->
<el-tab-pane
:label="tabs[1].label"
:name="tabs[1].name"
><MyRecieve :active-status="activeStatus" />
</el-tab-pane>
<script>
// 切换状态按钮
changeActive(value) {
this.activeStatus = value;
console.log(this.activeStatus);
}
</script>
在这个组件中，我们看到作用我的领板的值是 activeStatus，然后通过 changeActive 方法来改变 activeStatus 的值，从而实现跳转至我的领板 -> 进行中。
效果图如下：
到此，这个问题就得到了解决，总结来说遇到类似的问题就是要去追溯源头，看看是哪里作用这个功能，然后对症下药。因为本人还是小白阶段，如果有大神有更好的方法，也请多多分享，不吝赐教。
