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