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

src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl

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

src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl

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

src/main/webapp/WEB-INF/manager/mdiy/diy.ftl

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

src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl

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

src/main/webapp/static/mdiy/css/model-form.css

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

src/main/webapp/static/mdiy/css/model-list.css

@@ -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%;
+}

src/main/webapp/static/mdiy/less/model-form.less

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

src/main/webapp/static/mdiy/less/model-list.less

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