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.
386 lines
10 KiB
386 lines
10 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 09:51:02
|
|
@ 备注: 自定义表单分组内容列表
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { customerFormCont } from "@/api/DesignForm/type";
|
|
import { getCustomerFormList,editProductionFormStatus,appJwtPower } from '@/api/DesignForm/requestapi'
|
|
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
|
|
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
|
|
import { useUserStore } from "@/store/modules/user";
|
|
//引入自定义处理页面
|
|
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
|
|
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'
|
|
import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue'
|
|
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue" //自建应用
|
|
|
|
import RunApplication from "@/views/sysworkflow/lowcodepage/runApp/index.vue"
|
|
|
|
const props = defineProps({
|
|
groupId:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
drawerWith:{
|
|
type:Number,
|
|
default:true
|
|
},
|
|
formKey:{
|
|
type:String,
|
|
default:""
|
|
}
|
|
});
|
|
const userStore = useUserStore();
|
|
const emits = defineEmits(["update:formKey","getRongQiAttr"]);
|
|
|
|
//表单ID
|
|
const formKeyStr = computed({
|
|
get() {
|
|
return props.formKey
|
|
},
|
|
set(val: formStruct) {
|
|
emits('update:formKey', val)
|
|
}
|
|
});
|
|
const editIds = reactive<string[]>([]); //记录总数
|
|
const formId = ref<string>("")
|
|
const versionTitle = ref<string>("") //表单名称
|
|
const versionId = ref<string>("") //表单版本号
|
|
const addFormIsShow = ref(false)
|
|
const openTaskDrawer = ref(false) //新增任务
|
|
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
|
|
const pageApp = ref<number>(1) //页码
|
|
const pageAppSize = ref<number>(12) //每页显示几个
|
|
const pageAppTotal = ref<number>(0) //总记录数
|
|
const contList = ref<customerFormCont[]>()
|
|
|
|
const lookPageIsShow = ref(false)
|
|
const loadingApp = ref(false)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 10:54:23
|
|
@ 功能: 获取表单列表
|
|
*/
|
|
const getFormAppList = () => {
|
|
loadingApp.value = true
|
|
let sendInfo = {
|
|
page:pageApp.value,
|
|
pagesize:pageAppSize.value,
|
|
groupId:props.groupId
|
|
}
|
|
getCustomerFormList(sendInfo)
|
|
.then(({ data }) => {
|
|
console.log("搜索表单-->",data);
|
|
pageAppTotal.value = data.total
|
|
contList.value = data.list
|
|
})
|
|
.finally(() => {
|
|
loadingApp.value = false
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 13:39:51
|
|
@ 功能: 创建表单任务
|
|
*/
|
|
const startUsing = (id:string,title:string,appOrTable:any) => {
|
|
if(appOrTable.classify != 3){
|
|
emits('getRongQiAttr')
|
|
versionId.value = id
|
|
versionTitle.value = title
|
|
openTaskDrawer.value = true
|
|
}else{
|
|
lookAppList(appOrTable)
|
|
}
|
|
|
|
|
|
console.log("appOrTable---->",appOrTable)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 10:57:11
|
|
@ 功能: 编辑表单
|
|
*/
|
|
const editFormApp = (id:string) => {
|
|
emits('getRongQiAttr')
|
|
formId.value = id.toString()
|
|
addFormIsShow.value= true
|
|
console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-22 08:20:23
|
|
@ 功能: 删除表单
|
|
*/
|
|
const delFormApp = (id:string) => {
|
|
ElMessageBox.confirm(
|
|
'请问是否真的删除？删除后数据将无法找回！',
|
|
'温馨提示！',
|
|
{
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
draggable: true,
|
|
}
|
|
)
|
|
.then(() => {
|
|
editProductionFormStatus({id:[id.toString()],status:3,is_delete:false})
|
|
.then(({data})=>{
|
|
getFormAppList()
|
|
// editIds.splice(0,editIds.length);
|
|
})
|
|
})
|
|
.catch(() => {
|
|
getFormAppList()
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-09 09:06:44
|
|
@ 功能: 刷新页面
|
|
*/
|
|
const refreshPage = (pageType:string) =>{
|
|
addFormIsShow.value = false;
|
|
getFormAppList()
|
|
}
|
|
onMounted(()=>{
|
|
getFormAppList()
|
|
})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-24 08:21:32
|
|
@ 功能: 关闭应用刷新页面
|
|
*/
|
|
const closeAppPage = () =>{
|
|
console.log("关闭应用刷新页面")
|
|
getFormAppList()
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-01 14:32:18
|
|
@ 功能: 查看表单列表
|
|
*/
|
|
const lookFormList = (val:any) => {
|
|
emits('getRongQiAttr')
|
|
console.log("查看表单列表", val)
|
|
lookPageIsShow.value = true
|
|
state.formId = val.idStr
|
|
|
|
versionId.value = val.versionId
|
|
versionTitle.value = val.name
|
|
|
|
let stateData = string2json(val.listjson)
|
|
console.log("查看表单列表---->",stateData)
|
|
state.tableData = stateData.tableData
|
|
state.searchData = stateData.searchData
|
|
state.loading = stateData.loading
|
|
state.attrObj = stateData.attrObj
|
|
state.config = stateData.config
|
|
state.tagList = stateData.tagList
|
|
|
|
state.formList = stateData.formList
|
|
state.name = stateData.name
|
|
state.treeData = stateData.treeData
|
|
state.previewVisible = stateData.previewVisible
|
|
state.formFieldList = stateData.formFieldList
|
|
state.formApi = stateData.formApi
|
|
state.dict = stateData.dict
|
|
state.refreshTable = stateData.refreshTable
|
|
|
|
|
|
}
|
|
const state = reactive({
|
|
tableData: {
|
|
// tableProps: {}, //表格所有参数
|
|
columns: [],
|
|
config: {},
|
|
controlBtn:[],
|
|
operateBtn:[]
|
|
},
|
|
searchData: [],
|
|
loading: false,
|
|
attrObj: {},
|
|
config: {
|
|
pageSize:10,
|
|
searchIsShow:true,
|
|
searchFormIsShow:true,
|
|
openPageMode:"drawer"
|
|
},
|
|
tagList: {},
|
|
formId: props.formKey || '',
|
|
formList: [], // 所有可选表单数据源
|
|
name: '',
|
|
treeData: {}, // 左侧树相关
|
|
previewVisible: false,
|
|
tabsName: 'second',
|
|
formFieldList: [], // 表单数据源所有可选字段
|
|
formApi:{
|
|
type:"1",
|
|
addApiUrl:"",
|
|
editApiUrl:"",
|
|
delApiUrl:"",
|
|
lookApiUrl:""
|
|
},
|
|
dict: {},
|
|
refreshTable: true
|
|
})
|
|
const appFormNameVal = ref("")
|
|
provide('appFormNAme', appFormNameVal)
|
|
const appPageShow = ref(false)
|
|
const appKey = ref<string>("")
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-23 15:30:17
|
|
@ 功能: 编辑app内容
|
|
*/
|
|
const editAppCont = (val:string) => {
|
|
emits('getRongQiAttr')
|
|
appKey.value = val.toString();
|
|
appPageShow.value = true;
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-24 10:44:42
|
|
@ 功能: 翻页
|
|
*/
|
|
const fanyePage = (val: number) =>{
|
|
pageApp.value = val
|
|
getFormAppList()
|
|
}
|
|
|
|
|
|
const pickAppInfo = ref<customerFormCont>()
|
|
const runIsOpen = ref(false)
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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 v-loading="loadingApp">
|
|
<el-row :gutter="10" >
|
|
<el-col v-for="item in contList" :key="item.id" :xs="8" :sm="12" :md="8" :lg="8" :xl="8" style=" margin-top: 10px;">
|
|
<el-card class="cardpattern" body-style="padding:5px;">
|
|
<img
|
|
v-if="item.icon==''"
|
|
:src="squareUrl"
|
|
:title="item.name"
|
|
class="picture"
|
|
@click.top="startUsing(item.versionId,item.name,item)"
|
|
/>
|
|
<img
|
|
v-else
|
|
:src="item.icon"
|
|
:title="item.name"
|
|
class="picture"
|
|
@click.top="startUsing(item.versionId,item.name,item)"
|
|
/>
|
|
<div class="cardhead">
|
|
<el-text class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.versionId,item.name,item)">{{item.name}}</el-text>
|
|
</div>
|
|
<el-row v-if="item.classify==3">
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="View" @click="lookAppList(item)"></el-button>
|
|
</el-col>
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="editAppCont(item.signCodeStr)"></el-button>
|
|
</el-col>
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="delFormApp(item.idStr)"></el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-else>
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="View" @click="lookFormList(item)"></el-button>
|
|
</el-col>
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="editFormApp(item.idStr)"></el-button>
|
|
</el-col>
|
|
<el-col :span="8" class="but_centent">
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="delFormApp(item.idStr)"></el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="formGroupPage">
|
|
<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" @current-change="fanyePage" />
|
|
</div>
|
|
|
|
<TableFlow v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
|
|
|
|
<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
|
|
|
|
<DesignAPPpage v-model:is-show="appPageShow" v-model:form-key="appKey" :group-key="props.groupId" :drawer-with="props.drawerWith" @refreshPage="getFormAppList" />
|
|
<RunApplication v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" @refreshPage="getFormAppList"/>
|
|
<el-drawer
|
|
v-model="lookPageIsShow"
|
|
title="列表预览"
|
|
direction="rtl"
|
|
:before-close="handlePreviewClose"
|
|
:size="props.drawerWith"
|
|
>
|
|
<ak-page-list
|
|
:data="state.tableData"
|
|
:search-data="state.searchData"
|
|
:config="state.config"
|
|
:form-id="state.formId"
|
|
:versionid="versionId"
|
|
:versiontitle="versionTitle"
|
|
v-model:look-page-is-show="lookPageIsShow"
|
|
/>
|
|
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.cardhead{
|
|
padding: 5px 0;
|
|
}
|
|
.formGroupPage{
|
|
width:100%;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
/* 图片 */
|
|
.picture {
|
|
height: 100%;
|
|
min-height: 50px;
|
|
max-height: 100px;
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 50px;
|
|
}
|
|
.but_centent{
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|