@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnImportTemplate/BnImportTemplate.vue

@@ -0,0 +1,866 @@
+<template>
+  <div class="BnImportTemplate">
+    <!-- 导入模板触发器 -->
+    <ImportTemplateTrigger
+      v-model="importTaskVisible"
+      :import-template-list="importTemplateList"
+      @showTemplatePopover="getImportTemplageData"
+      @openTemplateList="openTemplateList"
+      @selectTemplate="openImportOrderByTemplate"
+    >
+      <template #icon>
+        <slot name="icon" />
+      </template>
+    </ImportTemplateTrigger>
+
+    <!-- 批量导入弹窗 -->
+    <BnImportOrder
+      ref="importOrder"
+      :post-func="postFunc"
+      :post-data="importOrderPostData"
+    />
+    <!-- 导入模板列表弹窗 -->
+    <TemplateListDialog
+      v-model="templateListModalShow"
+      v-model:page-num="pageNum"
+      v-model:page-size="pageSize"
+      :modal-list-data="modalListData"
+      :loading="listLoading"
+      :total="total"
+      @addTemplate="addTemplate"
+      @editTemplate="editTemplate"
+      @copyTemplate="copyThisTemplate"
+      @deleteTemplate="deleteThisTemplate"
+      @pageChange="getTemplateList"
+      @sizeChange="getTemplateList"
+    />
+    <!-- 编辑导入模板弹窗 -->
+    <TemplateEditDialog
+      v-model="templateEditShow"
+      v-model:filter-var="filterVar"
+      v-model:all-show="allShow"
+      v-model:all-check-must="allCheckMust"
+      v-model:all-key="allKey"
+      :loading="editLoading"
+      :modal-detail="modalDetail"
+      :edit-column-list="editColumnList"
+      :is-workflow="isWorkflowTable"
+      :sheet-tip-img="sheetTipImg"
+      @opened="setEditData"
+      @closed="clearEditData"
+      @validateSheetName="validateSheetName"
+      @checkAllShow="checkAllShow"
+      @checkAllCheckMust="checkAllCheckMust"
+      @checkAllKey="checkAllKey"
+      @itemCheckChange="itemCheckChange"
+      @toggleChild="showOrCloseChildList"
+      @confirm="editImportModal"
+    />
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from "lodash";
+import ImportTemplateTrigger from "./components/ImportTemplateTrigger.vue";
+import TemplateListDialog from "./components/TemplateListDialog.vue";
+import TemplateEditDialog from "./components/TemplateEditDialog.vue";
+import BnImportOrder from "../BnImportOrder/BnImportOrder.vue";
+import sheetTipImg from "./assets/sheet_tip.png";
+
+// 组件库脱离 bytenew-app-html 的 Vuex store 使用，默认值必须是真实后端接口。
+// 带 {xxx} 的路径会在 request 前由 resolvePath 按当前请求参数替换。
+const defaultPaths = {
+  // 查询导入模板管理列表。
+  list: "/excelImportTemplate/{appId}/{tableId}/{pageNum}/{pageSize}?source={source}",
+  // 查询单个导入模板详情，编辑模板前先拉取完整字段配置。
+  detail: "/excelImportTemplate/info/{tableId}/{appId}/{templateId}",
+  // 新增或编辑导入模板，后端根据 body 中是否存在 id 区分新增/更新。
+  edit: "/excelImportTemplate/edit/{tableId}/{appId}",
+  // 删除指定导入模板。
+  delete: "/excelImportTemplate/delete/{tableId}/{appId}",
+  // 复制指定导入模板。
+  copy: "/excelImportTemplate/copy/{tableId}/{appId}",
+};
+
+export default {
+  name: "BnImportTemplate",
+  components: {
+    ImportTemplateTrigger,
+    BnImportOrder,
+    TemplateListDialog,
+    TemplateEditDialog,
+  },
+  props: {
+    // 外部传入的统一请求函数，组件内部会调用 postFunc(url, data, method) 发起所有业务接口。
+    postFunc: Function,
+    // 工作表基础查询参数，组件会基于 appId/tableId/tableCode 自行拉取工作表字段。
+    postData: {
+      type: Object,
+      default() {
+        return {
+          tableCode: "",
+          appId: "",
+          tableId: "",
+        };
+      },
+    },
+  },
+  emits: [
+    // Popover 模板名称列表接口成功返回后抛出，外部可获取当前模板列表。
+    "templateList",
+    // 新增或编辑模板成功后抛出。
+    "templateEdit",
+    // 删除模板成功后抛出。
+    "templateDelete",
+    // 复制模板成功后抛出。
+    "templateCopy",
+  ],
+  data() {
+    return {
+      // Sheet 名称说明图，传给模板编辑弹窗内的提示气泡展示。
+      sheetTipImg,
+      // 导入入口 Popover 显隐状态，控制导入按钮右侧模板选择浮层。
+      importTaskVisible: false,
+      // Popover 中展示的自定义导入模板名称列表，点击模板名称可打开批量导入弹框并预选模板。
+      importTemplateList: [],
+      // Popover 模板名称列表分页信息，使用较大 pageSize 一次拉取更多模板名称。
+      itPagination: {
+        // Popover 模板名称列表每页条数。
+        pageSize: 80,
+        // Popover 模板名称列表当前页码。
+        pageNum: 1,
+        // Popover 模板名称列表总条数。
+        total: 0,
+        // Popover 模板名称列表总页数。
+        totalPageNum: 1,
+      },
+      // 模板管理列表弹窗显隐状态。
+      templateListModalShow: false,
+      // 模板管理列表数据。
+      modalListData: [],
+      // 模板管理列表 loading。
+      listLoading: false,
+      // 模板管理列表当前页码。
+      pageNum: 1,
+      // 模板管理列表每页条数。
+      pageSize: 10,
+      // 模板管理列表总条数。
+      total: 0,
+      // 新增/编辑模板弹窗显隐状态。
+      templateEditShow: false,
+      // 新增/编辑模板提交 loading。
+      editLoading: false,
+      // 当前正在编辑的模板详情，新增时使用空模板结构。
+      modalDetail: this.getEmptyModalDetail(),
+      // 模板字段配置列表，编辑弹窗内的勾选、筛选、全选都会基于该数组更新。
+      editColumnList: [],
+      // 字段筛选关键字，用于在模板编辑弹窗中快速过滤字段。
+      filterVar: "",
+      // “是否导入”列的全选状态。
+      allShow: false,
+      // “必填校验”列的全选状态。
+      allCheckMust: false,
+      // “相同合并”列的全选状态。
+      allKey: false,
+      // 组件内部通过 postData 拉取并整理出的工作表上下文。
+      innerProjectInfo: {},
+    };
+  },
+  computed: {
+    /**
+     * 获取当前组件使用的真实接口路径集合，集中放在计算属性中方便模板和方法统一读取。
+     *
+     * @return 导入模板相关接口路径配置。
+     */
+    mergedPaths() {
+      return defaultPaths;
+    },
+    /**
+     * 获取当前工作表 ID；兼容 tableId 和旧业务里等价的 id 字段。
+     *
+     * @return 当前工作表 ID。
+     */
+    tableId() {
+      return this.innerProjectInfo?.tableId || this.innerProjectInfo?.id || this.postData?.tableId || "";
+    },
+    /**
+     * 获取当前应用 ID，模板列表、详情、编辑、删除、复制和下载接口都会用到。
+     *
+     * @return 当前应用 ID。
+     */
+    appId() {
+      return this.innerProjectInfo?.appId || this.postData?.appId || "";
+    },
+    /**
+     * 获取当前工作表字段配置，新增模板时会基于 columns 生成可勾选的导入字段。
+     *
+     * @return 当前工作表字段配置数组。
+     */
+    worksheetComponents() {
+      return Array.isArray(this.innerProjectInfo?.columns) ? this.innerProjectInfo.columns : [];
+    },
+    /**
+     * 判断当前工作表是否为工作流表；工作流表隐藏更新类导入方式。
+     *
+     * @return 当前工作表是否为工作流表。
+     */
+    isWorkflowTable() {
+      return this.innerProjectInfo?.isWorkflow === true || `${this.innerProjectInfo?.workFlowTable}` === "1";
+    },
+    /**
+     * 获取批量导入弹框使用的基础请求参数，优先使用组件内部初始化后的工作表上下文。
+     *
+     * @return 批量导入组件使用的 postData。
+     */
+    importOrderPostData() {
+      return {
+        ...this.postData,
+        tableCode: this.innerProjectInfo?.tableCode || this.postData?.tableCode || "",
+        appId: this.appId,
+        tableId: this.tableId,
+      };
+    },
+  },
+  mounted() {
+    // 初始化组件内部工作表上下文。
+    this.initProjectInfo();
+  },
+  watch: {
+    /**
+     * 外部传入的工作表基础参数变化时，重新初始化组件内部工作表上下文。
+     *
+     * @return 无返回值。
+     */
+    postData: {
+      handler() {
+        this.initProjectInfo();
+      },
+      deep: true,
+    },
+    /**
+     * 导入方式变化时同步主键ID列、主键等字段规则。
+     *
+     * @return 无返回值。
+     */
+    "modalDetail.type"() {
+      this.handleImportTypeChange();
+    },
+    /**
+     * 合并多行设置变化时同步主键列可用状态和默认选中状态。
+     *
+     * @return 无返回值。
+     */
+    "modalDetail.mergeCells"() {
+      this.handleMergeCellsChange();
+    },
+  },
+  methods: {
+    /**
+     * 根据外部 postData 拉取工作表字段，并整理为组件内部工作表上下文。
+     *
+     * @return 请求完成后无显式返回值。
+     */
+    async initProjectInfo() {
+      if (!this.postFunc || !this.postData?.appId || !this.postData?.tableId || !this.postData?.tableCode) {
+        return;
+      }
+      const tableRes = await this.postFunc(`/biztable/definition/table?tableCode=${this.postData.tableCode}&columns=1`, null, "get");
+      const tableInfo = tableRes?.data || {};
+      this.innerProjectInfo = {
+        id: tableInfo.tableId || this.postData.tableId,
+        tableId: tableInfo.tableId || this.postData.tableId,
+        appId: tableInfo.appId || this.postData.appId,
+        tableCode: tableInfo.tableCode || this.postData.tableCode,
+        name: tableInfo.name || "",
+        columns: Array.isArray(tableInfo.columns) ? tableInfo.columns : [],
+        workFlowTable: tableInfo.workFlowTable || "0",
+        projectType: tableInfo.projectType || 10,
+      };
+    },
+    /**
+     * 获取新增模板时使用的空模板详情结构。
+     *
+     * @return 空模板详情对象。
+     */
+    getEmptyModalDetail() {
+      return {
+        templateName: "",
+        sheetName: "",
+        type: 1,
+        mergeCells: false,
+        columnList: [],
+      };
+    },
+    /**
+     * 生成所有导入模板接口都会依赖的基础请求参数。
+     *
+     * @return 包含 tableId 和 appId 的基础请求参数。
+     */
+    requestBaseData() {
+      return {
+        tableId: this.tableId,
+        appId: this.appId,
+      };
+    },
+    /**
+     * 将 /path/{tableId}/{appId} 这类路径模板替换成真实可请求 URL。
+     *
+     * @param path 带占位符的接口路径模板。
+     * @param data 用于替换路径占位符的参数对象。
+     * @return 替换占位符后的接口路径。
+     */
+    resolvePath(path, data = {}) {
+      if (typeof path !== "string") {
+        return path;
+      }
+      return path.replace(/\{(\w+)\}/g, (match, key) => {
+        const value = data?.[key];
+        if (value === undefined || value === null) {
+          return "";
+        }
+        return encodeURIComponent(value);
+      });
+    },
+    /**
+     * 查询导入模板名称列表，用于入口 Popover 展示当前工作表已有模板并支持点击导入。
+     *
+     * @return 请求完成后无显式返回值。
+     */
+    async getImportTemplageData() {
+      // Popover 打开时查询已新增的模板名称，列表项点击后会打开批量导入弹框。
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        pageNum: this.itPagination.pageNum,
+        pageSize: this.itPagination.pageSize,
+        source: "biztable",
+      };
+      const res = await this.postFunc(this.resolvePath(this.mergedPaths.list, postData), postData, "get");
+      if (!res?.code) {
+        const data = res.data || {};
+        this.itPagination = {
+          pageSize: this.itPagination.pageSize,
+          pageNum: data.pageNum || this.itPagination.pageNum,
+          total: data.total || 0,
+          totalPageNum: data.totalPageNum || 1,
+        };
+        this.importTemplateList = data.results || [];
+        this.$emit("templateList", this.importTemplateList, res);
+      }
+    },
+    /**
+     * 从入口 Popover 切换到自定义导入模板管理列表弹窗。
+     *
+     * @return 无返回值。
+     */
+    openTemplateList() {
+      this.importTaskVisible = false;
+      this.templateListModalShow = true;
+      this.getTemplateList(1);
+    },
+    /**
+     * 根据入口 Popover 中点击的模板打开批量导入弹框，并将该模板作为默认选中项。
+     *
+     * @param template 用户点击的导入模板项。
+     * @return 无返回值。
+     */
+    openImportOrderByTemplate(template) {
+      this.importTaskVisible = false;
+      this.$refs.importOrder?.open(template);
+    },
+    /**
+     * 查询模板管理弹窗中的分页列表数据。
+     *
+     * @param page 需要查询的页码；不传时使用当前页码。
+     * @return 请求完成后无显式返回值。
+     */
+    async getTemplateList(page) {
+      // 管理弹窗使用独立分页，不复用 Popover 的大分页，避免两个入口互相覆盖页码。
+      this.modalListData = [];
+      this.listLoading = true;
+      this.pageNum = page || this.pageNum;
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        source: "biztable",
+      };
+      const res = await this.postFunc(this.resolvePath(this.mergedPaths.list, postData), postData, "get");
+      this.listLoading = false;
+      if (!res?.code) {
+        this.total = res.data?.total || 0;
+        this.modalListData = res.data?.results || [];
+      }
+    },
+    /**
+     * 打开新增导入模板弹窗。
+     *
+     * @return 无返回值。
+     */
+    addTemplate() {
+      this.openEdit();
+    },
+    /**
+     * 拉取指定模板详情，并打开编辑弹窗回显模板配置。
+     *
+     * @param modalItem 列表中选中的模板行数据。
+     * @return 请求完成后无显式返回值。
+     */
+    async editTemplate(modalItem) {
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        templateId: modalItem.id,
+      };
+      const res = await this.postFunc(this.resolvePath(this.mergedPaths.detail, postData), postData, "get");
+      if (!res?.code) {
+        this.openEdit(res.data);
+      }
+    },
+    /**
+     * 打开新增/编辑弹窗，并在打开前过滤不可导入字段、初始化编辑数据。
+     *
+     * @param modalItem 待编辑的模板详情；不传表示新增模板。
+     * @return 无返回值。
+     */
+    openEdit(modalItem) {
+      this.templateListModalShow = false;
+      const needFilterIds = [1, 3, 4, 6, 8, 9];
+      let detail = modalItem;
+      if (!detail) {
+        // 新增模板时从工作表字段生成初始列配置，并过滤掉创建人、状态等不允许导入的系统字段。
+        detail = this.worksheetComponents.filter(item => !needFilterIds.includes(item.id));
+      } else if (detail.columnList) {
+        // 编辑模板也要再过滤一次，兼容旧模板数据中残留了不可导入字段的情况。
+        detail = cloneDeep(detail);
+        detail.columnList = detail.columnList.filter(item => !needFilterIds.includes(item.columnId || item.id));
+      }
+      this.prepareEditData(detail);
+      this.templateEditShow = true;
+    },
+    /**
+     * 将后端模板详情或工作表字段数组整理成编辑弹窗需要的 modalDetail 和 editColumnList。
+     *
+     * @param detail 后端模板详情对象，或新增模板时的工作表字段数组。
+     * @return 无返回值。
+     */
+    prepareEditData(detail) {
+      // detail 可能来自后端模板详情，也可能是新增时的工作表字段数组；这里统一成编辑弹窗可消费的数据结构。
+      this.modalDetail = this.getEmptyModalDetail();
+      if (detail && detail.id) {
+        this.modalDetail = {
+          ...this.getEmptyModalDetail(),
+          ...cloneDeep(detail),
+          mergeCells: Boolean(detail.mergeCells === 1 || detail.mergeCells === true),
+        };
+      } else if (Array.isArray(detail)) {
+        this.modalDetail.columnList = detail.map(item => this.formatColumnForEdit(item));
+      }
+      this.editColumnList = cloneDeep(this.modalDetail.columnList || []);
+      this.syncAllChecks();
+    },
+    /**
+     * 将工作表字段接口返回的字段对象整理为模板编辑字段。
+     *
+     * @param item 工作表字段接口返回的字段对象。
+     * @param options 需要覆盖的勾选状态。
+     * @return 模板编辑字段对象。
+     */
+    formatColumnForEdit(item, options = {}) {
+      const columnId = item.id;
+      const columnName = item.name || "";
+      const modalItem = {
+        behaviorType: item.behaviorType,
+        columnId,
+        columnName,
+        show: Boolean(options.show),
+        checkMust: Boolean(options.checkMust),
+        key: Boolean(options.key),
+      };
+      if (item.behaviorType === 13 && item.moduleDefinition?.length) {
+        // 子表单字段以 childColumns 形式挂在父字段下，方便字段配置组件做展开和父子联动。
+        modalItem.childColumns = item.moduleDefinition.map(mdItem => this.formatColumnForEdit(mdItem, {
+          ...options,
+          key: false,
+          parentColumn: columnId,
+        }));
+      }
+      if (options.parentColumn !== undefined) {
+        modalItem.parentColumn = options.parentColumn;
+      }
+      return modalItem;
+    },
+    /**
+     * 从工作表字段接口中获取主键ID字段，并套用更新导入的固定勾选规则。
+     *
+     * @param options 需要覆盖的勾选状态。
+     * @return 主键ID编辑字段对象。
+     */
+    getPrimaryIdColumnForEdit(options = {}) {
+      const primaryIdColumn = this.worksheetComponents.find(item => item.id === 0) || {
+        id: 0,
+        name: "主键ID",
+        behaviorType: 1,
+      };
+      return this.formatColumnForEdit(primaryIdColumn, {
+        show: true,
+        checkMust: true,
+        key: Boolean(options.key),
+      });
+    },
+    /**
+     * 将主键ID字段固定放在第一行，并复用更新导入下原定位字段的勾选规则。
+     *
+     * @param options 需要覆盖的主键状态。
+     * @return 无返回值。
+     */
+    ensurePrimaryIdColumnFirst(options = {}) {
+      const primaryIdColumn = this.getPrimaryIdColumnForEdit(options);
+      const currentIndex = this.editColumnList.findIndex(item => item.columnId === 0);
+      if (currentIndex > -1) {
+        const currentColumn = this.editColumnList.splice(currentIndex, 1)[0];
+        this.editColumnList.unshift({
+          ...currentColumn,
+          ...primaryIdColumn,
+        });
+        return;
+      }
+      this.editColumnList.unshift(primaryIdColumn);
+    },
+    /**
+     * 编辑弹窗打开后按旧业务类型做二次字段过滤。
+     *
+     * @return 无返回值。
+     */
+    setEditData() {
+      if (this.innerProjectInfo?.projectType === 20) {
+        // projectType=20 的旧业务场景需要额外屏蔽这些系统列，保留源组件逻辑。
+        this.editColumnList = this.editColumnList.filter(item => ![2, 5, 7, 8, 9].includes(item.columnId));
+      }
+    },
+    /**
+     * 编辑弹窗关闭后清空模板详情、字段列表、筛选词和表头全选状态。
+     *
+     * @return 无返回值。
+     */
+    clearEditData() {
+      this.modalDetail = this.getEmptyModalDetail();
+      this.editColumnList = [];
+      this.filterVar = "";
+      this.allShow = false;
+      this.allCheckMust = false;
+      this.allKey = false;
+    },
+    /**
+     * 校验并提交新增/编辑导入模板表单，成功后刷新管理列表。
+     *
+     * @return 请求完成后无显式返回值。
+     */
+    async editImportModal() {
+      if (!this.modalDetail.templateName) {
+        this.$message.warning('请输入模板名称')
+        return;
+      }
+      // 后端编辑接口使用 tableId/appId 作为路径参数，body 内也统一使用 tableId。
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        ...this.modalDetail,
+        source: "biztable",
+        tableCode: this.innerProjectInfo.tableCode,
+        mergeCells: this.modalDetail.mergeCells ? 1 : 0,
+        columnList: cloneDeep(this.editColumnList),
+      };
+      if (!this.modalDetail.sheetName) {
+        delete postData.sheetName;
+      }
+      this.editLoading = true;
+      const res = await this.postFunc(this.resolvePath(this.mergedPaths.edit, postData), postData);
+      this.editLoading = false;
+      if (!res?.code) {
+        this.$message?.success(`${postData.id ? "编辑" : "新增"}模板成功`)
+        this.$emit("templateEdit", postData, res);
+        this.templateEditShow = false;
+        this.templateListModalShow = true;
+        this.getTemplateList();
+      }
+    },
+    /**
+     * 弹出删除确认框，确认后删除指定导入模板并刷新列表。
+     *
+     * @param template 需要删除的模板数据。
+     * @return 请求完成后无显式返回值。
+     */
+    async deleteTemplage(template) {
+      await this.$msgbox.confirm(`确定要删除模板 ${template.templateName} 吗？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        id: template.id,
+      };
+      const res = await this.postFunc(this.resolvePath(this.mergedPaths.delete, postData), postData);
+      if (!res?.code) {
+        this.$message?.success('删除成功')
+        this.$emit("templateDelete", template, res);
+        this.getTemplateList();
+      }
+    },
+    /**
+     * 复制指定导入模板，复制成功后刷新管理列表。
+     *
+     * @param template 需要复制的模板数据。
+     * @return 无返回值。
+     */
+    copyTemplate(template) {
+      const postData = {
+        tableId: this.tableId,
+        appId: this.appId,
+        id: template.id,
+      };
+      this.postFunc(this.resolvePath(this.mergedPaths.copy, postData), postData).then(res => {
+        if (!res?.code) {
+          this.$message?.success('复制成功')
+          this.$emit("templateCopy", template, res);
+          this.getTemplateList();
+        }
+      });
+    },
+    /**
+     * 响应列表弹窗的复制事件，转调用真实复制逻辑。
+     *
+     * @param item 列表中选中的模板行数据。
+     * @return 无返回值。
+     */
+    copyThisTemplate(item) {
+      this.copyTemplate(item);
+    },
+    /**
+     * 响应列表弹窗的删除事件，吞掉取消确认产生的 Promise reject。
+     *
+     * @param item 列表中选中的模板行数据。
+     * @return 无返回值。
+     */
+    deleteThisTemplate(item) {
+      this.deleteTemplage(item).catch(() => {});
+    },
+    /**
+     * 清理 Sheet 名称中 Excel 不允许使用的特殊字符。
+     *
+     * @return 无返回值。
+     */
+    validateSheetName() {
+      // Excel Sheet 名称不能包含这些字符，源组件在输入变化时直接清理。
+      const pattern = /[\\?*[\] ]/g;
+      this.modalDetail.sheetName = this.modalDetail.sheetName.replace(pattern, "");
+    },
+    /**
+     * 根据导入方式维护主键ID列：更新类导入自动插入，纯新增时移除。
+     *
+     * @return 无返回值。
+     */
+    handleImportTypeChange() {
+      if (this.modalDetail.type === 2 || this.modalDetail.type === 3) {
+        // 更新类导入必须依赖主键ID定位数据，所以切到“更新/更新和新增”时自动插入主键ID列。
+        this.ensurePrimaryIdColumnFirst({
+          key: this.modalDetail.type === 3 || (this.modalDetail.type === 2 && this.modalDetail.mergeCells),
+        });
+      }
+      if (this.modalDetail.type === 1 && this.editColumnList[0]?.columnId === 0) {
+        this.editColumnList.shift();
+      }
+      this.syncAllChecks();
+    },
+    /**
+     * 根据“导入未合并的多行数据”开关同步主键选择和主键ID主键规则。
+     *
+     * @return 无返回值。
+     */
+    handleMergeCellsChange() {
+      if (!this.modalDetail.mergeCells) {
+        // 不合并多行数据时主键合并规则不生效，需要清空所有主键选择。
+        this.editColumnList = this.editColumnList.map(item => ({
+          ...item,
+          key: false,
+        }));
+      }
+      if (this.modalDetail.type === 2 && this.modalDetail.mergeCells) {
+        // “仅更新 + 合并多行”时主键ID固定作为合并主键。
+        this.ensurePrimaryIdColumnFirst({
+          key: true,
+        });
+      }
+      this.syncAllChecks();
+    },
+    /**
+     * 展开或收起子表单字段列表。
+     *
+     * @param item 当前点击的字段配置项。
+     * @return 无返回值。
+     */
+    showOrCloseChildList(item) {
+      if (item.behaviorType !== 13) {
+        return;
+      }
+      this.editColumnList = this.editColumnList.map(column => {
+        if (column.columnId === item.columnId) {
+          return {
+            ...column,
+            childOpen: !column.childOpen,
+          };
+        }
+        return column;
+      });
+    },
+    /**
+     * 批量切换所有字段的“模板显示”状态，并同步子表单子字段。
+     *
+     * @return 无返回值。
+     */
+    checkAllShow() {
+      this.editColumnList = this.editColumnList.map(item => {
+        item.show = this.allShow;
+        if (item.behaviorType === 13 && item.childColumns) {
+          item.childColumns = item.childColumns.map(childItem => ({
+            ...childItem,
+            show: this.allShow,
+          }));
+        }
+        return item;
+      });
+    },
+    /**
+     * 批量切换所有字段的“必填校验”状态，必填字段会自动设为模板显示。
+     *
+     * @return 无返回值。
+     */
+    checkAllCheckMust() {
+      if (this.allCheckMust) {
+        this.allShow = true;
+      }
+      this.editColumnList = this.editColumnList.map(item => {
+        item.checkMust = this.allCheckMust;
+        if (item.checkMust) {
+          item.show = true;
+        }
+        if (item.behaviorType === 13 && item.childColumns) {
+          item.childColumns = item.childColumns.map(childItem => {
+            childItem.checkMust = this.allCheckMust;
+            if (childItem.checkMust) {
+              childItem.show = true;
+            }
+            return childItem;
+          });
+        }
+        return item;
+      });
+    },
+    /**
+     * 批量切换普通字段的“相同合并主键”状态，子表单字段不允许设为主键。
+     *
+     * @return 无返回值。
+     */
+    checkAllKey() {
+      this.editColumnList = this.editColumnList.map(item => {
+        if (item.behaviorType !== 13) {
+          item.key = this.allKey;
+        }
+        return item;
+      });
+    },
+    /**
+     * 处理单个字段勾选变化，并维护父子字段、显示、必填、主键之间的联动关系。
+     *
+     * @param checkItem 当前发生勾选变化的字段配置项。
+     * @param type 勾选类型，可取 show、checkMust、key。
+     * @return 无返回值。
+     */
+    itemCheckChange(checkItem, type) {
+      // 字段配置存在父子联动：子字段被显示/必填时，父级子表单字段也必须同步显示/必填。
+      if (type === "show") {
+        this.allShow = !this.editColumnList.find(item => !item.show);
+        if (checkItem.parentColumn) {
+          this.editColumnList = this.editColumnList.map(item => {
+            if (item.columnId === checkItem.parentColumn && checkItem.show) {
+              item.show = true;
+            }
+            return item;
+          });
+        }
+      }
+      if (type === "checkMust") {
+        this.allCheckMust = !this.editColumnList.find(item => !item.checkMust);
+        this.editColumnList = this.editColumnList.map(item => {
+          if (item.checkMust) {
+            item.show = true;
+          }
+          return item;
+        });
+        if (checkItem.parentColumn) {
+          this.editColumnList = this.editColumnList.map(item => {
+            if (item.columnId === checkItem.parentColumn && checkItem.checkMust) {
+              item.checkMust = true;
+              item.show = true;
+              item.childColumns = item.childColumns.map(childItem => {
+                if (childItem.columnId === checkItem.columnId) {
+                  childItem.show = true;
+                }
+                return childItem;
+              });
+            }
+            return item;
+          });
+        }
+      }
+      if (type === "key") {
+        this.allKey = !this.editColumnList.find(item => !item.key && item.behaviorType !== 13);
+      }
+      if (checkItem.behaviorType === 13 && !checkItem.parentColumn) {
+        this.editColumnList = this.editColumnList.map(item => {
+          if (item.columnId === checkItem.columnId && item.childColumns) {
+            item.childColumns = item.childColumns.map(childItem => {
+              if (type === "show") {
+                childItem.show = item.show;
+              }
+              if (type === "checkMust") {
+                childItem.checkMust = item.checkMust;
+                if (childItem.checkMust) {
+                  childItem.show = true;
+                }
+              }
+              if (type === "key") {
+                childItem.key = item.key;
+              }
+              return childItem;
+            });
+          }
+          return item;
+        });
+      }
+      this.syncAllChecks();
+    },
+    /**
+     * 根据当前字段列表重新计算表头三个全选复选框的状态。
+     *
+     * @return 无返回值。
+     */
+    syncAllChecks() {
+      // 任何单项或批量操作后都重新计算表头复选框，避免只改子项时表头状态滞后。
+      this.allShow = this.editColumnList.length > 0 && !this.editColumnList.find(item => !item.show);
+      this.allCheckMust = this.editColumnList.length > 0 && !this.editColumnList.find(item => !item.checkMust);
+      this.allKey = this.editColumnList.length > 0 && !this.editColumnList.find(item => !item.key && item.behaviorType !== 13);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.BnImportTemplate {
+  display: inline-flex;
+  align-items: center;
+}
+</style>