提交 0a6d469d authored 作者: 王鹏飞's avatar 王鹏飞

bug fixes

上级 6a6fb4a8
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"vue-loader": "^15.9.7", "vue-loader": "^15.9.7",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
...@@ -11071,6 +11072,11 @@ ...@@ -11071,6 +11072,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"node_modules/source-list-map": { "node_modules/source-list-map": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
...@@ -12624,6 +12630,14 @@ ...@@ -12624,6 +12630,14 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
}, },
"node_modules/vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"dependencies": {
"sortablejs": "1.10.2"
}
},
"node_modules/vuex": { "node_modules/vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
...@@ -22545,6 +22559,11 @@ ...@@ -22545,6 +22559,11 @@
"is-plain-obj": "^1.0.0" "is-plain-obj": "^1.0.0"
} }
}, },
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-list-map": { "source-list-map": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
...@@ -23797,6 +23816,14 @@ ...@@ -23797,6 +23816,14 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
}, },
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vuex": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
"vue-loader": "^15.9.7", "vue-loader": "^15.9.7",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"engines": { "engines": {
......
<template> <template>
<div class="app-upload"> <div class="app-upload">
<draggable
v-model="fileList"
group="people"
class="file-list el-upload-list--picture-card"
@end="onEnd"
v-if="showFileList"
>
<div class="file-item" v-for="(file, index) in fileList" :key="index">
<!-- <el-image style="width: 100%; height: 100%" :src="file.url" :preview-src-list="fileList.map(item => item.url)"> -->
<img :src="file.url" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!$attrs.disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</draggable>
<el-upload <el-upload
action="https://webapp-pub.oss-cn-beijing.aliyuncs.com" action="https://webapp-pub.oss-cn-beijing.aliyuncs.com"
type="drag" type="drag"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:on-success="handleSuccess" :on-success="handleSuccess"
:on-preview="handlePreview" :show-file-list="false"
:on-remove="handleRemove"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:data="data" :data="data"
:file-list="fileList"
v-bind="$attrs" v-bind="$attrs"
v-on="$listeners" v-on="$listeners"
style="display: inline"
> >
<slot> <slot>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
...@@ -25,18 +44,22 @@ ...@@ -25,18 +44,22 @@
<script> <script>
import { getSignature } from '@/api/base' import { getSignature } from '@/api/base'
import md5 from 'blueimp-md5' import md5 from 'blueimp-md5'
import draggable from 'vuedraggable'
export default { export default {
name: 'AppUpload', name: 'AppUpload',
components: { draggable },
props: { props: {
value: { type: [String, Array] }, value: { type: [String, Array] },
prefix: { type: String, default: 'upload/shop-admin/' } prefix: { type: String, default: 'upload/shop-admin/' },
showFileList: { type: Boolean, default: true }
}, },
data() { data() {
return { return {
data: {}, // 请求参数 data: {}, // 请求参数
fileList: [], // 文件列表 fileList: [], // 文件列表
dialogVisible: false, dialogVisible: false,
previewFile: {} previewFile: {},
message: null
} }
}, },
watch: { watch: {
...@@ -65,6 +88,12 @@ export default { ...@@ -65,6 +88,12 @@ export default {
}, },
methods: { methods: {
beforeUpload(file) { beforeUpload(file) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
this.message && this.message.close()
this.message = this.$message({ type: 'error', message: '文件超出个数限制' })
return false
}
const fileName = file.name const fileName = file.name
const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.')) const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -84,6 +113,10 @@ export default { ...@@ -84,6 +113,10 @@ export default {
handleSuccess(response, file) { handleSuccess(response, file) {
let value = null let value = null
if (this.isMultiple) { if (this.isMultiple) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
return
}
this.fileList.push({ name: file.name, url: file.raw.url }) this.fileList.push({ name: file.name, url: file.raw.url })
value = this.fileList value = this.fileList
} else { } else {
...@@ -94,19 +127,22 @@ export default { ...@@ -94,19 +127,22 @@ export default {
this.dispatch('ElFormItem', 'el.form.change', value) this.dispatch('ElFormItem', 'el.form.change', value)
}, },
// 删除 // 删除
handleRemove(file, fileList) { handleRemove(index) {
const value = this.isMultiple ? fileList : '' this.fileList.splice(index, 1)
this.$emit('input', value) this.$emit('input', this.fileList)
this.dispatch('ElFormItem', 'el.form.change', value) this.dispatch('ElFormItem', 'el.form.change', this.fileList)
}, },
// 预览 // 预览
handlePreview(file) { handlePreview(file) {
this.previewFile = file this.previewFile = file
this.dialogVisible = true this.dialogVisible = true
}, },
handleExceed(file, fileList) { handleExceed() {
this.$message({ type: 'error', message: '文件超出个数限制' }) this.$message({ type: 'error', message: '文件超出个数限制' })
}, },
onEnd() {
this.$emit('input', this.fileList)
},
dispatch(componentName, eventName, params) { dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root var parent = this.$parent || this.$root
var name = parent.$options.componentName var name = parent.$options.componentName
...@@ -132,4 +168,27 @@ export default { ...@@ -132,4 +168,27 @@ export default {
.el-upload-list__item { .el-upload-list__item {
transition: none !important; transition: none !important;
} }
.file-list {
margin: 0;
display: inline;
vertical-align: top;
}
.file-item {
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
margin: 0 8px 8px 0;
display: inline-block;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style> </style>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
:key="index" :key="index"
></sku-group> ></sku-group>
<el-button type="text" @click="addSku"> <el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加规格项目
</el-button> </el-button>
</div> </div>
</template> </template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论