You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
414 lines
12 KiB
414 lines
12 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-18 14:08:56
|
|
@ 备注: 设置自建应用
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
|
|
import { gainAppEditPsge } from "@/api/DesignForm/requestapi";
|
|
|
|
import { Search } from "@element-plus/icons-vue";
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue";
|
|
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue";
|
|
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue";
|
|
import OpenAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue";
|
|
import AppSetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue";
|
|
import ReleaseApp from "@/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue";
|
|
|
|
const props = defineProps({
|
|
drawerWith: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
formKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
groupKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
pickAppInfo: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
});
|
|
const emits = defineEmits([
|
|
"update:isShow",
|
|
"update:svgName",
|
|
"refreshPage",
|
|
"accessapp",
|
|
]);
|
|
const squareUrl = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
|
|
const drawerOpenOrClose = ref(false);
|
|
const tabsActive = ref(3);
|
|
const menusTree = ref<appMenuTreeInfo[]>([]);
|
|
const appCont = reactive<appSetInfo>({
|
|
appKey: "1",
|
|
appName: "未知应用",
|
|
appSvg: "",
|
|
state: 1,
|
|
uuid: "1",
|
|
describe: "",
|
|
});
|
|
const menuParentKey = ref<string>("");
|
|
const menuGroupShow = ref(false); //添加菜单分组
|
|
const appPageKey = ref<string>(""); //自定义App表单Id
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-19 15:47:12
|
|
@ 功能: 选择选项
|
|
*/
|
|
const handleClick = () => {};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-23 09:56:19
|
|
@ 功能: 关闭
|
|
*/
|
|
const closeAppDraw = () => {
|
|
emits("update:isShow", false);
|
|
// emits("refreshPage");
|
|
// tabsActive.value = 1;
|
|
checkedMenu.value = "";
|
|
appPageKey.value = "";
|
|
props.formKey = "";
|
|
isNew.value = false;
|
|
};
|
|
onMounted(() => {
|
|
// gainAppContent()
|
|
});
|
|
watch(
|
|
() => props.isShow,
|
|
(val: boolean) => {
|
|
if (val) {
|
|
gainAppContent();
|
|
}
|
|
}
|
|
);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-23 15:23:31
|
|
@ 功能: 获取app信息
|
|
*/
|
|
const gainAppContent = () => {
|
|
let sendInfo = {
|
|
id: props.formKey.toString(),
|
|
};
|
|
gainAppEditPsge(sendInfo).then((data) => {
|
|
// console.log("获取app信息---》",data)
|
|
menusTree.value = data.data.menuTree;
|
|
appCont.appKey = data.data.appKey;
|
|
appCont.appName = data.data.appName;
|
|
appCont.appSvg = data.data.appSvg;
|
|
appCont.state = data.data.state;
|
|
appCont.uuid = data.data.uuid;
|
|
});
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-23 16:57:39
|
|
@ 功能: 添加菜单分组
|
|
*/
|
|
const addMenu = (key?: string) => {
|
|
if (key) {
|
|
menuParentKey.value = key;
|
|
} else {
|
|
menuParentKey.value = "";
|
|
}
|
|
menuGroupShow.value = true;
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-06 11:09:44
|
|
@ 功能: 创建页面
|
|
*/
|
|
const saveAppFormIsShow = ref(false);
|
|
const isNew = ref(false);
|
|
const addAppPageForm = (key?: string) => {
|
|
saveAppFormIsShow.value = true;
|
|
isNew.value = true;
|
|
// console.log("新建-->")
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-18 09:00:00
|
|
@ 功能: 操作表单页面
|
|
*/
|
|
const checkedMenu = ref<appMenuTreeInfo>("");
|
|
const openAppPageForm = (val: appMenuTreeInfo) => {
|
|
checkedMenu.value = val;
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-20 13:27:37
|
|
@ 功能: 编辑app页面
|
|
*/
|
|
const editAppInfo = (id: string) => {
|
|
appPageKey.value = id;
|
|
saveAppFormIsShow.value = true;
|
|
isNew.value = false;
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-20 16:20:08
|
|
@ 功能: 重新初始化app
|
|
*/
|
|
const openAppPageInit = ref(null);
|
|
const updataPageInit = () => {
|
|
openAppPageInit.value.gainAppFormPageInit();
|
|
};
|
|
watch(
|
|
() => tabsActive.value,
|
|
(val: number) => {
|
|
if (val == 1) {
|
|
openAppPageInit.value.gainAppFormPageInit();
|
|
}
|
|
}
|
|
);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-28 08:46:12
|
|
@ 功能: 访问前端页面
|
|
*/
|
|
const accessRunApp = () => {
|
|
closeAppDraw();
|
|
emits("accessapp", props.pickAppInfo);
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="drawerClass">
|
|
<el-drawer
|
|
v-model="props.isShow"
|
|
title="设置/编辑自定义表单"
|
|
:with-header="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:destroy-on-close="true"
|
|
:size="props.drawerWith"
|
|
>
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<el-header class="headerBox">
|
|
<div>
|
|
<el-space wrap>
|
|
<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
|
|
<el-text>{{ appCont.appName }}</el-text>
|
|
<el-tag v-if="appCont.state == 1" type="success">已启用</el-tag>
|
|
<el-tag v-else type="danger">已禁用</el-tag>
|
|
</el-space>
|
|
</div>
|
|
<div>
|
|
<el-tabs
|
|
v-model="tabsActive"
|
|
:stretch="true"
|
|
class="tabsMain"
|
|
@tab-click="handleClick"
|
|
>
|
|
<el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
|
|
<el-tab-pane label="② 集成&自动化" :name="2"> </el-tab-pane>
|
|
<el-tab-pane label="③ 应用设置" :name="3"> </el-tab-pane>
|
|
<el-tab-pane label="④ 应用发布" :name="4"> </el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div>
|
|
<el-button plain size="small" @click="accessRunApp">访问</el-button>
|
|
<el-button type="danger" size="small" @click="closeAppDraw">关闭</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-container v-show="tabsActive == 1">
|
|
<el-aside class="asideBox">
|
|
<el-row>
|
|
<el-col :span="24" class="asideBoxSearch">
|
|
<el-input
|
|
v-model="input2"
|
|
style="width: 180px"
|
|
placeholder="搜索"
|
|
:suffix-icon="Search"
|
|
/>
|
|
<el-dropdown>
|
|
<el-button type="primary" class="fa fa-plus" />
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="addAppPageForm">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-space wrap>
|
|
<svg-icon
|
|
style="color: #eebe77"
|
|
prefix="icon"
|
|
icon-class="liuChengBiaoDan"
|
|
/>
|
|
新建页面
|
|
</el-space>
|
|
</el-col>
|
|
<el-col
|
|
:span="24"
|
|
style="padding-left: 20px; font-size: 12px"
|
|
>
|
|
数据收集、事件记录<br />任务协同、业务审批
|
|
</el-col>
|
|
</el-row>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided @click="addMenu">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-space wrap>
|
|
<svg-icon
|
|
style="color: #337ecc"
|
|
prefix="icon"
|
|
icon-class="fenZhu"
|
|
/>
|
|
新建分组
|
|
</el-space>
|
|
</el-col>
|
|
<el-col
|
|
:span="24"
|
|
style="padding-left: 20px; font-size: 12px"
|
|
>
|
|
应用项目管理
|
|
</el-col>
|
|
</el-row>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-col>
|
|
</el-row>
|
|
<el-scrollbar class="scroBox">
|
|
<AppMenus
|
|
v-model:menus-tree="menusTree"
|
|
v-model:app-page-key="appPageKey"
|
|
:form-key="props.formKey"
|
|
:group-key="props.groupKey"
|
|
:app-cont="appCont"
|
|
:drawer-with="props.drawerWith"
|
|
@open-app-page-form="openAppPageForm"
|
|
/>
|
|
<CreateAppFormPage
|
|
v-if="saveAppFormIsShow"
|
|
v-model:is-show="saveAppFormIsShow"
|
|
v-model:app-page-key="appPageKey"
|
|
:is-new="isNew"
|
|
:drawer-with="props.drawerWith"
|
|
:form-key="props.formKey"
|
|
:app-cont="appCont"
|
|
:group-key="props.groupKey"
|
|
:menu-id="props.formKey"
|
|
@gain-sun-app-content="gainAppContent"
|
|
@update-init="updataPageInit"
|
|
/>
|
|
</el-scrollbar>
|
|
</el-aside>
|
|
<el-main class="mainBox">
|
|
<el-scrollbar class="scroBox">
|
|
<OpenAppFormPage
|
|
ref="openAppPageInit"
|
|
:form-key="props.formKey"
|
|
:group-key="props.groupKey"
|
|
:app-cont="appCont"
|
|
:drawer-with="props.drawerWith"
|
|
:menus-info="checkedMenu"
|
|
@edit-app-info="editAppInfo"
|
|
/>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<el-container v-if="tabsActive == 2"> 集成与自动化 </el-container>
|
|
<el-container v-if="tabsActive == 3">
|
|
<AppSetUp :app-cont="appCont" :group-key="props.groupKey" />
|
|
</el-container>
|
|
<el-container v-if="tabsActive == 4">
|
|
<ReleaseApp :app-cont="appCont" :group-key="props.groupKey" />
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
<AppMenuGroup
|
|
v-model:is-show="menuGroupShow"
|
|
:menu-parent-key="menuParentKey"
|
|
:app-cont="appCont"
|
|
@update-menu="gainAppContent"
|
|
/>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.common-layout {
|
|
.el-header {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.headerBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f3;
|
|
:deep(.el-tabs__nav-wrap::after) {
|
|
position: static !important;
|
|
}
|
|
:deep(.el-tabs__header) {
|
|
margin: 0 0 1px 0;
|
|
}
|
|
}
|
|
.asideBox {
|
|
width: 250px;
|
|
|
|
border-right: 1px solid #f1f2f3;
|
|
height: calc(100vh - 40px);
|
|
.asideBoxSearch {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 10px;
|
|
}
|
|
.scroBox {
|
|
height: calc(100vh - 95px);
|
|
.el-menu {
|
|
border-right: 0px;
|
|
}
|
|
li {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.menuBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.textCenter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.el-menu-item {
|
|
height: 40px;
|
|
}
|
|
.el-menu-item.is-active {
|
|
color: var(--el-menu-active-color);
|
|
background-color: #e4e4e4e4;
|
|
}
|
|
.el-menu-item:hover {
|
|
background-color: #f1f1f1f1 !important;
|
|
}
|
|
}
|
|
}
|
|
.el-main {
|
|
padding: 10px;
|
|
}
|
|
.mainBox {
|
|
background-color: #f1f2f3;
|
|
padding: 0px;
|
|
.scroBox {
|
|
height: calc(100vh - 40px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|