Signed-off-by: yinxr <2273460044@qq.com>

src/main/webapp/WEB-INF/manager/mweixin/menu/material-bank-form.ftl

@@ -3,18 +3,36 @@
 <div id="material-bank-form" class="material-bank-form">
     <el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
         <el-tabs tab-position="left">
-            <el-tab-pane :label="group.label+'(2)'" v-for='(group,index) of materialGroup' :key='index'>
+            <el-tab-pane :label="group.label + '('+group.total+')'" v-for='(group,index) of materialGroup' :key='index'>
                 <el-upload :file-list='fileList' action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove">
                     <i class="el-icon-plus"></i>
                 </el-upload>
-                <el-dialog :visible.sync="dialogVisible">
+                <el-dialog :visible.sync="dialogVisible" :modal='false' :title='flieName' custom-class='ms-weixin-dialog'>
+                    <!-- 这是图片放大 -->
                     <img width="100%" :src="dialogImageUrl" alt="">
                 </el-dialog>
+                <el-row type='flex' justify='end'>
+                    <el-col :span='11'>
+                            <el-pagination 
+                            @size-change="handleSizeChange" 
+                            background
+                            :pager-count="1"
+                            @current-change="handleCurrentChange" 
+                            :current-page.sync="currentPage" 
+                            :page-size="10" 
+                            layout="prev, pager, next, jumper" 
+                            :total="50">
+                        </el-pagination>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
         </el-tabs>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="isShow = false" size='mini'>确 定</el-button>
+            <el-button @click="isShow = false" size='mini'>取 消</el-button>
+        </div>
     </el-dialog>
-
 </div>
 <script>
     var materialBankFormVue = new Vue({
@@ -23,24 +41,29 @@
             isShow: false,
             materialGroup: [{
                     label: '未分组',
+                    total:36,
                 },
                 {
                     label: '云创',
+                    total:12,
                 },
                 {
                     label: 'PM管理',
+                    total:16,
                 },
             ],
             fileList: [], //文件列表
-            dialogImageUrl: '',
+            dialogImageUrl: '',//点击放大，触发弹窗里面的图片地址
-            dialogVisible: false
+            dialogVisible: false,
+            flieName:"",//放大图片的文件名
+            currentPage:'',//当前页数
         },
         watch:{
             fileList:{
                 handler:function(n,o){
-                console.log('文件列表',n);
+                    console.log('文件列表',n);
             },
-            deep:true
+                deep:true
             }
         },
         methods: {
@@ -48,11 +71,21 @@
             open: function () {
                 this.isShow = true;
             },
-            handlePictureCardPreview:function(){
+            handlePictureCardPreview:function(file){
-
+                // 点击预览大图触发的钩子函数
+                console.log('file',file);
+                this.dialogVisible = true;
+                this.dialogImageUrl = file.url
+                this.flieName = file.name
             },
             handleRemove:function(){
 
+            },
+            handleSizeChange:function(){
+
+            },
+            handleCurrentChange:function(){
+
             }
         }
     })

src/main/webapp/static/ms-admin/4.7.0/less/app.less

@@ -111,5 +111,6 @@ textarea::-webkit-input-placeholder {
     }
     .el-dialog__footer{
         border-top: 1px solid @borderColor;
+        padding: 15px !important;
     }
 }

src/main/webapp/static/mweixin/css/app.css

@@ -113,4 +113,5 @@ textarea::-webkit-input-placeholder {
 }
 .ms-weixin-dialog .el-dialog__footer {
   border-top: 1px solid #ddd;
+  padding: 15px !important;
 }

src/main/webapp/static/mweixin/css/material-bank-form.css

@@ -113,8 +113,48 @@ textarea::-webkit-input-placeholder {
 }
 .ms-weixin-dialog .el-dialog__footer {
   border-top: 1px solid #ddd;
+  padding: 15px !important;
 }
-.material-bank-form > .el-dialog {
+.material-bank-form > .el-dialog__wrapper > .el-dialog {
-  width: 890px;
+  width: 895px !important;
-  height: 600px;
+  height: 587px !important;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body {
+  width: 100% !important;
+  height: 469px !important;
+  padding: 0 !important;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs {
+  height: 100%;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header {
+  width: 150px !important;
+  box-sizing: border-box;
+  margin: 0 !important;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll {
+  padding: 20px 10px;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-wrap::after {
+  width: 1px !important;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__content {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px 20px 10px 20px;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__content .el-tab-pane {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__content .el-tab-pane > div:first-child {
+  flex: 1;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .is-active {
+  background-color: #e9eaf0;
+  font-weight: initial;
+  font-size: 14px;
+  color: #333;
 }

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

@@ -111,6 +111,10 @@ textarea::-webkit-input-placeholder {
   font-size: 14px;
   color: #333;
 }
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #ddd;
+  padding: 15px !important;
+}
 .new-pic-form dl {
   margin: 0;
 }

src/main/webapp/static/mweixin/material-bank-form.less

@@ -1,7 +1,48 @@
 @import "../ms-admin/4.7.0/less/app.less";
 // 素材库表单
 .material-bank-form{
-    >.el-dialog{
+    >.el-dialog__wrapper{
-        .ms-width-height(890px,600px);
+        >.el-dialog{
+            .ms-width-height(895px,587px) !important;
+            >.el-dialog__body{
+                .ms-width-height(100%,469px) !important;
+                padding:0 !important; 
+                >.el-tabs{
+                    height: 100%;
+                    // 侧边导航
+                    .el-tabs__header{
+                        width: 150px !important;
+                        box-sizing: border-box;
+                        margin: 0 !important;
+                        .el-tabs__nav-scroll{
+                            padding:20px 10px;
+                        }
+                        .el-tabs__nav-wrap::after{
+                            width: 1px !important;
+                        }
+                        
+                    }
+                    // 导航内容
+                    .el-tabs__content{
+                        height: 100%;
+                        box-sizing: border-box;
+                        padding:20px 20px 10px 20px; 
+                        .el-tab-pane{
+                            height: 100%;
+                            .ms-flex();
+                            flex-direction: column;
+                            >div:first-child{
+                                flex: 1;
+                            }
+                        }
+                    }
+                    // tab选中的样式
+                    .is-active{
+                       background-color:rgb(233, 234, 240);
+                       .ms-font(@defalutSize,@defalutColor);
+                    }
+                }
+            }
+        }
     }
 }