Signed-off-by: yinxr 添加分组交互及界面

src/main/webapp/WEB-INF/manager/mweixin/menu/new-pic-form.ftl

@@ -4,11 +4,7 @@
     <el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
         <el-form :model="newPicForm">
             <el-form-item label="上传图片" label-width="100px">
-                    <el-upload
-                    class="new-pic-upload"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :file-list="picList"
+                <el-upload class="new-pic-upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="picList"
                     list-type="picture">
                     <el-button size="small" type="primary">本地上传</el-button>
                     <div slot="tip" class="el-upload__tip">
@@ -16,12 +12,22 @@
                             <dt>注意：1.图片上传仅支持bmp、png、jpeg、jpg、gif格式</dt>
                             <dd>2.同步至微信公众平台的图片最大2M,存在铭飞本地，最大支持5M的图片</dd>
                         </dl>
-                        
                     </div>
-                  </el-upload>
+                </el-upload>
             </el-form-item>
             <el-form-item label="选择分组" label-width="100px">
-                <el-button icon='el-icon-plus' size='mini'>添加分组</el-button>
+                <el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
+                    <el-form label-width="81px" :model="groupForm" ref="groupForm" :rules='groupRule'>
+                        <el-form-item label="创建分组" prop='name'>
+                            <el-input v-model="groupForm.name" size='mini'></el-input>
+                        </el-form-item>
+                        <div class="dialog-footer" style="float:right">
+                            <el-button @click="cancel" size='mini'>取消</el-button>
+                            <el-button type="primary" @click="saveGroup" size='mini'>确定</el-button>
+                        </div>
+                    </el-form>
+                    <el-button slot="reference" icon='el-icon-plus' size='mini'>添加分组</el-button>
+                </el-popover>
                 <el-select v-model="selectedOption" placeholder="请选择分组" size='mini'>
                     <el-option v-for="item in picGroup" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
@@ -35,40 +41,73 @@
     </el-dialog>
 </div>
 <script>
-var newPicFormVue = new Vue({
-    el: '#new-pic-form',
-    data: {
-        isShow: false,
-        newPicForm: {
+    var newPicFormVue = new Vue({
+        el: '#new-pic-form',
+        data: {
+            isShow: false,
+            newPicForm: {
 
-        },
-        picGroup: [{
-                value: 'default',
-                label: '默认分组'
-            }, {
-                value: 'yun',
-                label: '云创'
             },
-            {
-                value: 'pm',
-                label: 'PM管理系统'
-            }],
-        selectedOption:'',//被选中的选项
-        picList:[],//图片列表
-    },
-    methods: {
-        // 表单打开
-        open: function () {
-            this.isShow = true;
+            picGroup: [{
+                    value: 'default',
+                    label: '默认分组'
+                }, {
+                    value: 'yun',
+                    label: '云创'
+                },
+                {
+                    value: 'pm',
+                    label: 'PM管理系统'
+                }
+            ],
+            selectedOption: '', //被选中的选项
+            picList: [], //图片列表
+            popoverShow: false,
+            groupForm: { //创建分组
+                name: ''
+            },
+            // 规则
+            groupRule: {
+                name: [{
+                        required: true,
+                        message: '请输入分组名称',
+                        trigger: ['blur', 'change']
+                    },
+                    {
+                        min: 1,
+                        max: 5,
+                        message: '长度在 1 到 5 个字符',
+                        trigger: ['blur', 'change']
+                    }
+                ]
+            }
         },
-        // 图片刚加载完
-        handlePreview:function(){
+        methods: {
+            // 表单打开
+            open: function () {
+                this.isShow = true;
+            },
+            // 图片刚加载完
+            handlePreview: function () {
 
-        },
-        // 图片删除
-        handleRemove:function(){
+            },
+            // 图片删除
+            handleRemove: function () {
+
+            },
+            saveGroup: function () {
+                var that = this;
+                that.$refs.groupForm.validate(function (pass, object) {
+                    if (pass) {
+                        // 校验成功
+                    }
+                })
+            },
+            cancel: function () {
+                this.popoverShow = false
+                this.$refs.groupForm.resetFields()
+            },
 
         },
-    },
-})
+    })
 </script>

src/main/webapp/static/mweixin/css/new-pic-form.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -131,7 +131,7 @@ textarea::-webkit-input-placeholder {
   line-height: 1;
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
 }
 .new-pic-form dt {
   display: inline-block;

src/main/webapp/static/mweixin/new-pic-form.less

@@ -11,5 +11,5 @@
     dt{
         display: inline-block;
         margin-bottom: 8px;
-    } 
+    }
 }