jiaxing.zhou

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

-将离境单申报和撤销单申报从下拉菜单移至独立按钮
- 优化申报数据方法,提高代码复用性
- 添加申报按钮样式,统一视觉效果
- 修复申报操作中的加载状态和错误处理
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
146 type="primary" 146 type="primary"
147 v-loading="loadings.dropDownLoading" 147 v-loading="loadings.dropDownLoading"
148 @command="dropdownChange" 148 @command="dropdownChange"
149 - @click="declareData" 149 + @click="declareData('dropDownLoading', dropdownName, dropdownCode)"
150 > 150 >
151 <svg-icon 151 <svg-icon
152 class="el-icon-user-solid" 152 class="el-icon-user-solid"
...@@ -170,16 +170,36 @@ ...@@ -170,16 +170,36 @@
170 :command="{ code: 'totalScore', name: '清单总分单申报' }" 170 :command="{ code: 'totalScore', name: '清单总分单申报' }"
171 >清单总分单申报</el-dropdown-item 171 >清单总分单申报</el-dropdown-item
172 > 172 >
173 - <el-dropdown-item
174 - :command="{ code: 'cancellation', name: '撤销单申报' }"
175 - >撤销单申报</el-dropdown-item
176 - >
177 - <el-dropdown-item
178 - :command="{ code: 'logisticsDeparture', name: '离境单申报' }"
179 - >离境单申报</el-dropdown-item
180 - >
181 </el-dropdown-menu> 173 </el-dropdown-menu>
182 </el-dropdown> 174 </el-dropdown>
175 + <!-- 离境单申报按钮 -->
176 + <el-button
177 + size="small"
178 + type="primary"
179 + class="dropdown-style-button"
180 + :loading="loadings.departureLoading"
181 + @click="declareData('departureLoading', '离境单申报', 'logisticsDeparture')"
182 + >
183 + <svg-icon
184 + class="el-icon-user-solid"
185 + icon-class="fedexDeclareIcon"
186 + ></svg-icon>
187 + 离境单申报
188 + </el-button>
189 + <!-- 撤销单申报按钮 -->
190 + <el-button
191 + size="small"
192 + type="primary"
193 + class="dropdown-style-button"
194 + :loading="loadings.revokeLoading"
195 + @click="declareData('revokeLoading', '撤销单申报' ,'cancellation')"
196 + >
197 + <svg-icon
198 + class="el-icon-user-solid"
199 + icon-class="fedexDeclareIcon"
200 + ></svg-icon>
201 + 撤销单申报
202 + </el-button>
183 <el-button 203 <el-button
184 class="entrySaveButton" 204 class="entrySaveButton"
185 size="small" 205 size="small"
...@@ -558,6 +578,8 @@ export default { ...@@ -558,6 +578,8 @@ export default {
558 dropDownLoading: false, 578 dropDownLoading: false,
559 logTableLoading: false, 579 logTableLoading: false,
560 exportDeclareLoading:false, 580 exportDeclareLoading:false,
581 + revokeLoading: false, // 撤销单申报加载状态
582 + departureLoading: false, // 离境单申报加载状态
561 }, 583 },
562 textareaVisible: {}, 584 textareaVisible: {},
563 tableMaxheight: null, 585 tableMaxheight: null,
...@@ -743,43 +765,51 @@ export default { ...@@ -743,43 +765,51 @@ export default {
743 this.loadings.exportDeclareLoading = false; 765 this.loadings.exportDeclareLoading = false;
744 }, 766 },
745 767
746 - //申报 768 + /**
747 - declareData() { 769 + * 通用申报方法
748 - if (this.selected.length > 0) { 770 + * @param {string} loadingKey - 加载状态的 key(如 'dropDownLoading', 'departureLoading', 'revokeLoading')
749 - this.loadings.dropDownLoading = true; 771 + * @param {string} dropdownName - 当前操作名称(如 '撤销单申报')
750 - let obj = { 772 + * @param {string} dropdownCode - 当前操作代码(如 'full')
751 - declareIds: [], 773 + */
752 - type: this.dropdownCode, 774 + declareData(loadingKey, dropdownName, dropdownCode) {
775 + if (this.selected.length === 0) {
776 + this.alertWarningMsg("请选择数据!");
777 + return;
778 + }
779 +
780 + // 设置加载状态
781 + this.$set(this.loadings, loadingKey, true);
782 + // 构造请求参数
783 + const obj = {
784 + declareIds: this.selected.map(item => item.declareId),
785 + type: dropdownCode,
753 }; 786 };
754 - this.selected.forEach((item) => {
755 - obj.declareIds.push(item.declareId);
756 - });
757 787
758 - if (this.dropdownName === '撤销单申报') { 788 + // 如果是撤销单申报,显示弹窗并返回
759 - this.revokeVisible = true 789 + if (dropdownName === '撤销单申报') {
760 - return 790 + this.revokeVisible = true;
791 + this.$set(this.loadings, loadingKey, false);
792 + return;
761 } 793 }
762 794
795 + // 提交申报数据
763 declareDataUpload(obj) 796 declareDataUpload(obj)
764 .then((res) => { 797 .then((res) => {
765 if (res.code === "200") { 798 if (res.code === "200") {
766 - // this.alertSuccessMsg(res.message);
767 this.alertSuccessMsg("数据已成功提交申报,请等待海关回执。"); 799 this.alertSuccessMsg("数据已成功提交申报,请等待海关回执。");
768 } else { 800 } else {
769 this.alertWarningMsg(res.message); 801 this.alertWarningMsg(res.message);
770 } 802 }
771 - this.loadings.dropDownLoading = false;
772 - this.search(0);
773 }) 803 })
774 .catch((err) => { 804 .catch((err) => {
775 - console.log(err); 805 + console.error(err);
776 - this.loadings.dropDownLoading = false; 806 + this.alertWarningMsg("申报失败,请稍后重试。");
807 + })
808 + .finally(() => {
809 + // 无论成功或失败,都重置加载状态并刷新数据
810 + this.$set(this.loadings, loadingKey, false);
811 + this.search(0);
777 }); 812 });
778 -
779 -
780 - } else {
781 - this.alertWarningMsg("请选择数据!");
782 - }
783 }, 813 },
784 //切换申报模式 814 //切换申报模式
785 dropdownChange(val) { 815 dropdownChange(val) {
...@@ -1021,6 +1051,14 @@ export default { ...@@ -1021,6 +1051,14 @@ export default {
1021 display: flex; 1051 display: flex;
1022 justify-content: space-between; 1052 justify-content: space-between;
1023 1053
1054 + /* 使按钮样式与 el-dropdown 一致 */
1055 + .el-button.dropdown-style-button {
1056 + background-color: #ffffff !important;
1057 + border: 2px solid $fedexBottonColor !important; /* 设置边框颜色 */
1058 + color: $fedexBottonColor !important;
1059 + font-size: 12px !important;
1060 + }
1061 +
1024 .el-button { 1062 .el-button {
1025 color: $fedexButton; 1063 color: $fedexButton;
1026 border-color: $fedexButton !important; 1064 border-color: $fedexButton !important;
......