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