ak
/
msopen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
yinxr 2019-01-28 11:11:02 +08:00
parent b9b3ac1a34
commit d23496fc8c
6 changed files with 134 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: '',
dialogVisible: false
dialogImageUrl: '',//点击放大，触发弹窗里面的图片地址
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(){
}
}
})

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

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

1
src/main/webapp/static/mweixin/css/app.css
View File

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

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

@ -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 {
width: 890px;
height: 600px;
.material-bank-form > .el-dialog__wrapper > .el-dialog {
width: 895px !important;
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;
}

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

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

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

@ -1,7 +1,48 @@
@import "../ms-admin/4.7.0/less/app.less";
// 素材库表单
.material-bank-form{
>.el-dialog{
.ms-width-height(890px,600px);
>.el-dialog__wrapper{
>.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);
}
}
}
}
}
}