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 28f6da5fdc
commit 02d027bf38
8 changed files with 1017 additions and 145 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. 308
      src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl
  2. 55
      src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl
  3. 12
      src/main/webapp/WEB-INF/manager/mdiy/diy.ftl
  4. 290
      src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl
  5. 249
      src/main/webapp/static/mdiy/css/model-form.css
  6. 141
      src/main/webapp/static/mdiy/css/model-list.css
  7. 103
      src/main/webapp/static/mdiy/less/model-form.less
  8. 4
      src/main/webapp/static/mdiy/less/model-list.less

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

@ -0,0 +1,308 @@
<link rel="stylesheet" href="../../../static/mdiy/css/model-form.css">
<div id="model-form" class="ms-mdiy-model-form" v-if="modelListVue.href == '表单'">
<el-container>
<el-header class="ms-header" height="50px">
<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" size="small" icon="el-icon-plus">保存</el-button>
</el-row>
</el-header>
<el-container>
<el-aside class="ms-editor-type-layout">
<div class="ms-header-title">自定义表单项</div>
<ul>
<li v-for="type in typeList">
<i></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-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'" 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 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>
<!--仅日期-->
<el-date-picker v-if="selected.id == '5'" 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>
<!--单选-->
<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>
<!--多选-->
<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>
<!--下拉菜单-->
<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-option>
</el-select>
<!--上传图片-->
<el-form-item v-if="selected.id == '8'">
<el-button icon="el-icon-upload">上传附件</el-button>
</el-form-item>
<!--上传附件-->
<el-form-item v-if="selected.id == '9'">
<el-button icon="el-icon-upload">上传附件</el-button>
</el-form-item>
</el-form-item>
</el-form>
</el-main>
<el-aside class="ms-editor-attr-layout">
<div class="ms-header-title">属性</div>
<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>
<!--数字类型-->
<!--数值-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '1-1'">
<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 === '2-1'">
<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-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-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>
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '3-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-form-item>
<!--号码-->
<el-form-item label="默认值" :label-width="'70px'" v-if="controlTypeActive === '3-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-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-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-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>
<el-form-item label="添加选项" :label-width="'70px'" v-show="controlTypeActive === '3-4' || controlTypeActive === '3-5'">
<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'">
<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>
<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'">
<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>
<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'">
<i class="el-icon-plus"></i>添加
</div>
</ul>
</el-form-item>
<!--上传图片-->
<el-form-item label="图片数量限制" :label-width="'70px'" v-if="controlTypeActive === '3-6'">
<el-input max="9" 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-7'">
</el-form-item>-->
<!--设置-->
<el-form-item label="设置" :label-width="'70px'" v-if="">
<el-checkbox-group v-model="form.set">
<el-checkbox label="必填"></el-checkbox>
<el-checkbox label="唯一"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<!--说明-->
<el-form-item label="填写说明" :label-width="'70px'">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.explain">
</el-input>
</el-form-item>
</el-form>
<div class="footer">
<el-button size="mini" type="primary">保存</el-button>
</div>
</div>
</el-aside>
</el-container>
</el-container>
</div>
<script>
new Vue({
el: "#model-form",
data: {
typeList: [{
title: "文本",
icon: "",
id: "1",
}, {
title: "号码",
icon: "",
id: "2",
}, {
title: "金额",
icon: "",
id: "3",
}, {
title: "数值",
icon: "",
id: "4",
}, {
title: "日期和时间",
icon: "",
id: "5",
}, {
title: "选项",
icon: "",
id: "6",
}, {
title: "下拉菜单",
icon: "",
id: "7",
}, {
title: "附件",
icon: "",
id: "8",
}, {
title: "图片",
icon: "",
id: "9",
}],
selectedList: [{
title: "文本",
value: "",
id: "1",
}, {
title: "号码",
value: "",
id: "2",
}, {
title: "金额",
value: "",
id: "3",
}, {
title: "数值",
value: "",
id: "4",
}, {
title: "日期和时间",
value: "",
id: "5",
}, {
title: "选项",
value: "",
id: "6",
}, {
title: "下拉菜单",
value: "",
id: "7",
}, {
title: "附件",
value: "",
id: "8",
}, {
title: "图片",
value: "",
id: "9",
}], //选中的
form: {}, //表单数据
controlTypeActive: '', //选中类型
},
watch: {
controlTypeActive: function() {
//切换控件类型时
this.form = [];
this.$forceUpdate();
this.sortable();
}
},
methods: {
sortable: function() {
Sortable.create(document.getElementById("ms-down-list"), {
animation: 150,
draggable: '.ms-down-item',
handle: '.ms-down-item',
});
Sortable.create(document.getElementById("ms-down-checkbox-list"), {
animation: 150,
draggable: '.ms-down-item',
handle: '.ms-down-item',
});
},
//判断字段类型
},
})
</script>

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

@ -0,0 +1,55 @@
<link rel="stylesheet" href="../../../static/mdiy/css/model-list.css">
<div id="model-list" class="ms-mdiy-model-list" v-if="href == '列表'">
<el-container>
<el-header class="ms-header" height="50px">
<el-row>
<el-button size="small" icon="el-icon-plus" type="primary">保存</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
</el-row>
</el-header>
<el-container>
<el-header class="ms-tr ms-header">
<el-select v-model="value" placeholder="请选择" size="small">
</el-select>
<el-button size="small" icon="el-icon-search" type="primary">查询</el-button>
</el-header>
<el-main>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="规则名">
<template slot-scope="scope">
<el-button type="text" v-text="scope.row.data" @click="href='表单'"></el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="发送对象">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
<script>
var modelListVue = new Vue({
el: "#model-list",
data: {
value: "", //
tableData: [{
data: '项目玩法',
name: '王小虎',
}, {
data: '综合评估',
name: '王小虎',
}, {
data: '产权出售',
name: '王小虎',
}, {
data: '兵不匹配移动端',
name: '王小虎',
}],
href: '列表', //
},
methods: {}
})
</script>

12
src/main/webapp/WEB-INF/manager/mdiy/diy.ftl
Unescape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--#include virtual="../include/head-file.ftl" -->
</head>
<body>
<!--#include virtual="diy-model/index.ftl" -->
<!--#include virtual="diy-model/form.ftl" -->
</body>
</html>

290
src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl
Unescape View File

@ -1,152 +1,152 @@
<!-- 消息回复 && 关注回复 --> <!-- 消息回复 && 关注回复 -->
<link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css"> <link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css">
<div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'"> <div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
<el-container class="ms-admin-message-reply"> <el-container class="ms-admin-message-reply">
<el-header class="ms-header" height="50px"> <el-header class="ms-header" height="50px">
<el-row> <el-row>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button> <el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button> <el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
</el-row> </el-row>
</el-header> </el-header>
<el-container> <el-container>
<el-header class="ms-tr ms-header"> <el-header class="ms-tr ms-header">
<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"> <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search">
</el-input> </el-input>
</el-header> </el-header>
<em-main class="ms-container"> <em-main class="ms-container">
<div>回复内容</div> <div>回复内容</div>
<el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs"> <el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
<el-tab-pane label="文字" name="text"> <el-tab-pane label="文字" name="text">
<el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm"> <el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
<el-form-item class="ms-message-reply-content"> <el-form-item class="ms-message-reply-content">
<el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'> <el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'>
</el-input> </el-input>
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i> <i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
<div class="footer"> <div class="footer">
<i class="el-icon-star-off"></i> <i class="el-icon-star-off"></i>
<!-- 插入超链接 --> <!-- 插入超链接 -->
<el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'> <el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
<el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'> <el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
<el-form-item label="文本内容" prop='text'> <el-form-item label="文本内容" prop='text'>
<el-input v-model="hyperlinkForm.text" size='mini'></el-input> <el-input v-model="hyperlinkForm.text" size='mini'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="链接地址" prop='link'> <el-form-item label="链接地址" prop='link'>
<el-input v-model="hyperlinkForm.link" size='mini'></el-input> <el-input v-model="hyperlinkForm.link" size='mini'></el-input>
</el-form-item> </el-form-item>
<el-form-item style="margin:0"> <el-form-item style="margin:0">
<el-row type='flex' justify='end'> <el-row type='flex' justify='end'>
<el-col span='6'> <el-col span='6'>
<el-button type="primary" @click="saveLink" size='mini'>保存</el-button> <el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
</el-col> </el-col>
<el-col span='6'> <el-col span='6'>
<el-button @click="cancelLink" size='mini'>取消</el-button> <el-button @click="cancelLink" size='mini'>取消</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
</el-form> </el-form>
<a slot="reference">插入超链接</a> <a slot="reference">插入超链接</a>
</el-popover> </el-popover>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="图片" name="picture" class="message-reply-picture"> <el-tab-pane label="图片" name="picture" class="message-reply-picture">
<div onclick="materialBankFormVue.open()"> <div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i> <i class="el-icon-picture-outline"></i>
<span>从素材库选择</span> <span>从素材库选择</span>
</div> </div>
<div onclick="newPicFormVue.open()"> <div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<span>新建图片</span> <span>新建图片</span>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="图文" name="article" class="message-reply-article"> <el-tab-pane label="图文" name="article" class="message-reply-article">
<div onclick="materialBankFormVue.open()"> <div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i> <i class="el-icon-picture-outline"></i>
<span>从素材库选择</span> <span>从素材库选择</span>
</div> </div>
<div onclick="newPicFormVue.open()"> <div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<span>新建图文</span> <span>新建图文</span>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</em-main> </em-main>
</el-container> </el-container>
</el-container> </el-container>
</div> </div>
<script> <script>
var messageReplyVue = new Vue({ var messageReplyVue = new Vue({
el: "#message-reply", el: "#message-reply",
data: { data: {
messageReplyForm: { messageReplyForm: {
reply: '', reply: '',
}, },
messageReplyFormRules: { messageReplyFormRules: {
name: [{ name: [{
required: true, required: true,
message: '请输入菜单名称', message: '请输入菜单名称',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
{ {
min: 1, min: 1,
max: 5, max: 5,
message: '长度在 1 到 5 个字符', message: '长度在 1 到 5 个字符',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
} }
], ],
}, },
activeName: 'text', activeName: 'text',
// 超链接 // 超链接
hyperlinkForm: { hyperlinkForm: {
text: "", text: "",
link: "", link: "",
}, },
hyperlinkRule: { hyperlinkRule: {
text: [{ text: [{
required: true, required: true,
message: '请输入超链接显示的文本内容', message: '请输入超链接显示的文本内容',
trigger: 'blur' trigger: 'blur'
}, },
{ {
min: 1, min: 1,
max: 50, max: 50,
message: '长度在 1 到 50 个字符', message: '长度在 1 到 50 个字符',
trigger: 'blur' trigger: 'blur'
} }
], ],
link: [{ link: [{
required: true, required: true,
message: '请输入超链接地址', message: '请输入超链接地址',
trigger: 'change' trigger: 'change'
}, { }, {
validator: function (rule, value, callback) { validator: function(rule, value, callback) {
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ? /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
callback() : callback('链接不合法') callback() : callback('链接不合法')
} }
}], }],
}, },
popoverShow:false,//弹出层显示与否的状态值 popoverShow: false, //弹出层显示与否的状态值
}, },
methods: { methods: {
// 保存超链接 // 保存超链接
saveLink: function () { saveLink: function() {
var that = this; var that = this;
that.$refs.hyperlinkForm.validate(function (boolean,object) { that.$refs.hyperlinkForm.validate(function(boolean, object) {
if(boolean){ if(boolean) {
// 校验成功 // 校验成功
that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>` that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>`
that.cancelLink() that.cancelLink()
} }
}) })
}, },
// 取消超链接 // 取消超链接
cancelLink: function () { cancelLink: function() {
this.$refs.hyperlinkForm.resetFields(); this.$refs.hyperlinkForm.resetFields();
this.popoverShow = false this.popoverShow = false
}, },
} }
}) })
</script> </script>

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

@ -0,0 +1,249 @@
/*
*这里的值严格按照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;
}
.ms-mdiy-model-form {
width: 100%;
height: 100%;
}
.ms-mdiy-model-form .el-container {
height: 100%;
}
.ms-mdiy-model-form .ms-row button {
margin-left: 10px;
}
.ms-mdiy-model-form .ms-header-title {
margin-bottom: 15px;
}
.ms-mdiy-model-form .ms-editor-type-layout {
background: #fff;
min-width: 15%;
padding: 20px;
border-right: 1px solid #e6e6e6;
}
.ms-mdiy-model-form .ms-editor-type-layout ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.ms-mdiy-model-form .ms-editor-type-layout ul li {
width: calc(50% - 5px);
margin: 0 0 5px 0;
padding: 5px;
list-style: none;
background: #E6F7FF;
border: 1px solid #e6e6e6;
cursor: pointer;
}
.ms-mdiy-model-form .ms-editor-type-layout ul li i {
color: #999;
margin-right: 5px;
}
.ms-mdiy-model-form .ms-editor-body-layout {
background: #fff;
margin: 8px;
}
.ms-mdiy-model-form .ms-editor-attr-layout {
background: #fff;
min-width: 20%;
padding: 20px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-header-title {
border-left: 1px solid #e6e6e6;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr {
display: flex;
flex-direction: column;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form {
padding: 15px;
height: calc(100vh - 200px);
overflow: auto;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item__label {
line-height: 1.4em;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item {
margin-bottom: 14px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list {
margin: 0;
padding: 0;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li {
display: flex;
align-items: center;
list-style: none;
margin-bottom: 12px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i {
cursor: pointer;
font-size: 14px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-input,
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-radio,
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .icon-tuodong {
margin-right: 6px;
line-height: initial;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus {
cursor: pointer;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.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 .footer {
margin-top: auto;
border-top: 1px solid #e6e6e6;
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
}

141
src/main/webapp/static/mdiy/css/model-list.css
Unescape View File

@ -0,0 +1,141 @@
/*
*这里的值严格按照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;
}
.ms-mdiy-model-list {
width: 100%;
}

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

@ -0,0 +1,103 @@
@import "../../ms-admin/4.7.0/less/app.less";
//表单页
.ms-mdiy-model-form {
.ms-width-height(100%);
.el-container {
height: 100%;
}
.ms-row {
button {
margin-left: 10px;
}
}
.ms-header-title {
margin-bottom: 15px;
}
//左侧自定义表单项
.ms-editor-type-layout {
background: #fff;
min-width: 15%;
padding: 20px;
border-right: 1px solid @borderColor;
ul {
.ms-margin-padding(0);
.ms-flex();
flex-wrap: wrap;
li {
width: ~'calc(50% - 5px)';
.ms-margin-padding(0 0 5px 0, 5px);
list-style: none;
background: #E6F7FF;
border: 1px solid @borderColor;
cursor: pointer;
i {
color: #999;
margin-right: 5px;
}
}
}
}
//中间排序
.ms-editor-body-layout {
background: #fff;
margin: 8px;
}
//右侧选项属性
.ms-editor-attr-layout {
background: #fff;
min-width: 20%;
padding: 20px;
.ms-header-title {
border-left: 1px solid @borderColor;
}
.ms-editor-attr {
display: flex;
flex-direction: column;
.form {
padding: 15px;
height: ~'calc(100vh - 200px)';
overflow: auto;
.el-form-item__label {
line-height: 1.4em;
}
.el-form-item {
margin-bottom: 14px;
}
//下拉排序添加选项
.ms-down-list {
.ms-margin-padding(0);
li {
.ms-align-center;
list-style: none;
margin-bottom: 12px;
i {
cursor: pointer;
.ms-hover;
font-size: 14px;
}
.ms-input,
.ms-radio,
.icon-tuodong {
margin-right: 6px;
line-height: initial;
}
}
.ms-plus {
.ms-hover;
i {
margin-right: 6px;
}
}
}
}
.footer {
margin-top: auto;
border-top: 1px solid @borderColor;
height: 60px;
.ms-align-center;
justify-content: flex-end;
padding-right: 10px;
}
}
}
}

4
src/main/webapp/static/mdiy/less/model-list.less
Unescape View File

@ -0,0 +1,4 @@
@import "../../ms-admin/4.7.0/less/app.less";
.ms-mdiy-model-list {
width: 100%;
}
Write Preview
Loading…
Cancel
Save