10 changed files with 440 additions and 16 deletions
@ -0,0 +1,17 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-07 15:07:51 |
||||
|
@ 备注: 表单流程 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-main class="mainBox">Main</el-main> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.mainBox{ |
||||
|
padding: 0; |
||||
|
overflow-y : auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-07 15:05:29 |
||||
|
@ 备注: 自定义表单 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-aside class="asideBox">Aside</el-aside> |
||||
|
<el-main class="mainBox">Main</el-main> |
||||
|
<el-aside class="asideBox">Aside</el-aside> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.asideBox{ |
||||
|
height: calc(100vh - 40px); |
||||
|
width: 300px; |
||||
|
overflow-y : auto; |
||||
|
} |
||||
|
.mainBox{ |
||||
|
border-left: 1px solid #ECECEC; |
||||
|
border-right: 1px solid #ECECEC; |
||||
|
padding: 0; |
||||
|
overflow-y : auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,25 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-07 15:09:21 |
||||
|
@ 备注: 表单列表 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-main class="mainBox">Main</el-main> |
||||
|
<el-aside class="asideBox">Aside</el-aside> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.asideBox{ |
||||
|
height: calc(100vh - 40px); |
||||
|
width: 300px; |
||||
|
overflow-y : auto; |
||||
|
} |
||||
|
.mainBox{ |
||||
|
border-left: 1px solid #ECECEC; |
||||
|
border-right: 1px solid #ECECEC; |
||||
|
padding: 0; |
||||
|
overflow-y : auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-07 11:26:40 |
||||
|
@ 备注: 编辑表单 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue" |
||||
|
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue" |
||||
|
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue" |
||||
|
const props = defineProps({ |
||||
|
appCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
isShow:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
drawerWith:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
}, |
||||
|
}); |
||||
|
const emits = defineEmits(["update:isShow"]); |
||||
|
const tabsActive = ref(1) |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-07 15:11:24 |
||||
|
@ 功能: 关闭页面 |
||||
|
*/ |
||||
|
const closeSavePageForm = () =>{ |
||||
|
emits("update:isShow",false) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-drawer v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> |
||||
|
<div class="common-layout"> |
||||
|
<el-container> |
||||
|
<el-header class="headerBox"> |
||||
|
<div class="headLeft"> |
||||
|
<el-space wrap> |
||||
|
<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" /> |
||||
|
<el-tooltip |
||||
|
class="box-item" |
||||
|
effect="dark" |
||||
|
:content="props.appCont.appName" |
||||
|
placement="bottom" |
||||
|
> |
||||
|
<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text> |
||||
|
</el-tooltip> |
||||
|
<i class="fa fa-angle-right"></i> |
||||
|
<el-tooltip |
||||
|
class="box-item" |
||||
|
effect="dark" |
||||
|
:content="props.appCont.appName" |
||||
|
placement="bottom" |
||||
|
> |
||||
|
<el-text class="w-150px mb-2" truncated>未命名表单</el-text> |
||||
|
</el-tooltip> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain"> |
||||
|
<el-tab-pane label="① 页面管理" :name="1"> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="② 流程设计" :name="2"> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="③ 列表设计" :name="3"> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
<div class="headRight"> |
||||
|
<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button> |
||||
|
</div> |
||||
|
</el-header> |
||||
|
<el-container> |
||||
|
<PageForm v-if="tabsActive==1" /> |
||||
|
<PageFlow v-if="tabsActive==2" /> |
||||
|
<PageList v-if="tabsActive==3" /> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.headerBox{ |
||||
|
padding: 0px; |
||||
|
border-bottom: 2px solid #ECECEC; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.headLeft{ |
||||
|
width: 300px; |
||||
|
padding-left: 5px; |
||||
|
span{ |
||||
|
max-width:100px; |
||||
|
} |
||||
|
} |
||||
|
.headRight{ |
||||
|
width: 300px; |
||||
|
text-align: right; |
||||
|
padding-right: 5px; |
||||
|
} |
||||
|
.tabsMain{ |
||||
|
::v-deep .el-tabs__header{ |
||||
|
margin: 0px; |
||||
|
} |
||||
|
::v-deep .el-tabs__nav-scroll{ |
||||
|
margin: 0 auto!important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-drawer__body{ |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,112 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-25 13:30:19 |
||||
|
@ 备注: 修改自定义应用菜单 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { appMenuTreeInfo } from "@/api/date/type" |
||||
|
import { editAppMenuLable } from '@/api/DesignForm/requestapi' |
||||
|
const props = defineProps({ |
||||
|
isShow:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
menuCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const saveMenuName = ref(ElForm); |
||||
|
const loading = ref(false) |
||||
|
const emits = defineEmits(["update:isShow","updateMenu"]); |
||||
|
const appMenuInfo = ref<appMenuTreeInfo>({}) |
||||
|
//监听页面是否打开 |
||||
|
watch(()=>props.isShow,(val:boolean)=>{ |
||||
|
if(val){ |
||||
|
appMenuInfo.value = props.menuCont |
||||
|
} |
||||
|
}) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-25 13:39:46 |
||||
|
@ 功能: 关闭页面 |
||||
|
*/ |
||||
|
const handleClose = () => { |
||||
|
loading.value = false; |
||||
|
emits("updateMenu") |
||||
|
emits("update:isShow",false) |
||||
|
resetForm() |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:33:56 |
||||
|
@ 功能: 重置表单 |
||||
|
*/ |
||||
|
const resetForm = () => { |
||||
|
saveMenuName.value.resetFields(); |
||||
|
saveMenuName.value.clearValidate(); |
||||
|
appMenuInfo.label = ""; |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:29:59 |
||||
|
@ 功能: 表单验证规则 |
||||
|
*/ |
||||
|
const rules = reactive({ |
||||
|
label: [{ required: true, message: "请输入名称", trigger: "blur" }], |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-25 13:44:42 |
||||
|
@ 功能: 提交数据 |
||||
|
*/ |
||||
|
const saveMenuData = () => { |
||||
|
loading.value = true; |
||||
|
saveMenuName.value.validate((valid: any) => { |
||||
|
if (valid) { |
||||
|
editAppMenuLable({id:appMenuInfo.value.id, label:appMenuInfo.value.label}) |
||||
|
.then((data) =>{ |
||||
|
console.log("提交数据", data) |
||||
|
ElMessage({ |
||||
|
message: data.msg, |
||||
|
type: 'success', |
||||
|
}); |
||||
|
handleClose(); |
||||
|
}) |
||||
|
}else{ |
||||
|
loading.value = false; |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="props.isShow" |
||||
|
title="编辑名称" |
||||
|
width="500" |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="saveMenuName" |
||||
|
:model="appMenuInfo" |
||||
|
:rules="rules" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="label"> |
||||
|
<el-input v-model="appMenuInfo.label" clearable placeholder="请输入名称" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" v-loading="loading" :disabled="loading" @click="saveMenuData">确定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue