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.
293 lines
7.6 KiB
293 lines
7.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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)" >添加表单</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>
|
|
|