场景中心修改
This commit is contained in:
parent
f81a35c10e
commit
2defa41e26
|
@ -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>
|
||||
|
|
|
@ -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,102 +538,109 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表字段 -->
|
||||
<el-collapse
|
||||
v-model="activeNames"
|
||||
v-if="outsideColumns.length > 0"
|
||||
>
|
||||
<el-collapse-item title="查询条件配置" name="1">
|
||||
<el-form
|
||||
ref="ColumnsForm"
|
||||
:model="ColumnsFormData"
|
||||
:rules="ColumnsRules"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
style="margin: 0 10px"
|
||||
>
|
||||
<div id="editorContainer">
|
||||
<div
|
||||
v-for="(row, rowIndex) in outsideColumns"
|
||||
:key="rowIndex"
|
||||
class="editorItem"
|
||||
>
|
||||
<el-form-item :label="row.column_name">
|
||||
<div class="editor-container">
|
||||
<div
|
||||
class="content-editor"
|
||||
:ref="
|
||||
'contentEditor' + row.column_name + rowIndex
|
||||
"
|
||||
contenteditable="true"
|
||||
@keydown="
|
||||
handleKeyDown(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@input="
|
||||
handleInput($event, row.column_name, rowIndex)
|
||||
"
|
||||
@click="
|
||||
handleEditorClick(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@paste="
|
||||
handlePaste($event, row.column_name, rowIndex)
|
||||
"
|
||||
@focus="
|
||||
handleEditorFocus(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@blur="
|
||||
handleEditorBlur(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="editorIcon"
|
||||
@click.stop="
|
||||
handleAddNodeToEditor(
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="el-icon-circle-plus"></i>
|
||||
<div class="Columnsbtn">
|
||||
<el-button @click="saveTestTableEvent">暂存</el-button>
|
||||
<el-button @click="hitTesting">点击测试</el-button>
|
||||
</div>
|
||||
<div class="fixedChildTable">
|
||||
<!-- 表字段 -->
|
||||
<el-collapse
|
||||
v-model="activeNames"
|
||||
v-if="outsideColumns.length > 0"
|
||||
>
|
||||
<el-collapse-item title="查询条件配置" name="1">
|
||||
<el-form
|
||||
ref="ColumnsForm"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
style="margin: 0 10px"
|
||||
>
|
||||
<div id="editorContainer">
|
||||
<div
|
||||
v-for="(row, rowIndex) in outsideColumns"
|
||||
:key="rowIndex"
|
||||
class="editorItem"
|
||||
>
|
||||
<el-form-item :label="row.column_name">
|
||||
<div class="editor-container">
|
||||
<div
|
||||
class="content-editor"
|
||||
:ref="
|
||||
'contentEditor' + row.column_name + rowIndex
|
||||
"
|
||||
contenteditable="true"
|
||||
@keydown="
|
||||
handleKeyDown(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@input="
|
||||
handleInput(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@click="
|
||||
handleEditorClick(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@paste="
|
||||
handlePaste(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@focus="
|
||||
handleEditorFocus(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
@blur="
|
||||
handleEditorBlur(
|
||||
$event,
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
></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
|
||||
class="clearIcon"
|
||||
@click.stop="
|
||||
handleClearNodeToEditor(
|
||||
row.column_name,
|
||||
rowIndex
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="el-icon-circle-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<div>
|
||||
<el-button @click="HitTesting">点击测试</el-button>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue