You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
3.4 KiB
92 lines
3.4 KiB
7 years ago
|
<!-- 素材库 -->
|
||
|
|
<link rel="stylesheet" href="../../../../static/mweixin/css/material-bank-form.css">
|
||
|
|
<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 + '('+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" :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({
|
||
|
|
el: '#material-bank-form',
|
||
|
|
data: {
|
||
|
|
isShow: false,
|
||
|
|
materialGroup: [{
|
||
|
|
label: '未分组',
|
||
|
|
total:36,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '云创',
|
||
|
|
total:12,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'PM管理',
|
||
|
|
total:16,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
fileList: [], //文件列表
|
||
|
|
dialogImageUrl: '',//点击放大，触发弹窗里面的图片地址
|
||
|
|
dialogVisible: false,
|
||
|
|
flieName:"",//放大图片的文件名
|
||
|
|
currentPage:'',//当前页数
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
fileList:{
|
||
|
|
handler:function(n,o){
|
||
|
|
console.log('文件列表',n);
|
||
|
|
},
|
||
|
|
deep:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 表单打开
|
||
|
|
open: function () {
|
||
|
|
this.isShow = true;
|
||
|
|
},
|
||
|
|
handlePictureCardPreview:function(file){
|
||
|
|
// 点击预览大图触发的钩子函数
|
||
|
|
console.log('file',file);
|
||
|
|
this.dialogVisible = true;
|
||
|
|
this.dialogImageUrl = file.url
|
||
|
|
this.flieName = file.name
|
||
|
|
},
|
||
|
|
handleRemove:function(){
|
||
|
|
|
||
|
|
},
|
||
|
|
handleSizeChange:function(){
|
||
|
|
|
||
|
|
},
|
||
|
|
handleCurrentChange:function(){
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|