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.
486 lines
13 KiB
486 lines
13 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-22 15:39:28
|
|
@ 备注: 自定义应用列表模式
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { customerFormCont } from "@/api/DesignForm/type";
|
|
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord,setOftenApp } from '@/api/DesignForm/requestapi'
|
|
import {
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
Delete,
|
|
Edit,
|
|
Share,
|
|
View,
|
|
Star
|
|
} from '@element-plus/icons-vue'
|
|
//引入组件
|
|
import AppContainer from '@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue'
|
|
import AppContainerPage from '@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.vue' //自建应用编辑
|
|
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
|
|
import { hasAppList } from "@/directive/permission/button";
|
|
import { appHasPower } from "@/directive/permission/button";
|
|
|
|
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 delFormApp = (val:customerFormCont) => {
|
|
// console.log("确定删除表单---->", val);
|
|
loadingApp.value = true
|
|
editProductionFormStatus({id:[val.id.toString()],status:3,is_delete:false})
|
|
.then(({data})=>{
|
|
loadingApp.value = false
|
|
getFormAppList(props.searchQuery)
|
|
})
|
|
.finally(() => {
|
|
loadingApp.value = 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,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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-23 15:27:51
|
|
@ 功能: 表单数据
|
|
*/
|
|
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,
|
|
view:{
|
|
list:{
|
|
status:true,
|
|
isClick:false,
|
|
form:{
|
|
sortWord:"",
|
|
sortClass:1,
|
|
title:[]
|
|
}
|
|
},
|
|
date:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:1,
|
|
title:[]
|
|
}
|
|
}
|
|
,
|
|
time:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
sortWord:"",
|
|
sort:1,
|
|
title:[]
|
|
}
|
|
}
|
|
,
|
|
gantt:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:2,
|
|
sortWord:"",
|
|
sort:1,
|
|
title:[]
|
|
}
|
|
}
|
|
,
|
|
map:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
mapWord:"",
|
|
sortWord:"",
|
|
sort:1,
|
|
title:[]
|
|
}
|
|
},
|
|
card:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
sort:1,
|
|
sortWord:"",
|
|
imgWork:"",
|
|
imgWidth:50,
|
|
imgHeight:50,
|
|
imgBorderRadius:5,
|
|
imgPadding:2,
|
|
titleWork:"",
|
|
describe:"",
|
|
ranks:3,
|
|
title:[]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
const lookPageIsShow = ref(false)
|
|
const versionTitle = ref<string>("") //表单名称
|
|
const versionId = ref<string>("") //表单版本号
|
|
const formId = ref<string>("")
|
|
const addFormIsShow = ref(false)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-01 14:32:18
|
|
@ 功能: 查看表单列表
|
|
*/
|
|
const lookFormList = (val:any) => {
|
|
emits('getRongQiAttr')
|
|
// console.log("查看表单列表aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", val)
|
|
lookPageIsShow.value = true
|
|
state.formId = val.idStr
|
|
|
|
versionId.value = val.versionId
|
|
versionTitle.value = val.name
|
|
|
|
let stateData = string2json(val.listjson)
|
|
// console.log(val.listjson)
|
|
// console.log("查看表单列表---->",stateData)
|
|
//let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
|
|
if(stateData.tableData.columns.length>0){
|
|
for(let i = 0;i<stateData.tableData.columns.length;i++){
|
|
if(stateData.tableData.columns[i].config!=undefined && stateData.tableData.columns[i].control!=undefined){
|
|
// console.log(stateData.tableData.columns[i])
|
|
let paramx:string = ""+stateData.tableData.columns[i].control.optionsValue3Field
|
|
/*
|
|
在这里请求后台获取字段
|
|
*/
|
|
console.log("appListPage-----280",paramx)
|
|
if(paramx && paramx != "" && paramx != null && paramx != "undefined"){
|
|
getFieldRecord(paramx).then(({ data }) => {
|
|
stateData.tableData.columns[i].options = data
|
|
if(stateData.searchData.length>0){
|
|
for(let j = 0;j<stateData.searchData.length;j++){
|
|
// console.log(stateData.searchData[j])
|
|
if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
|
|
stateData.searchData[j].options = data
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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
|
|
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-21 10:57:11
|
|
@ 功能: 编辑表单
|
|
*/
|
|
const editFormApp = (val:any) => {
|
|
emits('getRongQiAttr')
|
|
formId.value = val.id.toString()
|
|
addFormIsShow.value= true
|
|
// console.log("编辑表单",val.id,"-",formId.value,"-",addFormIsShow.value)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-09 09:06:44
|
|
@ 功能: 刷新页面
|
|
*/
|
|
const refreshPage = (pageType:string) =>{
|
|
addFormIsShow.value = false;
|
|
getFormAppList(props.searchQuery);
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-23 16:29:51
|
|
@ 功能: 设置常用与非常用
|
|
*/
|
|
const setOften = (val:any) => {
|
|
|
|
setOftenApp({id:val.signCodeStr})
|
|
.then(({data}) =>{
|
|
getFormAppList(props.searchQuery);
|
|
});
|
|
|
|
}
|
|
defineExpose({
|
|
getFormAppList
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-08-09 11:28:39
|
|
@ 功能: 翻页
|
|
*/
|
|
const handleCurrentChange = (val:any) =>{
|
|
// console.log("翻页",val)
|
|
props.searchQuery.page = val
|
|
getFormAppList(props.searchQuery);
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-08-09 11:28:39
|
|
@ 功能: 表格行样式
|
|
*/
|
|
const tableRowClassName = ({ row, rowIndex }: any) => {
|
|
console.log("表格行样式",row,hasAppList(row.signCodeStr))
|
|
return hasAppList(row.signCodeStr) ? '' : 'hidden_row';
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="listBody">
|
|
<el-table v-loading="loadingApp" :data="contList" border class="tableBox" :row-class-name="tableRowClassName">
|
|
<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" :color="scope.row.isoften?'#FF0000':''" @click="setOften(scope.row)" />
|
|
<el-button v-if="appHasPower(scope.row.signCodeStr,'bjapp')" size="small" title="编辑" type="success" :icon="Edit" @click="editForm(scope.row)" />
|
|
|
|
<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="delFormApp(scope.row)">
|
|
<template #reference>
|
|
<el-button v-if="appHasPower(scope.row.signCodeStr,'scapp')" 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" @click="lookFormList(scope.row)" />
|
|
<el-button v-if="appHasPower(scope.row.signCodeStr,'bjapp')" size="small" title="编辑" type="success" :icon="Edit" @click="editFormApp(scope.row)" />
|
|
<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="delFormApp(scope.row)">
|
|
<template #reference>
|
|
<el-button v-if="appHasPower(scope.row.signCodeStr,'scapp')" 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
|
|
v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page" v-model:page-size="props.searchQuery.pagesize"
|
|
background
|
|
:total="pageTotal" @current-change="handleCurrentChange" />
|
|
</div>
|
|
|
|
<AppContainer v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" @refresh-page="getFormAppList" />
|
|
<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" :group-key="props.appGroup" @refresh-page="getFormAppList" />
|
|
<el-drawer
|
|
v-model="lookPageIsShow"
|
|
title="列表预览"
|
|
direction="rtl"
|
|
:before-close="handlePreviewClose"
|
|
:size="props.drawerWith"
|
|
>
|
|
<ak-page-list
|
|
v-model:look-page-is-show="lookPageIsShow"
|
|
:data="state.tableData"
|
|
:search-data="state.searchData"
|
|
:config="state.config"
|
|
:form-id="state.formId"
|
|
:versionid="versionId"
|
|
:view-page="state.view"
|
|
|
|
:versiontitle="versionTitle"
|
|
/>
|
|
</el-drawer>
|
|
<LowCodeFormPage v-if="addFormIsShow" v-model:form-key="formId" :drawer-with="props.drawerWith" @refresh-page="refreshPage" />
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.pagination-box{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
}
|
|
.listBody{
|
|
padding: 10px 10px;
|
|
:deep .el-table__body .hidden_row {
|
|
display: none;
|
|
}
|
|
}
|
|
.tableBox{
|
|
width: 100%;
|
|
height: calc(100vh - 370px);
|
|
}
|
|
|
|
</style>
|
|
|