From f3dd3ee8882f38cf16ffabfac6d9c654b4f6b8f7 Mon Sep 17 00:00:00 2001
From: a123456 <1209165801@qq.com>
Date: Thu, 14 Feb 2019 18:09:21 +0800
Subject: [PATCH] Signed-off-by: a123456 <1209165801@qq.com>
---
.../WEB-INF/manager/include/head-file.ftl | 3 +
.../WEB-INF/manager/mdiy/diy-model/form.ftl | 158 ++++++++++--------
.../webapp/static/mdiy/css/model-form.css | 42 ++++-
.../webapp/static/mdiy/less/model-form.less | 43 ++++-
4 files changed, 173 insertions(+), 73 deletions(-)
diff --git a/src/main/webapp/WEB-INF/manager/include/head-file.ftl b/src/main/webapp/WEB-INF/manager/include/head-file.ftl
index 493ac74c..39cd1d6c 100644
--- a/src/main/webapp/WEB-INF/manager/include/head-file.ftl
+++ b/src/main/webapp/WEB-INF/manager/include/head-file.ftl
@@ -7,6 +7,9 @@
+
+
+
diff --git a/src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl b/src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
index cb94dbd5..d277d1ff 100644
--- a/src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
+++ b/src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
@@ -13,65 +13,69 @@
-
-
+
-
+
-
+
-
+
+ {{form.unit}}
+
-
+
-
+
-
+
+
-
- 备选项
- 备选项
+
+ {{down.value}}
-
- {{city}}
+
+ {{down.value}}
-
-
-
+
+
+
+
+
+
+
+
+
-
- 上传附件
-
+ 上传附件
-
- 上传附件
-
-
+ 上传附件
+
+ 删除
@@ -80,96 +84,101 @@
-
-
+
+
-
+
+
+ 日期和时间
+ 仅日期
+ 仅时间
+
-
+
-
+
-
+
-
- 单行
- 多行
- 带格式
+
+ 单行
+ 多行
+ 带格式
-
+
-
-
+
+
-
+
-
-
+
+
前缀
后缀
-
+
-
+
-
-
- 单选
- 多选
+
+
+ 单选
+ 多选
-
+
- -
+
-
默认
-
+
-
+
-
默认
-
+
-
+
添加
-
+
@@ -178,10 +187,10 @@
-->
-
+
-
+
@@ -206,39 +215,39 @@
data: {
typeList: [{
title: "文本",
- icon: "",
+ icon: "icon-guidang",
id: "1",
}, {
title: "号码",
- icon: "",
+ icon: "icon-plus-numberfill",
id: "2",
}, {
title: "金额",
- icon: "",
+ icon: "icon-jine",
id: "3",
}, {
title: "数值",
- icon: "",
+ icon: "icon-sifaleizhibanshi",
id: "4",
}, {
title: "日期和时间",
- icon: "",
+ icon: "icon-riqi",
id: "5",
}, {
title: "选项",
- icon: "",
+ icon: "icon-shaixuan",
id: "6",
}, {
title: "下拉菜单",
- icon: "",
+ icon: "icon-xiala",
id: "7",
}, {
title: "附件",
- icon: "",
+ icon: "icon-fujian",
id: "8",
}, {
title: "图片",
- icon: "",
+ icon: "icon-tupian",
id: "9",
}],
selectedList: [{
@@ -278,13 +287,24 @@
value: "",
id: "9",
}], //选中的
- form: {}, //表单数据
+ form: {
+ downList: [], //下拉列表
+ downActiveList: [], //多选列表
+ set: [], //设置
+ unit: '', //金额单位
+ fieldType: '', //字段类型
+ }, //表单数据
controlTypeActive: '', //选中类型
},
watch: {
controlTypeActive: function() {
//切换控件类型时
- this.form = [];
+ this.form = {
+ downList: [],
+ downActiveList: [], //多选列表
+ set: [],
+ fieldType: '',
+ };
this.$forceUpdate();
this.sortable();
}
@@ -294,12 +314,14 @@
Sortable.create(document.getElementById("ms-down-list"), {
animation: 150,
draggable: '.ms-down-item',
- handle: '.ms-down-item',
+ handle: '.icon-tuodong', //设置只有小图标可以拖动
+ ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
Sortable.create(document.getElementById("ms-down-checkbox-list"), {
animation: 150,
draggable: '.ms-down-item',
- handle: '.ms-down-item',
+ handle: '.icon-tuodong', //设置只有小图标可以拖动
+ ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
},
//判断字段类型
diff --git a/src/main/webapp/static/mdiy/css/model-form.css b/src/main/webapp/static/mdiy/css/model-form.css
index bc187eb4..b7eb19af 100644
--- a/src/main/webapp/static/mdiy/css/model-form.css
+++ b/src/main/webapp/static/mdiy/css/model-form.css
@@ -149,6 +149,9 @@ textarea::-webkit-input-placeholder {
.ms-mdiy-model-form .ms-header-title {
margin-bottom: 15px;
}
+.ms-mdiy-model-form .el-checkbox-group {
+ font-size: inherit !important;
+}
.ms-mdiy-model-form .ms-editor-type-layout {
background: #fff;
min-width: 15%;
@@ -172,13 +175,40 @@ textarea::-webkit-input-placeholder {
cursor: pointer;
}
.ms-mdiy-model-form .ms-editor-type-layout ul li i {
+ font-weight: initial;
+ font-size: 1em;
color: #999;
- margin-right: 5px;
+ margin: 0 5px;
}
.ms-mdiy-model-form .ms-editor-body-layout {
background: #fff;
margin: 8px;
}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item {
+ padding: 5px 40px;
+ border: 1px solid transparent;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input {
+ width: calc(100% - 41px) !important;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content {
+ display: flex;
+ align-items: flex-start;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content .del-but {
+ visibility: hidden;
+ padding-left: 15px;
+ margin-left: auto;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-radio {
+ line-height: inherit;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active {
+ border-color: #0099ff;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active .del-but {
+ visibility: visible !important;
+}
.ms-mdiy-model-form .ms-editor-attr-layout {
background: #fff;
min-width: 20%;
@@ -192,7 +222,6 @@ textarea::-webkit-input-placeholder {
flex-direction: column;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form {
- padding: 15px;
height: calc(100vh - 200px);
overflow: auto;
}
@@ -238,6 +267,15 @@ textarea::-webkit-input-placeholder {
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i {
margin-right: 6px;
}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .sortable-ghost {
+ opacity: 0.3;
+ background: #ccc;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .sortable-ghost * {
+ background: #ccc !important;
+ border-color: transparent !important;
+ color: transparent !important;
+}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .footer {
margin-top: auto;
border-top: 1px solid #e6e6e6;
diff --git a/src/main/webapp/static/mdiy/less/model-form.less b/src/main/webapp/static/mdiy/less/model-form.less
index fb1f5444..8401a774 100644
--- a/src/main/webapp/static/mdiy/less/model-form.less
+++ b/src/main/webapp/static/mdiy/less/model-form.less
@@ -13,6 +13,9 @@
.ms-header-title {
margin-bottom: 15px;
}
+ .el-checkbox-group {
+ font-size: inherit !important;
+ }
//左侧自定义表单项
.ms-editor-type-layout {
background: #fff;
@@ -31,8 +34,8 @@
border: 1px solid @borderColor;
cursor: pointer;
i {
- color: #999;
- margin-right: 5px;
+ .ms-font(1em, #999);
+ margin: 0 5px;
}
}
}
@@ -41,6 +44,32 @@
.ms-editor-body-layout {
background: #fff;
margin: 8px;
+ .ms-form-item {
+ padding: 5px 40px;
+ border: 1px solid transparent;
+ //单位输入框
+ .unit-input {
+ width: ~'calc(100% - 41px)' !important;
+ }
+ .el-form-item__content {
+ display: flex;
+ align-items: flex-start;
+ .del-but {
+ visibility: hidden;
+ padding-left: 15px;
+ margin-left: auto;
+ }
+ }
+ .el-radio {
+ line-height: inherit;
+ }
+ }
+ .active {
+ border-color: @themeColor;
+ .del-but {
+ visibility: visible !important;
+ }
+ }
}
//右侧选项属性
.ms-editor-attr-layout {
@@ -54,7 +83,6 @@
display: flex;
flex-direction: column;
.form {
- padding: 15px;
height: ~'calc(100vh - 200px)';
overflow: auto;
.el-form-item__label {
@@ -89,6 +117,15 @@
}
}
}
+ .sortable-ghost {
+ opacity: .3;
+ background: #ccc;
+ * {
+ background: #ccc !important;
+ border-color: transparent !important;
+ color: transparent !important;
+ }
+ }
}
.footer {
margin-top: auto;