24 changed files with 3464 additions and 8 deletions
@ -0,0 +1,28 @@ |
|||
import request from '@/utils/request'; |
|||
import { AxiosPromise } from 'axios'; |
|||
import { fromGroupSearch,fromGroupInfo,editFromGroupInfo,shareId } from "@/api/DesignForm/gromGroup/types"; |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 10:10:55 |
|||
@ 功能: 获取分组内容 |
|||
*/ |
|||
export function gainFormGroupInfo(data:shareId){ |
|||
return request({ |
|||
url: '/systemapi/customer_form/gainFormGroupInfo', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 13:05:37 |
|||
@ 功能: 添加表单分组内容 |
|||
*/ |
|||
export function addCustomerFormGroup(data:fromGroupInfo){ |
|||
return request({ |
|||
url: '/systemapi/customer_form/addCustomerFormGroup', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
@ -0,0 +1,128 @@ |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 16:59:53 |
|||
@ 功能: 状态数组 |
|||
*/ |
|||
export const groupStateAry = [ |
|||
{ |
|||
"key":1, |
|||
"label":"启用", |
|||
"value":1 |
|||
}, |
|||
{ |
|||
"key":2, |
|||
"label":"禁用", |
|||
"value":2 |
|||
} |
|||
] |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 14:31:45 |
|||
@ 功能: 保存按钮 |
|||
*/ |
|||
export const submitButton = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
textAlign: "center", |
|||
span: "" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control: |
|||
{ |
|||
label: "保存", |
|||
type: "primary", |
|||
key: "submit" |
|||
}, |
|||
config: |
|||
{ |
|||
textAlign: "center" |
|||
}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 14:33:07 |
|||
@ 功能: 返回按钮 |
|||
*/ |
|||
export const cancelButton = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
textAlign: "center", |
|||
span: "" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "返回", |
|||
type: "danger", |
|||
key: "cancel" |
|||
}, |
|||
config:{ |
|||
textAlign: "center" |
|||
}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 14:34:15 |
|||
@ 功能: 保存和提交 |
|||
*/ |
|||
export const submitAndCancelButton = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
span: 24, |
|||
textAlign: "center" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "保存", |
|||
type: "primary", |
|||
key: "submit" |
|||
}, |
|||
config:{ |
|||
span: 0 |
|||
}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
}, |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "返回", |
|||
type: "danger", |
|||
key: "cancel" |
|||
}, |
|||
config:{ |
|||
span: 0 |
|||
}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
@ -0,0 +1,46 @@ |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 10:00:17 |
|||
@ 功能: 通用ID |
|||
*/ |
|||
export interface shareId{ |
|||
id: string|number; |
|||
} |
|||
/** |
|||
@ 作者?: 秦东 |
|||
@ 时间: 2024-03-06 16:24:01 |
|||
@ 功能: 搜索自定义表单分组条件 |
|||
*/ |
|||
export interface fromGroupSearch { |
|||
name?:string; |
|||
orgid?:string; |
|||
superior?:string; |
|||
state?:number; |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 10:01:23 |
|||
@ 功能: 表单分组内容 |
|||
*/ |
|||
export interface fromGroupInfo { |
|||
title?:string; |
|||
icon?:string; |
|||
sort?:number; |
|||
ordid?:string; |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 10:03:05 |
|||
@ 功能: 编辑表单分组内容 |
|||
*/ |
|||
export interface editFromGroupInfo extends fromGroupInfo { |
|||
id: string|number; |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 10:03:05 |
|||
@ 功能: 编辑表单分组状态 |
|||
*/ |
|||
export interface editFromGroupState extends shareId { |
|||
status: number; |
|||
} |
|||
|
After Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,948 @@ |
|||
@charset "UTF-8"; |
|||
.design-container { |
|||
margin: 10px !important; |
|||
display: flex; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.components-list { |
|||
width: 250px; |
|||
padding: 8px 0; |
|||
overflow-y: auto; |
|||
height: calc(100vh - 40px); |
|||
position: relative; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.components-list .title { |
|||
padding: 8px 12px; |
|||
position: relative; |
|||
} |
|||
|
|||
.components-list .title .template { |
|||
position: absolute; |
|||
right: 12px; |
|||
top: 0; |
|||
padding: 8px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.components-list ul { |
|||
position: relative; |
|||
overflow: hidden; |
|||
padding: 0 10px 10px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.components-list ul li { |
|||
font-size: 13px; |
|||
display: flex; |
|||
width: 48%; |
|||
line-height: 28px; |
|||
position: relative; |
|||
float: left; |
|||
left: 0; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
margin: 0 1% 5px; |
|||
color: #333; |
|||
padding: 0 10px; |
|||
border: 1px solid transparent; |
|||
background: #f4f6fc; |
|||
user-select: none; |
|||
align-items: center; |
|||
} |
|||
|
|||
.components-list ul li i { |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.components-list ul li:hover { |
|||
color: #66b1ff; |
|||
border: 1px dashed #66b1ff; |
|||
cursor: move; |
|||
} |
|||
|
|||
.components-list ul li.title { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.components-list .content { |
|||
margin-left: 12px; |
|||
} |
|||
|
|||
.use-template { |
|||
position: absolute; |
|||
left: -100%; |
|||
top: 0; |
|||
width: 100%; |
|||
bottom: 0; |
|||
background: #fff; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.use-template.active { |
|||
animation: templateAni .5s forwards; |
|||
} |
|||
|
|||
.use-template .close { |
|||
position: absolute; |
|||
right: 5px; |
|||
top: 5px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.use-template .list { |
|||
padding: 30px 10px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.use-template .list .item { |
|||
box-shadow: 0 0 4px rgba(0, 21, 41, 0.1); |
|||
padding: 10px; |
|||
text-align: center; |
|||
transition: all .5s; |
|||
cursor: pointer; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.use-template .list .item img { |
|||
display: block; |
|||
width: 100%; |
|||
margin: 0 auto 10px; |
|||
} |
|||
|
|||
.use-template .list .item:hover { |
|||
box-shadow: 0 0 4px rgba(0, 21, 41, 0.25); |
|||
} |
|||
|
|||
.use-template .no-date { |
|||
text-align: center; |
|||
padding-top: 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
@keyframes templateAni { |
|||
100% { |
|||
opacity: 1; |
|||
left: 0; |
|||
} |
|||
} |
|||
|
|||
.main-body { |
|||
flex: 2; |
|||
border-left: 1px solid #e0e0e0; |
|||
border-right: 1px solid #e0e0e0; |
|||
margin: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.main-body .empty-tips { |
|||
text-align: center; |
|||
width: 100%; |
|||
font-size: 20px; |
|||
color: #ccc; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 100px; |
|||
} |
|||
|
|||
.main-body .main-form { |
|||
background: #fff; |
|||
border: 1px dashed #999; |
|||
margin: 10px; |
|||
height: calc(100vh - 105px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.main-tools { |
|||
line-height: 26px; |
|||
border-bottom: 2px solid #e4e7ed; |
|||
margin-right: 10px; |
|||
padding: 8px 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.main-tools button { |
|||
color: #66b1ff; |
|||
} |
|||
|
|||
.main-tools button i { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.add-form { |
|||
padding: 0px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.add-form .form-row .form-col.active-col { |
|||
border: 3px solid #66b1ff; |
|||
position: relative; |
|||
} |
|||
|
|||
.add-form .form-row .form-col.active-col > .drag-control { |
|||
display: block; |
|||
} |
|||
|
|||
.add-form .form-row .form-col.active-col > .tooltip { |
|||
display: block; |
|||
} |
|||
|
|||
.add-form .title { |
|||
border-bottom: 1px solid #ddd; |
|||
font-weight: 700; |
|||
font-size: 14px; |
|||
height: 30px; |
|||
padding: 0 5px; |
|||
margin-bottom: 22px; |
|||
} |
|||
|
|||
.add-form .form-tabs .drag { |
|||
min-height: 80px; |
|||
} |
|||
|
|||
.add-form .group-card .el-collapse { |
|||
border: 0; |
|||
} |
|||
|
|||
.add-form .group-card .el-collapse-item__header { |
|||
font-weight: 700; |
|||
border-bottom: 1px solid #ddd; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.add-form .group-card .el-collapse-item__wrap { |
|||
border: 0; |
|||
} |
|||
|
|||
.add-form .group-inputSlot { |
|||
display: none; |
|||
} |
|||
|
|||
.add-form .form-table { |
|||
margin-bottom: 22px; |
|||
} |
|||
|
|||
.add-form .form-table .drag { |
|||
border: 0; |
|||
display: flex; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
padding: 0; |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
.add-form .form-table .drag > div { |
|||
min-width: 150px; |
|||
width: auto; |
|||
} |
|||
|
|||
.add-form .form-table .el-form-item { |
|||
display: block; |
|||
} |
|||
|
|||
.add-form .table-btn { |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.add-form .el-collapse-item__content { |
|||
padding-bottom: 5px; |
|||
} |
|||
|
|||
.add-form .form-table-add .el-form-item__label { |
|||
display: none; |
|||
} |
|||
|
|||
.add-form .form-table-add .el-form-item { |
|||
margin: 0; |
|||
} |
|||
|
|||
.add-form .form-table-add .el-table .cell { |
|||
overflow: inherit; |
|||
} |
|||
|
|||
.add-form .form-table-add .el-table .cell .el-form-item__error { |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.add-form .gray { |
|||
color: #999; |
|||
} |
|||
|
|||
.add-form > .drag { |
|||
border: 0 !important; |
|||
} |
|||
|
|||
.add-form .group-flex .flex-group { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.add-form .group-flex .flex-group button { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.add-form .group-flex .flex-item { |
|||
flex: 2; |
|||
} |
|||
|
|||
.add-form .group-txt { |
|||
margin-bottom: 18px; |
|||
} |
|||
|
|||
.add-form .div-layout { |
|||
/*&.inline { |
|||
.drag {display: inline-flex} |
|||
.group {width: auto;margin-right: 10px} |
|||
}*/ |
|||
} |
|||
|
|||
.add-form .div-layout.right .drag { |
|||
text-align: right; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.add-form .div-layout.center .drag { |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.add-form .el-select { |
|||
width: 100%; |
|||
} |
|||
|
|||
.add-form .el-select .el-input__wrapper .el-input__suffix { |
|||
position: absolute; |
|||
right: 10px; |
|||
} |
|||
|
|||
.add-form .group { |
|||
width: 100%; |
|||
} |
|||
|
|||
.add-form .drag { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.add-form.form-row-2 .group { |
|||
width: 50%; |
|||
} |
|||
|
|||
.add-form.form-row-3 .group { |
|||
width: 33%; |
|||
} |
|||
|
|||
.add-form.form-row-4 .group { |
|||
width: 25%; |
|||
} |
|||
|
|||
.sidebar-tools { |
|||
width: 300px; |
|||
right: 0; |
|||
top: 0; |
|||
overflow-y: auto; |
|||
box-sizing: border-box; |
|||
padding-bottom: 10px; |
|||
bottom: 0; |
|||
height: calc(100vh - 40px); |
|||
} |
|||
|
|||
.sidebar-tools .form .el-form-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.sidebar-tools .h3 { |
|||
font-size: 14px; |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.sidebar-tools .h3 h3 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.sidebar-tools .el-tabs__nav-wrap { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.sidebar-tools .el-tabs__content { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.sidebar-tools .icon-del { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.sidebar-tools .option-radio > label { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.sidebar-tools .event-btn button { |
|||
margin: 0 12px 5px 0; |
|||
} |
|||
|
|||
#editJson, #editJsonCopy { |
|||
width: 100%; |
|||
height: calc(100vh - 65px); |
|||
} |
|||
|
|||
#editJsonCopy { |
|||
height: calc(100vh - 350px); |
|||
} |
|||
|
|||
.ace-dialog { |
|||
background: #1e1e1e; |
|||
} |
|||
|
|||
.ace-dialog .el-drawer__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.ace-dialog .el-drawer__header { |
|||
margin: 0; |
|||
color: #e9e9e9; |
|||
font-size: 12px; |
|||
padding: 3px 10px; |
|||
} |
|||
|
|||
.ace-dialog .dialog-footer { |
|||
text-align: center; |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.export-dialog .el-dialog__body { |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
.design-form { |
|||
min-height: calc(100vh - 170px); |
|||
} |
|||
|
|||
.design-form > div { |
|||
height: 100%; |
|||
} |
|||
|
|||
.design-form > .drag { |
|||
min-height: calc(100vh - 170px) !important; |
|||
} |
|||
|
|||
.design-form .ghost { |
|||
background: #F56C6C; |
|||
border: 2px solid #F56C6C; |
|||
outline-width: 0; |
|||
height: 3px; |
|||
box-sizing: border-box; |
|||
font-size: 0; |
|||
content: ''; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.design-form .group { |
|||
border: 1px dashed #ddd; |
|||
margin: 2px 0px 10px 0px; |
|||
padding: 5px; |
|||
position: relative; |
|||
min-height: 50px; |
|||
} |
|||
|
|||
.design-form .group.active { |
|||
border: 3px solid #66b1ff; |
|||
position: relative; |
|||
} |
|||
|
|||
.design-form .group.active > .drag-control { |
|||
display: block; |
|||
} |
|||
|
|||
.design-form .group.active > .tooltip { |
|||
display: block; |
|||
} |
|||
|
|||
.design-form .group:hover { |
|||
border-color: #66b1ff; |
|||
background: #ecf5ff; |
|||
} |
|||
|
|||
.design-form .group > div { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.design-form .group:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
z-index: 1; |
|||
display: block; |
|||
} |
|||
|
|||
.design-form .group.group-grid:after, .design-form .group.group-tabs:after, .design-form .group.group-card:after, .design-form .group.group-flex:after, .design-form .group.group-div:after, .design-form .group.group-table:after { |
|||
display: none; |
|||
} |
|||
|
|||
.design-form .group-inputSlot { |
|||
border-color: #eebe77; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.design-form .group-inputSlot:hover, .design-form .group-inputSlot.active { |
|||
border-color: #eebe77 !important; |
|||
} |
|||
|
|||
.design-form .tooltip { |
|||
display: none; |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 5; |
|||
} |
|||
|
|||
.design-form .drag-control { |
|||
display: none; |
|||
} |
|||
|
|||
.design-form .drag-control .item-control { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 24px; |
|||
background: #66b1ff; |
|||
} |
|||
|
|||
.design-form .drag-control .item-control i { |
|||
width: 24px; |
|||
height: 24px; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.design-form .drag-control .drag-move { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 2; |
|||
width: 24px; |
|||
height: 24px; |
|||
background: #66b1ff; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 24px; |
|||
cursor: move; |
|||
} |
|||
|
|||
.design-form .drag { |
|||
height: 100%; |
|||
border: 1px dashed #ddd; |
|||
min-height: 40px; |
|||
margin: 0 2px; |
|||
padding: 5px; |
|||
align-content: flex-start; |
|||
} |
|||
|
|||
.design-form.form-row-2 .group { |
|||
width: 48%; |
|||
} |
|||
|
|||
.design-form.form-row-3 .group { |
|||
width: 32%; |
|||
} |
|||
|
|||
.design-form.form-row-4 .group { |
|||
width: 23%; |
|||
} |
|||
|
|||
.detail-form { |
|||
min-height: calc(100vh - 170px); |
|||
} |
|||
|
|||
.detail-form > div { |
|||
height: 100%; |
|||
} |
|||
|
|||
.detail-form > .drag { |
|||
min-height: calc(100vh - 170px) !important; |
|||
} |
|||
|
|||
.detail-form .ghost { |
|||
background: #F56C6C; |
|||
border: 2px solid #F56C6C; |
|||
outline-width: 0; |
|||
height: 3px; |
|||
box-sizing: border-box; |
|||
font-size: 0; |
|||
content: ''; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.detail-form .group { |
|||
border: 0px dashed #ddd; |
|||
margin: 2px 0px 10px 0px; |
|||
padding: 5px; |
|||
position: relative; |
|||
min-height: 50px; |
|||
} |
|||
|
|||
.detail-form .group > div { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.detail-form .group-inputSlot { |
|||
border-color: #eebe77; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.detail-form .group-inputSlot:hover, .detail-form .group-inputSlot.active { |
|||
border-color: #eebe77 !important; |
|||
} |
|||
|
|||
.detail-form .tooltip { |
|||
display: none; |
|||
position: absolute; |
|||
font-size: 12px; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 5; |
|||
} |
|||
|
|||
.detail-form .drag-control { |
|||
display: none; |
|||
} |
|||
|
|||
.detail-form .drag-control .item-control { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 24px; |
|||
background: #66b1ff; |
|||
} |
|||
|
|||
.detail-form .drag-control .item-control i { |
|||
width: 24px; |
|||
height: 24px; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.detail-form .drag-control .drag-move { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 2; |
|||
width: 24px; |
|||
height: 24px; |
|||
background: #66b1ff; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 24px; |
|||
cursor: move; |
|||
} |
|||
|
|||
.detail-form .drag { |
|||
height: 100%; |
|||
border: 0px dashed #ddd; |
|||
min-height: 40px; |
|||
margin: 0 2px; |
|||
padding: 5px; |
|||
align-content: flex-start; |
|||
} |
|||
|
|||
.detail-form.form-row-2 .group { |
|||
width: 48%; |
|||
} |
|||
|
|||
.detail-form.form-row-3 .group { |
|||
width: 32%; |
|||
} |
|||
|
|||
.detail-form.form-row-4 .group { |
|||
width: 23%; |
|||
} |
|||
|
|||
/*表格设计*/ |
|||
.design-table .main-body { |
|||
border-left: 0; |
|||
} |
|||
|
|||
.design-table .header { |
|||
position: relative; |
|||
} |
|||
|
|||
.design-table .header .field { |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 7px; |
|||
display: flex; |
|||
} |
|||
|
|||
.design-table .components-list .content { |
|||
padding: 0 12px; |
|||
} |
|||
|
|||
.design-table .components-list .content > div { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.design-table .components-list .content > div label { |
|||
margin: 0 10px 8px 0 !important; |
|||
} |
|||
|
|||
.design-table .main-table { |
|||
padding: 10px 20px; |
|||
} |
|||
|
|||
.design-table .main-table .add-form { |
|||
min-height: auto; |
|||
display: flex; |
|||
} |
|||
|
|||
.design-table .main-table .add-form > .drag { |
|||
height: auto; |
|||
min-height: auto !important; |
|||
} |
|||
|
|||
.design-table .main-table .el-divider { |
|||
margin: 8px 0 0; |
|||
} |
|||
|
|||
.design-table .main-table .table-tip { |
|||
color: #999; |
|||
padding: 30px 0; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.design-table .main-table .search-box { |
|||
position: relative; |
|||
} |
|||
|
|||
.design-table .main-table .search-box:after { |
|||
content: ''; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
z-index: 2; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.design-table .main-table .search-box .group { |
|||
width: auto; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.design-table .main-table .control-btn { |
|||
padding: 10px 0; |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.design-table .main-table .tip { |
|||
border: 1px dotted #ddd; |
|||
padding: 3px 5px; |
|||
border-radius: 5px; |
|||
color: #999; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.design-table .main-table .el-table__header th .cell { |
|||
position: relative; |
|||
} |
|||
|
|||
.design-table .main-table .el-table__header th .icon-close { |
|||
display: none; |
|||
font-size: 12px; |
|||
margin-left: 12px; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
} |
|||
|
|||
.design-table .main-table .el-table__header th:hover .icon-close { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.design-table .table-tag .el-form-item__content { |
|||
display: flex; |
|||
} |
|||
|
|||
.design-table .table-tag .el-form-item__content > div { |
|||
flex: 2; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.table-field-list h3 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.table-field-list .item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.table-field-list .list { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.table-field-list .list label { |
|||
width: 25%; |
|||
margin: 0; |
|||
} |
|||
|
|||
.table-list-comm { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.table-list-comm .tree-sidebar { |
|||
width: 180px; |
|||
border-right: 1px solid #ddd; |
|||
padding-right: 10px; |
|||
margin-right: 10px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.table-list-comm .tree-sidebar .el-input { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.table-list-comm .table-list { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-list-comm .table-main { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.table-list-comm .table-main.hide-vertical-scroll .el-scrollbar__wrap { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.table-list-comm .table-main.hide-vertical-scroll .is-vertical { |
|||
display: none !important; |
|||
} |
|||
|
|||
.table-list-comm .table-main .table-operate-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.table-list-comm .table-search { |
|||
position: relative; |
|||
} |
|||
|
|||
.table-list-comm .table-search form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-bottom: 0; |
|||
border-bottom: 1px solid #dcdfe6; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.table-list-comm .table-search .drag { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.table-list-comm .table-search .drag > div { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.table-list-comm .table-search .group { |
|||
width: auto; |
|||
} |
|||
|
|||
.table-list-comm .table-search .search-icon { |
|||
margin-left: 10px; |
|||
height: 30px; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.table-list-comm .table-search .autoHeight-enter-active, |
|||
.table-list-comm .table-search .autoHeight-leave-active { |
|||
max-height: 200px; |
|||
transition: all .6s; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.table-list-comm .table-search .autoHeight-enter-from, |
|||
.table-list-comm .table-search .autoHeight-leave-to { |
|||
max-height: 0; |
|||
} |
|||
|
|||
.table-list-comm .control-btn { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
/*图片文件上传*/ |
|||
.upload-style .limit .el-upload { |
|||
display: none; |
|||
} |
|||
|
|||
.upload-style .el-upload-list__item-preview { |
|||
display: none !important; |
|||
} |
|||
|
|||
.upload-style .el-upload--picture .icon-plus { |
|||
font-size: 28px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #8c939d; |
|||
width: 148px; |
|||
height: 148px; |
|||
border: 1px dashed #d9d9d9; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
background: #fbfdff; |
|||
} |
|||
|
|||
/*分页*/ |
|||
.table-page { |
|||
padding-top: 10px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,60 @@ |
|||
|
|||
|
|||
/** |
|||
* 获取storage |
|||
* @param key 保存时的key |
|||
* @param hour 如果保存时使用了时间，则需要传true |
|||
* @param expired 指定已过期时返回的值，过期默认返回undefined |
|||
*/ |
|||
export const getStorage = (key: string, hour?: boolean, expired?: string) => { |
|||
let data: any |
|||
if (hour) { |
|||
data = window.localStorage.getItem(key) |
|||
try { |
|||
data = JSON.parse(data) |
|||
if (typeof data === 'object' && data.__value && data.__time) { |
|||
// 使用了时间的
|
|||
// 在当前时间后，表示没过期
|
|||
if (new Date().getTime() < data.__time) { |
|||
data = data.__value |
|||
} else { |
|||
// 过期了
|
|||
data = expired || undefined |
|||
} |
|||
} |
|||
} catch (e) { |
|||
/* empty */ |
|||
} |
|||
} else { |
|||
//保存时没传时间的，存在session里
|
|||
data = window.sessionStorage.getItem(key) |
|||
} |
|||
try { |
|||
return JSON.parse(data) |
|||
} catch (e) { |
|||
return data |
|||
} |
|||
} |
|||
/** 设置 localStorage 添加对时间的控制，hour单位为小时 |
|||
* hour空时使用原始sessionStorage(key,value)，即关闭浏览器过期 |
|||
* hour=0时，使用localStorage，即永不过期 |
|||
* hour>0时localStorage添加时间控制 |
|||
* */ |
|||
export function setStorage(key: string, data: any, hour?: number | null): void { |
|||
let newData = data |
|||
if (typeof data === 'object') { |
|||
newData = JSON.stringify(data) |
|||
} |
|||
if (hour === 0) { |
|||
window.localStorage.setItem(key, newData) |
|||
} else if (hour && hour > 0) { |
|||
const now = new Date() |
|||
const valueDate: string = JSON.stringify({ |
|||
__value: data, |
|||
__time: now.setSeconds(now.getSeconds() + hour * 3600) |
|||
}) |
|||
window.localStorage.setItem(key, valueDate) |
|||
} else { |
|||
window.sessionStorage.setItem(key, newData) |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 11:44:26 |
|||
@ 备注: 低代码表单分组管理 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { fromGroupSearch } from "@/api/DesignForm/gromGroup/types.ts"; |
|||
import { groupStateAry } from "@/api/DesignForm/gromGroup/data.ts"; |
|||
const searchArg =reactive<fromGroupSearch>({}) |
|||
const queryFormRef = ref(ElForm); |
|||
const loading = ref(false) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 16:39:41 |
|||
@ 功能: 执行搜索 |
|||
*/ |
|||
const searchRun = () => { |
|||
|
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 16:46:04 |
|||
@ 功能: 重置查询条件 |
|||
*/ |
|||
function resetQuery() { |
|||
queryFormRef.value.resetFields(); |
|||
searchRun(); |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="app-container"> |
|||
|
|||
<el-affix :offset="120"> |
|||
<el-button type="primary">Offset top 120px</el-button> |
|||
</el-affix> |
|||
|
|||
<!--搜索区域--> |
|||
<div class="search leftAndRight"> |
|||
<el-form ref="queryFormRef" :model="searchArg" :inline="true"> |
|||
<el-form-item label="分组名称" prop="keywords"> |
|||
<el-input |
|||
v-model="searchArg.name" |
|||
placeholder="请输入分组名称" |
|||
clearable |
|||
@keyup.enter="searchRun" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="状态" prop="keywords"> |
|||
<el-select v-model="searchArg.state" placeholder="请选择分组状态" clearable> |
|||
<el-option |
|||
v-for="item in groupStateAry" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="searchRun"> |
|||
<template #icon><i-ep-search /></template>搜索 |
|||
</el-button> |
|||
<el-button @click="resetQuery"> |
|||
<template #icon><i-ep-refresh /></template>重置 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div> |
|||
<el-form> |
|||
<el-form-item> |
|||
<el-button type="warning" > |
|||
<template #icon><i-ep-plus /></template>新增 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.leftAndRight{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right:10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-06 11:43:49 |
|||
@ 备注: 表单列表 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type"; |
|||
import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi' |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 08:59:37 |
|||
@ 功能: 引入组件页面 |
|||
*/ |
|||
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue" |
|||
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue" |
|||
|
|||
const contbody = ref() //实例化内容容器 |
|||
const addFormIsShow = ref(false) |
|||
const addFormGroupIsShow = ref(false) |
|||
const drawerWith = ref(); //编辑表单时抽屉宽度 |
|||
const formKey = ref<string>("") //表单标识 |
|||
const groupKey = ref<string>("") //分组标识 |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 09:06:32 |
|||
@ 功能: 选择添加项目 |
|||
*/ |
|||
const handleCommand = (command: string) => { |
|||
// ElMessage(`click on item ${command}`) |
|||
if (command == "addForm"){ |
|||
formKey.value = "" |
|||
// addFormIsShow.value = true |
|||
drawerWith.value = contbody.value?.clientWidth |
|||
addFormIsShow.value = true; |
|||
|
|||
}else{ |
|||
addFormGroupIsShow.value = true |
|||
drawerWith.value = 400 |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 09:06:44 |
|||
@ 功能: 刷新页面 |
|||
*/ |
|||
const refreshPage = (pageType:string) =>{ |
|||
if(pageType == "formPage"){ |
|||
addFormIsShow.value = false; |
|||
}else{ |
|||
addFormGroupIsShow.value = false; |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div ref="contbody" class="box_content"> |
|||
|
|||
<el-affix :offset="100" class="affix_box"> |
|||
<el-dropdown @command="handleCommand"> |
|||
<el-button type="primary" class="fa fa-plus" circle ></el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item command="addForm">创建新表单</el-dropdown-item> |
|||
<el-dropdown-item command="addFormGroup">创建表单分组</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</el-affix> |
|||
|
|||
|
|||
<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" :form-key="formKey" @refreshPage="refreshPage" /> |
|||
<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerWith" :group-key="groupKey" @refreshPage="refreshPage" /> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.box_content{ |
|||
width: 100%; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.affix_box{ |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,223 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 08:58:58 |
|||
@ 备注: 表单分组 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { fromGroupSearch,fromGroupInfo,editFromGroupInfo } from "@/api/DesignForm/gromGroup/types"; |
|||
import { gainFormGroupInfo,addCustomerFormGroup } from "@/api/DesignForm/gromGroup/api"; |
|||
|
|||
|
|||
|
|||
const props = defineProps({ |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
groupKey:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const emits = defineEmits(["refreshPage"]); |
|||
const drawerOpenClose = ref(true) |
|||
const formGroupContent = reactive<fromGroupInfo>({ |
|||
title:"", |
|||
icon:"", |
|||
ordid:"", |
|||
sort:50 |
|||
}) |
|||
const ruleFormGroup = ref(ElForm) |
|||
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址 |
|||
const butLoading = ref(false) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:13:08 |
|||
@ 功能: 表单验证规则 |
|||
*/ |
|||
const rules = reactive<FormRules<RuleForm>>({ |
|||
title: [ |
|||
{ required: true, message: '分组名称不能为空', trigger: 'blur' }, |
|||
{ min: 1, max: 50, message: '名称长度为1-50个字符', trigger: 'blur' }, |
|||
], |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 09:55:53 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = (done: () => void) => { |
|||
if(formGroupContent.title != "" || formGroupContent.icon != "" || formGroupContent.sort != 50 || formGroupContent.ordid != ""){ |
|||
ElMessageBox.confirm('编辑好的数据是否提交?') |
|||
.then(() => { |
|||
// done() |
|||
submitForm(); |
|||
}) |
|||
.catch(() => { |
|||
// catch error |
|||
emits("refreshPage","formPageGroup"); |
|||
}); |
|||
}else{ |
|||
emits("refreshPage","formPageGroup"); |
|||
} |
|||
|
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:51:28 |
|||
@ 功能: 提交数据 |
|||
*/ |
|||
const submitForm = () => { |
|||
butLoading.value = true; |
|||
ruleFormGroup.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
addCustomerFormGroup(formGroupContent) |
|||
.then((data) =>{ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
closeFormGroupBox(); |
|||
}) |
|||
.finally(() =>{ |
|||
butLoading.value = false; |
|||
}); |
|||
}else{ |
|||
butLoading.value = false; |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:30:15 |
|||
@ 功能: 检查图片上传 |
|||
*/ |
|||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => { |
|||
console.log("检查图片上传---1--->",rawFile.type) |
|||
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' ) { |
|||
ElMessage.error('Avatar picture must be JPG format!') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:30:43 |
|||
@ 功能: 上传成功 |
|||
*/ |
|||
const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile,uploadFiles) => { |
|||
// console.log("上传后数据---1--->",response) |
|||
// console.log("上传后数据---2--->",uploadFile) |
|||
// console.log("上传后数据----3-->",uploadFiles) |
|||
|
|||
// console.log("上传后数据----4-->",response.url) |
|||
// console.log("上传后数据----5-->",URL.createObjectURL(uploadFile.raw!)) |
|||
// formGroupContent.icon = URL.createObjectURL(uploadFile.raw!) |
|||
formGroupContent.icon = response.data.url |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:44:06 |
|||
@ 功能: 关闭抽屉 |
|||
*/ |
|||
const closeFormGroupBox = () => { |
|||
emits("refreshPage","formPageGroup"); |
|||
initializeData(); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 11:45:08 |
|||
@ 功能: 初始化数据 |
|||
*/ |
|||
const initializeData = () => { |
|||
formGroupContent.title="" |
|||
formGroupContent.icon="" |
|||
formGroupContent.sort=50 |
|||
formGroupContent.ordid="" |
|||
ruleFormGroup.value.resetFields(); |
|||
} |
|||
onMounted(()=>{ |
|||
if(props.groupKey != "") { |
|||
gainFormGroupInfo({id: props.groupKey}) |
|||
.then(({data})=>{ |
|||
console.log("编辑表单分组",data); |
|||
formGroupContent.title=data.title |
|||
formGroupContent.icon=data.icon |
|||
formGroupContent.sort=data.sort |
|||
formGroupContent.ordid=data.ordid |
|||
}) |
|||
} |
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="drawerOpenClose" |
|||
title="编辑表单分组" |
|||
:before-close="handleClose" |
|||
class="drawerGroupClass" |
|||
> |
|||
<div class="formGroupBox"> |
|||
<el-form ref="ruleFormGroup" :model="formGroupContent" :rules="rules" label-width="auto" style="max-width: 600px"> |
|||
<el-form-item label="分组名称" prop="title"> |
|||
<el-input v-model="formGroupContent.title" /> |
|||
</el-form-item> |
|||
<el-form-item label="排序"> |
|||
<el-input-number v-model="formGroupContent.sort" controls-position="right" /> |
|||
</el-form-item> |
|||
<el-form-item label="封面"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="imgUploadApiUrl" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="formGroupContent.icon" :src="formGroupContent.icon" class="avatar" /> |
|||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|||
</el-upload> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
</div> |
|||
<template #footer> |
|||
<div style="flex: auto"> |
|||
<el-button type="primary" :loading="butLoading" @click="submitForm()">提交</el-button> |
|||
<el-button @click="closeFormGroupBox">取消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-drawer> |
|||
</template> |
|||
<style scoped> |
|||
.avatar-uploader .avatar { |
|||
width: 178px; |
|||
height: 178px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
<style lang='scss' scoped> |
|||
.formGroupBox{ |
|||
padding: 0 10px; |
|||
} |
|||
</style> |
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 178px; |
|||
height: 178px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 08:58:23 |
|||
@ 备注: 编辑表单页面 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { formStruct } from '@/api/DesignForm/types' |
|||
import { customerFormConfig } from "@/api/DesignForm/type"; |
|||
import { getProductionMarkForm } from '@/api/DesignForm/requestapi' |
|||
// import PageDesign from "@/views/sysworkflow/lowcodepage/pageDesign.vue" |
|||
import PageDesignEs from "@/views/sysworkflow/lowcodepage/pageDesignes.vue" |
|||
import WorkFlow from "@/views/sysworkflow/lowcodepage/workFlow.vue" |
|||
|
|||
|
|||
|
|||
const props = defineProps({ |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:true |
|||
}, |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}); |
|||
const formConfigCont = reactive<customerFormConfig>({ |
|||
formName:"", |
|||
formlogo:"" |
|||
}) |
|||
const loading = ref(false) |
|||
const pageDesignIsWrite = ref(true); |
|||
const emits = defineEmits(["refreshPage"]); |
|||
const drawerOpenOrClose = ref(true); |
|||
const tabsActive = ref(1); |
|||
const creetTabsActive = ref(1); |
|||
|
|||
const route: any = useRoute().query || {} |
|||
const state = reactive<formStruct>({ |
|||
formData: { |
|||
list: [], |
|||
form: { |
|||
size: 'default', |
|||
name:'', |
|||
formName: formConfigCont.formName |
|||
}, |
|||
config: {}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
}, |
|||
editor: {}, |
|||
loading: false, |
|||
formDataPreview: {}, |
|||
previewVisible: false, // 预览窗口 |
|||
designType: route.type, // 当前页面设计类型，有效值search |
|||
formDict: {}, |
|||
formOtherData: { |
|||
source: route.source || '', |
|||
formName: formConfigCont.formName |
|||
} |
|||
}) |
|||
|
|||
|
|||
const judgeFormIsEdit = (val:boolean) => { |
|||
pageDesignIsWrite.value = val; |
|||
} |
|||
|
|||
const handleClick = (tab: TabsPaneContext, event: Event) =>{ |
|||
console.log(tabsActive.value,tab.paneName, event) |
|||
switch (tab.paneName) { |
|||
case 2: |
|||
if (creetTabsActive.value != 2){ |
|||
if(PreOperation()){ |
|||
creetTabsActive.value = tab.paneName |
|||
} |
|||
} |
|||
break; |
|||
case 3: |
|||
if (creetTabsActive.value != 3){ |
|||
PreOperation() |
|||
} |
|||
break; |
|||
case 4: |
|||
if (creetTabsActive.value != 4){ |
|||
PreOperation() |
|||
} |
|||
break; |
|||
default: |
|||
|
|||
break; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 13:42:24 |
|||
@ 功能: 判断tabs要执行得前置操作 |
|||
*/ |
|||
const PreOperation = () =>{ |
|||
switch (creetTabsActive.value) { |
|||
case 2: |
|||
|
|||
break; |
|||
case 3: |
|||
|
|||
break; |
|||
case 4: |
|||
|
|||
break; |
|||
default: |
|||
// if(pageDesignIsWrite.value){ |
|||
// ElMessageBox.alert('你设置的表单还未保存！', '温馨提示！', { |
|||
// confirmButtonText: 'OK', |
|||
// callback: (action: Action) => { |
|||
// tabsActive.value = 1 |
|||
// } |
|||
// }); |
|||
// }else{ |
|||
// creetTabsActive.value = tabsActive.value |
|||
// } |
|||
return true; |
|||
break; |
|||
} |
|||
} |
|||
const closeFormPage = () => { |
|||
emits("refreshPage","formPage"); |
|||
|
|||
} |
|||
onBeforeMount(() => { |
|||
getProductionMarkForm() |
|||
.then(({data})=>{ |
|||
formConfigCont.formlogo = data.formlogo |
|||
formConfigCont.formName = data.formname |
|||
state.formData.form.name = data.formlogo |
|||
state.formData.form.formName = data.formname |
|||
state.formOtherData.formName = data.formname |
|||
}) |
|||
.finally(()=>{ |
|||
|
|||
}) |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 08:44:43 |
|||
@ 功能: 执行下一个窗口 |
|||
*/ |
|||
const runNextWindows = (val:number) => { |
|||
creetTabsActive.value = val |
|||
tabsActive.value = val |
|||
} |
|||
|
|||
</script> |
|||
<template> |
|||
<div class="drawerClass"> |
|||
<el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> |
|||
<el-tabs v-model="tabsActive" @tab-click="handleClick" stretch class="tabsMain"> |
|||
<el-tab-pane label="页面设计" :name="1"> |
|||
<PageDesignEs v-model:state="state" :form-key="props.formKey" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="流程设计" :name="2"> |
|||
<WorkFlow v-model:state="state" :form-key="props.formKey" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="列表设计" :name="3"></el-tab-pane> |
|||
<el-tab-pane label="页面设置" :name="4"></el-tab-pane> |
|||
</el-tabs> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.drawerClass{ |
|||
::v-deep .el-tabs__header{ |
|||
margin: 0px; |
|||
} |
|||
::v-deep .el-drawer__body{ |
|||
padding: 0; |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
<style> |
|||
::v-deep |
|||
|
|||
</style> |
|||
@ -0,0 +1,743 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 13:21:52 |
|||
@ 备注: 页面设计 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import '@/assets/scss/element-var.scss' |
|||
import '@/assets/scss/index.scss' |
|||
import '@/assets/iconfont/iconfont.css' |
|||
import 'element-plus/dist/index.css' |
|||
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { getRequest } from '@/api/DesignForm' |
|||
import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils' |
|||
import { ref, reactive, provide, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { useLayoutStore } from '@/store/DesignForm/layout' |
|||
import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types' |
|||
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|||
import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion,judgeSubmitCancel } from '@/api/DesignForm/requestapi' |
|||
import { submitAndCancelButton,cancelButton,submitButton } from "@/api/DesignForm/gromGround/data"; |
|||
|
|||
|
|||
//引入页面 |
|||
import DragControl from '@/components/DesignForm/dragControl.vue'; |
|||
import HeadTools from '@/components/DesignForm/public/headTools.vue'; |
|||
// import HeadTools from '@/components/DesignForm/public/headToolsNew.vue'; |
|||
import FormDesign from '@/components/DesignForm/public/form/form.vue' |
|||
import VueFile from '@/components/DesignForm/vueFile.vue' |
|||
import AceDrawer from '@/components/DesignForm/aceDrawer.vue' |
|||
|
|||
const props = defineProps({ |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
formconfigcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["judgeFormIsEdit",'closeDrawer','runNextWindows']); |
|||
const isSave = ref(false) |
|||
const versionCont = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|||
const versionId = ref<string>("") //版本号 |
|||
|
|||
const layoutStore = useLayoutStore() |
|||
layoutStore.changeBreadcrumb([{ label: '系统工具' }, { label: '表单设计' }]) |
|||
|
|||
const store = useDesignFormStore() |
|||
const router = useRouter() |
|||
const route: any = useRoute().query || {} |
|||
|
|||
const state = reactive<formStruct>({ |
|||
formData: { |
|||
list: [], |
|||
form: { |
|||
size: 'default', |
|||
name:'', |
|||
formName: props.formconfigcont.formName |
|||
}, |
|||
config: {}, |
|||
styles:{ |
|||
divStyle:{}, |
|||
labelStyle:{}, |
|||
inputStyle:{} |
|||
} |
|||
}, |
|||
editor: {}, |
|||
loading: false, |
|||
formDataPreview: {}, |
|||
previewVisible: false, // 预览窗口 |
|||
designType: route.type, // 当前页面设计类型，有效值search |
|||
formDict: {}, |
|||
formOtherData: { |
|||
source: route.source || '', |
|||
formName: props.formconfigcont.formName |
|||
} |
|||
}) |
|||
const drawer = reactive<DrawerStruct>({ |
|||
visible: false, |
|||
type: '', |
|||
title: '', |
|||
codeType: '', |
|||
direction: undefined, //弹出方向rtl / ltr |
|||
callback: '' |
|||
}) |
|||
const vueFileEl = ref() |
|||
const formControlAttrEl = ref() |
|||
// 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取 |
|||
provide('formDesignType', state.designType) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 16:10:23 |
|||
@ 功能: 按钮操作 |
|||
*/ |
|||
const headToolClick = (type: string) => { |
|||
switch (type) { |
|||
case 'del': |
|||
state.formData.list = [] |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
break |
|||
case 'eye': |
|||
// 打开预览窗口 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
state.previewVisible = true |
|||
// eslint-disable-next-line no-case-declarations |
|||
let stringPreview = objToStringify(state.formData) // 防止预览窗口数据修改影响 |
|||
console.log("预览数据",stringPreview); |
|||
// eslint-disable-next-line no-case-declarations |
|||
const formName = state.formData.form.name |
|||
// eslint-disable-next-line no-case-declarations |
|||
const reg = new RegExp(`get${formName}ControlByName`, 'g') |
|||
stringPreview = stringPreview.replace( |
|||
reg, |
|||
`getPreview${formName}ControlByName` |
|||
) |
|||
state.formDataPreview = stringToObj(stringPreview) |
|||
state.formDataPreview.form.name = `Preview${formName}` // 修改下表单名 |
|||
break |
|||
case 'json': |
|||
// 生成脚本预览 |
|||
openAceEditDrawer({ |
|||
direction: 'rtl', |
|||
content: state.formData, |
|||
title: '可编辑修改或将已生成的脚本粘贴进来' |
|||
}) |
|||
break |
|||
case 'save': |
|||
// saveData(); |
|||
if(props.formid != ""){ |
|||
editSaveData(); |
|||
}else{ |
|||
saveDataNew(); |
|||
} |
|||
break |
|||
case 'branch': |
|||
saveOtherData(); |
|||
break |
|||
case 'vue': |
|||
vueFileEl.value.open(state.formData) |
|||
// emits("update:draweropenclose", false); |
|||
// emits("closeDrawer"); |
|||
emits("runNextWindows",2); |
|||
break |
|||
case 'close': |
|||
console.log("关闭") |
|||
|
|||
if(isSave.value){ |
|||
|
|||
state.formData.list = [] |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
// emits("update:draweropenclose", false); |
|||
emits("closeDrawer"); |
|||
}else{ |
|||
ElMessageBox.confirm('表单已做设计或修改！请问是否保存？','温馨提示！',{ |
|||
confirmButtonText: '保存', |
|||
cancelButtonText: '不保存', |
|||
type: 'warning', |
|||
draggable: true, |
|||
}) |
|||
.then(() => { |
|||
saveDataNew(); |
|||
}) |
|||
.catch(() => { |
|||
state.formData.list = [] |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
// emits("update:draweropenclose", false); |
|||
emits("closeDrawer"); |
|||
}) |
|||
} |
|||
|
|||
break |
|||
} |
|||
} |
|||
// 弹窗确认 |
|||
const dialogConfirm = (editVal: string) => { |
|||
// 生成脚本预览和导入json，都是将编辑器内容更新至state.formData |
|||
try { |
|||
if (typeof drawer.callback === 'function') { |
|||
// callback |
|||
const newObj = |
|||
drawer.codeType === 'json'? string2json(editVal): stringToObj(editVal) |
|||
drawer.callback(newObj) |
|||
} else { |
|||
switch (drawer.type) { |
|||
case 'css': |
|||
// 表单属性－编辑表单样式 |
|||
if (!state.formData.config) { |
|||
state.formData.config = {} |
|||
} |
|||
state.formData.config.style = editVal |
|||
break |
|||
case 'dict': |
|||
state.formDict = string2json(editVal) |
|||
break |
|||
case 'beforeRequest': |
|||
case 'beforeSubmit': |
|||
case 'afterResponse': |
|||
case 'afterSubmit': |
|||
case 'closeSubmit': |
|||
case 'change': |
|||
if (!state.formData.events) { |
|||
state.formData.events = {} |
|||
} |
|||
state.formData.events[drawer.type] = stringToObj(editVal) |
|||
break |
|||
default: |
|||
state.formData = stringToObj(editVal) |
|||
} |
|||
} |
|||
dialogCancel() |
|||
} catch (res) { |
|||
// console.log(res.message) |
|||
//ElMessage.error(res.message) |
|||
} |
|||
} |
|||
//另存为 |
|||
function othenSaveFormCont(){ |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.formData), |
|||
data: objToStringify(state.formData), |
|||
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.formDict) |
|||
} |
|||
state.loading = true |
|||
saveAsNewVersion(params) |
|||
.then((res: any) => { |
|||
// console.log("数据保存", res) |
|||
if(res.code == 0){ |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
.finally(() => { |
|||
state.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.loading = false |
|||
}) |
|||
} |
|||
//编辑 |
|||
const editSaveData = () =>{ |
|||
writeDataFormNwe() |
|||
} |
|||
function writeDataFormNwe(){ |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.formData), |
|||
data: objToStringify(state.formData), |
|||
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.formDict), |
|||
id:props.formid.toString(), |
|||
version:versionId.value.toString(), |
|||
} |
|||
state.loading = true |
|||
editCustomerFormInfo(params) |
|||
.then((res: any) => { |
|||
|
|||
if(res.code == 0){ |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
.finally(() => { |
|||
state.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.loading = false |
|||
}) |
|||
} |
|||
//讲数据保存到服务端(新版) |
|||
const saveDataNew = () => { |
|||
isSave.value = true |
|||
writeDataForm() |
|||
} |
|||
//写入数据 |
|||
function writeDataForm(){ |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.formData), |
|||
data: objToStringify(state.formData), |
|||
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.formDict) |
|||
} |
|||
let apiKey = 'designSave' |
|||
if (route.id) { |
|||
// 编辑状态 当前记录id |
|||
Object.assign(params, { id: route.id }) |
|||
apiKey = 'designEdit' |
|||
} |
|||
// 列表搜索模式下只有修改 |
|||
if (state.designType === 'search') { |
|||
params = { |
|||
data: objToStringify(state.formData), |
|||
dict: json2string(state.formDict), |
|||
id: route.id |
|||
} |
|||
} |
|||
state.loading = true |
|||
|
|||
saveProductionForm(params) |
|||
.then((res: any) => { |
|||
// console.log("数据保存", res) |
|||
if(res.code == 0){ |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
.finally(() => { |
|||
state.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.loading = false |
|||
}) |
|||
|
|||
} |
|||
// 将数据保存在服务端 |
|||
const saveData = () => { |
|||
// 添加校验，没有选择数据源时则必须要配置接口url |
|||
const { addUrl, editUrl, requestUrl } = state.formData.config |
|||
if (!state.formOtherData.source &&(!addUrl || !editUrl || !requestUrl) && tate.designType !== 'search') { |
|||
ElMessage.error('请选择数据源或配置接口url地址，否则表单无法提交保存') |
|||
return |
|||
} |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.formData), |
|||
data: objToStringify(state.formData), |
|||
source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.formDict) |
|||
} |
|||
let apiKey = 'designSave' |
|||
if (route.id) { |
|||
// 编辑状态 当前记录id |
|||
Object.assign(params, { id: route.id }) |
|||
apiKey = 'designEdit' |
|||
} |
|||
// 列表搜索模式下只有修改 |
|||
if (state.designType === 'search') { |
|||
params = { |
|||
data: objToStringify(state.formData), |
|||
dict: json2string(state.formDict), |
|||
id: route.id |
|||
} |
|||
} |
|||
state.loading = true |
|||
getRequest(apiKey, params) |
|||
.then((res: any) => { |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// 根据不同情况跳转到不同地址 |
|||
const path = route.redirect || '/design/form/list' |
|||
const query: any = {} |
|||
if (route.redirect && route.redirect.indexOf('?') !== -1) { |
|||
// 带有问号参数时，放在path传是有问题的，将id=1转为{id:1} |
|||
const p = route.redirect.split('?')[1] |
|||
const pSplit = p.split('&') |
|||
pSplit.forEach((item: string) => { |
|||
const splitItem = item.split('=') |
|||
query[splitItem[0]] = splitItem[1] |
|||
}) |
|||
} |
|||
router.push({ path: path, query: query }) |
|||
state.loading = false |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.loading = false |
|||
}) |
|||
// 清空右侧内容管理菜单存在session的内容，刷新时可重新加载新菜单 |
|||
if (!route.id) { |
|||
// 新增时 |
|||
window.sessionStorage.removeItem('formMenuList') |
|||
} |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
} |
|||
//打开脚本预览 |
|||
const openAceEditDrawer = (params: any) => { |
|||
const { type, direction, codeType, title, callback, content } = params |
|||
drawer.direction = direction // 窗口位置ltr/rtl |
|||
drawer.type = type // 作为窗口唯一标识，在窗口关闭时可根据type作不同处理 |
|||
drawer.codeType = codeType || '' // 显示代码类型 |
|||
drawer.title = title ? `提示：${title}` : '' |
|||
drawer.visible = true |
|||
drawer.callback = callback |
|||
let editData =codeType === 'json'? json2string(content, true): objToStringify(content, true) |
|||
switch (type) { |
|||
case 'css': |
|||
editData = state.formData.config?.style || '' |
|||
break |
|||
case 'dict': |
|||
// 格式化一下 |
|||
editData = json2string(state.formDict, true) |
|||
break |
|||
case 'beforeRequest': |
|||
case 'beforeSubmit': |
|||
case 'afterResponse': |
|||
case 'afterSubmit': |
|||
case 'change': |
|||
// eslint-disable-next-line no-case-declarations |
|||
const beforeData = state.formData.events || {} |
|||
if (beforeData[type]) { |
|||
editData = objToStringify(beforeData[type], true) |
|||
} else { |
|||
if (['afterResponse', 'afterSubmit'].includes(type)) { |
|||
editData = afterResponse |
|||
} else if (type === 'change') { |
|||
editData = onChange |
|||
} else { |
|||
editData = beforeRequest |
|||
} |
|||
} |
|||
break |
|||
// case 'afterResponse': |
|||
// case 'afterSubmit': |
|||
// const newData = state.formData.events || {} |
|||
// if (newData[type]) { |
|||
// editData = objToStringify(newData[type], true) |
|||
// } else { |
|||
// editData = afterResponse |
|||
// } |
|||
// break |
|||
|
|||
case 'optionsParams': |
|||
if (!content) { |
|||
editData = beforeRequest |
|||
} |
|||
break |
|||
case 'optionsResult': |
|||
if (!content) { |
|||
editData = afterResponse |
|||
} |
|||
break |
|||
} |
|||
drawer.content = editData |
|||
} |
|||
const drawerBeforeClose = () => { |
|||
dialogCancel() |
|||
} |
|||
const dialogCancel = () => { |
|||
drawer.visible = false |
|||
drawer.type = '' |
|||
drawer.title = '' |
|||
drawer.codeType = '' |
|||
drawer.callback = '' |
|||
drawer.content = '' |
|||
} |
|||
// 预览窗口提交测试 |
|||
const previewForm = ref() |
|||
const previewSubmit = () => { |
|||
previewForm.value.validate((valid: boolean, fields: any) => { |
|||
if (valid) { |
|||
// alert('校验通过') |
|||
ElMessage.success('校验通过') |
|||
console.log(fields) |
|||
} else { |
|||
// alert('校验不通过') |
|||
// console.log('error submit!', fields) |
|||
ElMessage.error('校验不通过') |
|||
return false |
|||
} |
|||
}) |
|||
} |
|||
// 选择模板 |
|||
const selectTemplate = (data: FormData) => { |
|||
state.formData = stringToObj(objToStringify(data)) |
|||
} |
|||
// 搜索设计时左侧快速添加字段 |
|||
const searchCheckField = (data: FormData) => { |
|||
state.formData.list.push(data) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
onMounted(()=>{ |
|||
if (route.source) { |
|||
formControlAttrEl.value.getFormFieldBySource(route.source) |
|||
} |
|||
// emits("judgeFormIsEdit",false); |
|||
state.formOtherData.formName = props.formconfigcont.formName |
|||
state.formData.form.name = props.formconfigcont.formlogo |
|||
state.formData.form.formName = props.formconfigcont.formName |
|||
getInitData() |
|||
}) |
|||
watch(()=>props.formconfigcont,(val : any)=>{ |
|||
state.formOtherData.formName = val.formName |
|||
state.formData.form.name = val.formlogo |
|||
state.formData.form.formName = val.formName |
|||
getInitData() |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
|
|||
watch(()=>state.formData.list,(val:any)=>{ |
|||
if(val.length > 0){ |
|||
isSave.value = true |
|||
emits("judgeFormIsEdit",true); |
|||
} |
|||
}, |
|||
{ |
|||
deep: true |
|||
}); |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 16:05:19 |
|||
@ 功能: 获取表单数据 |
|||
*/ |
|||
const getInitData = () => { |
|||
const id = props.formKey // 当前记录保存的id |
|||
if (id) { |
|||
// 获取初始表单数据 |
|||
state.loading = true |
|||
|
|||
getOneProductionForm({id: id.toString()}) |
|||
.then((res:any) => { |
|||
state.loading = false |
|||
console.log(" 获取初始表单数据",res) |
|||
if(res.code == 0){ |
|||
const result = res.data |
|||
// 初始设计搜索时res.data='' |
|||
if (result.mastesform) { |
|||
state.formData = stringToObj(result.mastesform) |
|||
} |
|||
state.formDict = string2json(result.dict) |
|||
// 恢复表单名称 |
|||
state.formOtherData.source = result.source |
|||
state.formOtherData.formName = result.name |
|||
|
|||
state.formOtherData.formName = result.name |
|||
state.formData.form.name = result.tablekey |
|||
state.formData.form.formName = result.name |
|||
if (result.source && state.designType !== 'search') { |
|||
// 加载属性侧边栏的字段标识，搜索时不需要请求 |
|||
formControlAttrEl.value.getFormFieldBySource(result.source) |
|||
} |
|||
}else{ |
|||
ElMessage.error(res.msg || '加载异常') |
|||
} |
|||
}) |
|||
.finally(()=>{ |
|||
isSave.value = true |
|||
haveCustomerFormVersion({id:state.formData.form.name}) |
|||
.then(({data})=>{ |
|||
// console.log("加载异常-------------->",data) |
|||
versionCont.value = data |
|||
if(data.length > 0){ |
|||
data.forEach((item:any) => { |
|||
if(item.status == 1){ |
|||
versionId.value = item.id.toString() |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}) |
|||
.catch((res: any) => { |
|||
// console.log(res) |
|||
ElMessage.error(res.msg || '加载异常') |
|||
state.loading = false |
|||
}) |
|||
} |
|||
} |
|||
|
|||
//监听版本变化 |
|||
watch(() => versionId.value,()=>{ |
|||
console.log("经停版本变化----》",versionId.value,versionCont.value) |
|||
|
|||
if(versionCont.value.length > 0){ |
|||
versionCont.value.forEach(item=>{ |
|||
let versionIdStr = item.id.toString() |
|||
if(versionIdStr == versionId.value){ |
|||
console.log("经停版本变化--1--》",item) |
|||
if (item.mastesform) { |
|||
state.formData = stringToObj(item.mastesform) |
|||
} |
|||
state.formDict = string2json(item.dict) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
//编辑版本状态 |
|||
const editversionstaus = (id:string) =>{ |
|||
// console.log("编辑版本状态--1--》",id) |
|||
enableVersion({id:id.toString()}) |
|||
.then(() =>{ |
|||
haveCustomerFormVersion({id:state.formData.form.name}) |
|||
.then(({data})=>{ |
|||
console.log("加载异常-------------->",data) |
|||
versionCont.value = data |
|||
if(data.length > 0){ |
|||
data.forEach((item:any) => { |
|||
if(item.status == 1){ |
|||
versionId.value = item.id.toString() |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="design_container"> |
|||
<DragControl |
|||
v-model:versionid="versionId" |
|||
:formid="state.formOtherData.source" |
|||
:versioncont="versionCont" |
|||
@click-check="searchCheckField" |
|||
@click="selectTemplate" |
|||
@editversionstaus="editversionstaus" |
|||
/> |
|||
<div class="main-body"> |
|||
<HeadTools v-loading="state.loading" :customerformid="props.formKey" @click="headToolClick" /> |
|||
<div v-loading="state.loading" class="main-form"> |
|||
<div v-if="state.formData.list.length === 0" class="empty-tips"> |
|||
从左侧拖拽来添加组件 |
|||
</div> |
|||
<FormDesign |
|||
v-model:issave="isSave" |
|||
:type="5" |
|||
:form-data="state.formData" |
|||
:dict="state.formDict" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<form-control-attr |
|||
ref="formControlAttrEl" |
|||
v-model:formOtherData="state.formOtherData" |
|||
:form-data="state.formData.form" |
|||
:form-config="state.formData.config" |
|||
:customerformid="props.formKey" |
|||
:form-list="state.formData.list" |
|||
@open-dialog="openAceEditDrawer" |
|||
/> |
|||
<ace-drawer |
|||
v-model="drawer.visible" |
|||
:title="drawer.title" |
|||
:direction="drawer.direction" |
|||
:content="drawer.content" |
|||
:code-type="drawer.codeType" |
|||
@before-close="drawerBeforeClose" |
|||
@confirm="dialogConfirm" |
|||
/> |
|||
<vue-file v-if="!['search'].includes(state.designType)" ref="vueFileEl" /> |
|||
<el-drawer |
|||
v-model="state.previewVisible" |
|||
title="预览" |
|||
:append-to-body="true" |
|||
size="50%" |
|||
> |
|||
<form-design |
|||
v-if="state.previewVisible" |
|||
ref="previewForm" |
|||
:form-data="state.formDataPreview" |
|||
:dict="state.formDict" |
|||
:type="1" |
|||
/> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button size="small" type="primary" @click="previewSubmit"> |
|||
提交 |
|||
</el-button> |
|||
<el-button size="small" @click="state.previewVisible = false"> |
|||
取消 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-drawer> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.design_container{ |
|||
display: flex; |
|||
background-color: #FFFFFF; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,598 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 09:01:36 |
|||
@ 备注: 自定义表单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { getRequest } from '@/api/DesignForm' |
|||
import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils' |
|||
import { ref, reactive, provide, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { useLayoutStore } from '@/store/DesignForm/layout' |
|||
import { FormData,formStruct,DrawerStruct, VideoMsg } from '@/api/DesignForm/types' |
|||
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|||
import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion,judgeSubmitCancel } from '@/api/DesignForm/requestapi' |
|||
import { submitAndCancelButton,cancelButton,submitButton } from "@/api/DesignForm/gromGround/data"; |
|||
|
|||
//引入页面 |
|||
import DragControl from '@/components/DesignForm/dragControl.vue'; |
|||
import HeadTools from '@/components/DesignForm/public/headTools.vue'; |
|||
// import HeadTools from '@/components/DesignForm/public/headToolsNew.vue'; |
|||
import FormDesign from '@/components/DesignForm/public/form/form.vue' |
|||
import VueFile from '@/components/DesignForm/vueFile.vue' |
|||
import AceDrawer from '@/components/DesignForm/aceDrawer.vue' |
|||
|
|||
const props = defineProps({ |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
formconfigcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
state:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'update:state', val: formStruct): void |
|||
(e: 'judgeFormIsEdit', val: boolean): void |
|||
(e: 'runNextWindows', val: number): void |
|||
(e: 'closeFormPage'): void |
|||
}>() |
|||
|
|||
const state = computed({ |
|||
get() { |
|||
return props.state |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:state', val) |
|||
} |
|||
}); |
|||
// 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取 |
|||
provide('formDesignType', state.value.designType) |
|||
const vueFileEl = ref() |
|||
const formControlAttrEl = ref() |
|||
const drawer = reactive<DrawerStruct>({ |
|||
visible: false, |
|||
type: '', |
|||
title: '', |
|||
codeType: '', |
|||
direction: undefined, //弹出方向rtl / ltr |
|||
callback: '' |
|||
}) |
|||
const versionCont = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|||
const versionId = ref<string>("") //版本号 |
|||
const store = useDesignFormStore() |
|||
const router = useRouter() |
|||
const route: any = useRoute().query || {} |
|||
|
|||
// 搜索设计时左侧快速添加字段 |
|||
const searchCheckField = (data: FormData) => { |
|||
state.value.formData.list.push(data) |
|||
} |
|||
// 选择模板 |
|||
const selectTemplate = (data: FormData) => { |
|||
state.value.formData = stringToObj(objToStringify(data)) |
|||
} |
|||
//编辑版本状态 |
|||
const editversionstaus = (id:string) =>{ |
|||
// console.log("编辑版本状态--1--》",id) |
|||
enableVersion({id:id.toString()}) |
|||
.then(() =>{ |
|||
haveCustomerFormVersion({id:state.value.formData.form.name}) |
|||
.then(({data})=>{ |
|||
// console.log("加载异常-------------->",data) |
|||
versionCont.value = data |
|||
if(data.length > 0){ |
|||
data.forEach((item:any) => { |
|||
if(item.status == 1){ |
|||
versionId.value = item.id.toString() |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-09 16:10:23 |
|||
@ 功能: 按钮操作 |
|||
*/ |
|||
const headToolClick = (type: string) => { |
|||
switch (type) { |
|||
case 'del': //清空 |
|||
state.value.formData.list = [] |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
break |
|||
case 'eye': //预览 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
let stringPreview = objToStringify(state.value.formData) // 防止预览窗口数据修改影响 |
|||
const formName = state.value.formData.form.name |
|||
const reg = new RegExp(`get${formName}ControlByName`, 'g') |
|||
stringPreview = stringPreview.replace( |
|||
reg, |
|||
`getPreview${formName}ControlByName` |
|||
) |
|||
state.value.formDataPreview = stringToObj(stringPreview) |
|||
state.value.formDataPreview.form.name = `Preview${formName}` // 修改下表单名 |
|||
// console.log("预览数据",state.value.formDataPreview); |
|||
state.value.previewVisible = true |
|||
break |
|||
case 'json': // 生成脚本预览 |
|||
openAceEditDrawer({ |
|||
direction: 'rtl', |
|||
content: state.value.formData, |
|||
title: '可编辑修改或将已生成的脚本粘贴进来' |
|||
}) |
|||
break |
|||
case 'save': //保存 |
|||
// saveData(); |
|||
if(props.formKey != ""){ |
|||
editSaveData(); |
|||
}else{ |
|||
saveDataNew(); |
|||
} |
|||
break |
|||
case 'branch': //另存为新版 |
|||
saveOtherData(); |
|||
break |
|||
case 'vue': |
|||
vueFileEl.value.open(state.value.formData) |
|||
break |
|||
case 'close': |
|||
state.value.formData.list = [] |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
emits('closeFormPage') |
|||
// if(state.value.formData.list.length > 0){ |
|||
// ElMessageBox.confirm('表单已做设计或修改！请问是否保存？','温馨提示！',{ |
|||
// confirmButtonText: '保存', |
|||
// cancelButtonText: '不保存', |
|||
// type: 'warning', |
|||
// draggable: true, |
|||
// }) |
|||
// .then(() => { |
|||
// saveDataNew(); |
|||
// }) |
|||
// .catch(() => { |
|||
// state.value.formData.list = [] |
|||
// store.setActiveKey('') |
|||
// store.setControlAttr({}) |
|||
// // emits("update:draweropenclose", false); |
|||
// emits("closeDrawer"); |
|||
// }) |
|||
// }else{ |
|||
// state.value.formData.list = [] |
|||
// store.setActiveKey('') |
|||
// store.setControlAttr({}) |
|||
// emits('closeFormPage') |
|||
// } |
|||
break |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 13:44:38 |
|||
@ 功能: 另存为新版本 |
|||
*/ |
|||
const saveOtherData = () => { |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.value.formData), |
|||
data: objToStringify(state.value.formData), |
|||
source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.value.formDict) |
|||
} |
|||
state.value.loading = true |
|||
saveAsNewVersion(params) |
|||
.then((res: any) => { |
|||
// console.log("数据保存", res) |
|||
if(res.code == 0){ |
|||
emits('judgeFormIsEdit', false) |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
.finally(() => { |
|||
state.value.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.value.loading = false |
|||
}) |
|||
} |
|||
|
|||
|
|||
//讲数据保存到服务端(新版) |
|||
const saveDataNew = () => { |
|||
|
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.value.formData), |
|||
data: objToStringify(state.value.formData), |
|||
source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.value.formDict) |
|||
} |
|||
let apiKey = 'designSave' |
|||
if (route.id) { |
|||
// 编辑状态 当前记录id |
|||
Object.assign(params, { id: route.id }) |
|||
apiKey = 'designEdit' |
|||
} |
|||
// 列表搜索模式下只有修改 |
|||
if (state.value.designType === 'search') { |
|||
params = { |
|||
data: objToStringify(state.value.formData), |
|||
dict: json2string(state.value.formDict), |
|||
id: route.id |
|||
} |
|||
} |
|||
state.value.loading = true |
|||
|
|||
saveProductionForm(params) |
|||
.then((res: any) => { |
|||
// console.log("数据保存", res) |
|||
if(res.code == 0){ |
|||
emits('judgeFormIsEdit', false) |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
.finally(() => { |
|||
state.value.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.value.loading = false |
|||
}) |
|||
} |
|||
//编辑自定义表单数据 |
|||
const editSaveData = () =>{ |
|||
let params: any = { |
|||
jsondata:JSON.stringify(state.value.formData), |
|||
data: objToStringify(state.value.formData), |
|||
source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|||
name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|||
type: 1, // 1表单 2列表 |
|||
dict: json2string(state.value.formDict), |
|||
id:props.formKey.toString(), |
|||
version:versionId.value.toString(), |
|||
} |
|||
state.value.loading = true |
|||
editCustomerFormInfo(params) |
|||
.then((res: any) => { |
|||
if(res.code == 0){ |
|||
emits('judgeFormIsEdit', false) |
|||
ElMessage({ |
|||
message: res.message || '保存成功！', |
|||
type: 'success' |
|||
}) |
|||
// emits("handlequery"); |
|||
// emits("update:draweropenclose", false); |
|||
emits("runNextWindows",2); |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: res.msg || '保存失败！', |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
state.value.loading=false; |
|||
}) |
|||
.catch((res: any) => { |
|||
ElMessage.error(res.message || '保存异常') |
|||
state.value.loading = false |
|||
}) |
|||
} |
|||
|
|||
|
|||
//打开脚本预览 |
|||
const openAceEditDrawer = (params: any) => { |
|||
const { type, direction, codeType, title, callback, content } = params |
|||
drawer.direction = direction // 窗口位置ltr/rtl |
|||
drawer.type = type // 作为窗口唯一标识，在窗口关闭时可根据type作不同处理 |
|||
drawer.codeType = codeType || '' // 显示代码类型 |
|||
drawer.title = title ? `提示：${title}` : '' |
|||
drawer.visible = true |
|||
drawer.callback = callback |
|||
let editData =codeType === 'json'? json2string(content, true): objToStringify(content, true) |
|||
switch (type) { |
|||
case 'css': |
|||
editData = state.value.formData.config?.style || '' |
|||
break |
|||
case 'dict': |
|||
// 格式化一下 |
|||
editData = json2string(state.value.formDict, true) |
|||
break |
|||
case 'beforeRequest': |
|||
case 'beforeSubmit': |
|||
case 'afterResponse': |
|||
case 'afterSubmit': |
|||
case 'change': |
|||
// eslint-disable-next-line no-case-declarations |
|||
const beforeData = state.value.formData.events || {} |
|||
if (beforeData[type]) { |
|||
editData = objToStringify(beforeData[type], true) |
|||
} else { |
|||
if (['afterResponse', 'afterSubmit'].includes(type)) { |
|||
editData = afterResponse |
|||
} else if (type === 'change') { |
|||
editData = onChange |
|||
} else { |
|||
editData = beforeRequest |
|||
} |
|||
} |
|||
break |
|||
// case 'afterResponse': |
|||
// case 'afterSubmit': |
|||
// const newData = state.formData.events || {} |
|||
// if (newData[type]) { |
|||
// editData = objToStringify(newData[type], true) |
|||
// } else { |
|||
// editData = afterResponse |
|||
// } |
|||
// break |
|||
|
|||
case 'optionsParams': |
|||
if (!content) { |
|||
editData = beforeRequest |
|||
} |
|||
break |
|||
case 'optionsResult': |
|||
if (!content) { |
|||
editData = afterResponse |
|||
} |
|||
break |
|||
} |
|||
drawer.content = editData |
|||
} |
|||
//关闭脚本预览窗，并初始化脚本预览参数 |
|||
const dialogCancel = () => { |
|||
drawer.visible = false |
|||
drawer.type = '' |
|||
drawer.title = '' |
|||
drawer.codeType = '' |
|||
drawer.callback = '' |
|||
drawer.content = '' |
|||
} |
|||
// 弹窗确认 |
|||
const dialogConfirm = (editVal: string) => { |
|||
// 生成脚本预览和导入json，都是将编辑器内容更新至state.formData |
|||
try { |
|||
if (typeof drawer.callback === 'function') { |
|||
// callback |
|||
const newObj = |
|||
drawer.codeType === 'json'? string2json(editVal): stringToObj(editVal) |
|||
drawer.callback(newObj) |
|||
} else { |
|||
switch (drawer.type) { |
|||
case 'css': |
|||
// 表单属性－编辑表单样式 |
|||
if (!state.value.formData.config) { |
|||
state.value.formData.config = {} |
|||
} |
|||
state.value.formData.config.style = editVal |
|||
break |
|||
case 'dict': |
|||
state.value.formDict = string2json(editVal) |
|||
break |
|||
case 'beforeRequest': |
|||
case 'beforeSubmit': |
|||
case 'afterResponse': |
|||
case 'afterSubmit': |
|||
case 'closeSubmit': |
|||
case 'change': |
|||
if (!state.value.formData.events) { |
|||
state.value.formData.events = {} |
|||
} |
|||
state.value.formData.events[drawer.type] = stringToObj(editVal) |
|||
break |
|||
default: |
|||
state.value.formData = stringToObj(editVal) |
|||
} |
|||
} |
|||
dialogCancel() |
|||
} catch (res) { |
|||
// console.log(res.message) |
|||
//ElMessage.error(res.message) |
|||
} |
|||
} |
|||
// 预览窗口提交测试 |
|||
const previewForm = ref() |
|||
const previewSubmit = () => { |
|||
previewForm.value.validate((valid: boolean, fields: any) => { |
|||
if (valid) { |
|||
// alert('校验通过') |
|||
ElMessage.success('校验通过') |
|||
// console.log(fields) |
|||
} else { |
|||
// alert('校验不通过') |
|||
// console.log('error submit!', fields) |
|||
ElMessage.error('校验不通过') |
|||
return false |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 15:12:03 |
|||
@ 功能: 获取表单内容 |
|||
*/ |
|||
const getInitData = () => { |
|||
if (props.formKey) { |
|||
state.value.loading = true |
|||
getOneProductionForm({id: props.formKey.toString()}) |
|||
.then((res:any) => { |
|||
if(res.code == 0){ |
|||
const result = res.data |
|||
// 初始设计搜索时res.data='' |
|||
if (result.mastesform) { |
|||
state.value.formData = stringToObj(result.mastesform) |
|||
} |
|||
state.value.formDict = string2json(result.dict) |
|||
// 恢复表单名称 |
|||
state.value.formOtherData.source = result.source |
|||
state.value.formOtherData.formName = result.name |
|||
|
|||
state.value.formOtherData.formName = result.name |
|||
state.value.formData.form.name = result.tablekey |
|||
state.value.formData.form.formName = result.name |
|||
if (result.source && state.value.designType !== 'search') { |
|||
// 加载属性侧边栏的字段标识，搜索时不需要请求 |
|||
formControlAttrEl.value.getFormFieldBySource(result.source) |
|||
} |
|||
}else{ |
|||
ElMessage.error(res.msg || '加载异常') |
|||
} |
|||
state.value.loading = false |
|||
}) |
|||
.finally(()=>{ |
|||
|
|||
haveCustomerFormVersion({id:state.value.formData.form.name}) |
|||
.then(({data})=>{ |
|||
versionCont.value = data |
|||
if(data.length > 0){ |
|||
data.forEach((item:any) => { |
|||
if(item.status == 1){ |
|||
versionId.value = item.id.toString() |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}) |
|||
.catch((res: any) => { |
|||
// console.log(res) |
|||
ElMessage.error(res.msg || '加载异常') |
|||
state.value.loading = false |
|||
}) |
|||
} |
|||
} |
|||
onMounted(() => { |
|||
if (route.source) { |
|||
formControlAttrEl.value.getFormFieldBySource(route.source) |
|||
} |
|||
getInitData() |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="design_container"> |
|||
<DragControl |
|||
v-model:versionid="versionId" |
|||
:formid="state.formOtherData.source" |
|||
:versioncont="versionCont" |
|||
@click-check="searchCheckField" |
|||
@click="selectTemplate" |
|||
@editversionstaus="editversionstaus" |
|||
/> |
|||
<div class="main-body"> |
|||
<HeadTools v-loading="state.loading" :customerformid="props.formKey" @click="headToolClick" /> |
|||
<div v-loading="state.loading" class="main-form"> |
|||
<div v-if="state.formData.list.length === 0" class="empty-tips"> |
|||
从左侧拖拽来添加组件 |
|||
</div> |
|||
<FormDesign |
|||
:type="5" |
|||
:form-data="state.formData" |
|||
:dict="state.formDict" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<form-control-attr |
|||
ref="formControlAttrEl" |
|||
v-model:formOtherData="state.formOtherData" |
|||
:form-data="state.formData.form" |
|||
:form-config="state.formData.config" |
|||
:customerformid="props.formKey" |
|||
:form-list="state.formData.list" |
|||
@open-dialog="openAceEditDrawer" |
|||
/> |
|||
<ace-drawer |
|||
v-model="drawer.visible" |
|||
:title="drawer.title" |
|||
:direction="drawer.direction" |
|||
:content="drawer.content" |
|||
:code-type="drawer.codeType" |
|||
@before-close="dialogCancel" |
|||
@confirm="dialogConfirm" |
|||
/> |
|||
<vue-file v-if="!['search'].includes(state.designType)" ref="vueFileEl" /> |
|||
<el-drawer |
|||
v-model="state.previewVisible" |
|||
title="预览" |
|||
:append-to-body="true" |
|||
size="50%" |
|||
> |
|||
<form-design |
|||
v-if="state.previewVisible" |
|||
ref="previewForm" |
|||
:form-data="state.formDataPreview" |
|||
:dict="state.formDict" |
|||
:type="1" |
|||
/> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button size="small" type="primary" @click="previewSubmit"> |
|||
提交 |
|||
</el-button> |
|||
<el-button size="small" @click="state.previewVisible = false"> |
|||
取消 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-drawer> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.design_container{ |
|||
display: flex; |
|||
background-color: #FFFFFF; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 14:46:00 |
|||
@ 备注: 工作流 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useStore } from '@/store/workflow/index' |
|||
import { flowversion } from '@/api/workflowapi/types' |
|||
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion } from '@/api/workflowapi/index' |
|||
|
|||
import FlowImgSrc from '@/assets/images/3.png' |
|||
|
|||
const props = defineProps({ |
|||
formKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
state:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'update:state', val: formStruct): void |
|||
(e: 'judgeFormIsEdit', val: boolean): void |
|||
(e: 'runNextWindows', val: number): void |
|||
(e: 'closeFormPage'): void |
|||
}>() |
|||
|
|||
const state = computed({ |
|||
get() { |
|||
return props.state |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:state', val) |
|||
} |
|||
}); |
|||
const flowIsTrue = ref(false) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-11 16:33:49 |
|||
@ 功能: 开启流程 |
|||
*/ |
|||
const createFormFlow = () =>{ |
|||
flowIsTrue.value = true |
|||
} |
|||
|
|||
</script> |
|||
<template> |
|||
<div class="design_flow_work"> |
|||
<el-row v-if="flowIsTrue" > |
|||
<el-col :span="24">1</el-col> |
|||
<el-col :span="24">2</el-col> |
|||
</el-row> |
|||
<div v-else class="flow_work_begin"> |
|||
<el-result title="" sub-title=""> |
|||
<template #icon> |
|||
流程可实现需要多人流转的业务场景。<br>绘制流程图，设定数据流转方式，即可搭建线上工作流。<br><br> |
|||
<el-image |
|||
:src="FlowImgSrc" |
|||
/> |
|||
</template> |
|||
<template #extra> |
|||
<el-button type="primary" @click="createFormFlow">开启流程</el-button> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.design_flow_work{ |
|||
height: calc(100vh - 40px); |
|||
width: inherit; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.flow_work_begin{ |
|||
height: calc(100vh - 40px); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue