cloud-web-corejs 1.0.54-dev.73 → 1.0.54-dev.730

package/src/views/user/form/view/list.vue

@@ -1,22 +1,95 @@
 <template>
   <div id="containt">
-    <template v-if="layoutType=='PC'">
-      <el-tabs v-model="activeName" class="tab-box">
-        <el-tab-pane :label="$t2('常规')" name="first">
-          <vFormRender :formCode="formCode2" :dataId.sync="dataId" :param="param"
-                       v-if="showEdit" visible-key="showEdit" :parent-target="_self"
-                       @reload="$reloadHandle"></vFormRender>
+    <template v-if="layoutType === 'PC'">
+      <x-tabs
+        ref="xTabs"
+        v-model="activeName"
+        class="tab-box"
+        :tabNameEnable="true"
+      >
+        <el-tab-pane
+          v-if="!formConfig.hideNormalTab"
+          :label="$t2('常规')"
+          name="first"
+        >
+          <vFormRender
+            ref="edit"
+            :formCode.sync="formCode1"
+            :dataId.sync="dataId"
+            :param="param"
+            :formData="formData"
+            v-if="showEdit"
+            visible-key="showEdit"
+            :visiable.sync="showEdit"
+            :parent-target="_self"
+            @reload="reload"
+            @openCopyEditTab="openCopyEditTab"
+          ></vFormRender>
         </el-tab-pane>
-        <el-tab-pane :label="$t2('列表')" name="second">
+        <el-tab-pane
+          :label="$t2(formConfig.customListTabLabel || '列表')"
+          name="second"
+        >
           <div class="grid-height">
-            <vFormRender :formCode="formCode" style="height: 100%;"
-                         v-if="showRender" visible-key="showRender" :parent-target="_self"
-                         @reload="$reloadHandle" :openEditDialog="openEditDialog"></vFormRender>
+            <vFormRender
+              ref="list"
+              :formCode="formCode"
+              :param="param"
+              style="height: 100%"
+              v-if="showRender"
+              visible-key="showRender"
+              :visiable.sync="showRender"
+              :parent-target="_self"
+              @reload="$reloadHandle"
+              :openEditDialog="openEditDialog"
+            ></vFormRender>
           </div>
         </el-tab-pane>
-      </el-tabs>
+        <el-tab-pane
+          v-for="(item, index) in otherTabList"
+          :key="index"
+          :label="$t2(item.label)"
+          :name="`otherTab${index}`"
+        >
+          <div class="grid-height">
+            <vFormRender
+              :ref="`list${index}`"
+              :formCode.sync="item.formCode"
+              :dataId.sync="item.dataId"
+              :param="item.param"
+              v-if="item.showContent"
+              :parent-target="_self"
+              @reload="
+                (...args) => {
+                  reloadAutoContent(...args);
+                }
+              "
+              :openEditDialog="openEditDialog1"
+            ></vFormRender>
+          </div>
+        </el-tab-pane>
+        <template #editTab="{ tab }">
+          <el-tab-pane
+            :key="tab.tabName"
+            :label="tab.data[tab.tabLabelField]"
+            :name="tab.tabName"
+            :closable="true"
+          >
+            <vFormRender
+              ref="multiEdit"
+              :formCode.sync="tab.formCode"
+              :dataId.sync="tab.dataId"
+              :param="tab.param"
+              v-if="tab.showContent"
+              :parent-target="_self"
+              @reload="(...args) => onEditTabReload(tab, ...args)"
+              @openCopyEditTab="openCopyEditTab"
+            ></vFormRender>
+          </el-tab-pane>
+        </template>
+      </x-tabs>
     </template>
-    <template v-else-if="layoutType=='H5'">
+    <template v-else-if="layoutType === 'H5'">
       <el-dialog
         :title="$t1('明细详情')"
         :modal-append-to-body="false"
@@ -30,100 +103,443 @@
         v-el-dialog-center
         :destroy-on-close="true"
       >
-        <div class="cont" style="height: calc(100vh - 73px);">
-          <vFormRender :formCode="formCode2" :dataId.sync="dataId"
-                       v-if="showEditDialog && showEdit" visible-key="showEdit" :parent-target="_self"
-                       @reload="$reloadHandle"></vFormRender>
+        <div class="cont" style="height: calc(100vh - 73px)">
+          <vFormRender
+            :formCode="formCode1"
+            :dataId.sync="dataId"
+            :param="param"
+            v-if="showEditDialog && showEdit"
+            visible-key="showEdit"
+            :parent-target="_self"
+            @reload="$reloadHandle"
+          ></vFormRender>
         </div>
       </el-dialog>
-      <vFormRender :formCode="formCode" style="height: 100%;"
-                   v-if="showRender" visible-key="showRender" :parent-target="_self"
-                   @reload="$reloadHandle" :openEditDialog="openEditDialog"></vFormRender>
+      <vFormRender
+        :formCode="formCode"
+        :param="param"
+        style="height: 100%"
+        v-if="showRender"
+        visible-key="showRender"
+        :parent-target="_self"
+        @reload="$reloadHandle"
+        :openEditDialog="openEditDialog"
+      ></vFormRender>
     </template>
   </div>
 </template>
 
 <script>
-
-import vFormRender from '../../../../views/user/form/vform/render'
+import vFormRender from "../../../../views/user/form/vform/render";
 
 export default {
-  name: 'form_view:list',
-  components: {vFormRender},
-  mounted() {
-
-  },
+  name: "form_view:list",
+  components: { vFormRender },
+  mounted() {},
   data() {
     let that = this;
     return {
       activeName: "second",
       showEdit: false,
-
-      formJson: {},
+      // 「上一单/下一单」翻单：非多标签(常规页签)模式的导航快照
+      firstNavRows: null,
+      firstNavIndex: -1,
+      formJson: { formConfig: {} },
       formConfig: {},
       showRender: false,
       formTemplate: null,
       /*      formCode: null,*/
       layoutType: null,
       formCode: null,
+      formCode1: null,
       formCode2: null,
+      addFormCode: null,
       dataId: null,
       showEditDialog: false,
-      param: {}
+      param: {},
+      multiTabLabelField: null,
+      formData: null,
+      otherTabList: [],
     };
   },
+  watch: {
+    activeName(val) {
+      if (
+        this.formJson.formConfig.otherTabEnabled &&
+        this.otherTabList.length > 0 &&
+        val.startsWith("otherTab")
+      ) {
+        let num = Number(val.substring("otherTab".length));
+        this.otherTabList[num].showContent = true;
+      }
+      this.handleTabChange(val);
+    },
+  },
   created() {
     this.initParam();
     this.getReportTemplate();
   },
+  provide() {
+    return {
+      _self: this,
+    };
+  },
   methods: {
+    handleTabChange(tabName) {
+      if (tabName === "second") {
+        this.$refs.list.dataTableSearch();
+      } else if (tabName.startsWith("otherTab")) {
+        let refName = tabName.replace("otherTab", "list");
+        if (this.$refs[refName]?.length)
+          this.$refs[refName][0].dataTableSearch();
+      }
+    },
+    parseViewParam() {
+      let param = {};
+      let rawParam = this.$attrs.param ?? this.$route.query.param;
+      if (rawParam) {
+        if (typeof rawParam === "string") {
+          try {
+            param = JSON.parse(rawParam) || {};
+          } catch (e) {
+            param = {};
+          }
+        } else if (typeof rawParam === "object") {
+          param = { ...rawParam };
+        }
+      }
+      return param;
+    },
     initParam() {
       let path = this.$route.path;
-      let param = path.split('/').reverse();
+      let pathSegments = path.split("/").reverse();
 
-      this.formCode = this.$attrs.formCode || param[0];
+      this.formCode = this.$attrs.formCode || pathSegments[0];
+      this.param = this.parseViewParam();
       this.showRender = true;
     },
     getReportTemplate() {
       this.$http({
-        aes: true,
+        // aes: true,
         url: USER_PREFIX + `/formTemplate/getByFormCode`,
         method: `post`,
-        data: {stringOne: this.formCode},
-        isLoading: true,
-        loadingTarget: document.body,
-        modalStrictly: true,
-        success: async res => {
+        data: { stringOne: this.formCode },
+        // isLoading: true,
+        // loadingTarget: document.body,
+        // modalStrictly: true,
+        success: async (res) => {
           let formTemplate = res.objx || {};
           this.formTemplate = formTemplate;
-          let formJson = formTemplate.formViewContent ? JSON.parse(formTemplate.formViewContent) : {};
+          let formJson = formTemplate.formViewContent
+            ? JSON.parse(formTemplate.formViewContent)
+            : {};
           this.formJson = formJson;
-          this.layoutType = formJson.formConfig?.layoutType
-          this.formCode2 = formJson.formConfig?.editFormCode ?? null;
-        }
+          this.formConfig = formJson.formConfig || {};
+          this.layoutType = formJson.formConfig?.layoutType;
+          let addFormCode = formJson.formConfig?.addFormCode ?? null;
+          let formCode2 = formJson.formConfig?.editFormCode ?? null;
+          this.formCode2 = formCode2;
+          if (!addFormCode) {
+            addFormCode = formCode2;
+          }
+          this.addFormCode = addFormCode;
+          this.multiTabLabelField = formJson.formConfig?.multiTabLabelField;
+          this.initOtherTabList();
+        },
+      });
+    },
+    openOtherTab(row, param, option) {
+      let dataId = row && row.id ? row.id : null;
+      let formCode = option.formCode;
+      let otherTab = this.otherTabList.find(
+        (item) => item.formCode === formCode
+      );
+      let otherTabIndex = this.otherTabList.findIndex(
+        (item) => item.formCode === formCode
+      );
+      this.activeName = `otherTab${otherTabIndex}`;
+
+      otherTab.dataId = dataId;
+      otherTab.param = param;
+      this.$nextTick(() => {
+        otherTab.showContent = false;
+        this.$nextTick(() => {
+          otherTab.showContent = true;
+        });
       });
     },
-    openEditDialog(row, param) {
-      if (this.layoutType == "H5") {
-        this.openEditH5Dialog(row);
+    openEditDialog(row, param, option) {
+      debugger;
+      if (option?.otherTab) {
+        this.openOtherTab(row, param, option);
         return;
       }
-      this.dataId = row && row.id ? row.id : null;
-      this.activeName = 'first';
-      this.showEdit = false;
-      this.showEditDialog = true;
-      this.param = param
-      this.$openEditView('showEdit');
+      if (this.layoutType === "H5") {
+        this.openEditH5Dialog(row, param);
+        return;
+      }
+      let formConfig = this.formJson.formConfig;
+      let tabLabelField =
+        option?.multiTabLabelField || formConfig.multiTabLabelField;
+      let multiTabEnabled = false;
+      if (tabLabelField) {
+        if (option?.multiTabEnabled) {
+          multiTabEnabled = true;
+        } else if (
+          formConfig.multiTabEnabled &&
+          option?.multiTabEnabled !== false
+        ) {
+          multiTabEnabled = true;
+        }
+      }
+
+      let dataId = row && row.id ? row.id : null;
+      this.dataId = dataId;
+      let isAdd = !dataId;
+      let formCode = null;
+      if (isAdd) {
+        formCode = option?.formCode || this.addFormCode;
+      } else {
+        formCode = option?.formCode || this.formCode2;
+      }
+      // 新增页签门控：需先启用「列表启用详情多标签」，再叠加 addTabEnabled、新增、配了标题字段
+      let addTab =
+        multiTabEnabled && formConfig.addTabEnabled && isAdd && tabLabelField;
+      if ((multiTabEnabled && dataId) || addTab) {
+        // 归一：新增/编辑都走 openEditTab
+        // 新增合成唯一 id，让去重(paneKeyName='id')/tabName/paneName 三者对齐
+        let key = isAdd
+          ? "add_" + Date.now() + "_" + Math.random().toString(36).slice(2, 6)
+          : dataId;
+        let openRow = isAdd
+          ? { ...row, id: key, [tabLabelField]: "新增" }
+          : row;
+        this.$refs.xTabs.openEditTab(openRow, param, {
+          tabParam: {
+            formCode,
+            tabLabelField,
+            tabName: String(key), // el-tabs 的 name 需为 String,dataId 可能是 Number
+            isAdd,
+            // 新增时 dataId 必须为 null，避免 vFormRender 把合成 id 当真实单号去 getOne
+            ...(isAdd ? { dataId: null } : {}),
+            // 翻单快照：新增也带(navIndex=-1),保存后把新单插入序列首位
+            navRows: option?.navRows || null,
+            navIndex: option?.navIndex ?? -1,
+          },
+        });
+      } else {
+        this.formCode1 = formCode;
+        this.activeName = option.activeName || "first";
+        this.showEdit = false;
+        this.showEditDialog = true;
+        this.param = param;
+        this.formData = null;
+        // 常规页签(非多标签)模式记录翻单快照；新增也记录(navIndex=-1),保存后插入序列首位
+        this.firstNavRows = option?.navRows || null;
+        this.firstNavIndex = dataId ? option?.navIndex ?? -1 : -1;
+        this.$openEditView("showEdit");
+      }
+    },
+    openEditDialog1(row, param, option) {
+      this.openEditDialog(row, param, { multiTabEnabled: false, ...option });
     },
-    openEditH5Dialog(row) {
+    openEditH5Dialog(row, param) {
+      debugger;
+      this.formCode1 = this.addFormCode;
       this.dataId = row && row.id ? row.id : null;
-      this.activeName = 'first';
+      this.param = param;
+      this.activeName = "first";
       this.showEdit = false;
       this.showEditDialog = true;
       this.$nextTick(() => {
-        this.$openEditView('showEdit');
+        this.$openEditView("showEdit");
       });
     },
-  }
+
+    openCopyEditTab(formData) {
+      this.dataId = null;
+      this.formCode1 = this.addFormCode;
+      this.activeName = "first";
+      this.showEdit = false;
+      this.showEditDialog = true;
+      // this.param = param
+      this.formData = formData;
+      this.$openEditView("showEdit");
+    },
+    reload(...args) {
+      this.formData = {};
+      this.$reloadHandle(...args);
+      // 常规模式新增保存:把新单插入翻单序列首位(navIndex=-1 表示当前为新增未定位)
+      let param = args[1];
+      let newId = param && param.updateParam ? param.updateParam.dataId : null;
+      if (newId && Array.isArray(this.firstNavRows) && this.firstNavIndex === -1) {
+        this.firstNavRows = [{ id: newId }, ...this.firstNavRows];
+        this.firstNavIndex = 0;
+      }
+    },
+    reload2() {
+      this.formData = {};
+      this.$reloadHandle(...arguments);
+    },
+    // 逐级解析真实表单的 formDataModel（target 可能是包裹组件，真实表单在内层 vFormRef 上）
+    resolveFormModel(target) {
+      return (
+        (target && target.formDataModel) ||
+        (target && target.$refs && target.$refs.vFormRef
+          ? target.$refs.vFormRef.formDataModel
+          : null) ||
+        (target && target.getFormRef && target.getFormRef()
+          ? target.getFormRef().formDataModel
+          : null) ||
+        {}
+      );
+    },
+    // 应用保存结果到页签「元数据」：升级编辑态 + 同步标题。不含内容重渲染。
+    applyTabSaveResult(tab, dataId, formCode, formModel) {
+      // ① 首次新增保存：就地升级本页签为编辑态
+      if (tab.isAdd && dataId) {
+        tab.data.id = dataId; // 从列表再打开同单号可复用本页签
+        tab.dataId = dataId; // 表单不 watch dataId，此处不会触发内容重载
+        tab.isAdd = false;
+        if (formCode) tab.formCode = formCode;
+        // 新增保存:把新单插入翻单序列首位(新数组,不改动列表原 fullData 引用)
+        if (Array.isArray(tab.navRows)) {
+          tab.navRows = [tab.data, ...tab.navRows];
+          tab.navIndex = 0;
+        }
+      }
+      // ② 同步标题为「标签名称字段」最新值；无值则保持原标题，不回退用单号
+      let labelField = tab.tabLabelField;
+      let labelVal =
+        labelField != null &&
+        formModel &&
+        formModel[labelField] != null &&
+        formModel[labelField] !== ""
+          ? formModel[labelField]
+          : null;
+      if (labelVal != null) {
+        this.$set(tab.data, labelField, labelVal);
+      }
+    },
+    onEditTabReload(tab, target, param) {
+      // 动态页签（新增/编辑）表单保存后回调，tab 直接在作用域内
+      this.formData = {};
+      let dataId =
+        param != null && param.updateParam != null
+          ? param.updateParam.dataId
+          : null;
+      let formCode =
+        param != null && param.updateParam != null
+          ? param.updateParam.formCode
+          : null;
+      this.applyTabSaveResult(tab, dataId, formCode, this.resolveFormModel(target));
+      this.$refs.xTabs.reloadTabContent(target, param, tab); // 重载编辑态（内容重渲染）
+    },
+    // 供「保存并提交」路径调用：只升级当前活动新增页签的元数据，不重渲染详情内容。
+    // 目的：保存成功即升级为编辑态（防止提交失败/取消后重复入库），且不多刷一次详情。
+    promoteActiveAddTab(dataId, formCode, target) {
+      // 常规「first」页签新增(addTabEnabled 关时新增走此)保存后:升级 dataId 为编辑态,
+      // 并把新单插入翻单序列首位,使提交后「刷新当前页签」能显示详情。
+      if (this.activeName === "first") {
+        if (dataId) {
+          this.dataId = dataId;
+          if (formCode) this.formCode1 = formCode;
+          if (Array.isArray(this.firstNavRows) && this.firstNavIndex === -1) {
+            this.firstNavRows = [{ id: dataId }, ...this.firstNavRows];
+            this.firstNavIndex = 0;
+          }
+        }
+        return;
+      }
+      let xTabs = this.$refs.xTabs;
+      if (!xTabs) return;
+      let tab = xTabs.tabs.find((t) => t.tabName === xTabs.activeName);
+      if (!tab) return;
+      this.applyTabSaveResult(tab, dataId, formCode, this.resolveFormModel(target));
+    },
+    // ===== 上一单/下一单：宿主 API，供详情表单 detail-item 的按钮区调用 =====
+    // 返回当前活动详情的翻单快照 {rows, index} —— 兼容多标签页签与常规「first」页签；无快照返回 null。
+    getActiveBillNavState() {
+      let activeName = this.activeName;
+      // 常规「first」页签
+      if (activeName === "first") {
+        if (
+          this.dataId &&
+          Array.isArray(this.firstNavRows) &&
+          this.firstNavRows.length > 0
+        ) {
+          return { rows: this.firstNavRows, index: this.firstNavIndex };
+        }
+        return null;
+      }
+      // 多标签动态编辑页签
+      let xTabs = this.$refs.xTabs;
+      let tab = xTabs && xTabs.tabs.find((t) => t.tabName === activeName);
+      if (
+        tab &&
+        !tab.isAdd &&
+        Array.isArray(tab.navRows) &&
+        tab.navRows.length > 0
+      ) {
+        return { rows: tab.navRows, index: tab.navIndex ?? -1, tab };
+      }
+      return null;
+    },
+    // 翻单：step = -1 上一单 / +1 下一单，把当前活动详情刷新到相邻单据。
+    navigateActiveBill(step) {
+      let state = this.getActiveBillNavState();
+      if (!state) return;
+      let idx = state.index + step;
+      if (idx < 0 || idx >= state.rows.length) return; // 到边界不循环
+      let newRow = state.rows[idx];
+      if (!newRow || !newRow.id) return;
+      if (state.tab) {
+        // 多标签模式
+        let tab = state.tab;
+        tab.navIndex = idx;
+        tab.data = newRow; // 页签标题取 tab.data[tabLabelField]，随之更新
+        tab.dataId = newRow.id; // 表单不 watch dataId，靠下方重挂载取数
+        this.$refs.xTabs.reloadTabContent(null, null, tab);
+      } else {
+        // 常规「first」页签模式
+        this.firstNavIndex = idx;
+        this.dataId = newRow.id;
+        this.formData = null;
+        this.$openEditView("showEdit"); // toggle 重挂载 → 按新 dataId getOne
+      }
+    },
+    initOtherTabList() {
+      if (!this.formJson.formConfig.otherTabEnabled) return;
+      this.otherTabList = this.formJson.formConfig.otherTabList
+        .filter((item) => !!item.formCode && !!item.label)
+        .map((item) => {
+          return {
+            label: item.label,
+            formCode: item.formCode,
+            showContent: false,
+            dataId: null,
+            param: null,
+          };
+        });
+    },
+    reloadAutoContent(target, param, tab) {
+      let updateParam =
+        param != null && param.updateParam != null ? param.updateParam : {};
+      for (let key in updateParam) {
+        target.$emit("update:" + key, updateParam[key]);
+      }
+
+      if (!tab) {
+        let activeName = this.activeName;
+        tab = this.tabs.find((item) => item.label === activeName);
+      }
+      if (tab) {
+        tab.showContent = false;
+        setTimeout(() => {
+          tab.showContent = true;
+        }, 200);
+      }
+    },
+  },
 };
 </script>