From 2defa41e268fff9ab34adbe21e760bfdba27a319 Mon Sep 17 00:00:00 2001 From: caorui <3165079241@qq.com> Date: Sat, 12 Jul 2025 15:36:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=BA=E6=99=AF=E4=B8=AD=E5=BF=83=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/baseRightDialog/index.vue | 2 +- src/views/LinkUp/compoment/addDialogChunk.vue | 483 ++++++++++-------- 2 files changed, 276 insertions(+), 209 deletions(-) diff --git a/src/components/base/baseRightDialog/index.vue b/src/components/base/baseRightDialog/index.vue index 5c3b2ff..790a8f4 100644 --- a/src/components/base/baseRightDialog/index.vue +++ b/src/components/base/baseRightDialog/index.vue @@ -15,7 +15,7 @@ >
- {{ title }} + {{ title }} 关 闭 diff --git a/src/views/LinkUp/compoment/addDialogChunk.vue b/src/views/LinkUp/compoment/addDialogChunk.vue index c4ab631..027a64e 100644 --- a/src/views/LinkUp/compoment/addDialogChunk.vue +++ b/src/views/LinkUp/compoment/addDialogChunk.vue @@ -7,8 +7,7 @@ :appendBody="true" :loading="sceneLoading" :footerShow="true" - :submitShow="true" - @handleConfirmClick="handleConfirmClick" + :submitShow="false" :submitTitle="'发布'" :submitIcon="'el-icon-upload2'" :title="sceneName" @@ -34,7 +33,7 @@ >
{{ ele.title }}
@@ -539,102 +538,109 @@ - - - - - -
-
- -
-
-
- +
+ 暂存 + 点击测试 +
+
+ + + + +
+
+ +
+
+
+ +
+
+ +
-
- -
-
- + +
-
- - - - -
- 点击测试 + + +
@@ -683,7 +689,7 @@ export default { // 画布列表，对应右侧操作区域 drawShowList: [], drawSelectIndex: 0, // 当前选中的画布索引 - + currentRowData: {}, //当步骤为1时 timeDivide: timeDivide, activeTabName: "选择操作", // 显示的操作栏 @@ -785,12 +791,16 @@ export default { }; }, methods: { - async HitTesting() { - this.openLoading("处理"); + async saveTestTableEvent() { + if (!this.outsideFormData.tableName) { + this.$vmNews("请先选择表"); + return; + } + this.openLoading("暂存"); // 使用示例：传入你这段 HTML 所在的 DOM 根节点 const root = document.querySelector("#editorContainer"); const parsed = this.extractEditorItems(root); - let data = this.drawShowList[this.drawSelectIndex].options; + let data = this.currentRowData.options; let params = { detailList: parsed, flowId: this.sceneID, @@ -806,14 +816,13 @@ export default { "", params ); - if (res.status == "200") { - this.$vmNews("测试成功！", "success"); + if(res.status == "200"){ + this.$vmNews("暂存成功！","success") } }, extractEditorItems(rootElement) { const result = []; const items = rootElement.querySelectorAll(".editorItem"); - items.forEach((item) => { const fieldName = item.querySelector(".el-form-item__label")?.innerText.trim() || ""; @@ -830,7 +839,6 @@ export default { whereCondition += node.getAttribute("data-token-text") || ""; } }); - // 替换中文符号为英文符号 whereCondition = whereCondition .replace(/，/g, ",") @@ -842,7 +850,9 @@ export default { return result; }, + hitTesting(){ + }, /** * 打开弹窗 * @param {string} sceneID 场景 ID @@ -940,8 +950,7 @@ export default { // 在下一个 DOM 更新周期后执行操作 this.$nextTick(() => { // 选中第一个步骤 - this.drawSelectIndex = 0; - this.selectDrawItem(this.drawSelectIndex); + this.selectDrawItem(0, this.drawShowList[0]); }); } else { // 新增时生成第一步 @@ -996,12 +1005,10 @@ export default { // 更新画布列表 this.drawShowList = obj; // 在下一个 DOM 更新周期后执行操作 - this.$nextTick(() => { - // 选中第一个步骤 - this.drawSelectIndex = 0; - this.selectDrawItem(this.drawSelectIndex); + this.$nextTick(async () => { + await this.selectDrawItem(0, this.drawShowList[0]); // 获取应用列表 - this.getAppList(); + await this.getAppList(); }); } // 手动新增时 @@ -1017,8 +1024,8 @@ export default { // 在下一个 DOM 更新周期后执行操作 this.$nextTick(() => { // 选中当前新增的步骤 - this.drawSelectIndex = this.drawShowList.length - 1; - this.selectDrawItem(this.drawSelectIndex); + let indexFlag = this.drawShowList.length - 1; + this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]); }); } // 插入时 @@ -1033,8 +1040,8 @@ export default { // 在下一个 DOM 更新周期后执行操作 this.$nextTick(() => { // 选中当前新增的步骤 - this.drawSelectIndex = insertIndex + 1; - this.selectDrawItem(this.drawSelectIndex); + let indexFlag = insertIndex + 1; + this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]); }); } if (type === "time") { @@ -1049,8 +1056,7 @@ export default { // 在下一个 DOM 更新周期后执行操作 this.$nextTick(() => { // 选中第二个步骤 - this.drawSelectIndex = 1; - this.selectDrawItem(this.drawSelectIndex); + this.selectDrawItem(1, this.drawShowList[1]); }); } } @@ -1073,9 +1079,10 @@ export default { * 切换步骤时 * @param {number} index 步骤索引 */ - async selectDrawItem(index) { + async selectDrawItem(index, row) { // 更新当前选中的步骤索引 this.drawSelectIndex = index; + this.currentRowData = row; // 先清空 this.pluginActiv = ""; this.apiIDActiv = ""; @@ -1099,7 +1106,7 @@ export default { async GetSceneStepData() { // 获取场景步骤数据的参数 let params = { - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, }; let res = await authApi( "sysFlowStepService", @@ -1110,12 +1117,12 @@ export default { ); if (res.status == "200") { let obj = { - ...this.drawShowList[this.drawSelectIndex].options, + ...this.currentRowData.options, ...res.attribute, }; // 更新当前步骤的选项 obj.stepDescribe = obj.apiName || obj.plugName; - this.drawShowList[this.drawSelectIndex].options = obj; + this.currentRowData.options = obj; // 更新当前选择的应用步骤描述 this.CurrentAppRow.description = obj.stepDescribe; if (this.drawSelectIndex == 0) { @@ -1132,13 +1139,11 @@ export default { this.pluginList = []; // 清空用户列表 this.userList = []; - if (this.drawShowList[this.drawSelectIndex].options.appId) { + if (this.currentRowData.options.appId) { // 更新当前选中的应用 ID - this.appActivIndex = - this.drawShowList[this.drawSelectIndex].options.appId; + this.appActivIndex = this.currentRowData.options.appId; // 更新当前选择的应用名称 - this.CurrentAppRow.appName = - this.drawShowList[this.drawSelectIndex].options.appName; + this.CurrentAppRow.appName = this.currentRowData.options.appName; // 获取当前步骤的 api、插件、账号 await this.GetApiList(this.appActivIndex); // this.getPluginList(this.appActivIndex); @@ -1150,46 +1155,54 @@ export default { this.CurrentAppRow = {}; } this.$nextTick(() => { - if (this.drawShowList[this.drawSelectIndex].options.description) { + if (this.currentRowData.options.description) { // 更新步骤描述 - this.description = - this.drawShowList[this.drawSelectIndex].options.description; + this.description = this.currentRowData.options.description; } else { // 重置步骤描述 this.description = ""; } - if (this.drawShowList[this.drawSelectIndex].options.apiId) { + if (this.currentRowData.options.apiId) { // 更新选择的 API ID - this.apiIdActiv = - this.drawShowList[this.drawSelectIndex].options.apiId; + this.apiIdActiv = this.currentRowData.options.apiId; } else { // 重置选择的 API ID this.apiIdActiv = ""; } // 插件 - if (this.drawShowList[this.drawSelectIndex].options.plugId) { + if (this.currentRowData.options.plugId) { // 更新选择的插件 ID - this.pluginActiv = - this.drawShowList[this.drawSelectIndex].options.plugId; + this.pluginActiv = this.currentRowData.options.plugId; } else { // 重置选择的插件 ID this.pluginActiv = ""; } // 账号 - if (this.drawShowList[this.drawSelectIndex].options.step_acc_id) { + if (this.currentRowData.options.step_acc_id) { // 更新选择的用户 ID - this.userActivId = - this.drawShowList[this.drawSelectIndex].options.step_acc_id; + this.userActivId = this.currentRowData.options.step_acc_id; // 更新当前选择的应用账号名称 this.CurrentAppRow.step_acc_name = - this.drawShowList[this.drawSelectIndex].options.step_acc_name; + this.currentRowData.options.step_acc_name; + // 获取表数据 + this.queryTables(this.userActivId); } else { // 重置选择的用户 ID this.userActivId = ""; // 重置当前选择的应用账号名称 this.CurrentAppRow.step_acc_name = ""; } + + // 表名 + if (this.currentRowData.options.tableName) { + // 更新选择的用户 ID + this.outsideFormData.tableName = + this.currentRowData.options.tableName; + } else { + // 重置选择的用户 ID + this.outsideFormData.tableName = ""; + } }); } } @@ -1217,7 +1230,7 @@ export default { let res = await authApi( "sysFlowStepService", "", - "saveFlowStep", + "deleteFlowStep", "", { id: stepID, @@ -1230,12 +1243,11 @@ export default { this.drawShowList.splice(index, 1); if (this.drawSelectIndex === index) { // 选中第一个步骤 - this.drawSelectIndex = 0; - this.selectDrawItem(this.drawSelectIndex); + this.selectDrawItem(0, this.drawShowList[0]); } else if (this.drawSelectIndex >= this.drawShowList.length) { // 选中最后一个步骤 - this.drawSelectIndex = this.drawShowList.length - 1; - this.selectDrawItem(this.drawSelectIndex); + let indexFlag = this.drawShowList.length - 1; + this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]); } } } else { @@ -1245,12 +1257,11 @@ export default { this.drawShowList.splice(index, 1); if (this.drawSelectIndex === index) { // 选中第一个步骤 - this.drawSelectIndex = 0; - this.selectDrawItem(this.drawSelectIndex); + this.selectDrawItem(0, this.drawShowList[0]); } else if (this.drawSelectIndex >= this.drawShowList.length) { // 选中最后一个步骤 - this.drawSelectIndex = this.drawShowList.length - 1; - this.selectDrawItem(this.drawSelectIndex); + let indexFlag = this.drawShowList.length - 1; + this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]); } } }) @@ -1280,10 +1291,10 @@ export default { // 更新当前选择操作的类型 this.activTimeIndex = item.id; // 更新当前步骤的任务类型 - this.drawShowList[this.drawSelectIndex].options.taskType = item.id; + this.currentRowData.options.taskType = item.id; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, apiId: item.id, apiName: this.getTimeDivide(item.id), }; @@ -1298,10 +1309,10 @@ export default { // 更新 cron 表达式 this.expression = value; // 更新当前步骤的任务值 - this.drawShowList[this.drawSelectIndex].options.taskValue = value; + this.currentRowData.options.taskValue = value; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, taskCorn: value, }; // 保存场景步骤数据 @@ -1312,7 +1323,20 @@ export default { * 处理 其他步骤的tab点击事件 * @param {any} value 标签页值 */ - handleOtherTabClick(value) {}, + handleOtherTabClick(value) { + console.log( + this.activeOtherTabName, + this.userActivId, + this.outsideFormData.tableName + ); + if ( + this.activeOtherTabName == "配置应用" && + this.userActivId && + this.outsideFormData.tableName + ) { + this.queryColumns(this.outsideFormData.tableName); + } + }, /** * 应用搜索 */ @@ -1354,11 +1378,10 @@ export default { */ changeDescription() { // 更新当前步骤的步骤描述 - this.drawShowList[this.drawSelectIndex].options.description = - this.description; + this.currentRowData.options.description = this.description; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, description: this.description, }; // 保存场景步骤数据 @@ -1390,19 +1413,19 @@ export default { this.CurrentAppRow.step_acc_name = ""; this.CurrentAppRow.description = ""; // 重置当前步骤的资源类型 - this.drawShowList[this.drawSelectIndex].options.actionType = ""; + this.currentRowData.options.actionType = ""; // 重置当前步骤的 API ID - this.drawShowList[this.drawSelectIndex].options.apiId = ""; - this.drawShowList[this.drawSelectIndex].options.apiName = ""; + this.currentRowData.options.apiId = ""; + this.currentRowData.options.apiName = ""; // 重置当前步骤的插件 ID - this.drawShowList[this.drawSelectIndex].options.plugId = ""; + this.currentRowData.options.plugId = ""; // 重置当前步骤的插件名称 - this.drawShowList[this.drawSelectIndex].options.plugName = ""; + this.currentRowData.options.plugName = ""; // 重置当前步骤的账号 ID - this.drawShowList[this.drawSelectIndex].options.step_acc_id = ""; + this.currentRowData.options.step_acc_id = ""; // 重置当前步骤的账号名称 - this.drawShowList[this.drawSelectIndex].options.step_acc_name = ""; - this.drawShowList[this.drawSelectIndex].options.stepDescribe = ""; + this.currentRowData.options.step_acc_name = ""; + this.currentRowData.options.stepDescribe = ""; this.apiIdActiv = ""; this.apiList = []; this.pluginActiv = ""; @@ -1425,9 +1448,9 @@ export default { // 更新当前选择的应用名称 this.CurrentAppRow.appName = row.name; // 更新当前步骤的应用 ID - this.drawShowList[this.drawSelectIndex].options.appId = row.id; + this.currentRowData.options.appId = row.id; // 更新当前步骤的应用名称 - this.drawShowList[this.drawSelectIndex].options.appName = row.name; + this.currentRowData.options.appName = row.name; // 切换到选择操作标签页 this.activeOtherTabName = "选择操作"; @@ -1436,11 +1459,11 @@ export default { // 清空 API 或插件搜索关键字 this.operateCodeOrName = ""; // 更新当前步骤的资源类型 - this.drawShowList[this.drawSelectIndex].options.actionType = "API接口"; + this.currentRowData.options.actionType = "API接口"; // 实时保存配置 let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, appId: row.id, appName: row.name, actionType: "", @@ -1462,7 +1485,7 @@ export default { }, async clearFlowStep() { let params = { - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, }; let res = await authApi( "sysFlowStepService", @@ -1477,7 +1500,7 @@ export default { */ searchApiPlugin() { // 检查是否选择了应用 - if (!this.drawShowList[this.drawSelectIndex].options.appId) { + if (!this.currentRowData.options.appId) { this.$vmNews("请先选择应用"); return; } @@ -1489,7 +1512,7 @@ export default { this.drawMask = false; }, 5000); // 获取 API 列表 - this.GetApiList(this.drawShowList[this.drawSelectIndex].options.appId); + this.GetApiList(this.currentRowData.options.appId); } else if (this.activeApiPliginTabName === "插件") { // 显示搜索遮罩 this.drawMask = true; @@ -1498,9 +1521,7 @@ export default { this.drawMask = false; }, 5000); // 获取插件列表 - this.getPluginList( - this.drawShowList[this.drawSelectIndex].options.appId - ); + this.getPluginList(this.currentRowData.options.appId); } }, /** @@ -1514,25 +1535,23 @@ export default { // 选择API hangleApiClickEvent(item) { this.pluginActiv = ""; - this.drawShowList[this.drawSelectIndex].options.plugId = ""; - this.drawShowList[this.drawSelectIndex].options.plugName = ""; + this.currentRowData.options.plugId = ""; + this.currentRowData.options.plugName = ""; // 更新选择的 API ID this.apiIdActiv = item.id; // 更新当前步骤的 API ID - this.drawShowList[this.drawSelectIndex].options.apiId = item.id; - this.drawShowList[this.drawSelectIndex].options.apiName = item.apiName; + this.currentRowData.options.apiId = item.id; + this.currentRowData.options.apiName = item.apiName; // 更新当前选择的应用步骤描述 this.CurrentAppRow.description = item.apiName; - this.drawShowList[this.drawSelectIndex].options.stepDescribe = - item.apiName; + this.currentRowData.options.stepDescribe = item.apiName; // 更新当前步骤的资源类型 - this.drawShowList[this.drawSelectIndex].options.actionType = - this.activeApiPliginTabName; + this.currentRowData.options.actionType = this.activeApiPliginTabName; // 切换到选择账号标签页 this.activeOtherTabName = "选择账号"; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, actionType: this.activeApiPliginTabName, plugId: "", plugName: "", @@ -1547,23 +1566,21 @@ export default { // 更新选择的 API ID this.apiIdActiv = ""; // 更新当前步骤的 API ID - this.drawShowList[this.drawSelectIndex].options.apiId = ""; - this.drawShowList[this.drawSelectIndex].options.apiName = ""; + this.currentRowData.options.apiId = ""; + this.currentRowData.options.apiName = ""; this.pluginActiv = item.id; - this.drawShowList[this.drawSelectIndex].options.plugId = item.id; - this.drawShowList[this.drawSelectIndex].options.plugName = item.plugName; + this.currentRowData.options.plugId = item.id; + this.currentRowData.options.plugName = item.plugName; // 更新当前选择的应用步骤描述 this.CurrentAppRow.description = item.plugName; - this.drawShowList[this.drawSelectIndex].options.stepDescribe = - item.plugName; + this.currentRowData.options.stepDescribe = item.plugName; // 更新当前步骤的资源类型 - this.drawShowList[this.drawSelectIndex].options.actionType = - this.activeApiPliginTabName; + this.currentRowData.options.actionType = this.activeApiPliginTabName; // 切换到选择账号标签页 this.activeOtherTabName = "选择账号"; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, actionType: this.activeApiPliginTabName, plugId: item.id, plugName: item.plugName, @@ -1585,7 +1602,7 @@ export default { this.$refs.addAccount.openDialog( this.appActivIndex, this.sceneID, - this.drawShowList[this.drawSelectIndex].options.stepID + this.currentRowData.options.stepID ); }, /** @@ -1605,9 +1622,9 @@ export default { // 更新当前选择的应用账号名称 this.CurrentAppRow.step_acc_name = item.name; // 更新当前步骤的用户 ID - this.drawShowList[this.drawSelectIndex].options.step_acc_id = item.id; + this.currentRowData.options.step_acc_id = item.id; // 更新当前步骤的用户账号名称 - this.drawShowList[this.drawSelectIndex].options.step_acc_name = item.name; + this.currentRowData.options.step_acc_name = item.name; this.outsideFormData = { tableName: "", }; @@ -1616,9 +1633,10 @@ export default { this.outsideColumns = []; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, step_acc_name: item.name, step_acc_id: item.id, + tableName: "", }; // 保存场景步骤数据 await this.SaveSceneStepData(params); @@ -1660,13 +1678,11 @@ export default { // 切换表时 async outsideSelectChange(val) { if (val) { - this.outsideColumns = []; // 更新当前步骤的步骤描述 - this.drawShowList[this.drawSelectIndex].options.description = - this.description; + this.currentRowData.options.description = this.description; let params = { flowId: this.sceneID, - id: this.drawShowList[this.drawSelectIndex].options.stepID, + id: this.currentRowData.options.stepID, tableName: val, }; // 保存场景步骤数据 @@ -1676,6 +1692,7 @@ export default { }, // 获取表字段 async queryColumns(tableName) { + this.outsideColumns = []; let params = { stepAccountId: this.userActivId, //账户id tableName: tableName, @@ -1692,11 +1709,51 @@ export default { this.outsideColumns = res.attribute.cloums || []; this.ColumnsRules = res.attribute.rules || {}; this.$nextTick(() => { - this.ColumnsFormData = {}; - this.resetForm("ColumnsForm"); + this.getStepConfig(); }); } }, + /** + * 获取字段配置信息 + * @param {string} id 步骤 ID + */ + async getStepConfig() { + let params = { + id: this.currentRowData.options.stepID, + }; + // 调用获取应用列表的 API + let res = await authApi( + "sysFlowStepService", + "", + "getStepConfig", + "", + params + ); + if (res.status == "200") { + const root = document.querySelector("#editorContainer"); + if ( + res.attribute && + res.attribute.detailList && + res.attribute.detailList.length > 0 + ) { + res.attribute.detailList.forEach((item) => { + this.matchEditorItems(root, item.fieldName, item.html_label); + }); + } + } + }, + matchEditorItems(rootElement, rootName, rootHtml) { + const items = rootElement.querySelectorAll(".editorItem"); + items.forEach((item) => { + const fieldName = + item.querySelector(".el-form-item__label")?.innerText.trim() || ""; + const editor = item.querySelector(".content-editor"); + if (!editor) return; + if (rootName == fieldName) { + editor.innerHTML = rootHtml; + } + }); + }, /** * 获取插件列表 * @param {string} appId 应用 ID @@ -1800,13 +1857,13 @@ export default { // 更新触发模式 this.triggerMode = res.triggerMode; if (this.triggerMode === 2) { - this.drawShowList[this.drawSelectIndex].actionName = "定时触发"; + this.currentRowData.actionName = "定时触发"; } else if (this.triggerMode === 1) { - this.drawShowList[this.drawSelectIndex].actionName = "应用程序触发"; + this.currentRowData.actionName = "应用程序触发"; } else if (this.triggerMode === 4) { - this.drawShowList[this.drawSelectIndex].actionName = "Webhook触发"; + this.currentRowData.actionName = "Webhook触发"; } else if (this.triggerMode === 3) { - this.drawShowList[this.drawSelectIndex].actionName = "手动触发"; + this.currentRowData.actionName = "手动触发"; } }, // 场景步骤---【确定】 @@ -2897,7 +2954,7 @@ export default { overflow: auto; padding: 0 10px 10px 10px; } -::v-deep .el-collapse-item__header.is-active { +::v-deep .el-collapse-item__header { padding-left: 10px !important; } // ------------------------ @@ -3046,6 +3103,16 @@ export default { font-weight: bold; padding: 0; } + +.Columnsbtn { + margin: 10px 0; + display: flex; + justify-content: flex-end; +} +.fixedChildTable { + height: calc(100vh - 360px); + overflow: auto; +}