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 f3dd3ee888
commit 777a6c572b
6 changed files with 391 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
  2. 50
      src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl
  3. 22
      src/main/webapp/static/mdiy/css/model-form.css
  4. 11
      src/main/webapp/static/mdiy/less/model-form.less
  5. 149
      src/main/webapp/static/ms-admin/4.7.0/css/app.css
  6. 13
      src/main/webapp/static/ms-admin/4.7.0/less/app.less

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

@ -4,76 +4,83 @@
<el-container> <el-container>
<el-header class="ms-header" height="50px"> <el-header class="ms-header" height="50px">
<el-row class="ms-row"> <el-row class="ms-row">
<el-button class="ms-fr" type="success" size="small" icon="el-icon-back">返回</el-button> <el-button class="ms-fr" type="success" size="small" icon="el-icon-back" @click="modelListVue.href = '列表'">返回</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-plus">保存</el-button> <el-button class="ms-fr" size="small" icon="el-icon-plus">保存</el-button>
</el-row> </el-row>
</el-header> </el-header>
<el-container> <el-container>
<el-aside class="ms-editor-type-layout"> <el-aside class="ms-editor-type-layout">
<div class="ms-header-title">自定义表单项</div> <div class="ms-header-title">自定义表单项</div>
<ul> <ul id="ms-type-list">
<li v-for="type in typeList"> <li v-for="type in typeList" :data-id="type.id" :data-title="type.title">
<i class="iconfont" :class="type.icon"></i> <i class="iconfont" :class="type.icon"></i>
<span v-text="type.title"></span> <span v-text="type.title"></span>
</li> </li>
</ul> </ul>
</el-aside> </el-aside>
<el-main class="ms-editor-body-layout"> <el-main class="ms-editor-body-layout">
<el-form :model="form" size="mini" class="form"> <el-form id="ms-input-list" size="mini" class="form">
<!--控件类型下拉--> <!--控件类型下拉-->
<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-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' && 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' && selected.fieldType != '1-2' && selected.fieldType != '1-3'" maxlength="20" type="text" v-model="selected.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.fieldType == '1-2'" maxlength="20" type="textarea" :rows="4" v-model="selected.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
<div v-show="selected.fieldType == '1-3'" style="width: 100%;">
<script id="ms-ueditor" type="text/plain" name="taskDescription"></script>
</div>
<!--号码--> <!--号码-->
<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 == '2'" maxlength="11" type="text" v-model="selected.default" placeholder="选填，1-11，数字" 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"> <el-input class="unit-input" v-if="selected.id == '3'" maxlength="20" type="number" v-model="selected.default" placeholder="选填" autocomplete="off">
<template :slot="form.fieldType == '3-3-1'?'prepend':'append'">{{form.unit}}</template> <template :slot="selected.fieldType == '3-1'?'prepend':'append'">{{selected.unit}}</template>
</el-input> </el-input>
<!--数值--> <!--数值-->
<el-input v-if="selected.id == '4'" max="9999" type="number" v-model="form.default" placeholder="选填，数字" autocomplete="off"></el-input> <el-input v-if="selected.id == '4'" max="9999" type="number" v-model="selected.default" placeholder="选填，数字" autocomplete="off"></el-input>
<!--日期和时间--> <!--日期和时间-->
<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 v-if="selected.id == '5' && selected.fieldType != '5-2' && selected.fieldType != '5-3'" style="width: 100%;" v-model="selected.default" type="datetime" placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
<!--仅日期--> <!--仅日期-->
<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 v-if="selected.fieldType == '5-2'" style="width: 100%;" v-model="selected.default" type="date" placeholder="选择日期">
</el-date-picker> </el-date-picker>
<!--仅时间--> <!--仅时间-->
<el-time-picker v-if="selected.id == '5' && form.fieldType == '5-3'" style="width: 100%;" v-model="form.default" placeholder="选择时间"> <el-time-picker v-if="selected.fieldType == '5-3'" style="width: 100%;" v-model="selected.default" placeholder="选择时间">
</el-time-picker> </el-time-picker>
<!--选项--> <!--选项-->
<!--单选--> <!--单选-->
<template v-if="selected.id == '6' && form.fieldType != '6-2'"> <template v-if="selected.id == '6' && selected.fieldType != '6-2'">
<el-radio v-for="(down,index) in form.downList" v-model="form.downActive" :label="index">{{down.value}}</el-radio> <el-radio v-for="(down,index) in selected.downList" v-model="selected.downActive" :label="index">{{down.value}}</el-radio>
</template> </template>
<!--多选--> <!--多选-->
<el-checkbox-group v-model="form.downActiveList" v-if="selected.id == '6' && form.fieldType == '6-2'"> <el-checkbox-group v-model="selected.downActiveList" v-if="selected.fieldType == '6-2'">
<el-checkbox v-for="(down,index) in form.downList" :label="index">{{down.value}}</el-checkbox> <el-checkbox v-for="(down,index) in selected.downList" :label="index">{{down.value}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<!--下拉菜单--> <!--下拉菜单-->
<!--单选--> <!--单选-->
<el-select style="width: 100%;" v-model="form.downActive" placeholder="请选择" v-if="selected.id == '7' && form.fieldType != '7-2'"> <el-select style="width: 100%;" v-model="selected.downActive" placeholder="请选择" v-if="selected.id == '7' && selected.fieldType != '7-2'">
<el-option v-for="(down,index) in form.downList" :value="index" :label="down.value"> <el-option v-for="(down,index) in selected.downList" :value="index" :label="down.value">
</el-option> </el-option>
</el-select> </el-select>
<!--多选--> <!--多选-->
<el-select style="width: 100%;" multiple v-model="form.downActiveList" placeholder="请选择" v-if="selected.id == '7' && form.fieldType == '7-2'"> <el-select style="width: 100%;" multiple v-model="selected.downActiveList" placeholder="请选择" v-if="selected.fieldType == '7-2'">
<el-option v-for="(down,index) in form.downList" :value="index" :label="down.value"> <el-option v-for="(down,index) in selected.downList" :value="index" :label="down.value">
</el-option> </el-option>
</el-select> </el-select>
<!--上传图片--> <!--上传图片-->
<el-button v-if="selected.id == '8'" icon="el-icon-upload">上传附件</el-button> <el-upload v-if="selected.id == '8'" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<el-button icon="el-icon-upload">上传附件</el-button>
</el-upload>
<!--上传附件--> <!--上传附件-->
<el-button v-if="selected.id == '9'" icon="el-icon-upload">上传附件</el-button> <el-upload v-if="selected.id == '9'" action="https://jsonplaceholder.typicode.com/posts/" multiple list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
<!--删除按钮--> <!--删除按钮-->
<el-button class="del-but" type="text" @click.stop="selectedList.splice(index,1)">删除</el-button> <el-button class="del-but" type="text" @click.stop="selectedList.splice(index,1)">删除</el-button>
</el-form-item> </el-form-item>
@ -82,7 +89,7 @@
<el-aside class="ms-editor-attr-layout"> <el-aside class="ms-editor-attr-layout">
<div class="ms-header-title">属性</div> <div class="ms-header-title">属性</div>
<div id="ms-editor-attr" class="ms-editor-attr"> <div id="ms-editor-attr" class="ms-editor-attr">
<el-form :model="form" label-position="top" size="mini" class="form"> <el-form label-position="top" size="mini" class="form">
<!--字段名--> <!--字段名-->
<el-form-item label="标题" :label-width="'70px'"> <el-form-item label="标题" :label-width="'70px'">
<el-input maxlength="5" v-model="controlTypeActive.title" placeholder="选填，1-5，字符" autocomplete="off"></el-input> <el-input maxlength="5" v-model="controlTypeActive.title" placeholder="选填，1-5，字符" autocomplete="off"></el-input>
@ -91,87 +98,87 @@
<!--数字类型--> <!--数字类型-->
<!--数值--> <!--数值-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '4'"> <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-input max="9999" type="number" v-model="controlTypeActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!--时间类型--> <!--时间类型-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '5'"> <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="controlTypeActive.fieldType" label="5-1">日期和时间</el-radio>
<el-radio v-model="form.fieldType" label="5-2">仅日期</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="5-2">仅日期</el-radio>
<el-radio v-model="form.fieldType" label="5-3">仅时间</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="5-3">仅时间</el-radio>
</el-form-item> </el-form-item>
<!--日期和时间--> <!--日期和时间-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType != '5-2' && form.fieldType != '5-3'"> <el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && controlTypeActive.fieldType != '5-2' && controlTypeActive.fieldType != '5-3'">
<el-date-picker style="width: 100%;" v-model="form.default" type="datetime" placeholder="选择日期时间"> <el-date-picker style="width: 100%;" v-model="controlTypeActive.default" type="datetime" placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<!--仅日期--> <!--仅日期-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType == '5-2'"> <el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.fieldType == '5-2'">
<el-date-picker style="width: 100%;" v-model="form.default" type="date" placeholder="选择日期"> <el-date-picker style="width: 100%;" v-model="controlTypeActive.default" type="date" placeholder="选择日期">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<!--仅时间--> <!--仅时间-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '5' && form.fieldType == '5-3'"> <el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.fieldType == '5-3'">
<el-time-picker style="width: 100%;" v-model="form.default" placeholder="选择时间"> <el-time-picker style="width: 100%;" v-model="controlTypeActive.default" placeholder="选择时间">
</el-time-picker> </el-time-picker>
</el-form-item> </el-form-item>
<!--字符串类型--> <!--字符串类型-->
<!--文本--> <!--文本-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '1'"> <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="controlTypeActive.fieldType" label="1-1">单行</el-radio>
<el-radio v-model="form.fieldType" label="3-2">多行</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="1-2">多行</el-radio>
<el-radio v-model="form.fieldType" label="3-3">带格式</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="1-3">带格式</el-radio>
</el-form-item> </el-form-item>
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '1'"> <el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '1'">
<!--输入框判断选中的是多行还是单行--> <!--输入框判断选中的是多行还是单行-->
<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="controlTypeActive.fieldType != '1-2' && controlTypeActive.fieldType != '1-3'" maxlength="20" type="text" v-model="controlTypeActive.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-input v-if="controlTypeActive.fieldType == '1-2' || controlTypeActive.fieldType == '1-3'" maxlength="20" type="textarea" :rows="4" v-model="controlTypeActive.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!--号码--> <!--号码-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '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-input maxlength="11" type="text" v-model="controlTypeActive.default" placeholder="选填，1-11，数字" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!--金额--> <!--金额-->
<el-form-item label="单位" :label-width="'70px'" v-if="controlTypeActive.id === '3'"> <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-input maxlength="20" type="text" v-model="controlTypeActive.unit" placeholder="选填" autocomplete="off"></el-input>
<el-radio v-model="form.fieldType" label="3-3-1">前缀</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="3-1">前缀</el-radio>
<el-radio v-model="form.fieldType" label="3-3-2">后缀</el-radio> <el-radio v-model="controlTypeActive.fieldType" label="3-2">后缀</el-radio>
</el-form-item> </el-form-item>
<el-form-item label="保留几位小数" :label-width="'70px'" v-if="controlTypeActive.id === '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-input min="0" max="9" type="number" v-model="controlTypeActive.data4" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive.id === '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-input max="9999" type="number" v-model="controlTypeActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!--选项和下拉菜单--> <!--选项和下拉菜单-->
<el-form-item label="字段类型" :label-width="'70px'" v-if="controlTypeActive.id === '6' || controlTypeActive.id === '7'"> <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="controlTypeActive.fieldType" :label="controlTypeActive.id+'-1'">单选</el-radio>
<el-radio v-model="form.fieldType" :label="controlTypeActive.id+'-2'">多选</el-radio> <el-radio v-model="controlTypeActive.fieldType" :label="controlTypeActive.id+'-2'">多选</el-radio>
</el-form-item> </el-form-item>
<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')"> <el-form-item label="添加选项" :label-width="'70px'" v-show="(controlTypeActive.id === '6' || controlTypeActive.id === '7') && (controlTypeActive.fieldType == controlTypeActive.id+'-1' || controlTypeActive.fieldType == controlTypeActive.id+'-2')">
<ul class="ms-down-list" id="ms-down-list"> <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 == controlTypeActive.id+'-1'"> <li class="ms-down-item" v-for="(down,index) in controlTypeActive.downList" v-show="controlTypeActive.fieldType == controlTypeActive.id+'-1'">
<i class="iconfont icon-tuodong"></i> <i class="iconfont icon-tuodong"></i>
<el-radio class="ms-radio" v-model="form.downActive" :label="index">默认</el-radio> <el-radio class="ms-radio" v-model="controlTypeActive.downActive" :label="index">默认</el-radio>
<el-input maxlength="20" 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> <i class="el-icon-delete" @click="controlTypeActive.downList.splice(index,1)"></i>
</li> </li>
<!--多选--> <!--多选-->
<el-checkbox-group id="ms-down-checkbox-list" v-model="form.downActiveList" v-show="form.fieldType == controlTypeActive.id+'-2'"> <el-checkbox-group id="ms-down-checkbox-list" v-model="controlTypeActive.downActiveList" v-show="controlTypeActive.fieldType == controlTypeActive.id+'-2'">
<li class="ms-down-item" v-for="(down,index) in form.downList"> <li class="ms-down-item" v-for="(down,index) in controlTypeActive.downList">
<i class="iconfont icon-tuodong"></i> <i class="iconfont icon-tuodong"></i>
<el-checkbox class="ms-radio" :label="index">默认</el-checkbox> <el-checkbox class="ms-radio" :label="index">默认</el-checkbox>
<el-input maxlength="20" 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> <i class="el-icon-delete" @click="controlTypeActive.downList.splice(index,1)"></i>
</li> </li>
</el-checkbox-group> </el-checkbox-group>
<div class="ms-plus" @click="form.downList.push({})" v-if="form.fieldType == controlTypeActive.id+'-1' || form.fieldType == controlTypeActive.id+'-2'"> <div class="ms-plus" @click="controlTypeActive.downList.push({})" v-if="controlTypeActive.fieldType == controlTypeActive.id+'-1' || controlTypeActive.fieldType == controlTypeActive.id+'-2'">
<i class="el-icon-plus"></i>添加 <i class="el-icon-plus"></i>添加
</div> </div>
</ul> </ul>
@ -179,7 +186,7 @@
<!--上传图片--> <!--上传图片-->
<el-form-item label="图片数量限制" :label-width="'70px'" v-if="controlTypeActive.id === '9'"> <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-input max="9" type="number" v-model="controlTypeActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!--上传附件--> <!--上传附件-->
@ -188,7 +195,7 @@
<!--设置--> <!--设置-->
<el-form-item label="设置" :label-width="'70px'"> <el-form-item label="设置" :label-width="'70px'">
<el-checkbox-group v-model="form.set"> <el-checkbox-group v-model="controlTypeActive.set">
<el-checkbox label="必填"></el-checkbox> <el-checkbox label="必填"></el-checkbox>
<el-checkbox label="唯一" v-if="controlTypeActive.id != 5"></el-checkbox> <el-checkbox label="唯一" v-if="controlTypeActive.id != 5"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
@ -196,7 +203,7 @@
<!--说明--> <!--说明-->
<el-form-item label="填写说明" :label-width="'70px'"> <el-form-item label="填写说明" :label-width="'70px'">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.explain"> <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="controlTypeActive.explain">
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -210,7 +217,7 @@
</div> </div>
<script> <script>
new Vue({ var modelFormVue = new Vue({
el: "#model-form", el: "#model-form",
data: { data: {
typeList: [{ typeList: [{
@ -254,77 +261,150 @@
title: "文本", title: "文本",
value: "", value: "",
id: "1", id: "1",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "号码", title: "号码",
value: "", value: "",
id: "2", id: "2",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "金额", title: "金额",
value: "", value: "",
id: "3", id: "3",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "数值", title: "数值",
value: "", value: "",
id: "4", id: "4",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "日期和时间", title: "日期和时间",
value: "", value: "",
id: "5", id: "5",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "选项", title: "选项",
value: "", value: "",
id: "6", id: "6",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "下拉菜单", title: "下拉菜单",
value: "", value: "",
id: "7", id: "7",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "附件", title: "附件",
value: "", value: "",
id: "8", id: "8",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}, { }, {
title: "图片", title: "图片",
value: "", value: "",
id: "9", id: "9",
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
}], //选中的 }], //选中的
form: { controlTypeActive: {
downList: [], //下拉列表 downList: [], //下拉列表
downActiveList: [], //多选列表 downActiveList: [], //多选列表
set: [], //设置 set: [], //设置
unit: '', //金额单位 unit: '', //金额单位
fieldType: '', //字段类型 fieldType: '', //字段类型
}, //表单数据 }, //选中类型
controlTypeActive: '', //选中类型
}, },
watch: { watch: {
controlTypeActive: function() { controlTypeActive: function(data) {
//切换控件类型时 //切换控件类型时
this.form = { if(data.id == '6' || data.id == '7') {
downList: [], this.$nextTick(function() {
downActiveList: [], //多选列表 if(this.downListSortable == null) {
set: [], this.downListSortable = new Sortable(document.getElementById("ms-down-list"), {
fieldType: '', animation: 150,
}; draggable: '.ms-down-item',
this.$forceUpdate(); handle: '.icon-tuodong', //设置只有小图标可以拖动
this.sortable(); ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
}
if(this.downListCheckboxSortable == null) {
this.downListCheckboxSortable = new Sortable(document.getElementById("ms-down-checkbox-list"), {
animation: 150,
draggable: '.ms-down-item',
handle: '.icon-tuodong', //设置只有小图标可以拖动
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
}
})
}
if(data.id == '1') {
let that = this;
//富文本加载
var URL = window.UEDITOR_HOME_URL || "http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/";
if(this.editor == null) {
this.editor = UE.getEditor('ms-ueditor', {
toolbars: [
['fullscreen', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough',
'removeformat', 'blockquote',
'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|', 'attachment', 'simpleupload', 'link'
]
],
imageScaleEnabled: true,
// 服务器统一请求接口路径
serverUrl: URL + "jsp/msController.jsp?jsonConfig=%7BvideoUrlPrefix:'http://mpm.mingsoft.net/',fileUrlPrefix:'http://mpm.mingsoft.net/',imageUrlPrefix:'http://mpm.mingsoft.net/',imagePathFormat:'/upload/pm/editor/%7Btime%7D',filePathFormat:'/upload/pm/editor/%7Btime%7D',videoPathFormat:'/upload/pm/editor/%7Btime%7D'%7D",
autoHeightEnabled: true,
autoFloatEnabled: true,
scaleEnabled: false,
compressSide: 0,
maxImageSideLength: 2000,
maximumWords: 80000,
zIndex: 10000,
elementPathEnabled: false,
wordCount: false,
initialFrameWidth: '100%',
initialFrameHeight: 200,
});
this.editor.ready(function() {
var a = $("#ueditor_0").contents()[0].activeElement;
$(a).addClass("ms-webkit-scrollbar").before("<style>.ms-webkit-scrollbar::-webkit-scrollbar,::-webkit-scrollbar{width:10px;/*滚动条宽度*/height:1.5%;/*滚动条高度*/}/*定义滚动条轨道内阴影+圆角*/.ms-webkit-scrollbar::-webkit-scrollbar-track,::-webkit-scrollbar-track{border-radius:10px;/*滚动条的背景区域的圆角*/background-color:#eeeeee;/*滚动条的背景颜色*/}.ms-task-content::-webkit-scrollbar-track{border-radius:10px;background-color:#FFFFFF;}/*定义滑块内阴影+圆角*/.ms-webkit-scrollbar::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{border-radius:10px;/*滚动条的圆角*/background-color:#dddddd;/*滚动条的背景颜色*/}</style>");
});
}
}
} }
}, },
methods: { methods: {},
sortable: function() {
Sortable.create(document.getElementById("ms-down-list"), {
animation: 150,
draggable: '.ms-down-item',
handle: '.icon-tuodong', //设置只有小图标可以拖动
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
Sortable.create(document.getElementById("ms-down-checkbox-list"), {
animation: 150,
draggable: '.ms-down-item',
handle: '.icon-tuodong', //设置只有小图标可以拖动
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
});
},
//判断字段类型
},
}) })
</script> </script>

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

@ -48,8 +48,54 @@
data: '兵不匹配移动端', data: '兵不匹配移动端',
name: '王小虎', name: '王小虎',
}], }],
href: '列表', // href: '列表', //切换页面
addInputType: {}, //添加中的表单项
}, },
methods: {} watch: {
href: function(data) {
var that = this;
if(data == '表单') {
this.$nextTick(function() {
new Sortable(document.getElementById("ms-type-list"), {
group: {
name: 'shared',
pull: 'clone',
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
},
animation: 150,
sort: false,
onStart: function(event) {
//准备拖动时保存拖动选项的数据
that.addInputType = {
id: event.item.dataset.id,
title: event.item.dataset.title,
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
};
},
});
new Sortable(document.getElementById("ms-input-list"), {
group: {
name: 'shared',
pull: false,
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
},
animation: 150,
onAdd: function(event) {
//拖动成功后删除拖动过来的元素
event.item.parentNode.removeChild(event.item);
//想素组添加拖动过来的选项选项
modelFormVue.selectedList.push(that.addInputType);
//modelFormVue.selectedList.splice(0, 0, that.addInputType);
},
});
})
}
}
},
methods: {},
}) })
</script> </script>

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

@ -136,6 +136,17 @@ textarea::-webkit-input-placeholder {
.el-message { .el-message {
border-radius: 0 !important; border-radius: 0 !important;
} }
.sortable-ghost {
opacity: 0.3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.sortable-ghost * {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.ms-mdiy-model-form { .ms-mdiy-model-form {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -185,7 +196,7 @@ textarea::-webkit-input-placeholder {
margin: 8px; margin: 8px;
} }
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item { .ms-mdiy-model-form .ms-editor-body-layout .ms-form-item {
padding: 5px 40px; padding: 6px 15px 6px 30px;
border: 1px solid transparent; border: 1px solid transparent;
} }
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input { .ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input {
@ -267,15 +278,6 @@ textarea::-webkit-input-placeholder {
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i { .ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i {
margin-right: 6px; 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 { .ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .footer {
margin-top: auto; margin-top: auto;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;

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

@ -45,7 +45,7 @@
background: #fff; background: #fff;
margin: 8px; margin: 8px;
.ms-form-item { .ms-form-item {
padding: 5px 40px; padding: 6px 15px 6px 30px;
border: 1px solid transparent; border: 1px solid transparent;
//单位输入框 //单位输入框
.unit-input { .unit-input {
@ -117,15 +117,6 @@
} }
} }
} }
.sortable-ghost {
opacity: .3;
background: #ccc;
* {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
}
} }
.footer { .footer {
margin-top: auto; margin-top: auto;

149
src/main/webapp/static/ms-admin/4.7.0/css/app.css
Unescape View File

@ -0,0 +1,149 @@
/*
*这里的值严格按照UI设计图标注值来进行设置
*/
/*
*颜色
*/
/*
*页面的边距
*/
/*
*字体
*/
/*
*头像
*/
/*
* 按钮
*/
/*
*对常见的多行样式进行了方法封装，方便调用，加快开发效率
*/
html,
body {
min-height: 100vh;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;
font-weight: initial !important;
font-size: 14px !important;
color: #333 !important;
}
html *,
body * {
text-decoration: none !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.ms-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ms-align-center {
display: flex;
align-items: center;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track {
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: #eee;
/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px;
background: #fff;
}
.ms-header {
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
background: #fff;
height: 50px;
}
.ms-header button {
height: 30px;
}
.ms-pagination {
padding: 20px 0;
text-align: right;
}
.ms-fr {
float: right;
}
.ms-tr {
text-align: right;
}
.ms-weixin-content {
width: calc(100% - 140px);
}
.ms-weixin-dialog .el-dialog__header {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
cursor: pointer;
}
.ms-hover:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.sortable-ghost {
opacity: 0.3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.sortable-ghost * {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}

13
src/main/webapp/static/ms-admin/4.7.0/less/app.less
Unescape View File

@ -148,3 +148,16 @@ textarea::-webkit-input-placeholder {
.el-card, .el-message{ .el-card, .el-message{
border-radius:0 !important; border-radius:0 !important;
} }
//拖拽样式
.sortable-ghost {
opacity: .3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
* {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
}
Write Preview
Loading…
Cancel
Save