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.
326 lines
8.3 KiB
326 lines
8.3 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 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
|
|
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()
|
|
}
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
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{
|
|
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;
|
|
}
|
|
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" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane v-for="item in groupFormList" :key="item.idStr" :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);
|
|
}
|
|
|
|
.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>
|
|
|