|
|
@ -2,8 +2,8 @@ |
|
|
|
<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 ref="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" |
|
|
|
:show-file-list="false"> |
|
|
|
:multiple="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"> |
|
|
|
上传图片 |
|
|
|
上传图片 |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
@ -13,9 +13,10 @@ |
|
|
|
<el-row class="image-list" :style="{ height: $store.state.sizes.pTableHei + 'px' }"> |
|
|
|
<el-row class="image-list" :style="{ height: $store.state.sizes.pTableHei + 'px' }"> |
|
|
|
<el-col v-for="(item, index) in result.rows" :xs="8" :sm="7" :md="6" :xl="4"> |
|
|
|
<el-col v-for="(item, index) in result.rows" :xs="8" :sm="7" :md="6" :xl="4"> |
|
|
|
<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"> |
|
|
|
<template slot="icon"> |
|
|
|
<template slot="icon"> |
|
|
|
<el-image class="image" :src="$store.state.conf.host + '/' + item.path" :preview-src-list="srcList"> |
|
|
|
<el-image @contextmenu="modify(item)" 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"> |
|
|
@ -30,6 +31,18 @@ |
|
|
|
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" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog :title="row.path" :visible.sync="flag.modify" :close-on-click-modal="false" width="30%"> |
|
|
|
|
|
|
|
<el-button :plain="true" type="info" style="width:100%" @click="copy(row, true)">复制为MarkDown语法 |
|
|
|
|
|
|
|
</el-button> |
|
|
|
|
|
|
|
<br><br> |
|
|
|
|
|
|
|
<el-button :plain="true" type="success" style="width:100%"> |
|
|
|
|
|
|
|
<el-upload class="update-btn" ref="update" :data="row" :action="updateImgUrl" :on-error="onError" |
|
|
|
|
|
|
|
:on-success="onSuccess" :multiple="false" :show-file-list="false"> |
|
|
|
|
|
|
|
更新图片内容(ctrl+v) |
|
|
|
|
|
|
|
</el-upload> |
|
|
|
|
|
|
|
</el-button> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
@ -50,13 +63,16 @@ |
|
|
|
}) |
|
|
|
}) |
|
|
|
export default class Picture extends Vue { |
|
|
|
export default class Picture extends Vue { |
|
|
|
url = 'picture'; |
|
|
|
url = 'picture'; |
|
|
|
|
|
|
|
imgUrl = 'picture/img'; |
|
|
|
uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url; |
|
|
|
uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url; |
|
|
|
|
|
|
|
updateImgUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.imgUrl; |
|
|
|
flag = { |
|
|
|
flag = { |
|
|
|
list: true, |
|
|
|
list: true, |
|
|
|
save: false, |
|
|
|
save: false, |
|
|
|
update: false, |
|
|
|
update: false, |
|
|
|
del: true, |
|
|
|
del: true, |
|
|
|
title: true |
|
|
|
title: true, |
|
|
|
|
|
|
|
modify: false |
|
|
|
} |
|
|
|
} |
|
|
|
terms = [{ |
|
|
|
terms = [{ |
|
|
|
code: 'remark', |
|
|
|
code: 'remark', |
|
|
@ -76,7 +92,7 @@ |
|
|
|
}] |
|
|
|
}] |
|
|
|
|
|
|
|
|
|
|
|
srcList = []; |
|
|
|
srcList = []; |
|
|
|
|
|
|
|
row = {}; |
|
|
|
example = { |
|
|
|
example = { |
|
|
|
page: 1, |
|
|
|
page: 1, |
|
|
|
size: 20 |
|
|
|
size: 20 |
|
|
@ -114,14 +130,19 @@ |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
copy(row) { |
|
|
|
copy(row, md) { |
|
|
|
const that = this; |
|
|
|
const that = this; |
|
|
|
const host = this.$store.state.conf.host; |
|
|
|
const host = this.$store.state.conf.host; |
|
|
|
const path = 'http://' + host + "/" + row.path; |
|
|
|
let path = 'http://' + host + "/" + row.path; |
|
|
|
|
|
|
|
if (md) { |
|
|
|
|
|
|
|
path = ""; |
|
|
|
|
|
|
|
} |
|
|
|
this.$copyText(path).then(e => { |
|
|
|
this.$copyText(path).then(e => { |
|
|
|
that.$showMessage("success", "复制成功"); |
|
|
|
that.$showMessage("success", "复制成功"); |
|
|
|
|
|
|
|
that.flag.modify = false; |
|
|
|
}, e => { |
|
|
|
}, e => { |
|
|
|
that.$showMessage("success", "复制失败"); |
|
|
|
that.$showMessage("success", "复制失败"); |
|
|
|
|
|
|
|
that.flag.modify = false; |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -154,6 +175,18 @@ |
|
|
|
}).catch(() => {}) |
|
|
|
}).catch(() => {}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
modify(row) { |
|
|
|
|
|
|
|
this.flag.modify = true; |
|
|
|
|
|
|
|
this.row = row; |
|
|
|
|
|
|
|
// 去掉默认事件 |
|
|
|
|
|
|
|
const that = this; |
|
|
|
|
|
|
|
document.oncontextmenu = function(e) { |
|
|
|
|
|
|
|
if(that.flag.modify){ |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
delate(row) { |
|
|
|
delate(row) { |
|
|
|
const that = this |
|
|
|
const that = this |
|
|
|
this.$confirm('确定要删除该图片吗?', '提示', { |
|
|
|
this.$confirm('确定要删除该图片吗?', '提示', { |
|
|
@ -176,12 +209,12 @@ |
|
|
|
console.log(err); |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
} |
|
|
|
onSuccess(response, file, fileList) { |
|
|
|
onSuccess(response, file, fileList) { |
|
|
|
const that = this; |
|
|
|
|
|
|
|
if (response.success == false) { |
|
|
|
if (response.success == false) { |
|
|
|
that.$showMessage('error', response.message, true); |
|
|
|
this.$showMessage('error', response.message, true); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
that.query(); |
|
|
|
this.$showMessage('success', response.message, true) |
|
|
|
that.$showMessage('success', response.message, true) |
|
|
|
this.query(); |
|
|
|
|
|
|
|
this.flag.modify = true; |
|
|
|
} |
|
|
|
} |
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
} |
|
|
|
} |
|
|
@ -204,8 +237,15 @@ |
|
|
|
cancelButtonText: '不用', |
|
|
|
cancelButtonText: '不用', |
|
|
|
type: 'warning' |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
}).then(() => { |
|
|
|
this.$upload(file, this.url).then(rsp => { |
|
|
|
let data = null; |
|
|
|
if(rsp){ |
|
|
|
let url = this.url; |
|
|
|
|
|
|
|
if (that.flag.modify) { |
|
|
|
|
|
|
|
data = this.row; |
|
|
|
|
|
|
|
url = this.imgUrl; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.$upload(file, url, data).then(rsp => { |
|
|
|
|
|
|
|
if (rsp) { |
|
|
|
|
|
|
|
that.flag.modify = true; |
|
|
|
that.query(); |
|
|
|
that.query(); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|