19 changed files with 2493 additions and 60 deletions
@ -0,0 +1,59 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-20 11:32:08 |
||||
|
@ 备注: app流程预览 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = defineProps({ |
||||
|
appFlowInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
let nowVal = ref(100); //缩放比例 |
||||
|
|
||||
|
//缩放画布 |
||||
|
const zoomSize = (type:number) => { |
||||
|
if (type == 1) { |
||||
|
if (nowVal.value == 50) { |
||||
|
return; |
||||
|
} |
||||
|
nowVal.value -= 10; |
||||
|
} else { |
||||
|
if (nowVal.value == 300) { |
||||
|
return; |
||||
|
} |
||||
|
nowVal.value += 10; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="design_flow_work">{{props.appFlowInfo}} |
||||
|
<section class="dingflow-design" style="top:95px"> |
||||
|
<div class="zoom"> |
||||
|
<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div> |
||||
|
<span>{{ nowVal }}%</span> |
||||
|
<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div> |
||||
|
</div> |
||||
|
<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`"> |
||||
|
<nodeWrap v-model:nodeConfig="props.appFlowInfo.nodeConfig" v-model:flowPermission="props.appFlowInfo.flowPermission" /> |
||||
|
<div class="end-node"> |
||||
|
<div class="end-node-circle"></div> |
||||
|
<div class="end-node-text">流程结束</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.design_flow_work{ |
||||
|
height: calc(100vh - 140px); |
||||
|
width: inherit; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,360 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 09:08:21 |
||||
|
@ 备注: 展开应用表单 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
||||
|
import { gainAppPageInfo } from '@/api/DesignForm/requestapi' |
||||
|
import { Edit,Picture as IconPicture } from '@element-plus/icons-vue' |
||||
|
import { appPageDataInit,appWorkFlow } from "@/api/date/type" |
||||
|
|
||||
|
//引入页面 |
||||
|
import AppFlowSee from '@/views/sysworkflow/lowcodepage/appPage/appPageForm/appFlow/appFlowSee.vue' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
appCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
formKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
menusInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
drawerWith:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
}, |
||||
|
groupKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
const appInitData = ref<appPageDataInit>("") |
||||
|
//app表单 |
||||
|
const stateForm = reactive<any>({ |
||||
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
||||
|
formData: { |
||||
|
list: [], |
||||
|
form: {}, |
||||
|
config: {}, |
||||
|
powerstr:{} |
||||
|
}, |
||||
|
dict: {}, |
||||
|
formId: "1", |
||||
|
id: 0, |
||||
|
formId: 0, |
||||
|
versionId: 0, |
||||
|
loading: true |
||||
|
}) |
||||
|
//表单列表 |
||||
|
const stateList = 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 versionTitle = ref<string>("") //表单名称 |
||||
|
const versionId = ref<string>("") //表单版本号 |
||||
|
const appFlowInfo = ref<appWorkFlow>("") //流程 |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 09:32:23 |
||||
|
@ 功能: 监听菜单传递数据变化 |
||||
|
*/ |
||||
|
watch(()=>props.menusInfo,(val:appMenuTreeInfo)=>{ |
||||
|
console.log("监听菜单传递数据变化",val) |
||||
|
if(val){ |
||||
|
gainAppFormPageInit() |
||||
|
} |
||||
|
|
||||
|
},{ |
||||
|
deep:true |
||||
|
}) |
||||
|
const emits = defineEmits(["editAppInfo"]); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 14:04:20 |
||||
|
@ 功能: 获取App页面预览信息 |
||||
|
*/ |
||||
|
const editAppPage = (signCode:string) => { |
||||
|
emits("editAppInfo",signCode) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
const activePage = ref(0) //默认选择的页面 |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 10:13:15 |
||||
|
@ 功能: |
||||
|
*/ |
||||
|
const handleAppPageClick = () =>{ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-20 16:15:54 |
||||
|
@ 功能: 获取表单初始化信息 |
||||
|
*/ |
||||
|
const gainAppFormPageInit = () =>{ |
||||
|
gainAppPageInfo({id:props.menusInfo.id}) |
||||
|
.then((data)=>{ |
||||
|
console.log("获取初始化表单数据",data) |
||||
|
appInitData.value = data.data |
||||
|
if (data.data.page && data.data.pageList && data.data.appFlow){ |
||||
|
activePage.value = 1 |
||||
|
}else if (data.data.page && !data.data.pageList && data.data.appFlow){ |
||||
|
activePage.value = 2 |
||||
|
}else if (!data.data.page && !data.data.pageList && data.data.appFlow){ |
||||
|
activePage.value = 3 |
||||
|
}else if (!data.data.page && data.data.pageList && data.data.appFlow){ |
||||
|
activePage.value = 1 |
||||
|
}else if (data.data.page && !data.data.pageList && !data.data.appFlow){ |
||||
|
activePage.value = 2 |
||||
|
}else{ |
||||
|
activePage.value = 1 |
||||
|
} |
||||
|
versionId.value = data.data.appForm.id.toString() |
||||
|
versionTitle.value = data.data.appForm.name |
||||
|
if(data.data.pageList){ |
||||
|
let stateData = string2json(data.data.appForm.listjson) |
||||
|
stateList.tableData = stateData.tableData |
||||
|
stateList.searchData = stateData.searchData |
||||
|
stateList.loading = stateData.loading |
||||
|
stateList.attrObj = stateData.attrObj |
||||
|
stateList.config = stateData.config |
||||
|
stateList.tagList = stateData.tagList |
||||
|
stateList.formList = stateData.formList |
||||
|
stateList.name = stateData.name |
||||
|
stateList.treeData = stateData.treeData |
||||
|
stateList.previewVisible = stateData.previewVisible |
||||
|
stateList.formFieldList = stateData.formFieldList |
||||
|
stateList.formApi = stateData.formApi |
||||
|
stateList.dict = stateData.dict |
||||
|
stateList.refreshTable = stateData.refreshTable |
||||
|
} |
||||
|
if(data.data.page){ |
||||
|
console.log("data.data.mastesform", data.data) |
||||
|
stateForm.id=data.data.appForm.version.toString() |
||||
|
stateForm.formId =data.data.appForm.cfid.toString() |
||||
|
stateForm.versionId =data.data.appForm.id.toString() |
||||
|
stateForm.formData = stringToObj(data.data.appForm.mastesform) |
||||
|
stateForm.dict = string2json(data.data.appForm.dict) |
||||
|
stateForm.formData.powerstr = string2json(data.data.appForm.powerstr) |
||||
|
} |
||||
|
if(data.data.appFlow){ |
||||
|
appFlowInfo.value = data.data.workFlow |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
gainAppFormPageInit |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-row v-if="props.menusInfo"> |
||||
|
<el-col :span="24" class="pageBox pageHeader"> |
||||
|
<el-text class="wordFont">{{ props.menusInfo.label }}</el-text> |
||||
|
<el-button type="primary" :icon="Edit" @click="editAppPage(stateForm.formId)">编辑App页面</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="pageBox baiDiSe"> |
||||
|
<el-tabs v-model="activePage" class="demo-tabs" @tab-click="handleAppPageClick"> |
||||
|
<el-tab-pane v-if="appInitData.pageList" label="列表预览" :name="1" /> |
||||
|
<el-tab-pane v-if="appInitData.page" label="表单预览" :name="2" /> |
||||
|
<el-tab-pane v-if="appInitData.appFlow" label="流程图" :name="3" /> |
||||
|
</el-tabs> |
||||
|
</el-col> |
||||
|
<el-col v-if="activePage!=3" :span="24" class="pageBoxInfo"> |
||||
|
<el-card class="tispMsg" shadow="always"> |
||||
|
<el-scrollbar class="suojing"> |
||||
|
|
||||
|
<ak-page-list |
||||
|
v-if="activePage==1" |
||||
|
:data="stateList.tableData" |
||||
|
:search-data="stateList.searchData" |
||||
|
:config="stateList.config" |
||||
|
:form-id="stateForm.formId" |
||||
|
:versionid="versionId" |
||||
|
:versiontitle="versionTitle" |
||||
|
v-model:look-page-is-show="lookPageIsShow" |
||||
|
/> |
||||
|
<ak-form |
||||
|
v-if="activePage==2" |
||||
|
ref="formEl" |
||||
|
:numrun="formType" |
||||
|
:form-data="stateForm.formData" |
||||
|
:type="formType" |
||||
|
:dict="stateForm.dict" |
||||
|
request-url="getFormContent" |
||||
|
add-url="saveFormContent" |
||||
|
edit-url="editFormContent" |
||||
|
:before-submit="beforeSubmit" |
||||
|
:after-submit="afterSubmit" |
||||
|
:close-app-submit="closeAppSubmit" |
||||
|
:change-key-val="changeKeyVal" |
||||
|
:save-draft-page="saveDraftPage" |
||||
|
/> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
</el-card> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col v-else :span="24"> |
||||
|
<AppFlowSee |
||||
|
:app-flow-info="appFlowInfo" |
||||
|
/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-else> |
||||
|
<el-col :span="24" class="pageBox"> |
||||
|
<el-card class="tispMsg" shadow="always"> |
||||
|
|
||||
|
欢迎使用 {{ props.appCont.appName }}<br> |
||||
|
<div class="demo-image__error"> |
||||
|
<el-image :src="props.appCont.appSvg" fit="fit"> |
||||
|
<template #error> |
||||
|
<div class="image-slot"> |
||||
|
<el-icon><icon-picture /></el-icon> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.pageBox{ |
||||
|
padding: 0 15px; |
||||
|
.wordFont{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.tispMsg{ |
||||
|
width: 100%; |
||||
|
margin: 20px 0 0 0; |
||||
|
height: calc(100vh - 80px); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
justify-content: center; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
.pageBoxInfo{ |
||||
|
padding: 0 15px; |
||||
|
.tispMsg{ |
||||
|
width: 100%; |
||||
|
margin: 20px 0 0 0; |
||||
|
height: calc(100vh - 175px); |
||||
|
} |
||||
|
:deep .el-card__body{ |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
} |
||||
|
.pageHeader{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background-color: #FFFFFF; |
||||
|
padding:15px 15px 5px 15px; |
||||
|
|
||||
|
} |
||||
|
.baiDiSe{ |
||||
|
background-color: #FFFFFF; |
||||
|
border-bottom : 3px solid #dedfe0; |
||||
|
:deep .el-tabs__header{ |
||||
|
margin:0px 0 -2px 0; |
||||
|
} |
||||
|
} |
||||
|
.suojing{ |
||||
|
height: calc(100vh - 135px); |
||||
|
} |
||||
|
.demo-image__error{ |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.demo-image__error .block { |
||||
|
padding: 30px 0; |
||||
|
text-align: center; |
||||
|
border-right: solid 1px var(--el-border-color); |
||||
|
display: inline-block; |
||||
|
width: 49%; |
||||
|
box-sizing: border-box; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.demo-image__error .demonstration { |
||||
|
display: block; |
||||
|
color: var(--el-text-color-secondary); |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.demo-image__error .el-image { |
||||
|
padding: 0 5px; |
||||
|
max-width: 300px; |
||||
|
max-height: 200px; |
||||
|
width: 100%; |
||||
|
height: 200px; |
||||
|
} |
||||
|
|
||||
|
.demo-image__error .image-slot { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: var(--el-fill-color-light); |
||||
|
color: var(--el-text-color-secondary); |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
.demo-image__error .image-slot .el-icon { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<!-- Created by weiXin:337547038 --> |
||||
|
<template> |
||||
|
<div class="main-toolsTable"> |
||||
|
<slot></slot> |
||||
|
<el-button |
||||
|
link |
||||
|
|
||||
|
@click="btnClick(item.icon)" |
||||
|
v-for="item in btnList" |
||||
|
:key="item.icon" |
||||
|
:type="item.key==6?'danger':'primary'" |
||||
|
> |
||||
|
<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { computed } from 'vue' |
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先 |
||||
|
hideKey?: string[] // 设置了showKey时，hideKey无效 |
||||
|
}>(), |
||||
|
{ |
||||
|
showKey: () => { |
||||
|
return [] |
||||
|
}, |
||||
|
hideKey: () => { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
const emits = defineEmits<{ |
||||
|
(e: 'click', value: string): void |
||||
|
}>() |
||||
|
|
||||
|
const btnList = computed(() => { |
||||
|
const list = [ |
||||
|
{ icon: 'del',iconFont:"", label: '清空', key: 1 }, |
||||
|
{ icon: 'eye',iconFont:"", label: '预览', key: 2 }, |
||||
|
{ icon: 'json',iconFont:"", label: '生成脚本预览', key: 3 }, |
||||
|
// { icon: 'vue', label: '导出vue文件', key: 4 }, |
||||
|
{ icon: 'save',iconFont:"fa-save", label: '保存', key: 5 }, |
||||
|
// { icon: 'close',iconFont:"fa-close", label: '关闭', key: 6 } |
||||
|
] |
||||
|
if (props.showKey?.length) { |
||||
|
// 按照指定的key显示 |
||||
|
return list.filter((item: any) => { |
||||
|
return props.showKey.includes(item.key) |
||||
|
}) |
||||
|
} else if (props.hideKey?.length) { |
||||
|
// 按照指定的key隐藏 |
||||
|
return list.filter((item: any) => { |
||||
|
return !props.hideKey.includes(item.key) |
||||
|
}) |
||||
|
} else { |
||||
|
return list // 否则显示全部 |
||||
|
} |
||||
|
}) |
||||
|
const btnClick = (type: string) => { |
||||
|
emits('clearData', type) |
||||
|
} |
||||
|
</script> |
||||
|
<style lang='scss' scoped> |
||||
|
.main-toolsTable{ |
||||
|
line-height: 26px; |
||||
|
border-bottom: 2px solid #e4e7ed; |
||||
|
/* margin-right: 10px; */ |
||||
|
padding: 8px 10px 8px 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue