jiaxing.zhou

refactor(reportingData): 优化申报操作界面和流程

-将离境单申报和撤销单申报从下拉菜单移至独立按钮
- 优化申报数据方法,提高代码复用性
- 添加申报按钮样式,统一视觉效果
- 修复申报操作中的加载状态和错误处理
......@@ -146,7 +146,7 @@
type="primary"
v-loading="loadings.dropDownLoading"
@command="dropdownChange"
@click="declareData"
@click="declareData('dropDownLoading', dropdownName, dropdownCode)"
>
<svg-icon
class="el-icon-user-solid"
......@@ -170,16 +170,36 @@
:command="{ code: 'totalScore', name: '清单总分单申报' }"
>清单总分单申报</el-dropdown-item
>
<el-dropdown-item
:command="{ code: 'cancellation', name: '撤销单申报' }"
>撤销单申报</el-dropdown-item
>
<el-dropdown-item
:command="{ code: 'logisticsDeparture', name: '离境单申报' }"
>离境单申报</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<!-- 离境单申报按钮 -->
<el-button
size="small"
type="primary"
class="dropdown-style-button"
:loading="loadings.departureLoading"
@click="declareData('departureLoading', '离境单申报', 'logisticsDeparture')"
>
<svg-icon
class="el-icon-user-solid"
icon-class="fedexDeclareIcon"
></svg-icon>
离境单申报
</el-button>
<!-- 撤销单申报按钮 -->
<el-button
size="small"
type="primary"
class="dropdown-style-button"
:loading="loadings.revokeLoading"
@click="declareData('revokeLoading', '撤销单申报' ,'cancellation')"
>
<svg-icon
class="el-icon-user-solid"
icon-class="fedexDeclareIcon"
></svg-icon>
撤销单申报
</el-button>
<el-button
class="entrySaveButton"
size="small"
......@@ -558,6 +578,8 @@ export default {
dropDownLoading: false,
logTableLoading: false,
exportDeclareLoading:false,
revokeLoading: false, // 撤销单申报加载状态
departureLoading: false, // 离境单申报加载状态
},
textareaVisible: {},
tableMaxheight: null,
......@@ -743,44 +765,52 @@ export default {
this.loadings.exportDeclareLoading = false;
},
//申报
declareData() {
if (this.selected.length > 0) {
this.loadings.dropDownLoading = true;
let obj = {
declareIds: [],
type: this.dropdownCode,
/**
* 通用申报方法
* @param {string} loadingKey - 加载状态的 key(如 'dropDownLoading', 'departureLoading', 'revokeLoading')
* @param {string} dropdownName - 当前操作名称(如 '撤销单申报')
* @param {string} dropdownCode - 当前操作代码(如 'full')
*/
declareData(loadingKey, dropdownName, dropdownCode) {
if (this.selected.length === 0) {
this.alertWarningMsg("请选择数据!");
return;
}
// 设置加载状态
this.$set(this.loadings, loadingKey, true);
// 构造请求参数
const obj = {
declareIds: this.selected.map(item => item.declareId),
type: dropdownCode,
};
this.selected.forEach((item) => {
obj.declareIds.push(item.declareId);
});
if (this.dropdownName === '撤销单申报') {
this.revokeVisible = true
return
// 如果是撤销单申报,显示弹窗并返回
if (dropdownName === '撤销单申报') {
this.revokeVisible = true;
this.$set(this.loadings, loadingKey, false);
return;
}
// 提交申报数据
declareDataUpload(obj)
.then((res) => {
if (res.code === "200") {
// this.alertSuccessMsg(res.message);
this.alertSuccessMsg("数据已成功提交申报,请等待海关回执。");
} else {
this.alertWarningMsg(res.message);
}
this.loadings.dropDownLoading = false;
this.search(0);
})
.catch((err) => {
console.log(err);
this.loadings.dropDownLoading = false;
console.error(err);
this.alertWarningMsg("申报失败,请稍后重试。");
})
.finally(() => {
// 无论成功或失败,都重置加载状态并刷新数据
this.$set(this.loadings, loadingKey, false);
this.search(0);
});
} else {
this.alertWarningMsg("请选择数据!");
}
},
},
//切换申报模式
dropdownChange(val) {
this.dropdownName = val.name;
......@@ -1021,6 +1051,14 @@ export default {
display: flex;
justify-content: space-between;
/* 使按钮样式与 el-dropdown 一致 */
.el-button.dropdown-style-button {
background-color: #ffffff !important;
border: 2px solid $fedexBottonColor !important; /* 设置边框颜色 */
color: $fedexBottonColor !important;
font-size: 12px !important;
}
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
......