cz-hjjc-oa/src/components/BudgetSourcePickerField.vue

<template>
  <div class="budget-source-field">
    <!-- 提交用隐藏字段 -->
    <input :name="fieldName" type="hidden" :value="normalizedValue" />

    <!-- 当前展示文本（有值时展示） -->
    <span v-if="hasValue && displayText" class="budget-source-label" :title="displayText">
      {{ displayText }}
    </span>
    <span
      v-else-if="hasValue && budgetDataId"
      class="budget-source-label budget-source-label--muted"
      :title="`预算ID: ${budgetDataId}`"
    >
      预算ID: {{ budgetDataId }}
    </span>
    <span
      v-else-if="hasValue"
      class="budget-source-label budget-source-label--muted"
      :title="normalizedValue"
    >
      {{ normalizedValue }}
    </span>

    <el-button type="primary" size="small" @click="openDialog">选取</el-button>
    <el-button v-if="hasValue" size="small" @click="clearValue">清除</el-button>

    <el-dialog
      title="选择预算来源"
      :visible.sync="dialogVisible"
      width="1300px"
      :close-on-click-modal="false"
      append-to-body
      @open="onDialogOpen"
      @close="onDialogClose"
    >
      <div style="margin-bottom: 12px">
        <el-select
          v-model="yearId"
          placeholder="请选择年份"
          filterable
          style="width: 100%"
          :loading="yearLoading"
          @change="onYearChange"
        >
          <el-option
            v-for="y in yearOptions"
            :key="String(y.value)"
            :label="y.label"
            :value="y.value"
          />
        </el-select>
      </div>

      <div style="display: flex; gap: 20px">
        <!-- 左侧：预算树 -->
        <div v-loading="treeLoading" style="flex: 1; max-width: 780px; max-height: 500px; overflow: auto; min-width: 0">
        <div v-if="departmentTree.length" class="tree-block">
          <div class="tree-title">部门预算</div>
          <el-tree
            ref="departmentTreeRef"
            :data="departmentTree"
            node-key="id"
            :props="treeProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            :check-on-click-node="false"
            @check-change="onTreeCheckChange"
            @node-click="onNodeClickToggle"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label" :class="{ 'node-label--clickable': data.is_leaf }" @click.stop="onLabelClick(data, node, $refs.departmentTreeRef)">{{ node.label }}</span>
              <span v-if="data.is_leaf" class="node-usage-info">
                <span class="usage-item">
                  <span class="usage-label">预算:</span>
                  <span class="usage-value">{{ formatAmount(data.budget_amount) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">已用:</span>
                  <span class="usage-value usage-value--used">{{ formatAmount(data.used_amount || 0) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">执行率:</span>
                  <span
                    class="usage-value usage-value--rate"
                    :class="getExecutionRateClass(data.execution_rate || 0)"
                  >
                    {{ formatExecutionRate(data.execution_rate || 0) }}
                  </span>
                </span>
              </span>
            </span>
          </el-tree>
        </div>

        <div v-if="projectTree.length" class="tree-block" style="margin-top: 16px">
          <div class="tree-title">自有账户</div>
          <el-tree
            ref="projectTreeRef"
            :data="projectTree"
            node-key="id"
            :props="treeProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            :check-on-click-node="false"
            @check-change="onTreeCheckChange"
            @node-click="onNodeClickToggle"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label" :class="{ 'node-label--clickable': data.is_leaf }" @click.stop="onLabelClick(data, node, $refs.projectTreeRef)">{{ node.label }}</span>
              <span v-if="data.is_leaf" class="node-usage-info">
                <span class="usage-item">
                  <span class="usage-label">预算:</span>
                  <span class="usage-value">{{ formatAmount(data.budget_amount) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">已用:</span>
                  <span class="usage-value usage-value--used">{{ formatAmount(data.used_amount || 0) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">执行率:</span>
                  <span
                    class="usage-value usage-value--rate"
                    :class="getExecutionRateClass(data.execution_rate || 0)"
                  >
                    {{ formatExecutionRate(data.execution_rate || 0) }}
                  </span>
                </span>
              </span>
            </span>
          </el-tree>
        </div>

        <div v-if="specialFundTree.length" class="tree-block" style="margin-top: 16px">
          <div class="tree-title">专项资金</div>
          <el-tree
            ref="specialFundTreeRef"
            :data="specialFundTree"
            node-key="id"
            :props="treeProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            :check-on-click-node="false"
            @check-change="onTreeCheckChange"
            @node-click="onNodeClickToggle"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label" :class="{ 'node-label--clickable': data.is_leaf }" @click.stop="onLabelClick(data, node, $refs.specialFundTreeRef)">{{ node.label }}</span>
              <span v-if="data.is_leaf" class="node-usage-info">
                <span class="usage-item">
                  <span class="usage-label">预算:</span>
                  <span class="usage-value">{{ formatAmount(data.budget_amount) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">已用:</span>
                  <span class="usage-value usage-value--used">{{ formatAmount(data.used_amount || 0) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">执行率:</span>
                  <span
                    class="usage-value usage-value--rate"
                    :class="getExecutionRateClass(data.execution_rate || 0)"
                  >
                    {{ formatExecutionRate(data.execution_rate || 0) }}
                  </span>
                </span>
              </span>
            </span>
          </el-tree>
        </div>

        <div v-if="lastYearCarryoverTree.length" class="tree-block" style="margin-top: 16px">
          <div class="tree-title">上一年结转资金</div>
          <el-tree
            ref="lastYearCarryoverTreeRef"
            :data="lastYearCarryoverTree"
            node-key="id"
            :props="treeProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            :check-on-click-node="false"
            @check-change="onTreeCheckChange"
            @node-click="onNodeClickToggle"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label" :class="{ 'node-label--clickable': data.is_leaf }" @click.stop="onLabelClick(data, node, $refs.lastYearCarryoverTreeRef)">{{ node.label }}</span>
              <span v-if="data.is_leaf" class="node-usage-info">
                <span class="usage-item">
                  <span class="usage-label">预算:</span>
                  <span class="usage-value">{{ formatAmount(data.budget_amount) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">已用:</span>
                  <span class="usage-value usage-value--used">{{ formatAmount(data.used_amount || 0) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">执行率:</span>
                  <span
                    class="usage-value usage-value--rate"
                    :class="getExecutionRateClass(data.execution_rate || 0)"
                  >
                    {{ formatExecutionRate(data.execution_rate || 0) }}
                  </span>
                </span>
              </span>
            </span>
          </el-tree>
        </div>

        <div v-if="offsetPrepaidTree.length" class="tree-block" style="margin-top: 16px">
          <div class="tree-title">抵消预付账款</div>
          <el-tree
            ref="offsetPrepaidTreeRef"
            :data="offsetPrepaidTree"
            node-key="id"
            :props="treeProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            :check-on-click-node="false"
            @check-change="onTreeCheckChange"
            @node-click="onNodeClickToggle"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label" :class="{ 'node-label--clickable': data.is_leaf }" @click.stop="onLabelClick(data, node, $refs.offsetPrepaidTreeRef)">{{ node.label }}</span>
              <span v-if="data.is_leaf" class="node-usage-info">
                <span class="usage-item">
                  <span class="usage-label">预算:</span>
                  <span class="usage-value">{{ formatAmount(data.budget_amount) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">已用:</span>
                  <span class="usage-value usage-value--used">{{ formatAmount(data.used_amount || 0) }}</span>
                </span>
                <span class="usage-item">
                  <span class="usage-label">执行率:</span>
                  <span
                    class="usage-value usage-value--rate"
                    :class="getExecutionRateClass(data.execution_rate || 0)"
                  >
                    {{ formatExecutionRate(data.execution_rate || 0) }}
                  </span>
                </span>
              </span>
            </span>
          </el-tree>
        </div>

        <div
          v-if="!treeLoading && departmentTree.length === 0 && projectTree.length === 0 && specialFundTree.length === 0 && lastYearCarryoverTree.length === 0 && offsetPrepaidTree.length === 0"
          style="text-align: center; color: #909399; padding: 32px 0"
        >
          暂无数据
        </div>
        </div>

        <!-- 右侧：部门金额分配（始终展示，支持单预算/多部门与多预算） -->
        <div style="flex: 0 0 480px; border-left: 1px solid #e4e7ed; padding-left: 20px">
          <div style="margin-bottom: 16px; font-weight: 600; color: #303133; font-size: 16px">
            部门金额分配
          </div>
          <div style="margin-bottom: 16px; color: #303133; font-size: 14px; line-height: 1.6">
            请选择预算来源（可多选），并将本次付款金额分配到对应部门与预算（分配金额可以为0，但分配总额必须匹配本次付款金额）。
          </div>
          <el-table :data="pendingAllocations" border style="width: 100%">
            <el-table-column prop="budget_name" label="预算" min-width="180"></el-table-column>
            <el-table-column prop="department_name" label="部门" width="180"></el-table-column>
            <el-table-column label="分配金额" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.allocated_amount"
                  :min="0"
                  :precision="2"
                  :controls="false"
                  style="width: 100%"
                  @change="onAllocationChange"
                ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 16px; padding: 16px; background-color: #f5f7fa; border-radius: 6px">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
              <span style="font-size: 14px; color: #303133; font-weight: 500">已分配总额：</span>
              <span :style="{ color: allocationTotal === totalAmount ? '#67c23a' : '#f56c6c', fontWeight: 'bold', fontSize: '16px' }">
                {{ formatAmount(allocationTotal) }}
              </span>
            </div>
            <div v-if="totalAmount > 0" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
              <span style="font-size: 14px; color: #303133; font-weight: 500">本次付款金额：</span>
              <span style="font-weight: 600; font-size: 16px; color: #303133">{{ formatAmount(totalAmount) }}</span>
            </div>
            <div v-if="totalAmount > 0" style="display: flex; justify-content: space-between; align-items: center">
              <span style="font-size: 14px; color: #303133; font-weight: 500">剩余金额：</span>
              <span :style="{ color: remainingAmount >= 0 ? '#67c23a' : '#f56c6c', fontWeight: 'bold', fontSize: '16px' }">
                {{ formatAmount(remainingAmount) }}
              </span>
            </div>
            <div v-if="totalAmount === 0" style="margin-top: 12px; color: #606266; font-size: 13px; line-height: 1.6">
              提示：未识别到"本次付款金额"，当前按 0 校验；若需要校验，请确保流程表单存在该字段。
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          :disabled="!canConfirm"
          @click="confirmPick"
        >
          确定
        </el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";
import { getBudgetYearOptions, getBudgetDataTree } from "@/api/flow";

export default {
  name: "BudgetSourcePickerField",
  props: {
    fieldName: { type: String, required: true },
    value: { type: [String, Number, Object, Array], default: "" },
    display: { type: String, default: "" },
  },
  data() {
    return {
      dialogVisible: false,
      yearLoading: false,
      treeLoading: false,
      yearOptions: [],
      yearId: null,
      treeData: [],
      // 选择相关（支持多选）
      selectedBudgetIds: [],
      lastValidBudgetIds: [],
      selectionError: "",
      // 授权缓存：budget_data_id -> authorizations[]
      authCache: {},
      // 分配相关（右侧始终展示）
      pendingAllocations: [],
      // “本次付款金额（元）”——从流程自定义模型字段中按 label 模糊匹配“本次付款金额”解析
      totalAmount: 0,
      // 生成的显示文本（用于展示区）
      generatedDisplayText: "",
    };
  },
  computed: {
    // 解析JSON格式的value，兼容旧格式
    parsedValue() {
      const value = this.value;
      if (!value || value === null || value === undefined) {
        return { budget_data_id: null, allocations: null, budget_items: null };
      }

      // 已经是对象（推荐的新格式：直接对象落库/回传）
      if (typeof value === "object" && !Array.isArray(value)) {
        return {
          budget_data_id: value?.budget_data_id ?? null,
          allocations: value?.allocations ?? null,
          budget_items: value?.budget_items ?? null,
        };
      }

      // 兼容：如果是数组（极端旧数据/异常数据），当作 allocations
      if (Array.isArray(value)) {
        return { budget_data_id: null, allocations: value, budget_items: null };
      }

      // 字符串：可能是
      // 1) 旧格式： "123"
      // 2) 新格式： '{"budget_data_id":"2","allocations":[...]}'
      // 3) 双重编码： '"{\"budget_data_id\":\"2\",\"allocations\":[...]}"'
      if (typeof value === "string") {
        const raw = value.trim();
        if (!raw) return { budget_data_id: null, allocations: null, budget_items: null };

        const parseMaybeJson = (s) => {
          try {
            return { ok: true, data: JSON.parse(s) };
          } catch (e) {
            return { ok: false, data: null };
          }
        };

        const p1 = parseMaybeJson(raw);
        if (p1.ok) {
          // 解析结果是对象：标准新格式
          if (p1.data && typeof p1.data === "object" && !Array.isArray(p1.data)) {
            return {
              budget_data_id: p1.data?.budget_data_id ?? null,
              allocations: p1.data?.allocations ?? null,
              budget_items: p1.data?.budget_items ?? null,
            };
          }
          // 解析结果是数组：当作 allocations（仍可能缺 budget_data_id）
          if (Array.isArray(p1.data)) {
            return { budget_data_id: null, allocations: p1.data, budget_items: null };
          }
          // 解析结果是字符串：双重编码常见形态
          if (typeof p1.data === "string") {
            const inner = p1.data.trim();
            // inner 可能是 '{...}' 或者 '2'
            const p2 = parseMaybeJson(inner);
            if (p2.ok && p2.data && typeof p2.data === "object" && !Array.isArray(p2.data)) {
              return {
                budget_data_id: p2.data?.budget_data_id ?? null,
                allocations: p2.data?.allocations ?? null,
                budget_items: p2.data?.budget_items ?? null,
              };
            }
            if (p2.ok && Array.isArray(p2.data)) {
              return { budget_data_id: null, allocations: p2.data, budget_items: null };
            }
            // inner 可能是数字字符串
            return {
              budget_data_id: isNaN(inner) ? null : String(inner),
              allocations: null,
              budget_items: null,
            };
          }
        }

        // 非JSON：当作旧格式 ID
        return { budget_data_id: isNaN(raw) ? null : String(raw), allocations: null, budget_items: null };
      }

      return { budget_data_id: null, allocations: null, budget_items: null };
    },
    budgetDataId() {
      return this.parsedValue.budget_data_id;
    },
    allocations() {
      return this.parsedValue.allocations;
    },
    budgetItems() {
      const items = this.parsedValue.budget_items;
      return Array.isArray(items) ? items : [];
    },
    normalizedValue() {
      // 返回JSON格式的字符串（用于表单提交/兜底）
      if (this.budgetItems.length > 0) {
        return JSON.stringify({ budget_items: this.budgetItems });
      }
      if (!this.budgetDataId) return "";
      return JSON.stringify({
        budget_data_id: this.budgetDataId,
        allocations: this.allocations,
      });
    },
    hasValue() {
      return (this.budgetDataId !== null && this.budgetDataId !== "") || this.budgetItems.length > 0;
    },
    displayText() {
      // 优先使用后端返回的 `{字段名}_display`
      if (this.display && this.display.trim()) {
        return this.display;
      }
      
      // 使用生成的显示文本
      if (this.generatedDisplayText && this.generatedDisplayText.trim()) {
        return this.generatedDisplayText;
      }
      
      // 如果都没有，返回空字符串（避免显示JSON或ID）
      return "";
    },
    treeProps() {
      return {
        children: "children",
        label: "name",
        disabled: (data) => !data?.is_leaf,
      };
    },
    departmentTree() {
      return (this.treeData || []).filter((n) => n?.budget_type === "department");
    },
    projectTree() {
      return (this.treeData || []).filter((n) => n?.budget_type === "project");
    },
    specialFundTree() {
      return (this.treeData || []).filter((n) => n?.budget_type === "special_fund");
    },
    lastYearCarryoverTree() {
      return (this.treeData || []).filter((n) => n?.budget_type === "last_year_carryover");
    },
    offsetPrepaidTree() {
      return (this.treeData || []).filter((n) => n?.budget_type === "offset_prepaid");
    },
    budgetTypeMap() {
      return {
        department: "部门预算",
        project: "自有账户",
        special_fund: "专项资金",
        last_year_carryover: "上一年结转资金",
        offset_prepaid: "抵消预付账款",
      };
    },
    // 分配总额
    allocationTotal() {
      return (this.pendingAllocations || []).reduce((sum, item) => {
        return sum + (parseFloat(item.allocated_amount) || 0);
      }, 0);
    },
    // 剩余金额
    remainingAmount() {
      return this.totalAmount - this.allocationTotal;
    },
    canConfirm() {
      // 必须已选择至少一个预算来源，且分配总额必须等于本次付款金额（未识别时 totalAmount=0，则要求分配总额也为0）
      if (!this.selectedBudgetIds || this.selectedBudgetIds.length === 0) return false;
      if (this.selectionError) return false;
      return Number(this.allocationTotal) === Number(this.totalAmount);
    },
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    onDialogOpen() {
      this.selectionError = "";
      this.selectedBudgetIds = [];
      // 读取“本次付款金额”（延迟查找，确保 DOM 已渲染）
      this.$nextTick(() => {
        // 第一次尝试
        this.totalAmount = this.extractPaymentAmountFromForm();
        // 如果没找到，再延迟一次尝试（可能 DOM 还在渲染中）
        if (this.totalAmount === 0) {
          setTimeout(() => {
            this.totalAmount = this.extractPaymentAmountFromForm();
          }, 100);
        }
      });
      this.ensureInit();
    },
    onDialogClose() {
      this.selectionError = "";
    },
    async ensureInit() {
      if (!this.yearOptions || this.yearOptions.length === 0) {
        await this.loadYearOptions();
      }

      if (!this.yearId && this.yearOptions.length > 0) {
        // 尝试根据当前 value 反查 year_id（可选），否则默认第一项
        const fromValue = await this.tryResolveYearIdByValue();
        this.yearId = fromValue || this.yearOptions[0].value;
      }

      if (this.yearId) {
        await this.loadTree(this.yearId);
      }
    },
    async loadYearOptions() {
      this.yearLoading = true;
      try {
        const res = await getBudgetYearOptions(false);
        const arr = Array.isArray(res) ? res : [];
        this.yearOptions = arr.map((y) => ({
          value: y.value,
          label: y.label || (y.year ? `${y.year}年` : `${y.value}年`),
          year: y.year,
        }));
      } finally {
        this.yearLoading = false;
      }
    },
    async tryResolveYearIdByValue() {
      if (!this.hasValue) return null;
      const idFromValue = this.budgetDataId || (this.budgetItems[0] && this.budgetItems[0].budget_data_id);
      if (!idFromValue) return null;
      try {
        const detail = await request({
          method: "get",
          url: `/api/budget/budget-data/${idFromValue}`,
          isLoading: false,
        });
        const yearId = detail?.year_id ?? null;
        return yearId;
      } catch (e) {
        return null;
      }
    },
    async getDepartmentAuthorizations(budgetDataId) {
      const key = String(budgetDataId || "");
      if (!key) return [];
      if (this.authCache[key]) return this.authCache[key];
      try {
        const res = await request({
          method: "get",
          url: `/api/budget/budget-data/${budgetDataId}/department-authorizations`,
          isLoading: false,
        });
        const list = Array.isArray(res) ? res : [];
        this.$set(this.authCache, key, list);
        return list;
      } catch (e) {
        this.$set(this.authCache, key, []);
        return [];
      }
    },
    async loadTree(yearId) {
      if (!yearId) return;
      this.treeLoading = true;
      try {
        const res = await getBudgetDataTree({ year_id: yearId }, false);
        this.treeData = Array.isArray(res) ? res : [];
        // 回显已有选择
        this.$nextTick(async () => {
          await this.restoreSelectionFromValue();
          await this.rebuildAllocationsFromCurrentSelection();
          // 树数据加载完成后，重新生成显示文本
          if (this.hasValue && !this.display) {
            await this.generateDisplayText();
          }
        });
      } finally {
        this.treeLoading = false;
      }
    },
    async onYearChange(val) {
      this.selectionError = "";
      this.selectedBudgetIds = [];
      this.pendingAllocations = [];
      this.treeData = [];
      await this.loadTree(val);
    },
    onNodeClickToggle(data, node, tree) {
      if (!data || !data.is_leaf) return;
      // 点击节点也切换勾选
      if (tree && typeof tree.setChecked === "function") {
        tree.setChecked(data.id, !node.checked, true);
      }
    },
    onLabelClick(data, node, tree) {
      // 点击节点名称文字时切换勾选（仅叶子节点）
      if (!data || !data.is_leaf) return;
      if (tree && typeof tree.setChecked === "function") {
        const isChecked = tree.getCheckedKeys().includes(data.id);
        tree.setChecked(data.id, !isChecked, true);
      }
    },
    onTreeCheckChange() {
      // 任意树勾选变化后统一重算
      this.rebuildAllocationsFromCurrentSelection();
    },
    collectCheckedLeafNodes() {
      const refs = [
        this.$refs.departmentTreeRef,
        this.$refs.projectTreeRef,
        this.$refs.specialFundTreeRef,
        this.$refs.lastYearCarryoverTreeRef,
        this.$refs.offsetPrepaidTreeRef,
      ].filter(Boolean);
      const nodes = [];
      refs.forEach((tree) => {
        if (typeof tree.getCheckedNodes === "function") {
          const checked = tree.getCheckedNodes(true, false) || [];
          checked.forEach((n) => {
            if (n && n.is_leaf) nodes.push(n);
          });
        }
      });
      // 去重
      const map = {};
      nodes.forEach((n) => (map[String(n.id)] = n));
      return Object.values(map);
    },
    setCheckedIds(ids) {
      const list = (ids || []).map((x) => String(x));
      const refs = [
        this.$refs.departmentTreeRef,
        this.$refs.projectTreeRef,
        this.$refs.specialFundTreeRef,
        this.$refs.lastYearCarryoverTreeRef,
        this.$refs.offsetPrepaidTreeRef,
      ].filter(Boolean);
      refs.forEach((tree) => {
        if (typeof tree.setCheckedKeys === "function") {
          tree.setCheckedKeys(list);
        }
      });
    },
    async restoreSelectionFromValue() {
      // 按 value 回显勾选
      let ids = [];
      if (this.budgetItems.length > 0) {
        ids = this.budgetItems.map((x) => String(x.budget_data_id)).filter(Boolean);
      } else if (this.budgetDataId) {
        ids = [String(this.budgetDataId)];
      }
      this.lastValidBudgetIds = ids;
      this.selectedBudgetIds = ids;
      this.setCheckedIds(ids);
    },
    extractPaymentAmountFromForm() {
      // 从页面 DOM 中模糊匹配 label “本次付款金额”，解析金额（兼容单位后缀）
      // 支持多种查找方式：label、placeholder、字段名等
      try {
        // 方法1：通过 label 查找
        const labels = Array.from(document.querySelectorAll(".el-form-item__label"));
        let labelEl = labels.find((el) => {
          const text = (el.innerText || el.textContent || "").trim();
          return text.includes("本次付款金额") || text.includes("付款金额");
        });
        
        if (labelEl) {
          const formItem = labelEl.closest(".el-form-item");
          if (formItem) {
            const content = formItem.querySelector(".el-form-item__content");
            if (content) {
              // 优先查找各种类型的输入框（可编辑状态）
              let input = content.querySelector("input") ||
                         content.querySelector("textarea") ||
                         content.querySelector(".el-input__inner") ||
                         content.querySelector("input[type='text']") ||
                         content.querySelector("input[type='number']");
              
              if (input) {
                const raw = String(input.value || input.getAttribute("value") || "");
                const num = parseFloat(raw.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                if (!isNaN(num) && num > 0) {
                  return num;
                }
              }
              
              // 如果没找到输入框，查找展示元素（只读/view 状态）
              // 只读字段通常渲染为 span 或其他展示元素
              const displayEl = content.querySelector("span") ||
                               content.querySelector("div") ||
                               content;
              
              if (displayEl) {
                // 获取元素的文本内容（可能是直接文本或子元素的文本）
                const raw = displayEl.innerText || displayEl.textContent || displayEl.getAttribute("value") || "";
                const num = parseFloat(raw.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                if (!isNaN(num) && num > 0) {
                  return num;
                }
              }
            }
          }
        }

        // 方法2：通过 data-field-name 属性查找（如果字段名包含"付款金额"相关关键词）
        const formItems = Array.from(document.querySelectorAll(".el-form-item[data-field-name]"));
        for (const formItem of formItems) {
          const fieldName = formItem.getAttribute("data-field-name") || "";
          const label = formItem.querySelector(".el-form-item__label");
          const labelText = label ? (label.innerText || label.textContent || "").trim() : "";
          
          if (fieldName.includes("付款金额") || fieldName.includes("payment_amount") || 
              labelText.includes("本次付款金额") || labelText.includes("付款金额")) {
            const content = formItem.querySelector(".el-form-item__content");
            if (content) {
              // 优先查找输入框（可编辑状态）
              let input = content.querySelector("input") ||
                         content.querySelector("textarea") ||
                         content.querySelector(".el-input__inner") ||
                         content.querySelector("input[type='text']") ||
                         content.querySelector("input[type='number']");
              
              if (input) {
                const raw = String(input.value || input.getAttribute("value") || "");
                const num = parseFloat(raw.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                if (!isNaN(num) && num > 0) {
                  return num;
                }
              }
              
              // 如果没找到输入框，查找展示元素（只读/view 状态）
              const displayEl = content.querySelector("span") ||
                               content.querySelector("div") ||
                               content;
              
              if (displayEl) {
                const raw = displayEl.innerText || displayEl.textContent || displayEl.getAttribute("value") || "";
                const num = parseFloat(raw.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                if (!isNaN(num) && num > 0) {
                  return num;
                }
              }
            }
          }
        }

        // 方法3：通过 placeholder 查找（可编辑字段）
        const inputs = Array.from(document.querySelectorAll("input, textarea, .el-input__inner"));
        for (const input of inputs) {
          const placeholder = input.getAttribute("placeholder") || "";
          if (placeholder.includes("本次付款金额") || placeholder.includes("付款金额")) {
            const raw = String(input.value || input.getAttribute("value") || "");
            const num = parseFloat(raw.replace(/,/g, "").replace(/[^\d.-]/g, ""));
            if (!isNaN(num) && num > 0) {
              return num;
            }
          }
        }

        // 方法4：直接查找所有包含金额数字的 span/div（只读展示字段）
        // 查找所有 form-item，检查 label 是否包含"付款金额"，然后提取内容
        const allFormItems = Array.from(document.querySelectorAll(".el-form-item"));
        for (const formItem of allFormItems) {
          const label = formItem.querySelector(".el-form-item__label");
          const labelText = label ? (label.innerText || label.textContent || "").trim() : "";
          
          if (labelText.includes("本次付款金额") || labelText.includes("付款金额")) {
            const content = formItem.querySelector(".el-form-item__content");
            if (content) {
              // 查找所有可能的展示元素
              const displayEls = content.querySelectorAll("span, div, p");
              for (const el of displayEls) {
                const text = (el.innerText || el.textContent || "").trim();
                // 如果文本包含数字（可能是金额）
                if (text && /[\d.,]+/.test(text)) {
                  const num = parseFloat(text.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                  if (!isNaN(num) && num > 0) {
                    return num;
                  }
                }
              }
              // 如果子元素没找到，直接取 content 的文本
              const contentText = (content.innerText || content.textContent || "").trim();
              if (contentText && /[\d.,]+/.test(contentText)) {
                const num = parseFloat(contentText.replace(/,/g, "").replace(/[^\d.-]/g, ""));
                if (!isNaN(num) && num > 0) {
                  return num;
                }
              }
            }
          }
        }

        return 0;
      } catch (e) {
        console.warn("[BudgetSourcePickerField] 提取本次付款金额失败:", e);
        return 0;
      }
    },
    getExistingAllocationMap() {
      // 兼容旧/新结构：返回 { `${budgetId}:${deptId}`: amount }
      const map = {};
      // 新：budget_items
      if (this.budgetItems.length > 0) {
        this.budgetItems.forEach((item) => {
          const bid = String(item.budget_data_id || "");
          const allocs = Array.isArray(item.allocations) ? item.allocations : [];
          allocs.forEach((a) => {
            const did = String(a.department_id || "");
            if (!bid || !did) return;
            map[`${bid}:${did}`] = parseFloat(a.allocated_amount) || 0;
          });
        });
      } else if (this.budgetDataId && Array.isArray(this.allocations)) {
        const bid = String(this.budgetDataId);
        this.allocations.forEach((a) => {
          const did = String(a.department_id || "");
          if (!did) return;
          map[`${bid}:${did}`] = parseFloat(a.allocated_amount) || 0;
        });
      }
      return map;
    },
    async rebuildAllocationsFromCurrentSelection() {
      this.selectionError = "";
      const selectedNodes = this.collectCheckedLeafNodes();
      const ids = selectedNodes.map((n) => String(n.id));
      this.selectedBudgetIds = ids;
      if (ids.length === 0) {
        this.pendingAllocations = [];
        return;
      }

      // 重新读取“本次付款金额”
      this.totalAmount = this.extractPaymentAmountFromForm();

      const existingMap = this.getExistingAllocationMap();

      // 单条预算来源
      if (selectedNodes.length === 1) {
        const node = selectedNodes[0];
        const auths = await this.getDepartmentAuthorizations(node.id);
        if (!auths || auths.length === 0) {
          this.selectionError = "该预算来源未配置部门授权";
          this.$message.warning(this.selectionError);
          this.setCheckedIds(this.lastValidBudgetIds);
          return;
        }

        if (auths.length === 1) {
          // 情形(1)：单预算 + 单部门 -> 自动全额填充
          const a = auths[0];
          this.pendingAllocations = [
            {
              budget_data_id: node.id,
              budget_name: node.name || "",
              department_id: a.department_id,
              department_name: a.department?.name || "",
              allocated_amount: this.totalAmount,
            },
          ];
        } else {
          // 情形(2)：单预算 + 多部门 -> 与原逻辑一致
          this.pendingAllocations = auths.map((a) => {
            const key = `${String(node.id)}:${String(a.department_id)}`;
            return {
              budget_data_id: node.id,
              budget_name: node.name || "",
              department_id: a.department_id,
              department_name: a.department?.name || "",
              allocated_amount: existingMap[key] ?? 0,
            };
          });
        }

        this.lastValidBudgetIds = ids;
        return;
      }

      // 多条预算来源：同一直接父级 + 每条唯一授权部门
      const parentId = selectedNodes[0].parent_id ?? null;
      const parentMismatch = selectedNodes.some((n) => (n.parent_id ?? null) !== parentId);
      if (parentMismatch) {
        this.selectionError = "多条预算来源必须同属一个直接父级";
        this.$message.warning(this.selectionError);
        this.setCheckedIds(this.lastValidBudgetIds);
        return;
      }

      const rows = [];
      for (const node of selectedNodes) {
        const auths = await this.getDepartmentAuthorizations(node.id);
        if (!auths || auths.length !== 1) {
          this.selectionError = "多条预算来源时，每条预算必须且仅能授权给一个部门";
          this.$message.warning(this.selectionError);
          this.setCheckedIds(this.lastValidBudgetIds);
          return;
        }
        const a = auths[0];
        const key = `${String(node.id)}:${String(a.department_id)}`;
        rows.push({
          budget_data_id: node.id,
          budget_name: node.name || "",
          department_id: a.department_id,
          department_name: a.department?.name || "",
          // 情形(3) 默认全为 0（由用户手动填充）
          allocated_amount: existingMap[key] ?? 0,
        });
      }
      this.pendingAllocations = rows;
      this.lastValidBudgetIds = ids;
    },
    findPathNames(tree, id, path = []) {
      if (!Array.isArray(tree)) return null;
      for (const n of tree) {
        const nextPath = [...path, n];
        if (String(n.id) === String(id)) return nextPath;
        if (n.children && n.children.length) {
          const found = this.findPathNames(n.children, id, nextPath);
          if (found) return found;
        }
      }
      return null;
    },
    getYearLabel() {
      const opt = (this.yearOptions || []).find(
        (y) => String(y.value) === String(this.yearId)
      );
      return opt?.label || (this.yearId ? `${this.yearId}年` : "");
    },
    async confirmPick() {
      if (!this.canConfirm) {
        this.$message.warning("请先选择预算来源，并确保分配总额等于本次付款金额");
        return;
      }

      // 基于 pendingAllocations 构建最终 payload（必须包含预算ID与部门ID，支持多条）
      const byBudget = {};
      (this.pendingAllocations || []).forEach((row) => {
        const bid = String(row.budget_data_id || "");
        const did = String(row.department_id || "");
        if (!bid || !did) return;
        if (!byBudget[bid]) byBudget[bid] = { budget_data_id: bid, allocations: [] };
        byBudget[bid].allocations.push({
          department_id: did,
          department_name: row.department_name || "",
          allocated_amount: parseFloat(row.allocated_amount) || 0,
        });
      });

      const budgetIds = Object.keys(byBudget);
      let payload;
      if (budgetIds.length === 1) {
        const bid = budgetIds[0];
        payload = {
          budget_data_id: bid,
          allocations: byBudget[bid].allocations,
        };
      } else {
        payload = {
          budget_items: budgetIds.map((bid) => byBudget[bid]),
        };
      }

      // 生成展示文本（多条用 “；” 分隔）
      const yearLabel = this.getYearLabel();
      const displayParts = budgetIds.map((bid) => {
        const nodes = this.findPathNames(this.treeData, bid) || [];
        const names = nodes.map((n) => n?.name).filter(Boolean);
        const leaf = nodes[nodes.length - 1];
        const typeText = this.budgetTypeMap[leaf?.budget_type] || leaf?.budget_type || "";
        return [yearLabel, typeText, ...names].filter(Boolean).join(" / ");
      });
      const display = displayParts.filter(Boolean).join("；");

      this.$emit("input", payload);
      this.$emit("update:display", display);
      this.dialogVisible = false;
    },
    onAllocationChange() {
      // 分配金额变化时的处理（实时验证已在按钮disabled中处理）
    },
    formatAmount(amount) {
      if (amount === null || amount === undefined) return "0.00";
      const num = parseFloat(amount);
      if (isNaN(num)) return "0.00";
      return num.toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    },
    formatExecutionRate(rate) {
      if (rate === null || rate === undefined) return "0.00%";
      const num = parseFloat(rate);
      if (isNaN(num)) return "0.00%";
      return num.toFixed(2) + "%";
    },
    getExecutionRateClass(rate) {
      const num = parseFloat(rate);
      if (isNaN(num)) return "";
      if (num >= 100) return "rate-high";
      if (num >= 80) return "rate-medium";
      if (num >= 50) return "rate-normal";
      return "rate-low";
    },
    clearValue() {
      this.$emit("input", "");
      this.$emit("update:display", "");
      this.generatedDisplayText = "";
    },
    async generateDisplayText() {
      // 如果没有值，清空显示文本
      if (!this.hasValue) {
        this.generatedDisplayText = "";
        return;
      }

      // 如果已经有后端返回的 display，不需要生成
      if (this.display && this.display.trim()) {
        return;
      }

      // 需要加载树数据来生成显示文本
      if (!this.yearOptions || this.yearOptions.length === 0) {
        await this.loadYearOptions();
      }

      // 尝试获取年份ID
      if (!this.yearId) {
        const fromValue = await this.tryResolveYearIdByValue();
        this.yearId = fromValue || (this.yearOptions.length > 0 ? this.yearOptions[0].value : null);
      }

      // 如果没有年份ID，无法生成显示文本
      if (!this.yearId) {
        this.generatedDisplayText = "";
        return;
      }

      // 加载树数据
      if (!this.treeData || this.treeData.length === 0) {
        try {
          const res = await getBudgetDataTree({ year_id: this.yearId }, false);
          this.treeData = Array.isArray(res) ? res : [];
        } catch (e) {
          console.error("加载树数据失败：", e);
          this.generatedDisplayText = "";
          return;
        }
      }

      // 生成显示文本
      const parts = [];
      const yearLabel = this.getYearLabel();

      // 处理多预算来源的情况
      if (this.budgetItems.length > 0) {
        const displayParts = [];
        for (const item of this.budgetItems) {
          const budgetId = String(item.budget_data_id || "");
          if (!budgetId) continue;

          const nodes = this.findPathNames(this.treeData, budgetId) || [];
          const names = nodes.map((n) => n?.name).filter(Boolean);
          const leaf = nodes[nodes.length - 1];
          const typeText = this.budgetTypeMap[leaf?.budget_type] || leaf?.budget_type || "";

          // 获取部门信息
          const allocations = Array.isArray(item.allocations) ? item.allocations : [];
          const deptNames = allocations
            .map((a) => a.department_name)
            .filter(Boolean)
            .slice(0, 3); // 最多显示3个部门

          let partText = [yearLabel, typeText, ...names].filter(Boolean).join(" / ");
          if (deptNames.length > 0) {
            if (deptNames.length === 1) {
              partText += `（${deptNames[0]}）`;
            } else if (deptNames.length <= 3) {
              partText += `（${deptNames.join("、")}）`;
            } else {
              partText += `（${deptNames.slice(0, 3).join("、")}等${allocations.length}个部门）`;
            }
          }
          displayParts.push(partText);
        }
        this.generatedDisplayText = displayParts.filter(Boolean).join("；");
        return;
      }

      // 处理单预算来源的情况
      if (this.budgetDataId) {
        const nodes = this.findPathNames(this.treeData, this.budgetDataId) || [];
        const names = nodes.map((n) => n?.name).filter(Boolean);
        const leaf = nodes[nodes.length - 1];
        const typeText = this.budgetTypeMap[leaf?.budget_type] || leaf?.budget_type || "";

        let displayText = [yearLabel, typeText, ...names].filter(Boolean).join(" / ");

        // 获取部门信息
        const allocations = Array.isArray(this.allocations) ? this.allocations : [];
        if (allocations.length > 0) {
          const deptNames = allocations
            .map((a) => a.department_name)
            .filter(Boolean)
            .slice(0, 3); // 最多显示3个部门

          if (deptNames.length === 1) {
            displayText += `（${deptNames[0]}）`;
          } else if (deptNames.length <= 3) {
            displayText += `（${deptNames.join("、")}）`;
          } else {
            displayText += `（${deptNames.slice(0, 3).join("、")}等${allocations.length}个部门）`;
          }
        }

        this.generatedDisplayText = displayText;
        return;
      }

      // 如果都没有，清空显示文本
      this.generatedDisplayText = "";
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        // 当 value 变化时，重新生成显示文本
        this.$nextTick(() => {
          this.generateDisplayText();
        });
      },
    },
    display(newVal) {
      // 如果后端返回了 display，清空生成的显示文本
      if (newVal && newVal.trim()) {
        this.generatedDisplayText = "";
      }
    },
  },
  mounted() {
    // 组件挂载时，如果有值，生成显示文本
    if (this.hasValue) {
      this.generateDisplayText();
    }
  },
};
</script>

<style scoped>
.budget-source-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-source-label {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-source-label--muted {
  color: #606266;
}

.tree-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 12px;
}

.node-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #303133;
  font-weight: 500;
}

.node-label--clickable {
  cursor: pointer;
  transition: color 0.2s;
}

.node-label--clickable:hover {
  color: #409eff;
}

.node-usage-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 16px;
  flex-shrink: 0;
  font-size: 14px;
}

.usage-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.usage-label {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.usage-value {
  color: #303133;
  font-weight: 600;
  font-size: 14px;
}

.usage-value--used {
  color: #409eff;
  font-weight: 600;
}

.usage-value--rate {
  min-width: 60px;
  text-align: right;
}

.usage-value--rate.rate-high {
  color: #f56c6c;
  font-weight: 700;
}

.usage-value--rate.rate-medium {
  color: #e6a23c;
  font-weight: 600;
}

.usage-value--rate.rate-normal {
  color: #409eff;
  font-weight: 600;
}

.usage-value--rate.rate-low {
  color: #909399;
  font-weight: 500;
}
</style>