1、新增结算模块

2、调整业务模块
3、调整客商模块

src/views/business/project-apply.vue

@@ -1,6 +1,7 @@
 <template>
   <basic-container class="project-apply-page">
     <avue-crud
+      v-if="!isProjectFormPage"
       :option="tableOption"
       :table-loading="loading"
       :data="data"
@@ -83,22 +84,23 @@
     </avue-crud>
 
     <empty-pagination
+      v-if="!isProjectFormPage"
       :page="page"
       @size-change="sizeChange"
       @current-change="currentChange"
       @load="onLoad(page, query)"
     />
 
-    <el-dialog
-      v-model="projectBox"
-      :title="projectDialogTitle"
-      append-to-body
-      destroy-on-close
-      width="1440px"
-      top="4vh"
-      class="project-apply-dialog"
+    <component
+      :is="projectFormContainer"
+      v-if="projectBox"
+      v-bind="projectFormContainerProps"
+      @update:model-value="projectBox = $event"
       @closed="resetProjectDialog"
     >
+      <div v-if="isProjectFormPage" class="project-apply-page__title">
+        {{ projectDialogTitle }}
+      </div>
       <el-form
         ref="projectForm"
         :model="form"
@@ -215,6 +217,7 @@
               filterable
               clearable
               collapse-tags
+              collapse-tags-tooltip
               :loading="customerLoading"
               @visible-change="visible => visible && loadCustomerOptions('客户')"
               @change="handleCustomerChange"
@@ -235,6 +238,7 @@
               filterable
               clearable
               collapse-tags
+              collapse-tags-tooltip
               :loading="carrierLoading"
               @visible-change="visible => visible && loadCustomerOptions('承运商')"
               @change="handleCarrierChange"
@@ -602,11 +606,10 @@
         </template>
       </el-form>
 
-      <template #footer>
-        <div
-          class="project-apply-dialog__footer"
-          :class="{ 'project-apply-dialog__footer--change': isChangeDialog }"
-        >
+      <div
+        class="project-apply-dialog__footer"
+        :class="{ 'project-apply-dialog__footer--change': isChangeDialog }"
+      >
           <template v-if="isChangeDialog">
             <el-button type="primary" :loading="submitLoading" @click="saveChangeProject">
               保存
@@ -614,10 +617,11 @@
             <el-button type="primary" :loading="submitLoading" @click="submitChangeProject">
               提交
             </el-button>
-            <el-button @click="handleCancelProject">取消</el-button>
+            <el-button v-if="!isProjectFormPage" @click="handleCancelProject">取消</el-button>
+            <el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
           </template>
           <template v-else>
-            <el-button @click="handleCancelProject">取消</el-button>
+            <el-button v-if="!isProjectFormPage" @click="handleCancelProject">取消</el-button>
             <el-button
               v-if="!dialogReadonly"
               type="primary"
@@ -634,10 +638,10 @@
             >
               提交
             </el-button>
+            <el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
           </template>
-        </div>
-      </template>
-    </el-dialog>
+      </div>
+    </component>
 
     <el-dialog
       v-model="userBox"
@@ -1005,6 +1009,24 @@ export default {
     isChangeDialog() {
       return this.dialogType === 'change';
     },
+    isProjectFormPage() {
+      return this.$route.path === '/business/project-apply/form';
+    },
+    projectFormContainer() {
+      return this.isProjectFormPage ? 'div' : 'el-dialog';
+    },
+    projectFormContainerProps() {
+      if (this.isProjectFormPage) return { class: 'project-apply-page-form' };
+      return {
+        modelValue: this.projectBox,
+        title: this.projectDialogTitle,
+        appendToBody: true,
+        destroyOnClose: true,
+        width: '1440px',
+        top: '4vh',
+        class: 'project-apply-dialog',
+      };
+    },
     isBasicInfoReadonly() {
       return this.dialogReadonly || this.isChangeDialog;
     },
@@ -1037,6 +1059,9 @@ export default {
     this.loadDeptOptions();
     this.loadCargoTypeOptions();
     this.loadTransportTypeOptions();
+    if (this.isProjectFormPage) {
+      this.openProjectFormPage();
+    }
   },
   methods: {
     buildTableOption() {
@@ -1055,6 +1080,26 @@ export default {
     hasPermission(code) {
       return this.isAdmin || this.validData(this.permission && this.permission[code], false);
     },
+    openProjectFormPage() {
+      const type = this.$route.query.mode === 'edit' ? 'edit' : 'add';
+      const id = this.$route.query.id;
+      this.dialogType = type;
+      this.dialogReadonly = false;
+      this.projectBox = true;
+      if (type === 'add') {
+        this.applyProjectDetail({ ...emptyForm(), projectType: '普通项目' });
+        this.fillDefaultUsers();
+        return;
+      }
+      this.api.getDetail(id).then(res => this.applyProjectDetail(res.data.data || {}));
+    },
+    closeProjectForm() {
+      if (this.isProjectFormPage) {
+        this.$router.push('/business/project-apply');
+      } else {
+        this.projectBox = false;
+      }
+    },
     statusValue(row) {
       return row[this.config.statusProp || 'status'];
     },
@@ -1265,6 +1310,16 @@ export default {
       });
     },
     openProjectDialog(type, row = {}) {
+      if (['add', 'edit'].includes(type)) {
+        this.$router.push({
+          path: '/business/project-apply/form',
+          query:
+            type === 'edit'
+              ? { mode: type, id: row.id, name: `编辑${this.config.title}` }
+              : { mode: type, name: `新增${this.config.title}` },
+        });
+        return;
+      }
       this.dialogType = type;
       this.dialogReadonly = type === 'view';
       this.projectBox = true;
@@ -1390,7 +1445,7 @@ export default {
                 return;
               }
               this.$message.success('操作成功!');
-              this.projectBox = false;
+              this.closeProjectForm();
               this.onLoad(this.page, this.query);
             },
             error => {
@@ -1412,7 +1467,7 @@ export default {
             return;
           }
           this.$message.success('保存成功!');
-          this.projectBox = false;
+          this.closeProjectForm();
           this.onLoad(this.page, this.query);
         })
         .finally(() => {
@@ -1420,8 +1475,12 @@ export default {
         });
     },
     handleCancelProject() {
+      if (this.isProjectFormPage) {
+        this.closeProjectForm();
+        return;
+      }
       if (!['add', 'majorSupplement', 'change'].includes(this.dialogType)) {
-        this.projectBox = false;
+        this.closeProjectForm();
         return;
       }
       this.$confirm('确认后直接关闭弹窗，列表无数据变更，是否继续？', '提示', {
@@ -1429,7 +1488,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning',
       }).then(() => {
-        this.projectBox = false;
+        this.closeProjectForm();
       });
     },
     saveChangeProject() {
@@ -1456,7 +1515,7 @@ export default {
               return;
             }
             this.$message.success(`${needSubmit ? '提交' : '保存'}成功!`);
-            this.projectBox = false;
+            this.closeProjectForm();
             this.onLoad(this.page, this.query);
           })
           .finally(() => {
@@ -1905,8 +1964,8 @@ export default {
 
   &__grid {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    column-gap: 72px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    column-gap: 24px;
     row-gap: 0;
     margin-bottom: 12px;
     background: #fff;
@@ -2042,17 +2101,62 @@ export default {
   background: #f5f6fa;
 }
 
+.project-apply-page-form {
+  min-height: 100%;
+  padding: 20px 24px 92px;
+  background: #f5f6fa;
+}
+
+.project-apply-page__title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+
+  &::before {
+    width: 4px;
+    height: 18px;
+    margin-right: 8px;
+    background: #409eff;
+    border-radius: 2px;
+    content: '';
+  }
+}
+
 .project-apply-dialog__footer {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 
+  .project-apply-page-form & {
+    position: fixed;
+    right: 0;
+    left: 230px;
+    bottom: 0;
+    z-index: 10;
+    margin: 0;
+    padding: 12px 24px;
+    border-top: 1px solid #eff1f7;
+    background: #fff;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  }
+
   &--change {
     justify-content: flex-start;
     padding-left: 24px;
   }
 }
 
+:global(.avue--collapse .project-apply-page-form .project-apply-dialog__footer) {
+  left: 60px;
+}
+
+:global(.avue-layout--horizontal .project-apply-page-form .project-apply-dialog__footer) {
+  left: 0;
+}
+
 .project-apply-user-dialog {
   &__search {
     display: grid;