✨ 新增导入结算单页面，并优化 MK 开关缓存与客商同步入口

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/settlement/components/pre-settlement-editor.vue

@@ -975,7 +975,7 @@ import {
 } from '@/option/settlement/preSettlementTable';
 import { formatContractOptionLabel } from '@/utils/contract';
 import { downloadFileByUrl } from '@/utils/util';
-import { submitMkApprovalFlow } from '@/utils/mk-approval';
+import { loadMkEnabled, submitMkApprovalFlow } from '@/utils/mk-approval';
 import * as XLSX from 'xlsx';
 import { isAdministrator } from '@/utils/auth';
 
@@ -1623,13 +1623,14 @@ export default {
         if (shouldSubmit) {
           const previousApprovalStatus = this.form.approvalStatus || '';
           await submit({ id: this.form.id });
-          await submitMkApprovalFlow({
+          const mkStarted = await submitMkApprovalFlow({
             bizType: 'pre-settlement',
             bizId: this.form.id,
             subjectName: this.form.preSettlementNo || this.form.contractName || '',
             approvalStatus: previousApprovalStatus,
+            mkEnabled: await loadMkEnabled().catch(() => false),
           });
-          this.$message.success('审批流程已发起');
+          this.$message.success(mkStarted ? '审批流程已发起' : '提交成功');
           this.visible = false;
           this.$emit('success', this.form.id);
           return;

src/views/settlement/formal-settlement.vue

@@ -368,6 +368,7 @@ export default {
         bizId: row.id,
         subjectName: row.formalSettlementNo || '',
         approvalStatus: previousApprovalStatus,
+        mkEnabled: this.mkEnabled,
       });
       this.$message.success('提交成功');
       this.loadTable();

src/views/settlement/pre-settlement.vue

@@ -661,6 +661,7 @@ export default {
         bizId: row.id,
         subjectName: row.preSettlementNo || '',
         approvalStatus: previousApprovalStatus,
+        mkEnabled: this.mkEnabled,
       });
       this.$message.success('提交成功');
       this.loadTable();

src/views/settlement/settlement-import-form.vue

@@ -0,0 +1,49 @@
+<template>
+  <basic-container class="settlement-import-form-page">
+    <div class="settlement-import-form-page__title">{{ pageTitle }}</div>
+    <settlement-import-page />
+  </basic-container>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import SettlementImportPage from './components/settlement-import-page.vue';
+
+const route = useRoute();
+const pageTitle = computed(() => (route.query.id ? '编辑导入结算单' : '新增导入结算单'));
+</script>
+
+<style scoped lang="scss">
+.settlement-import-form-page {
+  :deep(.basic-container__card) {
+    background: #fff;
+  }
+
+  :deep(.basic-container__card > .el-card__body) {
+    padding: 0;
+    background: #fff;
+  }
+}
+
+.settlement-import-form-page__title {
+  position: relative;
+  padding: 16px 24px 12px 36px;
+  border-bottom: 1px solid #eff1f7;
+  background: #fff;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+
+  &::before {
+    position: absolute;
+    top: 16px;
+    left: 24px;
+    width: 4px;
+    height: 22px;
+    border-radius: 2px;
+    background: #409eff;
+    content: '';
+  }
+}
+</style>

src/views/settlement/settlement-import.vue

@@ -0,0 +1,507 @@
+<template>
+  <basic-container class="settlement-import-page">
+    <section v-show="searchVisible" class="settlement-import-page__search">
+      <el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
+        <div class="settlement-import-page__search-grid">
+          <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
+            <el-select
+              v-if="field.type === 'select'"
+              v-model="query[field.prop]"
+              clearable
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in field.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
+          </el-form-item>
+          <div class="settlement-import-page__search-actions">
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
+              {{ searchExpanded ? '收起' : '展开' }}
+            </el-button>
+          </div>
+        </div>
+      </el-form>
+    </section>
+
+    <section class="settlement-import-page__table-panel">
+      <div class="settlement-import-page__toolbar">
+        <div class="settlement-import-page__toolbar-left">
+          <el-button
+            v-if="hasPermission('settlement_import_add')"
+            type="primary"
+            @click="openCreate"
+          >
+            新增
+          </el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="rows" border class="settlement-import-page__table">
+        <el-table-column type="index" label="序号" width="64" align="center" />
+        <el-table-column prop="batchNo" label="导入批次号" min-width="160">
+          <template #default="{ row }">
+            <el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="settlementTypeName" label="导入类型" min-width="100">
+          <template #default="{ row }">
+            {{ row.settlementTypeName || settlementTypeLabel(row.settlementType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="settlementBillTypeName" label="结算单" min-width="110">
+          <template #default="{ row }">
+            {{ row.settlementBillTypeName || settlementBillTypeLabel(row.settlementBillType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="projectName" label="项目" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="customerName" label="客户" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="carrierName" label="承运商" min-width="140" show-overflow-tooltip />
+        <el-table-column label="明细行数" width="100" align="center">
+          <template #default="{ row }">
+            {{ row.waybillCount ?? row.detailCount ?? 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="170" />
+        <el-table-column prop="createUserName" label="创建人" min-width="120">
+          <template #default="{ row }">{{ row.createUserName || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <div class="settlement-import-page__row-actions">
+              <el-link type="primary" @click="openDetail(row)">详情</el-link>
+              <el-link
+                v-if="row.importStatus !== 'voided' && hasPermission('settlement_import_void')"
+                type="danger"
+                @click="openVoid(row)"
+              >
+                作废
+              </el-link>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="settlement-import-page__pagination">
+        <el-pagination
+          background
+          v-model:current-page="page.current"
+          v-model:page-size="page.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="page.total"
+          @current-change="loadTable"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </section>
+
+    <el-dialog v-model="detailVisible" title="导入结算单详情" width="640px" append-to-body>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="导入批次号">{{ detail.batchNo || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="导入类型">
+          {{ detail.settlementTypeName || settlementTypeLabel(detail.settlementType) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="结算单">
+          {{ detail.settlementBillTypeName || settlementBillTypeLabel(detail.settlementBillType) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="运单类型">
+          {{ detail.waybillModeName || waybillModeLabel(detail.waybillMode) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="项目">{{ detail.projectName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="客户">{{ detail.customerName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="客户合同">
+          {{ detail.customerContractName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="承运商">{{ detail.carrierName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="承运商合同">
+          {{ detail.carrierContractName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="明细行数">
+          {{ detail.waybillCount ?? detail.detailCount ?? 0 }}
+        </el-descriptions-item>
+        <el-descriptions-item label="导入状态">
+          {{ detail.importStatusName || detail.importStatus || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">{{ detail.createUserName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="关联结算单" :span="2">
+          <el-link
+            v-if="detail.formalSettlementId"
+            type="primary"
+            @click="goFormalSettlement(detail)"
+          >
+            {{ detail.formalSettlementNo || detail.formalSettlementId }}
+          </el-link>
+          <el-link
+            v-else-if="detail.preSettlementId"
+            type="primary"
+            @click="goPreSettlement(detail)"
+          >
+            {{ detail.preSettlementNo || detail.preSettlementId }}
+          </el-link>
+          <span v-else>-</span>
+        </el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+        <el-button
+          v-if="detail.importStatus === 'draft'"
+          type="primary"
+          @click="editDraft(detail)"
+        >
+          编辑草稿
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="voidVisible" title="作废导入结算单" width="480px" append-to-body>
+      <el-form
+        ref="voidFormRef"
+        :model="voidForm"
+        :rules="voidRules"
+        label-position="right"
+        label-width="auto"
+      >
+        <el-form-item label="作废原因" prop="reason">
+          <el-input
+            v-model="voidForm.reason"
+            type="textarea"
+            :rows="4"
+            maxlength="200"
+            show-word-limit
+            placeholder="请输入作废原因"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="voidVisible = false">取消</el-button>
+        <el-button type="danger" :loading="voidLoading" @click="submitVoid">确认作废</el-button>
+      </template>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import { mapGetters } from 'vuex';
+import * as api from '@/api/settlement/settlementImport';
+
+const emptyQuery = () => ({
+  batchNo: '',
+  settlementType: '',
+  projectName: '',
+  customerName: '',
+  carrierName: '',
+});
+
+const SETTLEMENT_TYPE_OPTIONS = [
+  { label: '全部', value: '' },
+  { label: '应收正式结算单', value: 'receivable' },
+  { label: '应付正式结算单', value: 'payable' },
+];
+
+export default {
+  name: 'SettlementImport',
+  data() {
+    return {
+      ArrowDown,
+      ArrowUp,
+      searchVisible: true,
+      searchExpanded: false,
+      loading: false,
+      query: emptyQuery(),
+      rows: [],
+      page: { current: 1, size: 10, total: 0 },
+      batchNoOptions: [],
+      detailVisible: false,
+      detail: {},
+      voidVisible: false,
+      voidLoading: false,
+      voidForm: { id: null, reason: '' },
+      voidRules: {
+        reason: [
+          { required: true, message: '请输入作废原因', trigger: 'blur' },
+          { max: 200, message: '作废原因不能超过200个字', trigger: 'blur' },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(['permission', 'userInfo']),
+    isAdmin() {
+      const authority = this.userInfo?.authority || '';
+      return String(authority).includes('admin');
+    },
+    searchFields() {
+      return [
+        {
+          prop: 'batchNo',
+          label: '导入批次号',
+          type: 'select',
+          options: this.batchNoOptions,
+        },
+        {
+          prop: 'settlementType',
+          label: '导入类型',
+          type: 'select',
+          options: SETTLEMENT_TYPE_OPTIONS,
+        },
+        { prop: 'projectName', label: '项目', type: 'input' },
+        { prop: 'customerName', label: '客户', type: 'input' },
+        { prop: 'carrierName', label: '承运商', type: 'input' },
+      ];
+    },
+    visibleSearchFields() {
+      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
+    },
+  },
+  created() {
+    this.loadOptions();
+    this.loadTable();
+  },
+  methods: {
+    hasPermission(code) {
+      return this.isAdmin || this.validData(this.permission?.[code], false);
+    },
+    settlementTypeLabel(value) {
+      return (
+        SETTLEMENT_TYPE_OPTIONS.find(item => item.value === value)?.label || value || '-'
+      );
+    },
+    settlementBillTypeLabel(value) {
+      if (value === 'pre') return '预结算单';
+      return '正式结算单';
+    },
+    waybillModeLabel(value) {
+      if (value === 'history') return '历史运单';
+      return '新运单';
+    },
+    unwrapData(response) {
+      const body = response?.data || response || {};
+      return body?.data !== undefined ? body.data : body;
+    },
+    async loadOptions() {
+      try {
+        const response = await api.getOptions();
+        const options = this.unwrapData(response) || {};
+        const batchNos = Array.isArray(options.batchNos) ? options.batchNos : [];
+        this.batchNoOptions = [
+          { label: '全部', value: '' },
+          ...batchNos.map(item => {
+            if (typeof item === 'string') {
+              return { label: item, value: item };
+            }
+            const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
+            const label = item.name ?? item.label ?? item.batchNo ?? value;
+            return { label: String(label || ''), value: String(value || '') };
+          }),
+        ];
+      } catch (error) {
+        this.batchNoOptions = [{ label: '全部', value: '' }];
+      }
+    },
+    async loadTable() {
+      this.loading = true;
+      try {
+        const response = await api.getList(this.page.current, this.page.size, {
+          batchNo: this.query.batchNo || undefined,
+          settlementType: this.query.settlementType || undefined,
+          projectName: this.query.projectName || undefined,
+          customerName: this.query.customerName || undefined,
+          carrierName: this.query.carrierName || undefined,
+        });
+        const data = this.unwrapData(response) || {};
+        this.rows = data.records || [];
+        this.page.total = Number(data.total || 0);
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleSearch() {
+      this.page.current = 1;
+      this.loadTable();
+    },
+    resetSearch() {
+      this.query = emptyQuery();
+      this.handleSearch();
+    },
+    toggleSearch() {
+      this.searchExpanded = !this.searchExpanded;
+    },
+    handleSizeChange() {
+      this.page.current = 1;
+      this.loadTable();
+    },
+    openCreate() {
+      this.$router.push({ path: '/settlement/settlement-import/form' });
+    },
+    async openDetail(row) {
+      if (!row?.id) return;
+      try {
+        const response = await api.getDetail(row.id);
+        this.detail = this.unwrapData(response) || { ...row };
+      } catch (error) {
+        this.detail = { ...row };
+      }
+      this.detailVisible = true;
+    },
+    editDraft(row) {
+      this.detailVisible = false;
+      this.$router.push({
+        path: '/settlement/settlement-import/form',
+        query: { id: row.id },
+      });
+    },
+    goFormalSettlement(row) {
+      if (!row?.formalSettlementId) return;
+      this.detailVisible = false;
+      this.$router.push({
+        path: '/settlement/formal-settlement/form',
+        query: {
+          mode: 'view',
+          id: row.formalSettlementId,
+          name: '正式结算详情',
+        },
+      });
+    },
+    goPreSettlement(row) {
+      if (!row?.preSettlementId) return;
+      this.detailVisible = false;
+      this.$router.push({
+        path: '/settlement/pre-settlement/form',
+        query: {
+          mode: 'view',
+          id: row.preSettlementId,
+          name: '预结算详情',
+        },
+      });
+    },
+    openVoid(row) {
+      this.voidForm = { id: row.id, reason: '' };
+      this.voidVisible = true;
+      this.$nextTick(() => this.$refs.voidFormRef?.clearValidate());
+    },
+    async submitVoid() {
+      await this.$refs.voidFormRef?.validate();
+      this.voidLoading = true;
+      try {
+        await api.voidBatch({
+          id: this.voidForm.id,
+          reason: String(this.voidForm.reason || '').trim(),
+        });
+        this.$message.success('作废成功');
+        this.voidVisible = false;
+        this.loadTable();
+        this.loadOptions();
+      } finally {
+        this.voidLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.settlement-import-page__search {
+  padding: 12px 12px 4px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.settlement-import-page__search-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px 24px;
+  align-items: start;
+}
+
+.settlement-import-page__search :deep(.el-form-item) {
+  margin-bottom: 8px;
+}
+
+.settlement-import-page__search :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+
+.settlement-import-page__search :deep(.el-input),
+.settlement-import-page__search :deep(.el-select) {
+  width: 100%;
+}
+
+.settlement-import-page__search-actions {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.settlement-import-page__table-panel {
+  margin-top: 8px;
+  background: #fff;
+}
+
+.settlement-import-page__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0 0;
+}
+
+.settlement-import-page__toolbar-left {
+  display: flex;
+  gap: 8px;
+}
+
+.settlement-import-page__table {
+  --el-table-border-color: #eff1f7;
+}
+
+.settlement-import-page__table :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
+.settlement-import-page__table
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
+.settlement-import-page__table
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
+  background: #fafafa;
+}
+
+.settlement-import-page__row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.settlement-import-page__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 0;
+}
+
+.settlement-import-page :deep(.basic-container__card > .el-card__body) {
+  padding: 0;
+}
+
+@media (max-width: 1200px) {
+  .settlement-import-page__search-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .settlement-import-page__search-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>