fix(styles): 优化多页面表单及弹窗样式统一性和功能

- 全站业务状态标签文字化，el-tag.status-text 转为纯文本，统一字号、行高和基线对齐
- 临时额度详情弹窗加宽 label 列宽至 180px，避免标签折成三行
- 年检记录费用字段将单位“元”移至标签内，清理无效 append 配置和 template 代码
- 维修记录里程字段单位动态显示于标签，移除输入框右侧单位后缀
- 全站 Avue CRUD 弹窗标题自动添加页面全称，支持手动覆盖和自定义
- 合同管理独立表单页顶部补充“新增合同管理”标题，统一与其它表单页面样式
- 结算-正式结算页表格整合到“应付/应收”两个标签页内，复用组件并调整操作列宽度至320px
- 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配
- 取消部分页面样式中冗余或注释代码，调整组件内按钮布局和权限判断函数逻辑
- 新增全局 mixin 以设置 CRUD 弹窗标题，主入口 main.js 注册相关初始化函数

src/views/settlement/formal-settlement.vue

@@ -46,149 +46,41 @@
         v-model="activeSettlementType"
         @tab-change="handleSettlementTypeChange"
       >
-        <el-tab-pane label="应付" name="payable" />
-        <el-tab-pane label="应收" name="receivable" />
+        <el-tab-pane label="应付" name="payable">
+          <formal-settlement-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermissionFn"
+            @create="openCreate"
+            @payment="openPaymentDialog"
+            @sync="handleSync"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="onPageChange"
+            @action="onAction"
+            @update:selection="selection = $event"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="应收" name="receivable">
+          <formal-settlement-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermissionFn"
+            @create="openCreate"
+            @payment="openPaymentDialog"
+            @sync="handleSync"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="onPageChange"
+            @action="onAction"
+            @update:selection="selection = $event"
+          />
+        </el-tab-pane>
       </el-tabs>
-      <div class="formal-page__toolbar">
-        <div>
-          <el-button
-            v-if="hasPermission('formal_settlement_add')"
-            type="primary"
-            @click="openCreate"
-            >新增</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_payment')"
-            type="primary"
-            plain
-            disabled
-            @click="openPaymentDialog"
-            >付款申请</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_sync')"
-            type="primary"
-            plain
-            disabled
-            @click="handleSync"
-            >同步金蝶</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_print')"
-            type="primary"
-            plain
-            @click="handlePrint"
-            >打印结算单</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_export')"
-            type="primary"
-            plain
-            @click="handleExport"
-            >导出</el-button
-          >
-        </div>
-        <div class="formal-page__toolbar-right">
-          <el-tooltip content="刷新" placement="top">
-            <el-button :icon="Refresh" text @click="loadTable" />
-          </el-tooltip>
-        </div>
-      </div>
-      <el-table v-loading="loading" :data="rows" border @selection-change="selection = $event">
-        <el-table-column type="selection" width="52" fixed="left" align="center" />
-        <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
-        <el-table-column
-          v-for="column in columns"
-          :key="column.prop"
-          v-bind="column"
-          align="center"
-          show-overflow-tooltip
-        >
-          <template #default="{ row }">
-            <el-link v-if="column.link && row[column.prop]" type="primary" @click="openView(row)">{{
-              row[column.prop]
-            }}</el-link>
-            <el-tag v-else-if="column.status" :type="statusType(row.approvalStatus)" class="status-text">{{
-              displayValue(row[column.prop])
-            }}</el-tag>
-            <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
-            <span v-else-if="column.prop === 'invoiceStatusName'">{{
-              invoiceName(row.invoiceStatus)
-            }}</span>
-            <span v-else-if="column.prop === 'paymentStatusName'">{{
-              paymentName(row.paymentStatus)
-            }}</span>
-            <span v-else>{{ displayValue(row[column.prop]) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right" align="center">
-          <template #default="{ row }"
-            ><div class="formal-page__links">
-              <el-link
-                v-if="hasPermission('formal_settlement_view')"
-                type="primary"
-                @click="openView(row)"
-                >查看</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_edit') && isEditable(row)"
-                type="primary"
-                @click="openEdit(row)"
-                >编辑</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_delete') && row.approvalStatus === 'draft'"
-                type="danger"
-                @click="handleDelete(row)"
-                >删除</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_submit') && isEditable(row)"
-                type="primary"
-                @click="handleSubmit(row)"
-                >提交</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing'
-                "
-                type="primary"
-                @click="handleApprove(row)"
-                >通过</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing'
-                "
-                type="danger"
-                @click="handleReturn(row)"
-                >驳回</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_void') &&
-                  row.approvalStatus === 'approved' &&
-                  row.kingdeeSyncStatus !== 'synced'
-                "
-                type="danger"
-                @click="handleVoid(row)"
-                >作废</el-link
-              >
-            </div></template
-          >
-        </el-table-column>
-      </el-table>
-      <div class="formal-page__pagination">
-        <el-pagination
-          v-model:current-page="page.current"
-          v-model:page-size="page.size"
-          :total="page.total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="loadTable"
-          @size-change="handleSizeChange"
-        />
-      </div>
     </section>
     <formal-settlement-editor
       v-model="editor.visible"
@@ -239,7 +131,7 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowUp, Refresh } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as XLSX from 'xlsx';
 import * as api from '@/api/settlement/formalSettlement';
@@ -250,6 +142,7 @@ import {
 } from '@/option/settlement/formalSettlementSearch';
 import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
+import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
 
 const emptyQuery = () => ({
   formalSettlementNo: '',
@@ -268,12 +161,11 @@ const emptyQuery = () => ({
 
 export default {
   name: 'FormalSettlement',
-  components: { FormalSettlementEditor },
+  components: { FormalSettlementEditor, FormalSettlementTablePanel },
   data() {
     return {
       ArrowDown,
       ArrowUp,
-      Refresh,
       query: emptyQuery(),
       searchExpanded: false,
       activeSettlementType: 'payable',
@@ -294,6 +186,9 @@ export default {
   },
   computed: {
     ...mapGetters(['permission']),
+    hasPermissionFn() {
+      return code => this.permission?.[code] !== false;
+    },
     visibleSearchFields() {
       return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
     },
@@ -339,6 +234,24 @@ export default {
       this.page.current = 1;
       this.loadTable();
     },
+    onPageChange({ current, size }) {
+      this.page.current = current;
+      this.page.size = size;
+      this.loadTable();
+    },
+    onAction({ type, row }) {
+      const handlers = {
+        view: () => this.openView(row),
+        edit: () => this.openEdit(row),
+        delete: () => this.handleDelete(row),
+        submit: () => this.handleSubmit(row),
+        approve: () => this.handleApprove(row),
+        return: () => this.handleReturn(row),
+        void: () => this.handleVoid(row),
+        print: () => this.handlePrint(row),
+      };
+      (handlers[type] || (() => {}))();
+    },
     openCreate() {
       this.$router.push({
         path: '/settlement/formal-settlement/form',
@@ -436,9 +349,11 @@ export default {
         this.paymentDialog.loading = false;
       }
     },
-    handlePrint() {
-      const row = this.selectedOne('打印');
-      if (!row) return;
+    handlePrint(row) {
+      if (!row) {
+        row = this.selectedOne('打印');
+        if (!row) return;
+      }
       const win = window.open('', '_blank');
       if (!win) return this.$message.warning('浏览器阻止了打印窗口，请允许弹窗后重试');
       win.document.write(
@@ -578,28 +493,6 @@ export default {
 .formal-page__table-panel {
   margin-top: 8px;
 }
-.formal-page__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-.formal-page__toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.formal-page__links {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-.formal-page__pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
 .formal-page :deep(.el-table) {
   --el-table-border-color: #eff1f7;
 }