sunjianxi
/
cycgs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Signed-off-by: a123456 <1209165801@qq.com>

Browse Source
master
a123456 7 years ago
parent 02d027bf38
commit f3dd3ee888
4 changed files with 173 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/main/webapp/WEB-INF/manager/include/head-file.ftl
  2. 158
      src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
  3. 42
      src/main/webapp/static/mdiy/css/model-form.css
  4. 43
      src/main/webapp/static/mdiy/less/model-form.less

3
src/main/webapp/WEB-INF/manager/include/head-file.ftl
Unescape View File

@ -7,6 +7,9 @@
<link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_974973_42u7cwycwta.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
<!--自定义模型-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_997125_lflqkedj6s9.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->

158
src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
Unescape View File

@ -13,65 +13,69 @@
<div class="ms-header-title">自定义表单项</div>
<ul>
<li v-for="type in typeList">
<i></i>
<i class="iconfont" :class="type.icon"></i>
<span v-text="type.title"></span>
</li>
</ul>
</el-aside>
<el-main class="ms-editor-body-layout">
<div class="ms-header-title">自定义表单项</div>
<el-form :model="form" size="mini" class="form">
<!--控件类型下拉-->
<el-form-item :label="selected.title" :label-width="'90px'" v-for="selected in selectedList" @click="attrForm == selected">
<el-form-item @click.native="controlTypeActive = selected" class="ms-form-item" :class="{'active':controlTypeActive == selected}" :label="selected.title" :label-width="'90px'" v-for="(selected,index) in selectedList">
<!--单行-->
<el-input v-if="selected.id == '1'" maxlength="20" type="text" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input v-if="selected.id == '1' && form.fieldType != '3-2' && form.fieldType != '3-3'" maxlength="20" type="text" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<!--多行-->
<el-input v-if="selected.id == '1'" maxlength="20" type="textarea" :rows="4" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input v-if="selected.id == '1' && (form.fieldType == '3-2' || form.fieldType == '3-3')" maxlength="20" type="textarea" :rows="4" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<!--号码-->
<el-input v-if="selected.id == '2'" maxlength="11" type="text" v-model="form.default" placeholder="选填，1-11，数字" autocomplete="off"></el-input>
<!--金额-->
<el-input v-if="selected.id == '3'" maxlength="20" type="text" v-model="form.default" placeholder="选填" autocomplete="off"></el-input>
<el-input class="unit-input" v-if="selected.id == '3'" maxlength="20" type="text" v-model="form.default" placeholder="选填" autocomplete="off">
<template :slot="form.fieldType == '3-3-1'?'prepend':'append'">{{form.unit}}</template>
</el-input>
<!--数值-->
<el-input v-if="selected.id == '4'" max="9999" type="number" v-model="form.default" placeholder="选填，数字" autocomplete="off"></el-input>
<!--日期和时间-->
<el-date-picker v-if="selected.id == '5'" style="width: 100%;" v-model="form.default" type="datetime" placeholder="选择日期时间">
<el-date-picker v-if="selected.id == '5' && form.fieldType != '5-2' && form.fieldType != '5-3'" style="width: 100%;" v-model="form.default" type="datetime" placeholder="选择日期时间">
</el-date-picker>
<!--仅日期-->
<el-date-picker v-if="selected.id == '5'" style="width: 100%;" v-model="form.default" type="date" placeholder="选择日期">
<el-date-picker v-if="selected.id == '5' && form.fieldType == '5-2'" style="width: 100%;" v-model="form.default" type="date" placeholder="选择日期">
</el-date-picker>
<!--仅时间-->
<el-time-picker v-if="selected.id == '5'" style="width: 100%;" v-model="form.default" placeholder="选择时间">
<el-time-picker v-if="selected.id == '5' && form.fieldType == '5-3'" style="width: 100%;" v-model="form.default" placeholder="选择时间">
</el-time-picker>
<!--选项-->
<!--单选-->
<template v-if="selected.id == '6'">
<el-radio v-model="selected.default" label="1">备选项</el-radio>
<el-radio v-model="selected.default" label="2">备选项</el-radio>
<template v-if="selected.id == '6' && form.fieldType != '6-2'">
<el-radio v-for="(down,index) in form.downList" v-model="form.downActive" :label="index">{{down.value}}</el-radio>
</template>
<!--多选-->
<el-checkbox-group v-model="form.downList" v-if="selected.id == '6'">
<el-checkbox v-for="city in 4" :label="city" :key="city">{{city}}</el-checkbox>
<el-checkbox-group v-model="form.downActiveList" v-if="selected.id == '6' && form.fieldType == '6-2'">
<el-checkbox v-for="(down,index) in form.downList" :label="index">{{down.value}}</el-checkbox>
</el-checkbox-group>
<!--下拉菜单-->
<el-select style="width: 100%;" v-model="controlTypeActive" placeholder="请选择" v-if="selected.id == '7'">
<el-option v-for="item in 2" :key="item" :label="item" :value="item">
<!--单选-->
<el-select style="width: 100%;" v-model="form.downActive" placeholder="请选择" v-if="selected.id == '7' && form.fieldType != '7-2'">
<el-option v-for="(down,index) in form.downList" :value="index" :label="down.value">
</el-option>
</el-select>
<!--多选-->
<el-select style="width: 100%;" multiple v-model="form.downActiveList" placeholder="请选择" v-if="selected.id == '7' && form.fieldType == '7-2'">
<el-option v-for="(down,index) in form.downList" :value="index" :label="down.value">
</el-option>
</el-select>
<!--上传图片-->
<el-form-item v-if="selected.id == '8'">
<el-button icon="el-icon-upload">上传附件</el-button>
</el-form-item>
<el-button v-if="selected.id == '8'" icon="el-icon-upload">上传附件</el-button>
<!--上传附件-->
<el-form-item v-if="selected.id == '9'">
<el-button icon="el-icon-upload">上传附件</el-button>
</el-form-item>
<el-button v-if="selected.id == '9'" icon="el-icon-upload">上传附件</el-button>
<!--删除按钮-->
<el-button class="del-but" type="text" @click.stop="selectedList.splice(index,1)">删除</el-button>
</el-form-item>
</el-form>
</el-main>
@ -80,96 +84,101 @@
<div id="ms-editor-attr" class="ms-editor-attr">
<el-form :model="form" label-position="top" size="mini" class="form">
<!--字段名-->
<el-form-item label="字段名" :label-width="'70px'">
<el-input v-model="form.tableName" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-form-item label="标题" :label-width="'70px'">
<el-input maxlength="5" v-model="controlTypeActive.title" placeholder="选填，1-5，字符" autocomplete="off"></el-input>
</el-form-item>
<!--数字类型-->
<!--数值-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '1-1'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '4'">
<el-input max="9999" type="number" v-model="form.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item>
<!--时间类型-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '5'">
<el-radio v-model="form.fieldType" label="5-1">日期和时间</el-radio>
<el-radio v-model="form.fieldType" label="5-2">仅日期</el-radio>
<el-radio v-model="form.fieldType" label="5-3">仅时间</el-radio>
</el-form-item>
<!--日期和时间-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '2-1'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType != '5-2' && form.fieldType != '5-3'">
<el-date-picker style="width: 100%;" v-model="form.default" type="datetime" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<!--仅日期-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '2-2'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType == '5-2'">
<el-date-picker style="width: 100%;" v-model="form.default" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<!--仅时间-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '2-3'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType == '5-3'">
<el-time-picker style="width: 100%;" v-model="form.default" placeholder="选择时间">
</el-time-picker>
</el-form-item>
<!--字符串类型-->
<!--文本-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive === '3-1'">
<el-radio v-model="form.fieldType" label="3-1-1">单行</el-radio>
<el-radio v-model="form.fieldType" label="3-1-2">多行</el-radio>
<el-radio v-model="form.fieldType" label="3-1-3">带格式</el-radio>
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '1'">
<el-radio v-model="form.fieldType" label="3-1">单行</el-radio>
<el-radio v-model="form.fieldType" label="3-2">多行</el-radio>
<el-radio v-model="form.fieldType" label="3-3">带格式</el-radio>
</el-form-item>
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '3-1'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '1'">
<!--输入框判断选中的是多行还是单行-->
<el-input v-if="form.fieldType == '3-1-1' || form.fieldType == ''" maxlength="20" type="text" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input v-if="form.fieldType == '3-1-2' || form.fieldType == '3-1-3'" maxlength="20" type="textarea" :rows="4" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input v-if="form.fieldType != '3-2' && form.fieldType != '3-3'" maxlength="20" type="text" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input v-if="form.fieldType == '3-2' || form.fieldType == '3-3'" maxlength="20" type="textarea" :rows="4" v-model="form.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
</el-form-item>
<!--号码-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '3-2'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '2'">
<el-input maxlength="11" type="text" v-model="form.default" placeholder="选填，1-11，数字" autocomplete="off"></el-input>
</el-form-item>
<!--金额-->
<el-form-item label="单位" :label-width="'70px'" v-if="controlTypeActive === '3-3'">
<el-input maxlength="20" type="text" v-model="form.fieldType" placeholder="选填" autocomplete="off"></el-input>
<el-form-item label="单位" :label-width="'70px'" v-if="controlTypeActive.id === '3'">
<el-input maxlength="20" type="text" v-model="form.unit" placeholder="选填" autocomplete="off"></el-input>
<el-radio v-model="form.fieldType" label="3-3-1">前缀</el-radio>
<el-radio v-model="form.fieldType" label="3-3-2">后缀</el-radio>
</el-form-item>
<el-form-item label="保留几位小数" :label-width="'70px'" v-if="controlTypeActive === '3-3'">
<el-form-item label="保留几位小数" :label-width="'70px'" v-if="controlTypeActive.id === '3'">
<el-input min="0" max="9" type="number" v-model="form.data4" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '3-3'">
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '3'">
<el-input max="9999" type="number" v-model="form.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item>
<!--下拉菜单-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive === '3-5'">
<el-radio v-model="form.fieldType" label="3-5-1">单选</el-radio>
<el-radio v-model="form.fieldType" label="3-5-2">多选</el-radio>
<!--选项和下拉菜单-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '6' || controlTypeActive.id === '7'">
<el-radio v-model="form.fieldType" :label="controlTypeActive.id+'-1'">单选</el-radio>
<el-radio v-model="form.fieldType" :label="controlTypeActive.id+'-2'">多选</el-radio>
</el-form-item>
<el-form-item label="添加选项" :label-width="'70px'" v-show="controlTypeActive === '3-4' || controlTypeActive === '3-5'">
<el-form-item label="添加选项" :label-width="'70px'" v-show="(controlTypeActive.id === '6' || controlTypeActive.id === '7') && (form.fieldType == controlTypeActive.id+'-1' || form.fieldType == controlTypeActive.id+'-2')">
<ul class="ms-down-list" id="ms-down-list">
<!--单选-->
<li class="ms-down-item" v-for="(down,index) in form.downList" v-show="form.fieldType == '3-5-1'">
<li class="ms-down-item" v-for="(down,index) in form.downList" v-show="form.fieldType == controlTypeActive.id+'-1'">
<i class="iconfont icon-tuodong"></i>
<el-radio class="ms-radio" v-model="form.downActive" :label="index">默认</el-radio>
<el-input class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input maxlength="20" class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<i class="el-icon-delete" @click="form.downList.splice(index,1)"></i>
</li>
<!--多选-->
<el-checkbox-group id="ms-down-checkbox-list" v-model="form.downActiveList" v-show="form.fieldType == '3-5-2'">
<el-checkbox-group id="ms-down-checkbox-list" v-model="form.downActiveList" v-show="form.fieldType == controlTypeActive.id+'-2'">
<li class="ms-down-item" v-for="(down,index) in form.downList">
<i class="iconfont icon-tuodong"></i>
<el-checkbox class="ms-radio" :label="index">默认</el-checkbox>
<el-input class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<el-input maxlength="20" class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<i class="el-icon-delete" @click="form.downList.splice(index,1)"></i>
</li>
</el-checkbox-group>
<div class="ms-plus" @click="form.downList.push({})" v-if="form.fieldType == '3-5-1' || form.fieldType == '3-5-2'">
<div class="ms-plus" @click="form.downList.push({})" v-if="form.fieldType == controlTypeActive.id+'-1' || form.fieldType == controlTypeActive.id+'-2'">
<i class="el-icon-plus"></i>添加
</div>
</ul>
</el-form-item>
<!--上传图片-->
<el-form-item label="图片数量限制" :label-width="'70px'" v-if="controlTypeActive === '3-6'">
<el-form-item label="图片数量限制" :label-width="'70px'" v-if="controlTypeActive.id === '9'">
<el-input max="9" type="number" v-model="form.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item>
@ -178,10 +187,10 @@
</el-form-item>-->
<!--设置-->
<el-form-item label="设置" :label-width="'70px'" v-if="">
<el-form-item label="设置" :label-width="'70px'">
<el-checkbox-group v-model="form.set">
<el-checkbox label="必填"></el-checkbox>
<el-checkbox label="唯一"></el-checkbox>
<el-checkbox label="唯一" v-if="controlTypeActive.id != 5"></el-checkbox>
</el-checkbox-group>
</el-form-item>
@ -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', //设置拖动时候显示的样式
});
},
//判断字段类型

42
src/main/webapp/static/mdiy/css/model-form.css
Unescape View File

@ -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;

43
src/main/webapp/static/mdiy/less/model-form.less
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save