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 class="rightDialog">
<div flex="cross:center main:justify" class="rightConcat"> <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"> <span v-if="footerShow" flex="main:right">
<el-button @click="handleClose" v-if="closeShow">关 闭</el-button> <el-button @click="handleClose" v-if="closeShow">关 闭</el-button>
<slot name="addButton"></slot> <slot name="addButton"></slot>

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

@ -7,8 +7,7 @@
:appendBody="true" :appendBody="true"
:loading="sceneLoading" :loading="sceneLoading"
:footerShow="true" :footerShow="true"
:submitShow="true" :submitShow="false"
@handleConfirmClick="handleConfirmClick"
:submitTitle="'发布'" :submitTitle="'发布'"
:submitIcon="'el-icon-upload2'" :submitIcon="'el-icon-upload2'"
:title="sceneName" :title="sceneName"
@ -34,7 +33,7 @@
> >
<div class="title">{{ ele.title }}</div> <div class="title">{{ ele.title }}</div>
<div <div
@click="selectDrawItem(index)" @click="selectDrawItem(index, ele)"
class="drawBox" class="drawBox"
:class="{ active: index == drawSelectIndex }" :class="{ active: index == drawSelectIndex }"
> >
@ -539,102 +538,109 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="Columnsbtn">
<!-- 表字段 --> <el-button @click="saveTestTableEvent">暂存</el-button>
<el-collapse <el-button @click="hitTesting">点击测试</el-button>
v-model="activeNames" </div>
v-if="outsideColumns.length > 0" <div class="fixedChildTable">
> <!-- 表字段 -->
<el-collapse-item title="查询条件配置" name="1"> <el-collapse
<el-form v-model="activeNames"
ref="ColumnsForm" v-if="outsideColumns.length > 0"
:model="ColumnsFormData" >
:rules="ColumnsRules" <el-collapse-item title="查询条件配置" name="1">
label-width="80px" <el-form
label-position="top" ref="ColumnsForm"
style="margin: 0 10px" label-width="80px"
> label-position="top"
<div id="editorContainer"> style="margin: 0 10px"
<div >
v-for="(row, rowIndex) in outsideColumns" <div id="editorContainer">
:key="rowIndex" <div
class="editorItem" v-for="(row, rowIndex) in outsideColumns"
> :key="rowIndex"
<el-form-item :label="row.column_name"> class="editorItem"
<div class="editor-container"> >
<div <el-form-item :label="row.column_name">
class="content-editor" <div class="editor-container">
:ref=" <div
'contentEditor' + row.column_name + rowIndex class="content-editor"
" :ref="
contenteditable="true" 'contentEditor' + row.column_name + rowIndex
@keydown=" "
handleKeyDown( contenteditable="true"
$event, @keydown="
row.column_name, handleKeyDown(
rowIndex $event,
) row.column_name,
" rowIndex
@input=" )
handleInput($event, row.column_name, rowIndex) "
" @input="
@click=" handleInput(
handleEditorClick( $event,
$event, row.column_name,
row.column_name, rowIndex
rowIndex )
) "
" @click="
@paste=" handleEditorClick(
handlePaste($event, row.column_name, rowIndex) $event,
" row.column_name,
@focus=" rowIndex
handleEditorFocus( )
$event, "
row.column_name, @paste="
rowIndex handlePaste(
) $event,
" row.column_name,
@blur=" rowIndex
handleEditorBlur( )
$event, "
row.column_name, @focus="
rowIndex handleEditorFocus(
) $event,
" row.column_name,
></div> rowIndex
<div )
class="editorIcon" "
@click.stop=" @blur="
handleAddNodeToEditor( handleEditorBlur(
row.column_name, $event,
rowIndex row.column_name,
) rowIndex
" )
> "
<i class="el-icon-circle-plus"></i> ></div>
<div
class="editorIcon"
@click.stop="
handleAddNodeToEditor(
row.column_name,
rowIndex
)
"
>
<i class="el-icon-circle-plus"></i>
</div>
<div
class="clearIcon"
@click.stop="
handleClearNodeToEditor(
row.column_name,
rowIndex
)
"
>
<i class="el-icon-circle-close"></i>
</div>
</div> </div>
<div </el-form-item>
class="clearIcon" </div>
@click.stop="
handleClearNodeToEditor(
row.column_name,
rowIndex
)
"
>
<i class="el-icon-circle-close"></i>
</div>
</div>
</el-form-item>
</div> </div>
</div> </el-form>
</el-form> </el-collapse-item>
</el-collapse-item> </el-collapse>
</el-collapse>
<div>
<el-button @click="HitTesting">点击测试</el-button>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -683,7 +689,7 @@ export default {
// 画布列表，对应右侧操作区域 // 画布列表，对应右侧操作区域
drawShowList: [], drawShowList: [],
drawSelectIndex: 0, // 当前选中的画布索引 drawSelectIndex: 0, // 当前选中的画布索引
currentRowData: {},
//当步骤为1时 //当步骤为1时
timeDivide: timeDivide, timeDivide: timeDivide,
activeTabName: "选择操作", // 显示的操作栏 activeTabName: "选择操作", // 显示的操作栏
@ -785,12 +791,16 @@ export default {
}; };
}, },
methods: { methods: {
async HitTesting() { async saveTestTableEvent() {
this.openLoading("处理"); if (!this.outsideFormData.tableName) {
this.$vmNews("请先选择表");
return;
}
this.openLoading("暂存");
// 使用示例：传入你这段 HTML 所在的 DOM 根节点 // 使用示例：传入你这段 HTML 所在的 DOM 根节点
const root = document.querySelector("#editorContainer"); const root = document.querySelector("#editorContainer");
const parsed = this.extractEditorItems(root); const parsed = this.extractEditorItems(root);
let data = this.drawShowList[this.drawSelectIndex].options; let data = this.currentRowData.options;
let params = { let params = {
detailList: parsed, detailList: parsed,
flowId: this.sceneID, flowId: this.sceneID,
@ -806,14 +816,13 @@ export default {
"", "",
params params
); );
if (res.status == "200") { if(res.status == "200"){
this.$vmNews("测试成功！", "success"); this.$vmNews("暂存成功！","success")
} }
}, },
extractEditorItems(rootElement) { extractEditorItems(rootElement) {
const result = []; const result = [];
const items = rootElement.querySelectorAll(".editorItem"); const items = rootElement.querySelectorAll(".editorItem");
items.forEach((item) => { items.forEach((item) => {
const fieldName = const fieldName =
item.querySelector(".el-form-item__label")?.innerText.trim() || ""; item.querySelector(".el-form-item__label")?.innerText.trim() || "";
@ -830,7 +839,6 @@ export default {
whereCondition += node.getAttribute("data-token-text") || ""; whereCondition += node.getAttribute("data-token-text") || "";
} }
}); });
// 替换中文符号为英文符号 // 替换中文符号为英文符号
whereCondition = whereCondition whereCondition = whereCondition
.replace(/，/g, ",") .replace(/，/g, ",")
@ -842,7 +850,9 @@ export default {
return result; return result;
}, },
hitTesting(){
},
/** /**
* 打开弹窗 * 打开弹窗
* @param {string} sceneID 场景 ID * @param {string} sceneID 场景 ID
@ -940,8 +950,7 @@ export default {
// 在下一个 DOM 更新周期后执行操作 // 在下一个 DOM 更新周期后执行操作
this.$nextTick(() => { this.$nextTick(() => {
// 选中第一个步骤 // 选中第一个步骤
this.drawSelectIndex = 0; this.selectDrawItem(0, this.drawShowList[0]);
this.selectDrawItem(this.drawSelectIndex);
}); });
} else { } else {
// 新增时生成第一步 // 新增时生成第一步
@ -996,12 +1005,10 @@ export default {
// 更新画布列表 // 更新画布列表
this.drawShowList = obj; this.drawShowList = obj;
// 在下一个 DOM 更新周期后执行操作 // 在下一个 DOM 更新周期后执行操作
this.$nextTick(() => { this.$nextTick(async () => {
// 选中第一个步骤 await this.selectDrawItem(0, this.drawShowList[0]);
this.drawSelectIndex = 0;
this.selectDrawItem(this.drawSelectIndex);
// 获取应用列表 // 获取应用列表
this.getAppList(); await this.getAppList();
}); });
} }
// 手动新增时 // 手动新增时
@ -1017,8 +1024,8 @@ export default {
// 在下一个 DOM 更新周期后执行操作 // 在下一个 DOM 更新周期后执行操作
this.$nextTick(() => { this.$nextTick(() => {
// 选中当前新增的步骤 // 选中当前新增的步骤
this.drawSelectIndex = this.drawShowList.length - 1; let indexFlag = this.drawShowList.length - 1;
this.selectDrawItem(this.drawSelectIndex); this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
}); });
} }
// 插入时 // 插入时
@ -1033,8 +1040,8 @@ export default {
// 在下一个 DOM 更新周期后执行操作 // 在下一个 DOM 更新周期后执行操作
this.$nextTick(() => { this.$nextTick(() => {
// 选中当前新增的步骤 // 选中当前新增的步骤
this.drawSelectIndex = insertIndex + 1; let indexFlag = insertIndex + 1;
this.selectDrawItem(this.drawSelectIndex); this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
}); });
} }
if (type === "time") { if (type === "time") {
@ -1049,8 +1056,7 @@ export default {
// 在下一个 DOM 更新周期后执行操作 // 在下一个 DOM 更新周期后执行操作
this.$nextTick(() => { this.$nextTick(() => {
// 选中第二个步骤 // 选中第二个步骤
this.drawSelectIndex = 1; this.selectDrawItem(1, this.drawShowList[1]);
this.selectDrawItem(this.drawSelectIndex);
}); });
} }
} }
@ -1073,9 +1079,10 @@ export default {
* 切换步骤时 * 切换步骤时
* @param {number} index 步骤索引 * @param {number} index 步骤索引
*/ */
async selectDrawItem(index) { async selectDrawItem(index, row) {
// 更新当前选中的步骤索引 // 更新当前选中的步骤索引
this.drawSelectIndex = index; this.drawSelectIndex = index;
this.currentRowData = row;
// 先清空 // 先清空
this.pluginActiv = ""; this.pluginActiv = "";
this.apiIDActiv = ""; this.apiIDActiv = "";
@ -1099,7 +1106,7 @@ export default {
async GetSceneStepData() { async GetSceneStepData() {
// 获取场景步骤数据的参数 // 获取场景步骤数据的参数
let params = { let params = {
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
}; };
let res = await authApi( let res = await authApi(
"sysFlowStepService", "sysFlowStepService",
@ -1110,12 +1117,12 @@ export default {
); );
if (res.status == "200") { if (res.status == "200") {
let obj = { let obj = {
...this.drawShowList[this.drawSelectIndex].options, ...this.currentRowData.options,
...res.attribute, ...res.attribute,
}; };
// 更新当前步骤的选项 // 更新当前步骤的选项
obj.stepDescribe = obj.apiName || obj.plugName; obj.stepDescribe = obj.apiName || obj.plugName;
this.drawShowList[this.drawSelectIndex].options = obj; this.currentRowData.options = obj;
// 更新当前选择的应用步骤描述 // 更新当前选择的应用步骤描述
this.CurrentAppRow.description = obj.stepDescribe; this.CurrentAppRow.description = obj.stepDescribe;
if (this.drawSelectIndex == 0) { if (this.drawSelectIndex == 0) {
@ -1132,13 +1139,11 @@ export default {
this.pluginList = []; this.pluginList = [];
// 清空用户列表 // 清空用户列表
this.userList = []; this.userList = [];
if (this.drawShowList[this.drawSelectIndex].options.appId) { if (this.currentRowData.options.appId) {
// 更新当前选中的应用 ID // 更新当前选中的应用 ID
this.appActivIndex = this.appActivIndex = this.currentRowData.options.appId;
this.drawShowList[this.drawSelectIndex].options.appId;
// 更新当前选择的应用名称 // 更新当前选择的应用名称
this.CurrentAppRow.appName = this.CurrentAppRow.appName = this.currentRowData.options.appName;
this.drawShowList[this.drawSelectIndex].options.appName;
// 获取当前步骤的 api、插件、账号 // 获取当前步骤的 api、插件、账号
await this.GetApiList(this.appActivIndex); await this.GetApiList(this.appActivIndex);
// this.getPluginList(this.appActivIndex); // this.getPluginList(this.appActivIndex);
@ -1150,46 +1155,54 @@ export default {
this.CurrentAppRow = {}; this.CurrentAppRow = {};
} }
this.$nextTick(() => { this.$nextTick(() => {
if (this.drawShowList[this.drawSelectIndex].options.description) { if (this.currentRowData.options.description) {
// 更新步骤描述 // 更新步骤描述
this.description = this.description = this.currentRowData.options.description;
this.drawShowList[this.drawSelectIndex].options.description;
} else { } else {
// 重置步骤描述 // 重置步骤描述
this.description = ""; this.description = "";
} }
if (this.drawShowList[this.drawSelectIndex].options.apiId) { if (this.currentRowData.options.apiId) {
// 更新选择的 API ID // 更新选择的 API ID
this.apiIdActiv = this.apiIdActiv = this.currentRowData.options.apiId;
this.drawShowList[this.drawSelectIndex].options.apiId;
} else { } else {
// 重置选择的 API ID // 重置选择的 API ID
this.apiIdActiv = ""; this.apiIdActiv = "";
} }
// 插件 // 插件
if (this.drawShowList[this.drawSelectIndex].options.plugId) { if (this.currentRowData.options.plugId) {
// 更新选择的插件 ID // 更新选择的插件 ID
this.pluginActiv = this.pluginActiv = this.currentRowData.options.plugId;
this.drawShowList[this.drawSelectIndex].options.plugId;
} else { } else {
// 重置选择的插件 ID // 重置选择的插件 ID
this.pluginActiv = ""; this.pluginActiv = "";
} }
// 账号 // 账号
if (this.drawShowList[this.drawSelectIndex].options.step_acc_id) { if (this.currentRowData.options.step_acc_id) {
// 更新选择的用户 ID // 更新选择的用户 ID
this.userActivId = this.userActivId = this.currentRowData.options.step_acc_id;
this.drawShowList[this.drawSelectIndex].options.step_acc_id;
// 更新当前选择的应用账号名称 // 更新当前选择的应用账号名称
this.CurrentAppRow.step_acc_name = this.CurrentAppRow.step_acc_name =
this.drawShowList[this.drawSelectIndex].options.step_acc_name; this.currentRowData.options.step_acc_name;
// 获取表数据
this.queryTables(this.userActivId);
} else { } else {
// 重置选择的用户 ID // 重置选择的用户 ID
this.userActivId = ""; this.userActivId = "";
// 重置当前选择的应用账号名称 // 重置当前选择的应用账号名称
this.CurrentAppRow.step_acc_name = ""; 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( let res = await authApi(
"sysFlowStepService", "sysFlowStepService",
"", "",
"saveFlowStep", "deleteFlowStep",
"", "",
{ {
id: stepID, id: stepID,
@ -1230,12 +1243,11 @@ export default {
this.drawShowList.splice(index, 1); this.drawShowList.splice(index, 1);
if (this.drawSelectIndex === index) { if (this.drawSelectIndex === index) {
// 选中第一个步骤 // 选中第一个步骤
this.drawSelectIndex = 0; this.selectDrawItem(0, this.drawShowList[0]);
this.selectDrawItem(this.drawSelectIndex);
} else if (this.drawSelectIndex >= this.drawShowList.length) { } else if (this.drawSelectIndex >= this.drawShowList.length) {
// 选中最后一个步骤 // 选中最后一个步骤
this.drawSelectIndex = this.drawShowList.length - 1; let indexFlag = this.drawShowList.length - 1;
this.selectDrawItem(this.drawSelectIndex); this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
} }
} }
} else { } else {
@ -1245,12 +1257,11 @@ export default {
this.drawShowList.splice(index, 1); this.drawShowList.splice(index, 1);
if (this.drawSelectIndex === index) { if (this.drawSelectIndex === index) {
// 选中第一个步骤 // 选中第一个步骤
this.drawSelectIndex = 0; this.selectDrawItem(0, this.drawShowList[0]);
this.selectDrawItem(this.drawSelectIndex);
} else if (this.drawSelectIndex >= this.drawShowList.length) { } else if (this.drawSelectIndex >= this.drawShowList.length) {
// 选中最后一个步骤 // 选中最后一个步骤
this.drawSelectIndex = this.drawShowList.length - 1; let indexFlag = this.drawShowList.length - 1;
this.selectDrawItem(this.drawSelectIndex); this.selectDrawItem(indexFlag, this.drawShowList[indexFlag]);
} }
} }
}) })
@ -1280,10 +1291,10 @@ export default {
// 更新当前选择操作的类型 // 更新当前选择操作的类型
this.activTimeIndex = item.id; this.activTimeIndex = item.id;
// 更新当前步骤的任务类型 // 更新当前步骤的任务类型
this.drawShowList[this.drawSelectIndex].options.taskType = item.id; this.currentRowData.options.taskType = item.id;
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
apiId: item.id, apiId: item.id,
apiName: this.getTimeDivide(item.id), apiName: this.getTimeDivide(item.id),
}; };
@ -1298,10 +1309,10 @@ export default {
// 更新 cron 表达式 // 更新 cron 表达式
this.expression = value; this.expression = value;
// 更新当前步骤的任务值 // 更新当前步骤的任务值
this.drawShowList[this.drawSelectIndex].options.taskValue = value; this.currentRowData.options.taskValue = value;
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
taskCorn: value, taskCorn: value,
}; };
// 保存场景步骤数据 // 保存场景步骤数据
@ -1312,7 +1323,20 @@ export default {
* 处理 其他步骤的tab点击事件 * 处理 其他步骤的tab点击事件
* @param {any} value 标签页值 * @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() { changeDescription() {
// 更新当前步骤的步骤描述 // 更新当前步骤的步骤描述
this.drawShowList[this.drawSelectIndex].options.description = this.currentRowData.options.description = this.description;
this.description;
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
description: this.description, description: this.description,
}; };
// 保存场景步骤数据 // 保存场景步骤数据
@ -1390,19 +1413,19 @@ export default {
this.CurrentAppRow.step_acc_name = ""; this.CurrentAppRow.step_acc_name = "";
this.CurrentAppRow.description = ""; this.CurrentAppRow.description = "";
// 重置当前步骤的资源类型 // 重置当前步骤的资源类型
this.drawShowList[this.drawSelectIndex].options.actionType = ""; this.currentRowData.options.actionType = "";
// 重置当前步骤的 API ID // 重置当前步骤的 API ID
this.drawShowList[this.drawSelectIndex].options.apiId = ""; this.currentRowData.options.apiId = "";
this.drawShowList[this.drawSelectIndex].options.apiName = ""; this.currentRowData.options.apiName = "";
// 重置当前步骤的插件 ID // 重置当前步骤的插件 ID
this.drawShowList[this.drawSelectIndex].options.plugId = ""; this.currentRowData.options.plugId = "";
// 重置当前步骤的插件名称 // 重置当前步骤的插件名称
this.drawShowList[this.drawSelectIndex].options.plugName = ""; this.currentRowData.options.plugName = "";
// 重置当前步骤的账号 ID // 重置当前步骤的账号 ID
this.drawShowList[this.drawSelectIndex].options.step_acc_id = ""; this.currentRowData.options.step_acc_id = "";
// 重置当前步骤的账号名称 // 重置当前步骤的账号名称
this.drawShowList[this.drawSelectIndex].options.step_acc_name = ""; this.currentRowData.options.step_acc_name = "";
this.drawShowList[this.drawSelectIndex].options.stepDescribe = ""; this.currentRowData.options.stepDescribe = "";
this.apiIdActiv = ""; this.apiIdActiv = "";
this.apiList = []; this.apiList = [];
this.pluginActiv = ""; this.pluginActiv = "";
@ -1425,9 +1448,9 @@ export default {
// 更新当前选择的应用名称 // 更新当前选择的应用名称
this.CurrentAppRow.appName = row.name; this.CurrentAppRow.appName = row.name;
// 更新当前步骤的应用 ID // 更新当前步骤的应用 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 = "选择操作"; this.activeOtherTabName = "选择操作";
@ -1436,11 +1459,11 @@ export default {
// 清空 API 或插件搜索关键字 // 清空 API 或插件搜索关键字
this.operateCodeOrName = ""; this.operateCodeOrName = "";
// 更新当前步骤的资源类型 // 更新当前步骤的资源类型
this.drawShowList[this.drawSelectIndex].options.actionType = "API接口"; this.currentRowData.options.actionType = "API接口";
// 实时保存配置 // 实时保存配置
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
appId: row.id, appId: row.id,
appName: row.name, appName: row.name,
actionType: "", actionType: "",
@ -1462,7 +1485,7 @@ export default {
}, },
async clearFlowStep() { async clearFlowStep() {
let params = { let params = {
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
}; };
let res = await authApi( let res = await authApi(
"sysFlowStepService", "sysFlowStepService",
@ -1477,7 +1500,7 @@ export default {
*/ */
searchApiPlugin() { searchApiPlugin() {
// 检查是否选择了应用 // 检查是否选择了应用
if (!this.drawShowList[this.drawSelectIndex].options.appId) { if (!this.currentRowData.options.appId) {
this.$vmNews("请先选择应用"); this.$vmNews("请先选择应用");
return; return;
} }
@ -1489,7 +1512,7 @@ export default {
this.drawMask = false; this.drawMask = false;
}, 5000); }, 5000);
// 获取 API 列表 // 获取 API 列表
this.GetApiList(this.drawShowList[this.drawSelectIndex].options.appId); this.GetApiList(this.currentRowData.options.appId);
} else if (this.activeApiPliginTabName === "插件") { } else if (this.activeApiPliginTabName === "插件") {
// 显示搜索遮罩 // 显示搜索遮罩
this.drawMask = true; this.drawMask = true;
@ -1498,9 +1521,7 @@ export default {
this.drawMask = false; this.drawMask = false;
}, 5000); }, 5000);
// 获取插件列表 // 获取插件列表
this.getPluginList( this.getPluginList(this.currentRowData.options.appId);
this.drawShowList[this.drawSelectIndex].options.appId
);
} }
}, },
/** /**
@ -1514,25 +1535,23 @@ export default {
// 选择API // 选择API
hangleApiClickEvent(item) { hangleApiClickEvent(item) {
this.pluginActiv = ""; this.pluginActiv = "";
this.drawShowList[this.drawSelectIndex].options.plugId = ""; this.currentRowData.options.plugId = "";
this.drawShowList[this.drawSelectIndex].options.plugName = ""; this.currentRowData.options.plugName = "";
// 更新选择的 API ID // 更新选择的 API ID
this.apiIdActiv = item.id; this.apiIdActiv = item.id;
// 更新当前步骤的 API ID // 更新当前步骤的 API ID
this.drawShowList[this.drawSelectIndex].options.apiId = item.id; this.currentRowData.options.apiId = item.id;
this.drawShowList[this.drawSelectIndex].options.apiName = item.apiName; this.currentRowData.options.apiName = item.apiName;
// 更新当前选择的应用步骤描述 // 更新当前选择的应用步骤描述
this.CurrentAppRow.description = item.apiName; this.CurrentAppRow.description = item.apiName;
this.drawShowList[this.drawSelectIndex].options.stepDescribe = this.currentRowData.options.stepDescribe = item.apiName;
item.apiName;
// 更新当前步骤的资源类型 // 更新当前步骤的资源类型
this.drawShowList[this.drawSelectIndex].options.actionType = this.currentRowData.options.actionType = this.activeApiPliginTabName;
this.activeApiPliginTabName;
// 切换到选择账号标签页 // 切换到选择账号标签页
this.activeOtherTabName = "选择账号"; this.activeOtherTabName = "选择账号";
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
actionType: this.activeApiPliginTabName, actionType: this.activeApiPliginTabName,
plugId: "", plugId: "",
plugName: "", plugName: "",
@ -1547,23 +1566,21 @@ export default {
// 更新选择的 API ID // 更新选择的 API ID
this.apiIdActiv = ""; this.apiIdActiv = "";
// 更新当前步骤的 API ID // 更新当前步骤的 API ID
this.drawShowList[this.drawSelectIndex].options.apiId = ""; this.currentRowData.options.apiId = "";
this.drawShowList[this.drawSelectIndex].options.apiName = ""; this.currentRowData.options.apiName = "";
this.pluginActiv = item.id; this.pluginActiv = item.id;
this.drawShowList[this.drawSelectIndex].options.plugId = item.id; this.currentRowData.options.plugId = item.id;
this.drawShowList[this.drawSelectIndex].options.plugName = item.plugName; this.currentRowData.options.plugName = item.plugName;
// 更新当前选择的应用步骤描述 // 更新当前选择的应用步骤描述
this.CurrentAppRow.description = item.plugName; this.CurrentAppRow.description = item.plugName;
this.drawShowList[this.drawSelectIndex].options.stepDescribe = this.currentRowData.options.stepDescribe = item.plugName;
item.plugName;
// 更新当前步骤的资源类型 // 更新当前步骤的资源类型
this.drawShowList[this.drawSelectIndex].options.actionType = this.currentRowData.options.actionType = this.activeApiPliginTabName;
this.activeApiPliginTabName;
// 切换到选择账号标签页 // 切换到选择账号标签页
this.activeOtherTabName = "选择账号"; this.activeOtherTabName = "选择账号";
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
actionType: this.activeApiPliginTabName, actionType: this.activeApiPliginTabName,
plugId: item.id, plugId: item.id,
plugName: item.plugName, plugName: item.plugName,
@ -1585,7 +1602,7 @@ export default {
this.$refs.addAccount.openDialog( this.$refs.addAccount.openDialog(
this.appActivIndex, this.appActivIndex,
this.sceneID, 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; this.CurrentAppRow.step_acc_name = item.name;
// 更新当前步骤的用户 ID // 更新当前步骤的用户 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 = { this.outsideFormData = {
tableName: "", tableName: "",
}; };
@ -1616,9 +1633,10 @@ export default {
this.outsideColumns = []; this.outsideColumns = [];
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
step_acc_name: item.name, step_acc_name: item.name,
step_acc_id: item.id, step_acc_id: item.id,
tableName: "",
}; };
// 保存场景步骤数据 // 保存场景步骤数据
await this.SaveSceneStepData(params); await this.SaveSceneStepData(params);
@ -1660,13 +1678,11 @@ export default {
// 切换表时 // 切换表时
async outsideSelectChange(val) { async outsideSelectChange(val) {
if (val) { if (val) {
this.outsideColumns = [];
// 更新当前步骤的步骤描述 // 更新当前步骤的步骤描述
this.drawShowList[this.drawSelectIndex].options.description = this.currentRowData.options.description = this.description;
this.description;
let params = { let params = {
flowId: this.sceneID, flowId: this.sceneID,
id: this.drawShowList[this.drawSelectIndex].options.stepID, id: this.currentRowData.options.stepID,
tableName: val, tableName: val,
}; };
// 保存场景步骤数据 // 保存场景步骤数据
@ -1676,6 +1692,7 @@ export default {
}, },
// 获取表字段 // 获取表字段
async queryColumns(tableName) { async queryColumns(tableName) {
this.outsideColumns = [];
let params = { let params = {
stepAccountId: this.userActivId, //账户id stepAccountId: this.userActivId, //账户id
tableName: tableName, tableName: tableName,
@ -1692,11 +1709,51 @@ export default {
this.outsideColumns = res.attribute.cloums || []; this.outsideColumns = res.attribute.cloums || [];
this.ColumnsRules = res.attribute.rules || {}; this.ColumnsRules = res.attribute.rules || {};
this.$nextTick(() => { this.$nextTick(() => {
this.ColumnsFormData = {}; this.getStepConfig();
this.resetForm("ColumnsForm");
}); });
} }
}, },
/**
* 获取字段配置信息
* @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 * @param {string} appId 应用 ID
@ -1800,13 +1857,13 @@ export default {
// 更新触发模式 // 更新触发模式
this.triggerMode = res.triggerMode; this.triggerMode = res.triggerMode;
if (this.triggerMode === 2) { if (this.triggerMode === 2) {
this.drawShowList[this.drawSelectIndex].actionName = "定时触发"; this.currentRowData.actionName = "定时触发";
} else if (this.triggerMode === 1) { } else if (this.triggerMode === 1) {
this.drawShowList[this.drawSelectIndex].actionName = "应用程序触发"; this.currentRowData.actionName = "应用程序触发";
} else if (this.triggerMode === 4) { } else if (this.triggerMode === 4) {
this.drawShowList[this.drawSelectIndex].actionName = "Webhook触发"; this.currentRowData.actionName = "Webhook触发";
} else if (this.triggerMode === 3) { } else if (this.triggerMode === 3) {
this.drawShowList[this.drawSelectIndex].actionName = "手动触发"; this.currentRowData.actionName = "手动触发";
} }
}, },
// 场景步骤---【确定】 // 场景步骤---【确定】
@ -2897,7 +2954,7 @@ export default {
overflow: auto; overflow: auto;
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
} }
::v-deep .el-collapse-item__header.is-active { ::v-deep .el-collapse-item__header {
padding-left: 10px !important; padding-left: 10px !important;
} }
// ------------------------ // ------------------------
@ -3046,6 +3103,16 @@ export default {
font-weight: bold; font-weight: bold;
padding: 0; padding: 0;
} }
.Columnsbtn {
margin: 10px 0;
display: flex;
justify-content: flex-end;
}
.fixedChildTable {
height: calc(100vh - 360px);
overflow: auto;
}
</style> </style>