Signed-off-by: yinxr <2273460044@qq.com>
This commit is contained in:
parent
b9b3ac1a34
commit
d23496fc8c
|
@ -3,18 +3,36 @@
|
||||||
<div id="material-bank-form" class="material-bank-form">
|
<div id="material-bank-form" class="material-bank-form">
|
||||||
<el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
|
<el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
|
||||||
<el-tabs tab-position="left">
|
<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"
|
<el-upload :file-list='fileList' action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
|
||||||
:on-remove="handleRemove">
|
:on-remove="handleRemove">
|
||||||
<i class="el-icon-plus"></i>
|
<i class="el-icon-plus"></i>
|
||||||
</el-upload>
|
</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="">
|
<img width="100%" :src="dialogImageUrl" alt="">
|
||||||
</el-dialog>
|
</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-tab-pane>
|
||||||
</el-tabs>
|
</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>
|
</el-dialog>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var materialBankFormVue = new Vue({
|
var materialBankFormVue = new Vue({
|
||||||
|
@ -23,17 +41,22 @@
|
||||||
isShow: false,
|
isShow: false,
|
||||||
materialGroup: [{
|
materialGroup: [{
|
||||||
label: '未分组',
|
label: '未分组',
|
||||||
|
total:36,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '云创',
|
label: '云创',
|
||||||
|
total:12,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'PM管理',
|
label: 'PM管理',
|
||||||
|
total:16,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
fileList: [], //文件列表
|
fileList: [], //文件列表
|
||||||
dialogImageUrl: '',
|
dialogImageUrl: '',//点击放大,触发弹窗里面的图片地址
|
||||||
dialogVisible: false
|
dialogVisible: false,
|
||||||
|
flieName:"",//放大图片的文件名
|
||||||
|
currentPage:'',//当前页数
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
fileList:{
|
fileList:{
|
||||||
|
@ -48,11 +71,21 @@
|
||||||
open: function () {
|
open: function () {
|
||||||
this.isShow = true;
|
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(){
|
handleRemove:function(){
|
||||||
|
|
||||||
|
},
|
||||||
|
handleSizeChange:function(){
|
||||||
|
|
||||||
|
},
|
||||||
|
handleCurrentChange:function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -111,5 +111,6 @@ textarea::-webkit-input-placeholder {
|
||||||
}
|
}
|
||||||
.el-dialog__footer{
|
.el-dialog__footer{
|
||||||
border-top: 1px solid @borderColor;
|
border-top: 1px solid @borderColor;
|
||||||
|
padding: 15px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -113,4 +113,5 @@ textarea::-webkit-input-placeholder {
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__footer {
|
.ms-weixin-dialog .el-dialog__footer {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
|
padding: 15px !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -113,8 +113,48 @@ textarea::-webkit-input-placeholder {
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__footer {
|
.ms-weixin-dialog .el-dialog__footer {
|
||||||
border-top: 1px solid #ddd;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,6 +111,10 @@ textarea::-webkit-input-placeholder {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
.ms-weixin-dialog .el-dialog__footer {
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
.new-pic-form dl {
|
.new-pic-form dl {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,48 @@
|
||||||
@import "../ms-admin/4.7.0/less/app.less";
|
@import "../ms-admin/4.7.0/less/app.less";
|
||||||
// 素材库表单
|
// 素材库表单
|
||||||
.material-bank-form{
|
.material-bank-form{
|
||||||
|
>.el-dialog__wrapper{
|
||||||
>.el-dialog{
|
>.el-dialog{
|
||||||
.ms-width-height(890px,600px);
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue