hzya
/
middleground_code_v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

场景中心修改

This commit is contained in:
caorui 2025-07-12 15:36:42 +08:00
parent f81a35c10e
commit 2defa41e26
2 changed files with 276 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/baseRightDialog/index.vue
View File

@ -15,7 +15,7 @@
>
<div class="rightDialog">
<div flex="cross:center main:justify" class="rightConcat">
<span style="font-size: 16px">{{ title }}</span>
<span style="font-size: 16px">{{ title }} <slot name="operateTitle"></slot></span>
<span v-if="footerShow" flex="main:right">
<el-button @click="handleClose" v-if="closeShow">关 闭</el-button>
<slot name="addButton"></slot>

311
src/views/LinkUp/compoment/addDialogChunk.vue
View File

@ -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 @@
>
<div class="title">{{ ele.title }}</div>
<div
@click="selectDrawItem(index)"
@click="selectDrawItem(index, ele)"
class="drawBox"
:class="{ active: index == drawSelectIndex }"
>
@ -539,7 +538,11 @@
</el-select>
</el-form-item>
</el-form>
<div class="Columnsbtn">
<el-button @click="saveTestTableEvent">暂存</el-button>
<el-button @click="hitTesting">点击测试</el-button>
</div>
<div class="fixedChildTable">
<!-- 表字段 -->
<el-collapse
v-model="activeNames"
@ -548,8 +551,6 @@
<el-collapse-item title="查询条件配置" name="1">
<el-form
ref="ColumnsForm"
:model="ColumnsFormData"
:rules="ColumnsRules"
label-width="80px"
label-position="top"
style="margin: 0 10px"
@ -576,7 +577,11 @@
)
"
@input="
handleInput($event, row.column_name, rowIndex)
handleInput(
$event,
row.column_name,
rowIndex
)
"
@click="
handleEditorClick(
@ -586,7 +591,11 @@
)
"
@paste="
handlePaste($event, row.column_name, rowIndex)
handlePaste(
$event,
row.column_name,
rowIndex
)
"
@focus="
handleEditorFocus(
@ -632,9 +641,6 @@
</el-form>
</el-collapse-item>
</el-collapse>
<div>
<el-button @click="HitTesting">点击测试</el-button>
</div>
</div>
</el-tab-pane>
@ -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;
}
</style>