From 161d209466bf4dd004de2b26cac3444ac09b959c Mon Sep 17 00:00:00 2001 From: herenshan112 Date: Fri, 26 Jul 2024 15:23:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/form.css | 6 - src/assets/scss/form.min.css | 2 +- src/assets/scss/form.scss | 14 +- src/components/DesignForm/assembly/index.ts | 344 +++++++++++++----- .../DesignForm/formControlPropertiNew.vue | 3 +- .../DesignForm/public/form/formItem.vue | 6 +- .../codepage/page_black20240318.vue | 2 +- .../lowcodepage/appPage/createAppFormPage.vue | 4 +- src/widget/digitpage/index.vue | 2 +- 9 files changed, 283 insertions(+), 100 deletions(-) diff --git a/src/assets/scss/form.css b/src/assets/scss/form.css index 33b2749..f782737 100644 --- a/src/assets/scss/form.css +++ b/src/assets/scss/form.css @@ -450,10 +450,7 @@ .design-form .group { border: 1px dashed #ddd; - margin: 2px 0px 10px 0px; - padding: 5px; position: relative; - min-height: 50px; } .design-form .group.active { @@ -591,10 +588,7 @@ .detail-form .group { border: 0px dashed #ddd; - margin: 2px 0px 10px 0px; - padding: 5px; position: relative; - min-height: 50px; } .detail-form .group > div { diff --git a/src/assets/scss/form.min.css b/src/assets/scss/form.min.css index 527e067..a90f6ce 100644 --- a/src/assets/scss/form.min.css +++ b/src/assets/scss/form.min.css @@ -1 +1 @@ -.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.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>div{height:100%}.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} +.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.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;position:relative}.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>div{height:100%}.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;position:relative}.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} diff --git a/src/assets/scss/form.scss b/src/assets/scss/form.scss index 149e3a5..c471348 100644 --- a/src/assets/scss/form.scss +++ b/src/assets/scss/form.scss @@ -161,7 +161,12 @@ $mainColor: #66b1ff; padding: 0; width: 100%; } - .group {border: 1px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px; + .group { + border: 1px dashed #ddd; + // margin: 2px 0px 10px 0px; + // padding: 5px; + position: relative; + // min-height: 50px; &.active {border: 3px solid $mainColor;position: relative; > .drag-control {display: block} > .tooltip {display: block;} @@ -209,7 +214,12 @@ $mainColor: #66b1ff; padding: 0; width: 100%; } - .group {border: 0px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px; + .group { + border: 0px dashed #ddd; + // margin: 2px 0px 10px 0px; + // padding: 5px; + position: relative; + // min-height: 50px; > div {margin-bottom: 0} diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index 0250d66..e69fdd0 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -31,8 +31,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -56,8 +60,12 @@ export default [ config: {}, // 其他配置信息 selectvalue: "default", styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -73,8 +81,12 @@ export default [ }, config: {}, // 其他配置信息 styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -90,8 +102,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -110,8 +126,12 @@ export default [ options: selectOption, // 下拉选项数据集合 config: config, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -130,8 +150,12 @@ export default [ options: selectOption, config: config, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -151,8 +175,12 @@ export default [ options: selectOption, config: config, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -168,8 +196,12 @@ export default [ options: [], config: config, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -185,8 +217,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -201,8 +237,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -217,8 +257,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -232,8 +276,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -260,8 +308,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -277,8 +329,12 @@ export default [ config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -293,8 +349,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -309,8 +369,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -348,8 +412,12 @@ export default [ control: {}, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -364,8 +432,12 @@ export default [ config: {}, item: {}, // label标题相关 styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -382,8 +454,12 @@ export default [ addBtnText: '添加一行' }, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -397,8 +473,12 @@ export default [ config: {}, list: [], styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -418,8 +498,12 @@ export default [ control: {}, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -433,8 +517,12 @@ export default [ control: {}, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -510,8 +598,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -527,8 +619,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } @@ -543,8 +639,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -563,8 +663,12 @@ export default [ addBtnText: '添加一行' }, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -578,8 +682,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -594,8 +702,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -610,8 +722,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -626,8 +742,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -655,8 +775,12 @@ export default [ config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -671,8 +795,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -718,8 +846,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -738,8 +870,12 @@ export default [ optionsType: 0 }, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -789,8 +925,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } /*template: '', // 组件模板名称 @@ -822,8 +962,12 @@ export default [ automatic: false }, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -839,8 +983,12 @@ export default [ }, config: {}, // 其他配置信息 styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -854,8 +1002,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -870,8 +1022,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -886,8 +1042,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -902,8 +1062,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -918,8 +1082,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, @@ -934,8 +1102,12 @@ export default [ }, config: {}, styles: { - divStyle: {}, - labelStyle: {}, + divStyle: { + marginBot: "10" + }, + labelStyle: { + paddingLeft: "7", + }, inputStyle: {} } }, diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue index cd812ad..de7f9c7 100644 --- a/src/components/DesignForm/formControlPropertiNew.vue +++ b/src/components/DesignForm/formControlPropertiNew.vue @@ -278,7 +278,8 @@ const attrList = computed(() => { 'datePicker', 'tinymce', 'timePicker', - 'treeSelect' + 'treeSelect', + 'digitpage' ] }, { diff --git a/src/components/DesignForm/public/form/formItem.vue b/src/components/DesignForm/public/form/formItem.vue index 90e39b4..d90cd39 100644 --- a/src/components/DesignForm/public/form/formItem.vue +++ b/src/components/DesignForm/public/form/formItem.vue @@ -548,6 +548,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" v-if="['input', 'password'].includes(data.type)" + :placeholder="data.control.placeholder?data.control.placeholder:'请输入'+getLabel(data.item)" >