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.
389 lines
9.5 KiB
389 lines
9.5 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-20 15:31:12
|
|
@ 备注: 应用设置
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { SearchForm, customerFormCont, customerFormConfig } from "@/api/DesignForm/type";
|
|
import {
|
|
customerFormGroupList,
|
|
editFormGroupState,
|
|
createApp,
|
|
gainAppEditPsge,
|
|
} from "@/api/DesignForm/requestapi";
|
|
|
|
import { Search } from "@element-plus/icons-vue";
|
|
|
|
//引入页面
|
|
import AppCardPage from "@/views/sysworkflow/lowcodepage/appCardPage.vue";
|
|
import AppListPage from "@/views/sysworkflow/lowcodepage/appListPage.vue";
|
|
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue";
|
|
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue";
|
|
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue"; //自建应用
|
|
|
|
const contbody = ref(); //实例化内容容器
|
|
const carPage = ref();
|
|
const appListPage = ref();
|
|
const appGroup = ref("1");
|
|
const page = ref<number>(1); //页码
|
|
const pageSize = ref<number>(12000); //每页显示几个
|
|
const pageTotal = ref<number>(0); //总记录数
|
|
const groupFormList = ref<any[]>([]); //记录数组
|
|
const drawerWith = ref(); //抽屉宽度
|
|
const appPageShow = ref(false);
|
|
const addFormGroupIsShow = ref(false);
|
|
const formKey = ref<string>(""); //表单标识
|
|
const formGroupKey = ref<string>(""); //表单标识
|
|
const drawerGroupWith = ref(); //编辑表单时抽屉宽度
|
|
const groupKey = ref<string>(""); //分组标识
|
|
const squareUrl = ref<string>(
|
|
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
|
|
);
|
|
|
|
const searchQuery = reactive({
|
|
page: 1,
|
|
pagesize: 20,
|
|
searchWork: "",
|
|
});
|
|
const isClick = ref(1);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 09:30:27
|
|
@ 功能: 获取表单分组
|
|
*/
|
|
const isUpdate = ref(false);
|
|
const gainFormGroup = () => {
|
|
let sendInfo = {
|
|
page: page.value,
|
|
pagesize: pageSize.value,
|
|
state: 1,
|
|
};
|
|
customerFormGroupList(sendInfo).then((data) => {
|
|
pageTotal.value = data.data.total;
|
|
// pageTotal.value = 400
|
|
groupFormList.value = data.data.list;
|
|
console.log("重新排序", groupFormList.value);
|
|
isUpdate.value = true;
|
|
if (data.data.list && data.data.list.length > 0) {
|
|
let otherGroup = true;
|
|
data.data.list.forEach((item, index) => {
|
|
if (item.isTrue) {
|
|
appGroup.value = item.idStr.toString();
|
|
otherGroup = false;
|
|
}
|
|
});
|
|
if (otherGroup) {
|
|
let lengNum = data.data.list.length;
|
|
data.data.list.forEach((item, index) => {
|
|
if (lengNum > 1) {
|
|
if (index == 1) {
|
|
appGroup.value = item.idStr.toString();
|
|
}
|
|
} else {
|
|
if (index == 0) {
|
|
appGroup.value = item.idStr.toString();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
nextTick(() => {
|
|
searchSub();
|
|
});
|
|
});
|
|
};
|
|
const handleClick = (val: any) => {
|
|
// console.log("换挡",val,appGroup)
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-22 08:50:03
|
|
@ 功能: 改变视图展示模式
|
|
*/
|
|
const viewChannel = (val: number) => {
|
|
isClick.value = val;
|
|
};
|
|
|
|
onMounted(() => {
|
|
drawerWith.value = contbody.value?.clientWidth;
|
|
gainFormGroup();
|
|
});
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-20 16:19:45
|
|
@ 功能: 获取表单数据
|
|
*/
|
|
const handleCurrentChange = (val: any) => {};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-22 10:08:33
|
|
@ 功能: 搜索
|
|
*/
|
|
const searchSub = () => {
|
|
if (isClick.value == 1) {
|
|
carPage.value.getFormAppList(searchQuery);
|
|
} else {
|
|
appListPage.value.getFormAppList(searchQuery);
|
|
}
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-01 14:27:51
|
|
@ 功能: 获取容器宽度
|
|
*/
|
|
const getRongQiAttr = () => {
|
|
drawerWith.value = contbody.value?.clientWidth;
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-09 09:06:32
|
|
@ 功能: 选择添加项目
|
|
*/
|
|
const handleCommand = (command: string, groupId: string) => {
|
|
// ElMessage(`click on item ${command}`)
|
|
if (command == "addForm") {
|
|
formKey.value = "";
|
|
formGroupKey.value = groupId;
|
|
// addFormIsShow.value = true
|
|
drawerWith.value = contbody.value?.clientWidth;
|
|
addFormIsShow.value = true;
|
|
} else if (command == "addFormApp") {
|
|
drawerWith.value = contbody.value?.clientWidth;
|
|
let sendInfo = {
|
|
id: groupId.toString(),
|
|
};
|
|
createApp(sendInfo)
|
|
.then((data) => {
|
|
formKey.value = data.data.uuid;
|
|
groupKey.value = groupId.toString();
|
|
nextTick(() => {
|
|
appPageShow.value = true;
|
|
});
|
|
})
|
|
.finally(() => {});
|
|
} else {
|
|
groupKey.value = "";
|
|
addFormGroupIsShow.value = true;
|
|
drawerGroupWith.value = 400;
|
|
}
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 13:53:29
|
|
@ 功能: 编辑分组
|
|
*/
|
|
const editFormGroup = (id: string) => {
|
|
groupKey.value = id;
|
|
addFormGroupIsShow.value = true;
|
|
drawerGroupWith.value = 400;
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-09 09:06:44
|
|
@ 功能: 刷新页面
|
|
*/
|
|
|
|
const refreshPage = (pageType: string) => {
|
|
if (pageType == "formPage") {
|
|
addFormIsShow.value = false;
|
|
} else {
|
|
addFormGroupIsShow.value = false;
|
|
}
|
|
console.log("刷新页面");
|
|
gainFormGroup();
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 14:22:58
|
|
@ 功能: 改变分组状态
|
|
*/
|
|
const eidtGroupStatus = (id: string, state: number) => {
|
|
ElMessageBox.confirm(
|
|
"您确定要删除此分组吗？一经删除！数据将不可恢复！请慎重执行此操作！！！",
|
|
"温馨提示",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}
|
|
).then(() => {
|
|
let sendInfo = {
|
|
id: id.toString(),
|
|
status: state,
|
|
};
|
|
editFormGroupState(sendInfo).then((data) => {
|
|
ElMessageBox.alert(data.msg, "温馨提示！", {
|
|
confirmButtonText: "确定",
|
|
callback: (action: Action) => {
|
|
gainFormGroup();
|
|
},
|
|
});
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<div ref="contbody" class="tab-box">
|
|
<el-tabs
|
|
v-model="appGroup"
|
|
:key="isUpdate"
|
|
class="demo-tabs"
|
|
@tab-click="handleClick"
|
|
>
|
|
<el-tab-pane
|
|
v-for="item in groupFormList"
|
|
:label="item.title"
|
|
:name="item.idStr"
|
|
></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<div class="appSubButton">
|
|
<el-input
|
|
v-model="searchQuery.searchWork"
|
|
style="max-width: 150px; margin: 15px 10px 15px 0"
|
|
placeholder="请输入名称"
|
|
class="input-with-select"
|
|
clearable
|
|
>
|
|
<template #append>
|
|
<el-button :icon="Search" @click="searchSub()" />
|
|
</template>
|
|
</el-input>
|
|
<el-button-group class="butGroup">
|
|
<el-button
|
|
class="fa fa-object-group"
|
|
:color="isClick == 1 ? '#a0cfff' : ''"
|
|
@click="viewChannel(1)"
|
|
/>
|
|
<el-button
|
|
class="fa fa-table"
|
|
:color="isClick != 1 ? '#a0cfff' : ''"
|
|
@click="viewChannel(2)"
|
|
/>
|
|
|
|
<el-dropdown>
|
|
<el-button class="fa fa-reorder leftLink" />
|
|
<template #dropdown>
|
|
<el-dropdown-item @click="handleCommand('addFormGroup', appGroup)"
|
|
>新增分组</el-dropdown-item
|
|
>
|
|
<el-dropdown-item
|
|
@click="handleCommand('addForm', appGroup)"
|
|
style="display: none"
|
|
>添加表单</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="handleCommand('addFormApp', appGroup)"
|
|
>添加应用</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="editFormGroup(appGroup)" divided
|
|
>编辑</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="eidtGroupStatus(appGroup, 3)"
|
|
>删除</el-dropdown-item
|
|
>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-container">
|
|
<AppCardPage
|
|
ref="carPage"
|
|
v-if="isClick == 1"
|
|
:app-group="appGroup"
|
|
:search-query="searchQuery"
|
|
:drawer-with="drawerWith"
|
|
@getRongQiAttr="getRongQiAttr"
|
|
/>
|
|
<AppListPage
|
|
ref="appListPage"
|
|
v-else
|
|
:app-group="appGroup"
|
|
:search-query="searchQuery"
|
|
:drawer-with="drawerWith"
|
|
@getRongQiAttr="getRongQiAttr"
|
|
/>
|
|
</div>
|
|
<DesignAPPpage
|
|
v-model:is-show="appPageShow"
|
|
:drawer-with="drawerWith"
|
|
v-model:form-key="formKey"
|
|
:group-key="groupKey"
|
|
@refreshPage="refreshPage"
|
|
/>
|
|
|
|
<LowCodeFormPage
|
|
v-if="addFormIsShow"
|
|
:drawer-with="drawerWith"
|
|
v-model:form-key="formKey"
|
|
:form-group-key="formGroupKey"
|
|
@refreshPage="refreshPage"
|
|
/>
|
|
<LowCodeFormGroupPage
|
|
v-if="addFormGroupIsShow"
|
|
:drawer-with="drawerGroupWith"
|
|
:group-key="groupKey"
|
|
@refreshPage="refreshPage"
|
|
/>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
height: calc(100% - 125px);
|
|
width: calc(100% - 40px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.tab-box {
|
|
margin: 20px;
|
|
height: 63px;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.appSubButton {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.butGroup {
|
|
margin-top: 15px;
|
|
}
|
|
.leftLink {
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
}
|
|
::v-deep(.el-tabs) {
|
|
height: 63px;
|
|
width: calc(100% - 300px);
|
|
}
|
|
|
|
::v-deep(.el-tabs__nav) {
|
|
height: 63px;
|
|
font-size: 16px;
|
|
}
|
|
::v-deep(.el-tabs__item) {
|
|
margin-top: 15px;
|
|
font-size: 16px;
|
|
}
|
|
::v-deep(.el-tabs__nav-prev) {
|
|
line-height: 0px;
|
|
margin-top: 30px;
|
|
}
|
|
::v-deep(.el-tabs__nav-next) {
|
|
line-height: 0px;
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
.el-dropdown-link {
|
|
font-size: 30px;
|
|
margin-top: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
|