Browse Source

Update picture.vue

1.修改图片路径公式
2.图片改为固定大小预览,点击查看大图
3.上传成功后自动更新列表
master
许孟阳 3 years ago
parent
commit
7ed90aa62f
  1. 30
      vue/src/views/biz/picture.vue

30
vue/src/views/biz/picture.vue

@ -2,7 +2,7 @@
<div id="picture"> <div id="picture">
<MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)"> <MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)">
<template slot="header"> <template slot="header">
<el-upload class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false" <el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false"
:show-file-list="false"> :show-file-list="false">
<el-button :size="$store.state.size" type="success" icon="el-icon-upload"> <el-button :size="$store.state.size" type="success" icon="el-icon-upload">
上传图片 上传图片
@ -15,7 +15,7 @@
<el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()" <el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()"
:subTitle="item.time + ' ' + item.space + ' ' + (item.remark ? item.remark : '')"> :subTitle="item.time + ' ' + item.space + ' ' + (item.remark ? item.remark : '')">
<template slot="icon"> <template slot="icon">
<el-image :src="'http://'+ $store.state.conf.host + '/' + item.path"> <el-image class="image" :src="$store.state.conf.host + '/' + item.path" :preview-src-list="srcList">
</el-image> </el-image>
</template> </template>
<template slot="extra"> <template slot="extra">
@ -29,6 +29,7 @@
<el-pagination :current-page="example.page" :page-sizes="[10, 20, 50, 100]" :page-size="example.size" <el-pagination :current-page="example.page" :page-sizes="[10, 20, 50, 100]" :page-size="example.size"
layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" /> @current-change="handleCurrentChange" />
</div> </div>
</template> </template>
@ -74,6 +75,8 @@
desc: '结束时间' desc: '结束时间'
}] }]
srcList = [];
example = { example = {
page: 1, page: 1,
size: 20 size: 20
@ -95,9 +98,13 @@
if (page != null) { if (page != null) {
this.example.page = page this.example.page = page
} }
this.$get(that.url, that.example).then(function(response) { this.$get(that.url, that.example).then(rsp => {
if (response) { that.srcList = [];
that.result = response if (rsp) {
that.result = rsp
rsp.rows.forEach(item => {
that.srcList.push(that.$store.state.conf.host + '/' + item.path);
})
} else { } else {
that.result = { that.result = {
rows: [], rows: [],
@ -173,6 +180,7 @@
if (response.success == false) { if (response.success == false) {
that.$showMessage('error', response.message, true); that.$showMessage('error', response.message, true);
} else { } else {
that.query();
that.$showMessage('success', response.message, true) that.$showMessage('success', response.message, true)
} }
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
@ -190,12 +198,17 @@
} }
} }
if (file) { if (file) {
const that = this;
this.$confirm('是否要上传剪切板中复制的图片?', '提示', { this.$confirm('是否要上传剪切板中复制的图片?', '提示', {
confirmButtonText: '是的', confirmButtonText: '是的',
cancelButtonText: '不用', cancelButtonText: '不用',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$upload(file, this.url); this.$upload(file, this.url).then(rsp => {
if(rsp){
that.query();
}
});
}).catch(() => {}) }).catch(() => {})
} }
} }
@ -234,4 +247,9 @@
.image-list { .image-list {
overflow-y: auto; overflow-y: auto;
} }
.image {
height: 120px;
width: 200px;
}
</style> </style>

Loading…
Cancel
Save