8 changed files with 1384 additions and 231 deletions
@ -0,0 +1,238 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 08:53:50 |
|||
@ 备注: 自定义应用卡片视图 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { customerFormCont } from "@/api/DesignForm/type"; |
|||
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord } from '@/api/DesignForm/requestapi' |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 11:30:11 |
|||
@ 功能: 引入组件 |
|||
*/ |
|||
import AppContainer from '@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue' |
|||
import AppContainerPage from '@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue' //自建应用编辑 |
|||
|
|||
const props = defineProps({ |
|||
searchQuery:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
appGroup:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:true |
|||
} |
|||
}); |
|||
|
|||
const emits = defineEmits(["getRongQiAttr"]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 09:09:29 |
|||
@ 功能: 总记录数 |
|||
*/ |
|||
const pageTotal = ref(0) |
|||
const contList = ref<customerFormCont[]>() //记录 |
|||
const loadingApp = ref(false) |
|||
const runIsOpen = ref(false) |
|||
const pickAppInfo = ref<customerFormCont>() //应用或表单内容 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-21 10:54:23 |
|||
@ 功能: 获取表单列表 |
|||
*/ |
|||
const getFormAppList = (val:any) => { |
|||
loadingApp.value = true |
|||
let sendInfo = { |
|||
page:val.page, |
|||
pagesize:val.pagesize, |
|||
keywords:val.searchWork, |
|||
groupId:props.appGroup |
|||
} |
|||
getCustomerFormList(sendInfo) |
|||
.then(({ data }) => { |
|||
console.log("打开应用-->",data); |
|||
pageTotal.value = data.total |
|||
contList.value = data.list |
|||
}) |
|||
.finally(() => { |
|||
loadingApp.value = false |
|||
}) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
getFormAppList(props.searchQuery); |
|||
}) |
|||
}) |
|||
watch(()=>props.appGroup,()=>{ |
|||
getFormAppList(props.searchQuery); |
|||
}) |
|||
const srcList = (val:string) =>{ |
|||
if(val){ |
|||
return [val] |
|||
}else{ |
|||
return ["https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png"] |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 09:57:45 |
|||
@ 功能: 编辑应用 |
|||
*/ |
|||
const editIsOpen = ref(false) |
|||
const appKey = ref<string>("") |
|||
const editForm = (val:any) => { |
|||
emits("getRongQiAttr") |
|||
pickAppInfo.value = val |
|||
editIsOpen.value = true; |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 09:58:19 |
|||
@ 功能: 编辑应用状态 |
|||
*/ |
|||
const eidtStatus = (val:any) => { |
|||
emits("getRongQiAttr") |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 10:01:17 |
|||
@ 功能: 打开应用 |
|||
*/ |
|||
const openApp = (val:any) => { |
|||
emits("getRongQiAttr") |
|||
pickAppInfo.value = val |
|||
appJwtPower({id:val.signCodeStr,types:1}) |
|||
.then(({data})=>{ |
|||
console.log("打开应用------>data:",data) |
|||
if(data){ |
|||
runIsOpen.value = true |
|||
}else{ |
|||
ElMessage({ |
|||
message: '对不起！您不可使用此App！请联系管理员进行授权！', |
|||
type: 'error', |
|||
plain: true, |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
defineExpose({ |
|||
getFormAppList |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div v-loading="loadingApp" class="content1 flex flex-wrap gap-4"> |
|||
<el-card v-for="item in contList" :key="item.id" class="cardBox"> |
|||
<template #header> |
|||
<el-dropdown> |
|||
<span class="el-dropdown-link"> |
|||
<el-icon><MoreFilled /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="editForm(item)" >编辑</el-dropdown-item> |
|||
<el-dropdown-item @click="eidtStatus(item)" divided>删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</template> |
|||
<div class="cardContBox" @click="openApp(item)"> |
|||
<el-image |
|||
style="width: 100px; height: 100px" |
|||
:src="item.icon?item.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'" |
|||
:zoom-rate="1.2" |
|||
:max-scale="7" |
|||
:min-scale="0.2" |
|||
:initial-index="4" |
|||
fit="cover" |
|||
/> |
|||
<div class="cardInfo" :style="'width: calc(100% - 100px); height: 100px; overflow: hidden;' "> |
|||
<div class="title">{{item.name}}</div> |
|||
<div class="content">{{item.describe}}</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</div> |
|||
<div class="pagination-box"> |
|||
<el-pagination background v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page" |
|||
v-model:page-size="props.searchQuery.pagesize" |
|||
:total="pageTotal" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
<AppContainer v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" /> |
|||
<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.pagination-box{ |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 15px; |
|||
} |
|||
.el-row:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.el-col { |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.grid-content { |
|||
border-radius: 4px; |
|||
min-height: 36px; |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
|
|||
.content1{ |
|||
padding:1rem 1rem 0 1rem; |
|||
::v-deep .el-card__body{ |
|||
padding:5px 10px 10px 10px; |
|||
} |
|||
::v-deep .el-card__header{ |
|||
border-bottom: 0; |
|||
padding: 0; |
|||
height: 10px; |
|||
display:flex; |
|||
justify-content: right; |
|||
} |
|||
.el-dropdown-link{ |
|||
margin-top: 4px; |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.cardBox{ |
|||
width:306px; |
|||
.cardContBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
cursor: pointer; |
|||
} |
|||
.cardInfo{ |
|||
padding-left: 5px; |
|||
} |
|||
.title{ |
|||
font-size:14px; |
|||
font-weight:bold; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.content{ |
|||
color: #909399; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 15:39:28 |
|||
@ 备注: 自定义应用列表模式 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { customerFormCont } from "@/api/DesignForm/type"; |
|||
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord } from '@/api/DesignForm/requestapi' |
|||
import { |
|||
ArrowLeft, |
|||
ArrowRight, |
|||
Delete, |
|||
Edit, |
|||
Share, |
|||
View, |
|||
Star |
|||
} from '@element-plus/icons-vue' |
|||
import RunApplication from "@/views/sysworkflow/lowcodepage/runApp/index.vue" |
|||
|
|||
const props = defineProps({ |
|||
searchQuery:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
appGroup:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:true |
|||
} |
|||
}); |
|||
const emits = defineEmits(["getRongQiAttr"]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 09:09:29 |
|||
@ 功能: 总记录数 |
|||
*/ |
|||
const pageTotal = ref(0) |
|||
const contList = ref<customerFormCont[]>() //记录 |
|||
const loadingApp = ref(false) |
|||
const runIsOpen = ref(false) |
|||
const pickAppInfo = ref<customerFormCont>() //应用或表单内容 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-21 10:54:23 |
|||
@ 功能: 获取表单列表 |
|||
*/ |
|||
const getFormAppList = (val:any) => { |
|||
loadingApp.value = true |
|||
let sendInfo = { |
|||
page:val.page, |
|||
pagesize:val.pagesize, |
|||
keywords:val.searchWork, |
|||
groupId:props.appGroup |
|||
} |
|||
getCustomerFormList(sendInfo) |
|||
.then(({ data }) => { |
|||
console.log("打开应用-2->",data); |
|||
pageTotal.value = data.total |
|||
contList.value = data.list |
|||
}) |
|||
.finally(() => { |
|||
loadingApp.value = false |
|||
}) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
getFormAppList(props.searchQuery); |
|||
}) |
|||
}) |
|||
watch(()=>props.appGroup,()=>{ |
|||
getFormAppList(props.searchQuery); |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 16:16:31 |
|||
@ 功能: 删除表单 |
|||
*/ |
|||
const confirmToDelete = (val:customerFormCont) => { |
|||
console.log("确定删除表单---->", val); |
|||
} |
|||
|
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-29 16:13:16 |
|||
@ 功能: 打开应用 |
|||
*/ |
|||
const lookAppList = (val:any) => { |
|||
let appPower = 0; |
|||
emits('getRongQiAttr') |
|||
pickAppInfo.value = val |
|||
appJwtPower({id:val.signCodeStr,types:1}) |
|||
.then(({data})=>{ |
|||
// console.log("打开应用------>data:",data) |
|||
if(data){ |
|||
runIsOpen.value = true |
|||
}else{ |
|||
ElMessage({ |
|||
message: '对不起！您不可使用此App！请联系管理员进行授权！', |
|||
type: 'error', |
|||
plain: true, |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
|
|||
</script> |
|||
<template> |
|||
<div class="listBody"> |
|||
<el-table :data="contList" border class="tableBox"> |
|||
<el-table-column fixed label="封面" width="80" align="center"> |
|||
<template #default="scope"> |
|||
<el-image |
|||
style="width: 30px; height: 30px" |
|||
:src="scope.row.icon?scope.row.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'" |
|||
:zoom-rate="1.2" |
|||
:max-scale="7" |
|||
:min-scale="0.2" |
|||
:initial-index="4" |
|||
fit="cover" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed prop="name" label="名称" min-width="380" /> |
|||
<el-table-column label="编号" width="200"> |
|||
<template #default="scope"> |
|||
{{scope.row.signCodeStr!=0?scope.row.signCodeStr:""}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="类型" align="center" width="180"> |
|||
<template #default="scope"> |
|||
<el-tag v-if="scope.row.classify==1" type="primary">普通表单</el-tag> |
|||
<el-tag v-if="scope.row.classify==2" type="success">流程表单</el-tag> |
|||
<el-tag v-if="scope.row.classify==3" type="warning">自定义应用</el-tag> |
|||
<el-tag v-if="scope.row.classify==4" type="danger">自定义应用表单</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="describe" label="简介" min-width="180" /> |
|||
<el-table-column label="创建人" width="100" align="center"> |
|||
<template #default="scope"> |
|||
{{scope.row.creatername}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="创建时间" width="200"> |
|||
<template #default="scope"> |
|||
{{scope.row.creatertimeStr}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" label="操作" width="200" align="center"> |
|||
<template #default="scope"> |
|||
<el-button-group v-if="scope.row.classify==3" class="ml-4"> |
|||
<el-button size="small" title="查看" :icon="View" @click="lookAppList(scope.row)" /> |
|||
<el-button size="small" title="设为常用" :icon="Star" /> |
|||
<el-button size="small" title="编辑" type="success" :icon="Edit" /> |
|||
|
|||
<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="confirmToDelete(scope.row)"> |
|||
<template #reference> |
|||
<el-button size="small" title="删除" type="danger" :icon="Delete" /> |
|||
</template> |
|||
</el-popconfirm> |
|||
</el-button-group> |
|||
<el-button-group v-else class="ml-4"> |
|||
<el-button size="small" title="查看" :icon="View" /> |
|||
<el-button size="small" title="编辑" type="success" :icon="Edit" /> |
|||
<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="confirmToDelete(scope.row)"> |
|||
<template #reference> |
|||
<el-button size="small" title="删除" type="danger" :icon="Delete" /> |
|||
</template> |
|||
</el-popconfirm> |
|||
</el-button-group> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination-box"> |
|||
<el-pagination background v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page" |
|||
v-model:page-size="props.searchQuery.pagesize" |
|||
:total="pageTotal" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
|
|||
<RunApplication v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" @refreshPage="getFormAppList"/> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.pagination-box{ |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 15px; |
|||
} |
|||
.listBody{ |
|||
padding: 10px 10px; |
|||
} |
|||
.tableBox{ |
|||
width: 100%; |
|||
height: calc(100vh - 370px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,293 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 11:43:49 |
|||
@ 备注: 表单列表 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type"; |
|||
import { customerFormGroupList,editFormGroupState,createApp,gainAppEditPsge } from '@/api/DesignForm/requestapi' |
|||
|
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 08:59:37 |
|||
@ 功能: 引入组件页面 |
|||
*/ |
|||
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue" |
|||
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue" |
|||
import AppFormList from "@/views/sysworkflow/lowcodepage/appFormList.vue" |
|||
|
|||
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue" //自建应用 |
|||
|
|||
const appPageShow = ref(false) |
|||
const contbody = ref() //实例化内容容器 |
|||
const addFormIsShow = ref(false) |
|||
const addFormGroupIsShow = ref(false) |
|||
const drawerWith = ref(); //编辑表单时抽屉宽度 |
|||
const drawerGroupWith = ref(); //编辑表单时抽屉宽度 |
|||
const formKey = ref<string>("") //表单标识 |
|||
const formGroupKey = ref<string>("") //表单标识 |
|||
const groupKey = ref<string>("") //分组标识 |
|||
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png') |
|||
|
|||
const page = ref<number>(1) //页码 |
|||
const pageSize = ref<number>(12) //每页显示几个 |
|||
const pageTotal = ref<number>(0) //总记录数 |
|||
const groupFormList = ref<any[]>([]) //记录数组 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 09:30:27 |
|||
@ 功能: 获取表单分组 |
|||
*/ |
|||
const gainFormGroup = () => { |
|||
let sendInfo = { |
|||
page:page.value, |
|||
pagesize:pageSize.value, |
|||
state:1 |
|||
} |
|||
customerFormGroupList(sendInfo) |
|||
.then((data) =>{ |
|||
// console.log("获取表单分组",data) |
|||
pageTotal.value = data.data.total |
|||
groupFormList.value = data.data.list |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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() |
|||
} |
|||
}); |
|||
}) |
|||
}) |
|||
|
|||
|
|||
} |
|||
onMounted(()=>{ |
|||
drawerWith.value = contbody.value?.clientWidth |
|||
gainFormGroup() |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 14:27:51 |
|||
@ 功能: 获取容器宽度 |
|||
*/ |
|||
const getRongQiAttr = () => { |
|||
drawerWith.value = contbody.value?.clientWidth |
|||
} |
|||
</script> |
|||
<template> |
|||
<div ref="contbody" class="box_content"> |
|||
<!-- <el-affix :offset="100" > |
|||
<el-dropdown @command="handleCommand"> |
|||
<el-button type="primary" class="fa fa-plus" circle ></el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item command="addForm">创建新表单</el-dropdown-item> |
|||
<el-dropdown-item command="addFormGroup">创建表单分组</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</el-affix> --> |
|||
|
|||
<el-row :gutter="10" class="formGroupList"> |
|||
<el-col v-for="item in groupFormList" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<el-card class="cardlarge" body-style="padding:0px 10px 10px 5px;"> |
|||
<template #header> |
|||
<div class="cardHeadBox"> |
|||
<div class="textBox"> |
|||
<el-avatar v-if="item.icon!=''" shape="square" size="small" :src="item.icon" /> |
|||
<el-avatar v-else shape="square" size="small" :src="squareUrl" /> |
|||
<el-text class="w-200px mb-2 left_suojin" truncated size="large">{{item.title}}</el-text> |
|||
</div> |
|||
<el-dropdown> |
|||
<span class="el-dropdown-link"> |
|||
<el-icon><MoreFilled /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="handleCommand('addFormGroup',item.idStr)" >新增分组</el-dropdown-item> |
|||
<el-dropdown-item @click="handleCommand('addForm',item.idStr)" style="display:none" >添加表单</el-dropdown-item> |
|||
<el-dropdown-item @click="handleCommand('addFormApp',item.idStr)" >添加应用</el-dropdown-item> |
|||
<el-dropdown-item @click="editFormGroup(item.idStr)" divided>编辑</el-dropdown-item> |
|||
<el-dropdown-item @click="eidtGroupStatus(item.idStr,3)">删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
</template> |
|||
<AppFormList v-model:form-key="formKey" :group-id="item.idStr" :drawer-with="drawerWith" @getRongQiAttr="getRongQiAttr" /> |
|||
|
|||
</el-card> |
|||
|
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<!-- 分页 --> |
|||
<div class="formGroupPage"> |
|||
<el-pagination layout="prev, pager, next" v-model:current-page="page" :page-size="pageSize" :total="pageTotal" /> |
|||
</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" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.box_content{ |
|||
width: 100%; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
padding: 0; |
|||
.formGroupList{ |
|||
width:100%; |
|||
padding: 0 0 10px 10px; |
|||
} |
|||
.formGroupPage{ |
|||
width:100%; |
|||
position: fixed; |
|||
bottom: 0px; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.affix_box{ |
|||
display: flex; |
|||
margin-left: 10px; |
|||
} |
|||
.cardHeadBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.textBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
vertical-align: middle; |
|||
word-wrap: break-word; |
|||
.mx-1{ |
|||
padding-left:10px; |
|||
} |
|||
} |
|||
} |
|||
.but_centent{ |
|||
text-align: center; |
|||
} |
|||
.foot_bottom{ |
|||
padding: 0 ; |
|||
} |
|||
/* 小卡片 */ |
|||
.cardpattern{ |
|||
// padding-bottom: 0px; |
|||
// margin-bottom: 10px; |
|||
// min-width: 100px; |
|||
} |
|||
/* 小卡片标题 */ |
|||
.cardhead{ |
|||
font-size: 15px; |
|||
} |
|||
/* 大卡片 */ |
|||
.cardlarge{ |
|||
max-width: 480px; |
|||
margin-top:10px; |
|||
::v-deep .el-card__header{ |
|||
padding:10px !important; |
|||
} |
|||
} |
|||
|
|||
/* 大卡片标题 */ |
|||
.cardhead-large{ |
|||
font-size: 20px; |
|||
} |
|||
.left_suojin{ |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 11:28:18 |
|||
@ 备注: 自定义App主容器 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type" |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { gainAppEditPsge } from '@/api/DesignForm/requestapi' |
|||
|
|||
import RegularPage from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue" |
|||
import RunAppForm from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue" |
|||
|
|||
const props = defineProps({ |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
runIsOpen:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
pickAppInfo:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
searchQuery:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:runIsOpen","refreshPage"]); |
|||
const userStore = useUserStore(); |
|||
const menusTree = ref<appMenuTreeInfo[]>([]) //菜单树 |
|||
const pickAppMenu = ref("") //选中的菜单 |
|||
const switchPAge = ref(1) //页面类型 1：执行页面，2：表单页面 |
|||
const pickAppMenuSel = ref("") //下拉框选中的值 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 11:40:06 |
|||
@ 功能: 应用进出配置 |
|||
*/ |
|||
const appCont = reactive<appSetInfo>({ |
|||
appKey:"1", |
|||
appName:"未知应用", |
|||
appSvg:"", |
|||
state:1, |
|||
uuid:"1", |
|||
describe:"" |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-23 15:23:31 |
|||
@ 功能: 获取app信息 |
|||
*/ |
|||
const gainAppContent = () =>{ |
|||
let sendInfo = { |
|||
id:props.pickAppInfo.signCodeStr |
|||
} |
|||
console.log("获取app信息---》",props.pickAppInfo) |
|||
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; |
|||
let isIn = true; |
|||
data.data.menuTree.forEach((item)=>{ |
|||
if(item.isLock == 1 && item.isMain == 1){ |
|||
pickAppMenu.value = item; |
|||
isIn = false; |
|||
switchPAge.value = 1 |
|||
} |
|||
}) |
|||
if(isIn){ |
|||
pickAppMenu.value = data.data.menuTree[0]; |
|||
if (pickAppMenu.value.type == 2){ |
|||
switchPAge.value = 2 |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-30 15:17:29 |
|||
@ 功能: 退出应用 |
|||
*/ |
|||
const closeRunApp = () => { |
|||
emits("update:runIsOpen",false) |
|||
emits("refreshPage",props.searchQuery) |
|||
} |
|||
|
|||
watch(()=>props.runIsOpen,(val:boolean)=>{ |
|||
if(val){ |
|||
gainAppContent() |
|||
} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-17 16:45:40 |
|||
@ 功能: 打开app表单 |
|||
*/ |
|||
const openAppPage = (val:any) =>{ |
|||
console.log("打开app表单------>",val) |
|||
if(val.type!=1){ |
|||
if(val.isLock==1){ |
|||
switchPAge.value = 1 |
|||
}else{ |
|||
switchPAge.value = 2 |
|||
} |
|||
pickAppMenu.value = val |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer v-model="props.runIsOpen" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> |
|||
<el-container class="common-layout"> |
|||
<el-header class="headerBox"> |
|||
<div> |
|||
<el-space wrap> |
|||
<el-avatar shape="square" :size="25" :src="appCont.appSvg" /> |
|||
<el-text>{{ appCont.appName }}</el-text> |
|||
</el-space> |
|||
</div> |
|||
<div> |
|||
<el-dropdown> |
|||
<el-avatar shape="square" :size="25" :src="userStore.avatar" /> |
|||
<template #dropdown> |
|||
<el-dropdown-item> |
|||
<table class="userTabel"> |
|||
<tr> |
|||
<td rowspan="2"><el-avatar shape="square" :size="55" :src="userStore.avatar" /></td> |
|||
<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{ userStore.userInfoCont.companyname }}/{{ userStore.userInfoCont.departmentname }}</td> |
|||
</tr> |
|||
</table> |
|||
</el-dropdown-item> |
|||
<el-dropdown-item @click="closeRunApp()" divided> |
|||
<i class="fa fa-sign-out"></i> |
|||
<el-text class="mx-1" type="danger">退出</el-text> |
|||
</el-dropdown-item> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
</el-header> |
|||
<el-container> |
|||
<el-aside class="asideBox"> |
|||
<el-row> |
|||
<el-col :span="24" class="asideBoxSearch"> |
|||
<el-tree-select |
|||
v-model="pickAppMenuSel" |
|||
:data="menusTree" |
|||
:render-after-expand="false" |
|||
:suffix-icon="Search" |
|||
node-key="id" |
|||
clearable |
|||
filterable |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-tree |
|||
:data="menusTree" |
|||
node-key="id" |
|||
:allow-drop="allowDrop" |
|||
:expand-on-click-node="true" |
|||
> |
|||
<template #default="{ node, data }"> |
|||
<div class="appMenuTitle" @click="openAppPage(data)"> |
|||
<el-space wrap> |
|||
<svg-icon prefix="icon" :icon-class="data.svg" /> |
|||
<el-tooltip :content="node.label" placement="top" effect="dark"> |
|||
<el-text class="w-120px mb-2" truncated >{{node.label}}</el-text> |
|||
</el-tooltip> |
|||
</el-space> |
|||
</div> |
|||
</template> |
|||
</el-tree> |
|||
</el-aside> |
|||
<el-main class="mainBox"> |
|||
<RegularPage v-if="switchPAge==1" :pick-app-menu="pickAppMenu" /> |
|||
<RunAppForm v-else :pick-app-menu="pickAppMenu" /> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</el-drawer> |
|||
</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; |
|||
} |
|||
:deep .el-card__body{ |
|||
padding: 0px 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; |
|||
|
|||
} |
|||
.appMenuTitle{ |
|||
width: 100%; |
|||
padding-right: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.svgBox{ |
|||
display: none; |
|||
} |
|||
} |
|||
.appMenuTitle:hover .svgBox{ |
|||
display: block; |
|||
} |
|||
} |
|||
.el-main { |
|||
padding: 0px; |
|||
} |
|||
.mainBox{ |
|||
background-color: #F1F2F3; |
|||
padding:0px; |
|||
.scroBox{ |
|||
height: calc(100vh - 40px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 13:57:57 |
|||
@ 备注: 编辑App |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type" |
|||
import { gainAppEditPsge } from '@/api/DesignForm/requestapi' |
|||
|
|||
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue" |
|||
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue" |
|||
|
|||
const props = defineProps({ |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
editIsOpen:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
pickAppInfo:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
searchQuery:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:editIsOpen","refreshPage"]); |
|||
const tabsActive = ref(1) |
|||
const menusTree = ref<appMenuTreeInfo[]>([]) //菜单树 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-22 11:40:06 |
|||
@ 功能: 应用进出配置 |
|||
*/ |
|||
const appCont = reactive<appSetInfo>({ |
|||
appKey:"1", |
|||
appName:"未知应用", |
|||
appSvg:"", |
|||
state:1, |
|||
uuid:"1", |
|||
describe:"" |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-23 15:23:31 |
|||
@ 功能: 获取app信息 |
|||
*/ |
|||
const gainAppContent = () =>{ |
|||
let sendInfo = { |
|||
id:props.pickAppInfo.signCodeStr |
|||
} |
|||
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; |
|||
}) |
|||
} |
|||
|
|||
watch(()=>props.editIsOpen,(val:boolean)=>{ |
|||
if(val){ |
|||
gainAppContent() |
|||
} |
|||
}) |
|||
const closeAppDraw = () =>{ |
|||
emits("update:editIsOpen",false) |
|||
emits("refreshPage",props.searchQuery) |
|||
tabsActive.value = 1 |
|||
checkedMenu.value = "" |
|||
appPageKey.value = "" |
|||
props.formKey="" |
|||
isNew.value = false |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer v-model="props.editIsOpen" :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="headerEditBox"> |
|||
<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" @tab-click="handleClick" :stretch="true" class="tabsMain"> |
|||
<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-group> |
|||
<el-button plain size="small" class="fa fa-paper-plane-o" @click="accessRunApp">访问</el-button> |
|||
<el-button type="danger" size="small" class="fa fa-times" @click="closeAppDraw">关闭</el-button> |
|||
</el-button-group> |
|||
</div> |
|||
</el-header> |
|||
<el-container> |
|||
<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 :form-Key="props.formKey" v-model:menus-tree="menusTree" v-model:app-page-key="appPageKey" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" @openAppPageForm="openAppPageForm" /> |
|||
|
|||
<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :is-new="isNew" :drawer-with="props.drawerWith" :form-Key="props.formKey" :app-cont="appCont" :group-key="props.groupKey" :menu-id="props.formKey" v-model:app-page-key="appPageKey" @gainSunAppContent="gainAppContent" @updateInit="updataPageInit" /> |
|||
|
|||
</el-scrollbar> |
|||
</el-aside> |
|||
<el-main>Main</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.common-layout{ |
|||
.el-header{ |
|||
padding-left:10px; |
|||
padding-right:10px; |
|||
} |
|||
.headerEditBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #F1F2F3; |
|||
:deep(.el-tabs){ |
|||
width: 100%; |
|||
height: 40px; |
|||
} |
|||
:deep(.el-tabs__nav) { |
|||
height: 40px; |
|||
} |
|||
:deep(.el-tabs__item) { |
|||
margin-top: 0px; |
|||
} |
|||
:deep(.el-tabs__nav-prev) { |
|||
margin-top: 16px; |
|||
} |
|||
:deep(.el-tabs__nav-next) { |
|||
margin-top: 16px; |
|||
} |
|||
:deep(.el-tabs__nav-wrap::after) { |
|||
position: static !important; |
|||
} |
|||
:deep(.el-tabs__header){ |
|||
margin:0 0 1px 0; |
|||
} |
|||
:deep .el-card__body{ |
|||
padding: 0px 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; |
|||
|
|||
} |
|||
.appMenuTitle{ |
|||
width: 100%; |
|||
padding-right: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.svgBox{ |
|||
display: none; |
|||
} |
|||
} |
|||
.appMenuTitle:hover .svgBox{ |
|||
display: block; |
|||
} |
|||
.scroBox{ |
|||
height: calc(100vh - 92px); |
|||
} |
|||
} |
|||
.el-main { |
|||
padding: 0px; |
|||
} |
|||
.mainBox{ |
|||
background-color: #F1F2F3; |
|||
padding:0px; |
|||
.scroBox{ |
|||
height: calc(100vh - 40px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue