diff --git a/src/views/LinkUp/compoment/addAccount.vue b/src/views/LinkUp/compoment/addAccount.vue new file mode 100644 index 0000000..17ac29a --- /dev/null +++ b/src/views/LinkUp/compoment/addAccount.vue @@ -0,0 +1,241 @@ + + + + + \ No newline at end of file diff --git a/src/views/LinkUp/compoment/addDialogChunk.vue b/src/views/LinkUp/compoment/addDialogChunk.vue index 6d951a9..8ca294b 100644 --- a/src/views/LinkUp/compoment/addDialogChunk.vue +++ b/src/views/LinkUp/compoment/addDialogChunk.vue @@ -20,9 +20,13 @@ @click="editSceneName" /> -
+
-
+
{{ index + 1 + "." + ele.options.appName }} - - -
- {{ ele.options.stepDescribe }} + {{ ele.options.description }}
{{ ele.content }}
@@ -149,6 +123,7 @@
+
@@ -236,9 +211,203 @@
+ +
+ + + +
+
+
+ +
+
+ +
+ {{ CurrentAppRow.appName }} +
+ +
+ {{ CurrentAppRow.description }} +
+
+
+
+
+ + 查询 +
+
+
+
+ +
{{ app.name }}
+
+
+
+
+ 步骤描述 + +
+ + + +
+
+
+ +
+
+ +
+ {{ CurrentAppRow.appName }} +
+ +
+ {{ CurrentAppRow.description }} +
+
+
+
+
+ + 查询 +
+ + + API接口 + 插件 + +
+
+
+
+ +
+
+
{{ item.apiName }}
+
{{ item.apiPath }}
+
+
+
+ +
+
+
+ +
+
+
{{ item.plugName }}
+
{{ item.plugDescribe }}
+
+
+
+
+ + + +
+
+
+ +
+
+ +
+ {{ CurrentAppRow.appName }} +
+ +
+ {{ CurrentAppRow.description }} +
+
+
+
+
+
+ + 添加账户 +
+
+
+
{{ item.name }}
+
+
+
+ + +
+ @@ -251,11 +420,14 @@ import { authApi } from "@/api/apis/auth"; import { stepAdd, stepUse, timeDivide } from "./constant"; // 导入 cron 表达式组件 import FishCrontab from "fish-crontab"; +// 导入添加账号组件 +import addAccount from "./addAccount.vue"; export default { components: { editSence, baseRightDialog, FishCrontab, + addAccount, }, data() { return { @@ -267,15 +439,33 @@ export default { drawShowList: [], drawSelectIndex: 0, // 当前选中的画布索引 + //当步骤为1时 + timeDivide: timeDivide, + activeTabName: "选择操作", // 显示的操作栏 + activTimeIndex: "", // 当前选择操作的类型 + expression: "", //cron表达式 + // 其他步骤 + activeOtherTabName: "", + CurrentAppRow: {}, // 当前选择的应用数据 + appCodeOrName: "", //应用搜索条件 + drawMask: false, + // 应用列表 appList: [], appCodeOrName: "", // 应用搜索关键字 appActivIndex: "", // 当前选中的应用 ID - // - timeDivide:timeDivide, - activeTabName: "选择操作", // 当步骤为1时 显示的操作栏 - activTimeIndex: "", // 当前选择操作的类型 - expression: "", + description: "", //应用描述 + operateCodeOrName: "", //api 或者 插件的搜索 + activeApiPliginTabName: "API接口", // 当前操作是 API 还是插件 + // API 插件列表 + pluginList: [], + // API 接口列表 + apiList: [], + apiIdActiv: "", // 选择的 API ID + pluginActiv: "", // 选择的插件 ID + // 用户列表 + userList: [], + userActivId: "", // 选择的用户 ID }; }, methods: { @@ -313,24 +503,99 @@ export default { }; this.SaveSceneStepData(params, "first"); } + + if (type === "edit") { + // 编辑时获取场景步骤列表 + this.GetSceneStepList(); + } }, /** - * 新增、实时修改场景步骤基本信息 - * @param {Object} params 请求参数 - * @param {string} type 操作类型 + * 获取场景步骤列表 */ - async SaveSceneStepData(params, type, insertIndex) { + async GetSceneStepList() { + // 清空画布列表 + this.drawShowList = []; + // 获取场景步骤列表的参数 + let params = { + flowId: this.sceneID, + }; let res = await authApi( "sysFlowStepService", "", - "saveFlowStep", + "queryList", "", params ); // 隐藏场景加载状态 this.sceneLoading = false; if (res.status == "200") { - // 新增时 + if (res.attribute.length > 0) { + res.attribute.forEach((item, index) => { + if (index === 0) { + let obj = { + ...stepAdd, + options: { + ...item, + stepID: item.id, + }, + }; + if (this.triggerMode === 2) { + obj.actionName = "定时触发"; + } else if (this.triggerMode === 1) { + obj.actionName = "应用程序触发"; + } else if (this.triggerMode === 4) { + obj.actionName = "Webhook触发"; + } else if (this.triggerMode === 3) { + obj.actionName = "手动触发"; + } + // 将第一个步骤添加到画布列表 + this.drawShowList.push(obj); + } else { + // 将其他步骤添加到画布列表 + this.drawShowList.push({ + ...stepUse, + options: { + ...item, + stepID: item.id, + }, + }); + } + }); + // 在下一个 DOM 更新周期后执行操作 + this.$nextTick(() => { + // 选中第一个步骤 + this.drawSelectIndex = 0; + this.selectDrawItem(this.drawSelectIndex); + }); + } else { + // 新增时生成第一步 + let params = { + flowId: this.sceneID, + step: 1, + stepType: 2, + }; + this.SaveSceneStepData(params, "first"); + } + } + }, + /** + * 新增、实时修改场景步骤基本信息 + * @param {Object} params 请求参数 + * @param {string} type 操作类型 + * @param {string} insertIndex 用于插入 + */ + async SaveSceneStepData(params, type, insertIndex) { + let res = await authApi( + "sysFlowStepService", + "", + "saveOrUpdateFlowStep", + "", + params + ); + // 隐藏场景加载状态 + this.sceneLoading = false; + if (res.status == "200") { + // 第一次打开弹窗 if (type === "first") { let obj = [ { @@ -344,12 +609,11 @@ export default { }, ]; if (this.triggerMode === 2) { - obj[0].actionName = "平台触发配置"; + obj[0].actionName = "定时触发"; } else if (this.triggerMode === 1) { - obj[0].actionName = "定时器配置"; + obj[0].actionName = "应用程序触发"; } else if (this.triggerMode === 4) { - obj[0].actionName = "接口配置"; - obj[0].content = "请输入 IP 白名单"; + obj[0].actionName = "Webhook触发"; } else if (this.triggerMode === 3) { obj[0].actionName = "手动触发"; } @@ -381,7 +645,7 @@ export default { this.selectDrawItem(this.drawSelectIndex); }); } - + // 插入时 if (type == "insert") { this.drawShowList.splice(insertIndex + 1, 0, { ...stepUse, @@ -397,13 +661,29 @@ export default { this.selectDrawItem(this.drawSelectIndex); }); } + if (type === "time") { + this.activeTabName = "配置"; + } + // cron表达式保存后 + if (type === "expression") { + if (this.drawShowList.length === 1) { + // 自动添加一个步骤 + this.addDrwaItem(); + } else { + // 在下一个 DOM 更新周期后执行操作 + this.$nextTick(() => { + // 选中第二个步骤 + this.drawSelectIndex = 1; + this.selectDrawItem(this.drawSelectIndex); + }); + } + } } }, /** * 手动新增场景步骤 - * @param {string} type 操作类型 */ - addDrwaItem(type) { + addDrwaItem() { // 新增步骤的参数 let params = { flowId: this.sceneID, @@ -420,8 +700,122 @@ export default { selectDrawItem(index) { // 更新当前选中的步骤索引 this.drawSelectIndex = index; + // 先清空 + this.pluginActiv = ""; + this.apiIDActiv = ""; + this.userActivId = ""; + if (index === 0) { + this.activeTabName = "选择操作"; + } else { + this.activeOtherTabName = "选择应用"; + // 清空应用搜索关键字 + this.appCodeOrName = ""; + // 获取应用列表 + this.getAppList(); + // 获取场景步骤数据 + this.GetSceneStepData(); + } }, + /** + * 获取场景步骤数据 + */ + async GetSceneStepData() { + // 获取场景步骤数据的参数 + let params = { + id: this.drawShowList[this.drawSelectIndex].options.stepID, + }; + let res = await authApi( + "sysFlowStepService", + "", + "getFlowStep", + "", + params + ); + if (res.status == "200") { + let obj = { + ...this.drawShowList[this.drawSelectIndex].options, + ...res.attribute, + }; + // 更新当前步骤的选项 + this.drawShowList[this.drawSelectIndex].options = obj; + if (this.drawSelectIndex == 0) { + this.expression = obj.taskCorn; + this.activTimeIndex = obj.apiId; + } else { + this.activeApiPliginTabName = obj.actionType; + + // 清空 API 或插件搜索关键字 + this.operateCodeOrName = ""; + // 清空 API 列表 + this.apiList = []; + // 清空插件列表 + this.pluginList = []; + // 清空用户列表 + this.userList = []; + if (this.drawShowList[this.drawSelectIndex].options.appId) { + // 更新当前选中的应用 ID + this.appActivIndex = + this.drawShowList[this.drawSelectIndex].options.appId; + // 更新当前选择的应用名称 + this.CurrentAppRow.appName = + this.drawShowList[this.drawSelectIndex].options.appName; + // 获取当前步骤的 api、插件、账号 + this.GetApiList(this.appActivIndex); + // this.getPluginList(this.appActivIndex); + this.GetAccountListAPI(this.appActivIndex); + } else { + // 重置当前选中的应用 ID + this.appActivIndex = ""; + // 重置当前选择的应用数据 + this.CurrentAppRow = {}; + } + if (this.drawShowList[this.drawSelectIndex].options.description) { + // 更新步骤描述 + this.description = + this.drawShowList[this.drawSelectIndex].options.description; + // 更新当前选择的应用步骤描述 + this.CurrentAppRow.description = this.description; + } else { + // 重置步骤描述 + this.description = ""; + // 重置当前选择的应用步骤描述 + this.CurrentAppRow.description = ""; + } + if (this.drawShowList[this.drawSelectIndex].options.apiId) { + // 更新选择的 API ID + this.apiIdActiv = + this.drawShowList[this.drawSelectIndex].options.apiId; + } else { + // 重置选择的 API ID + this.apiIdActiv = ""; + } + // 插件 + if (this.drawShowList[this.drawSelectIndex].options.plugId) { + // 更新选择的插件 ID + this.pluginActiv = + this.drawShowList[this.drawSelectIndex].options.plugId; + } else { + // 重置选择的插件 ID + this.pluginActiv = ""; + } + // 账号 + if (this.drawShowList[this.drawSelectIndex].options.step_acc_id) { + // 更新选择的用户 ID + this.userActivId = + this.drawShowList[this.drawSelectIndex].options.step_acc_id; + // 更新当前选择的应用账号名称 + this.CurrentAppRow.step_acc_name = + this.drawShowList[this.drawSelectIndex].options.step_acc_name; + } else { + // 重置选择的用户 ID + this.userActivId = ""; + // 重置当前选择的应用账号名称 + this.CurrentAppRow.step_acc_name = ""; + } + } + } + }, /** * 删除场景步骤 * @param {Object} ele 步骤数据 @@ -498,6 +892,26 @@ export default { // 保存场景步骤数据 this.SaveSceneStepData(params, "insert", index); }, + // ----------------------------------------------步骤一相关操作 + /** + * 处理时间项点击事件 + * @param {Object} item 时间项数据 + * @param {number} index 时间项索引 + */ + handleTimeItem(item, index) { + // 更新当前选择操作的类型 + this.activTimeIndex = item.id; + // 更新当前步骤的任务类型 + this.drawShowList[this.drawSelectIndex].options.taskType = item.id; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + apiId: item.id, + apiName: this.getTimeDivide(item.id), + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params, "time"); + }, /** * cron 表达式点击确定时时间插件回调 * @param {string} value cron 表达式的值 @@ -507,6 +921,32 @@ export default { this.expression = value; // 更新当前步骤的任务值 this.drawShowList[this.drawSelectIndex].options.taskValue = value; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + taskCorn: value, + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params, "expression"); + }, + // ----------------------------------------------其他步骤--相关操作 + /** + * 处理 其他步骤的tab点击事件 + * @param {any} value 标签页值 + */ + handleOtherTabClick(value) {}, + /** + * 应用搜索 + */ + searchApp() { + // 显示搜索遮罩 + this.drawMask = true; + // 5 秒后隐藏搜索遮罩 + setTimeout(() => { + this.drawMask = false; + }, 5000); + // 获取应用列表 + this.getAppList(); }, /** * 获取应用列表 @@ -514,7 +954,7 @@ export default { async getAppList() { // 获取应用列表的参数 let params = { - appName: this.appCodeOrName, + name: this.appCodeOrName, }; // 调用获取应用列表的 API let res = await authApi( @@ -531,6 +971,291 @@ export default { this.appList = res.attribute; } }, + /** + * 步骤描述变化时保存数据 + */ + changeDescription() { + // 更新当前选择的应用步骤描述 + this.CurrentAppRow.description = this.description; + // 更新当前步骤的步骤描述 + this.drawShowList[this.drawSelectIndex].options.description = + this.description; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + description: this.description, + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params); + }, + /** + * 选择应用时触发的方法 + * @param {Object} row 应用数据 + * @param {number} index 应用索引 + */ + async hangleAppItem(row, index) { + if (this.appActivIndex !== row.appId) { + // 重置当前选择的应用插件名称 + this.CurrentAppRow.plugName = ""; + // 重置当前选择的应用账号名称 + this.CurrentAppRow.step_acc_name = ""; + // 重置当前步骤的资源类型 + this.drawShowList[this.drawSelectIndex].options.actionType = ""; + // 重置当前步骤的 API ID + this.drawShowList[this.drawSelectIndex].options.apiId = ""; + this.drawShowList[this.drawSelectIndex].options.apiName = ""; + // 重置当前步骤的插件 ID + this.drawShowList[this.drawSelectIndex].options.plugId = ""; + // 重置当前步骤的插件名称 + this.drawShowList[this.drawSelectIndex].options.plugName = ""; + // 重置当前步骤的账号 ID + this.drawShowList[this.drawSelectIndex].options.step_acc_id = ""; + // 重置当前步骤的账号名称 + this.drawShowList[this.drawSelectIndex].options.step_acc_name = ""; + this.apiIdActiv = ""; + this.apiList = []; + this.pluginActiv = ""; + this.pluginList = []; + this.userActivId = ""; + this.userList = []; + // 更新当前选中的应用 ID + this.appActivIndex = row.id; + // 更新当前选择的应用 ID + this.CurrentAppRow.appId = row.id; + // 更新当前选择的应用名称 + this.CurrentAppRow.appName = row.name; + // 更新当前步骤的应用 ID + this.drawShowList[this.drawSelectIndex].options.appId = row.id; + // 更新当前步骤的应用名称 + this.drawShowList[this.drawSelectIndex].options.appName = row.name; + + // 切换到选择操作标签页 + this.activeOtherTabName = "选择操作"; + // 切换到 API 接口标签页 + this.activeApiPliginTabName = "API接口"; + // 清空 API 或插件搜索关键字 + this.operateCodeOrName = ""; + // 更新当前步骤的资源类型 + this.drawShowList[this.drawSelectIndex].options.actionType = "API接口"; + // 实时保存配置 + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + appId: row.id, + appName: row.name, + actionType: "", + plugId: "", + plugName: "", + apiId: "", + apiName: "", + step_acc_name: "", + step_acc_id: "", + }; + // 保存场景步骤数据 + await this.SaveSceneStepData(params); + // 获取 API 列表 + await this.GetApiList(row.id); + // 获取插件列表 + // await this.getPluginList(row.id); + // // 获取用户列表 + await this.GetAccountListAPI(row.id); + } + }, + /** + * API 或者插件的搜索 + */ + searchApiPlugin() { + // 检查是否选择了应用 + if (!this.drawShowList[this.drawSelectIndex].options.appId) { + this.$vmNews("请先选择应用"); + return; + } + if (this.activeApiPliginTabName === "API接口") { + // 显示搜索遮罩 + this.drawMask = true; + // 5 秒后隐藏搜索遮罩 + setTimeout(() => { + this.drawMask = false; + }, 5000); + // 获取 API 列表 + this.GetApiList(this.drawShowList[this.drawSelectIndex].options.appId); + } else if (this.activeApiPliginTabName === "插件") { + // 显示搜索遮罩 + this.drawMask = true; + // 5 秒后隐藏搜索遮罩 + setTimeout(() => { + this.drawMask = false; + }, 5000); + // 获取插件列表 + this.getPluginList( + this.drawShowList[this.drawSelectIndex].options.appId + ); + } + }, + /** + * 切换 API 插件标签页 + * @param {string} e 标签页值 + */ + ApiPliginTabChangeEvent(e) { + // 更新当前操作是 API 还是插件 + this.activeApiPliginTabName = e; + }, + // 选择API + hangleApiClickEvent(item) { + this.pluginActiv = ""; + this.drawShowList[this.drawSelectIndex].options.plugId = ""; + this.drawShowList[this.drawSelectIndex].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.drawShowList[this.drawSelectIndex].options.actionType = + this.activeApiPliginTabName; + // 切换到选择账号标签页 + this.activeOtherTabName = "选择账号"; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + actionType: this.activeApiPliginTabName, + plugId: "", + plugName: "", + apiId: item.id, + apiName: item.apiName, + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params); + }, + // 选择插件 + hanglePluginClickEvent(item) { + // 更新选择的 API ID + this.apiIdActiv = ""; + // 更新当前步骤的 API ID + this.drawShowList[this.drawSelectIndex].options.apiId = ""; + this.drawShowList[this.drawSelectIndex].options.apiName = ""; + this.pluginActiv = item.id; + this.drawShowList[this.drawSelectIndex].options.plugId = item.id; + this.drawShowList[this.drawSelectIndex].options.plugName = item.plugName; + // 更新当前步骤的资源类型 + this.drawShowList[this.drawSelectIndex].options.actionType = + this.activeApiPliginTabName; + // 切换到选择账号标签页 + this.activeOtherTabName = "选择账号"; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + actionType: this.activeApiPliginTabName, + plugId: item.id, + plugName: item.plugName, + apiId: "", + apiName: "", + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params); + }, + /** + * 选择账号 --》 添加账号 + */ + addAccount() { + if (!this.appActivIndex) { + this.$vmNews("请选择应用"); + return; + } + // 打开添加账号弹窗 + this.$refs.addAccount.openDialog(this.appActivIndex); + }, + /** + * 重新加载用户列表 + */ + addAccountConfirmClick() { + // 获取用户列表 + this.GetAccountListAPI(this.appActivIndex); + }, + /** + * 当前选中的用户 + * @param {Object} item 用户数据 + */ + handleUserClickEvent(item) { + // 更新选择的用户 ID + this.userActivId = item.id; + // 更新当前选择的应用账号名称 + this.CurrentAppRow.step_acc_name = item.name; + // 更新当前步骤的用户 ID + this.drawShowList[this.drawSelectIndex].options.step_acc_id = item.id; + // 更新当前步骤的用户账号名称 + this.drawShowList[this.drawSelectIndex].options.step_acc_name = item.name; + let params = { + flowId: this.sceneID, + id: this.drawShowList[this.drawSelectIndex].options.stepID, + step_acc_name: item.name, + step_acc_id: item.id, + }; + // 保存场景步骤数据 + this.SaveSceneStepData(params); + }, + /** + * 获取插件列表 + * @param {string} appId 应用 ID + */ + async getPluginList(appId) { + let params = { + appId: appId, + name: this.operateCodeOrName, + }; + let res = await authApi( + "sysApplicationApiService", + "", + "queryEntity", + "", + params + ); + this.drawMask = false; + if (res.status == "200") { + this.pluginList = res.attribute; + } + }, + /** + * 获取 api 列表 + * @param {string} appId 应用 ID + */ + async GetApiList(appId) { + let params = { + appId: appId, + name: this.operateCodeOrName, + }; + let res = await authApi( + "sysApplicationApiService", + "", + "queryEntity", + "", + params + ); + this.drawMask = false; + if (res.status == "200") { + this.apiList = res.attribute; + } + }, + /** + * 获取用户列表 + * @param {string} appId 应用 ID + */ + async GetAccountListAPI(appId) { + let params = { + appId: appId, + }; + let res = await authApi( + "sysApplicationAccountService", + "", + "queryAccountList", + "", + params + ); + this.drawMask = false; + if (res.status == "200") { + this.userList = res.attribute; + } + }, /** * 根据任务类型获取时间划分的标题 * @param {number} taskType 任务类型 @@ -572,11 +1297,11 @@ export default { // 更新触发模式 this.triggerMode = res.triggerMode; if (this.triggerMode === 2) { - this.drawShowList[this.drawSelectIndex].actionName = "平台触发配置"; + this.drawShowList[this.drawSelectIndex].actionName = "定时触发"; } else if (this.triggerMode === 1) { - this.drawShowList[this.drawSelectIndex].actionName = "定时器配置"; + this.drawShowList[this.drawSelectIndex].actionName = "应用程序触发"; } else if (this.triggerMode === 4) { - this.drawShowList[this.drawSelectIndex].actionName = "接口配置"; + this.drawShowList[this.drawSelectIndex].actionName = "Webhook触发"; } else if (this.triggerMode === 3) { this.drawShowList[this.drawSelectIndex].actionName = "手动触发"; } @@ -591,15 +1316,64 @@ export default { this.$emit("examineHandleClose"); this.examineOperateDialog = false; this.sceneName = ""; + // 清空画布列表 + this.drawShowList = []; + // 重置当前选中的步骤索引 + this.drawSelectIndex = ""; + // 重置当前选择操作的类型 + this.activTimeIndex = ""; + // 重置 cron 表达式 + this.expression = ""; + // 清空应用搜索关键字 + this.appCodeOrName = ""; + // 重置当前选中的应用 ID + this.appActivIndex = ""; + // 清空 API 或插件搜索关键字 + this.operateCodeOrName = ""; + // 重置当前操作是 API 还是插件 + this.activeApiPliginTabName = "API接口"; + // 重置选择的 API ID + this.apiIdActiv = ""; + // 清空 API 列表 + this.apiList = []; + // 重置选择的插件 ID + this.pluginActiv = ""; + // 清空插件列表 + this.pluginList = []; + // 重置选择的用户 ID + this.userActivId = ""; + // 清空用户列表 + this.userList = []; }, }, }; \ No newline at end of file + +.app { + .applist { + display: flex; + padding: 10px; + flex-wrap: wrap; + + .appItem { + width: 202px; + height: 58px; + background: #ffffff; + border-radius: 4px; + padding: 0 10px; + display: flex; + flex-direction: row; + align-items: center; + margin-right: 10px; + border: 1px solid #fff; + margin-bottom: 10px; + cursor: pointer; + + .imgBox { + width: 15px; + height: 22px; + margin-right: 3px; + + img { + width: 100%; + height: 100%; + } + } + + .appIcon { + width: 44px; + height: 44px; + margin-right: 10px; + border-radius: 50%; + } + + .name { + font-weight: 400; + font-size: 14px; + color: #333333; + flex: 1; + } + } + .appItem:hover { + background: #f2fcff; + border: 1px solid #1478f5; + } + .active { + background: #f2fcff; + border: 1px solid #1478f5; + } + } +} + +.DescribeDataBox { + display: flex; + flex-direction: column; + padding: 10px 15px 10px 10px; + font-size: 15px; + color: #333; + + span { + margin-bottom: 10px; + } +} +.search { + display: flex; + margin: 10px; + + .input { + margin-right: 10px; + } +} + +.ApiPliginBox { + height: calc(100vh - 270px); + overflow: auto; + padding-right: 5px; + .appItem { + height: unset !important; + display: flex; + flex-direction: column; + width: 100% !important; + padding: 10px !important; + align-items: flex-start !important; + margin-right: 0 !important; + color: #333333 !important; + font-size: 14px !important; + + .name:first-child { + font-weight: 500; + color: #333333; + } + } +} + +.userList { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px 15px 10px 10px; + font-size: 14px; + + .userItem { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background: #ffffff; + border-radius: 4px; + border: 1px solid #dbdde1; + margin-bottom: 10px; + padding: 15px; + cursor: pointer; + } + .userAccountIcon { + width: 15px; + height: 15px; + margin-right: 10px; + img { + width: 100%; + height: 100%; + } + } + + .userItem:hover { + background: #f2fcff; + border: 1px solid #1478f5; + } + .userBtn { + padding: 15px 10px; + border: 1px dashed #dbdde1; + } + .userBtn:hover { + background: #f2fcff; + border: 1px dashed #1478f6; + } +} + +.userContentBox { + width: 100%; + height: calc(100vh - 200px); + overflow: auto; + + .active { + background: #f2fcff; + border: 1px solid #1478f5; + } +} +.redBox { + background: #fff1eb; + border-radius: 4px; + border: 1px solid #ffb999; + color: #ff5100; + font-size: 12px; + text-align: center; + padding: 2px 8px; + margin-left: 5px; +} + +.successBox { + background: #f6ffed; + border-radius: 4px; + border: 1px solid #b7eb8f; + color: #52c41a; + font-size: 12px; + text-align: center; + padding: 2px 8px; + margin-left: 5px; +} + +.settingBox { + padding: 10px; + + .title { + margin-bottom: 10px; + color: #333333; + font-weight: 500; + font-size: 14px; + } +} +.settingbtn { + width: 20px; + height: 20px; + font-size: 16px; + color: #1478f6; + text-align: center; + line-height: 20px; + cursor: pointer; + margin: 0 auto; + position: absolute; + top: 90px; + left: 19px; + z-index: 999; + padding: 6px; +} + +.settingTabs { + width: 100%; + padding: 10px 15px 10px 10px; + .tabs { + display: flex; + align-items: center; + height: 32px; + background: #fff; + border-radius: 4px; + padding: 2px; + width: fit-content; + + .tabsItem { + height: 28px; + line-height: 28px; + background: #fff; + border-radius: 3px; + font-size: 14px; + color: #999; + padding: 0 10px; + cursor: pointer; + } + + .active { + background: #f5f5f5; + color: #333; + } + } + + ::v-deep .el-switch { + height: 23px !important; + line-height: 23px !important; + } +} + +.currentDrawBox { + background: #ffffff; + display: flex; + align-items: center; + font-size: 14px; + color: #333; + .img { + width: 44px; + height: 44px; + border-radius: 50%; + margin-right: 10px; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + } + } + + .actionName { + font-weight: 400; + color: #333333; + margin-bottom: 5px; + } + .content { + font-weight: 500; + color: #333333; + margin-bottom: 5px; + } + + .drawimg { + margin-right: 10px; + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #f18709; + + img { + width: 60%; + height: 60%; + } + } +} + +.drawItemBtn { + background: #ffffff; + padding: 10px 50px; + font-size: 14px; + color: #1478f6; + border: 1px dashed #dbdde1; + border-radius: 4px; + cursor: pointer; + margin-top: 50px; +} +.drawItemBtn:hover { + background: #f2fcff; + border: 1px dashed #1478f6; +} + +.DescribeContent { + display: -webkit-box; + /*作为弹性伸缩盒子模型显示。*/ + -webkit-box-orient: vertical; + /*作为弹性伸缩盒子模型显示。*/ + -webkit-line-clamp: 1; //*显示的行*/ + overflow: hidden; + /*溢出隐藏*/ + /* 对于连字情况或者纯字母，可以解决 */ + word-break: break-all; + // max-width: 100px; +} + +.InterfaceConfiguration { + background: #fff; + margin: 10px; + padding: 10px; + border-radius: 4px; + + .InterCigTitle { + font-size: 14px; + margin-bottom: 10px; + } +} + +::v-deep .operatingClass { + display: flex; + align-items: center; + .el-radio-group { + background: unset !important; + } +} + +::v-deep .CodeMirror { + height: 100% !important; +} + +.toolbar { + background: #fff; + padding: 8px; + font-size: 14px; + border-radius: 4px 4px 0 0; + display: flex; + justify-content: space-between; + align-items: center; + + select { + width: 100px; + margin-left: 10px; + padding: 2px; + } +} +.fullScreen { + display: flex; + align-items: center; + font-size: 14px; + margin-left: 10px; + cursor: pointer; + + > img { + width: 15px; + height: 15px; + margin-right: 5px; + } +} + +.acionImg { + width: 15px; + height: 15px; + margin-left: 5px; +} + diff --git a/src/views/LinkUp/images/applicotion.svg b/src/views/LinkUp/images/applicotion.svg new file mode 100644 index 0000000..c737190 --- /dev/null +++ b/src/views/LinkUp/images/applicotion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/LinkUp/index.vue b/src/views/LinkUp/index.vue index fe1667a..f02764f 100644 --- a/src/views/LinkUp/index.vue +++ b/src/views/LinkUp/index.vue @@ -524,14 +524,14 @@ export default { // 按钮点击事件 getFuncBtn(btnEven) { if (btnEven.menuName == "新增") { - this.$refs.addDialogChunk.openDialog( - "-4252471217359269890", - "3-33003", - "add", - 3 - ); + // this.$refs.addDialogChunk.openDialog( + // "-4252471217359269890", + // "3-33003", + // "add", + // 3 + // ); - // this.$refs.addSence.openDialog("", "add", this.projectClassificationID); + this.$refs.addSence.openDialog("", "add", this.projectClassificationID); } }, //hyt 2024/08/14 切换豆腐块 @@ -560,9 +560,9 @@ export default { // 查看 viewChunkData(row) { this.$refs.viewDialogChunk.openDialog( - row.sceneID, - row.sceneName, - row.triggerMode, + row.id, + row.name, + row.triggerModeId, row ); },