wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

一键获取

Browse Source
master
fanfan 8 months ago
parent 077c2e3e84
commit ddb2ab313f
4 changed files with 840 additions and 1000 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/goods/index.js
  2. 369
      src/components/SelectImage/SelectImage.vue
  3. 42
      src/views/goods/Create.vue
  4. 1418
      src/views/goods/modules/Update.vue

11
src/api/goods/index.js
Unescape View File

@ -14,7 +14,16 @@ const api = {
exportData: '/goods/import', exportData: '/goods/import',
setStorePrice: 'store/setStorePrice', setStorePrice: 'store/setStorePrice',
getStorePriceInfo: 'store/getStorePriceInfo', getStorePriceInfo: 'store/getStorePriceInfo',
pool: '/goods/pool' pool: '/goods/pool',
collector:'/goods/collector'
}
export function getCollector (params) {
return axios({
url: api.collector,
method: 'get',
params
})
} }
/** /**
* 更新状态 * 更新状态

369
src/components/SelectImage/SelectImage.vue
Unescape View File

@ -1,55 +1,28 @@
<template> <template>
<div class="image-list clearfix" :class="{ multiple }"> <div class="image-list clearfix" :class="{ multiple }">
<!-- 文件列表 --> <!-- 文件列表 -->
<!-- draggable是拖拽组件 --> <!-- draggable是拖拽组件 -->
<draggable <draggable v-if="selectedItems.length" v-model="selectedItems" @start="drag=true" @end="drag=false" @update="onUpdate">
v-if="selectedItems.length" <transition-group class="draggable-item" type="transition" :name="'flip-list'">
v-model="selectedItems" <div v-for="(item, index) in selectedItems" :key="item.file_id>0?item.file_id:item.id" class="file-item" :style="{ width: `${width}px`, height: `${width}px` }">
@start="drag=true" <!-- 预览图 -->
@end="drag=false" <a :href="item.preview_url" target="_blank">
@update="onUpdate" <div class="img-cover" :style="{ backgroundImage: `url('${item.preview_url}')` }"></div>
> </a>
<transition-group class="draggable-item" type="transition" :name="'flip-list'"> <!-- 删除文件 -->
<div <a-icon class="icon-close" theme="filled" type="close-circle" @click="handleDeleteFileItem(index)" />
v-for="(item, index) in selectedItems" </div>
:key="item.file_id" </transition-group>
class="file-item" </draggable>
:style="{ width: `${width}px`, height: `${width}px` }" <!-- 图片选择器 -->
> <!-- 如果单选, selectedItems无内容时 显示 -->
<!-- 预览图 --> <!-- 如果多选, selectedItems数量小于 maxNum 显示 -->
<a :href="item.preview_url" target="_blank"> <div v-show="(!multiple && selectedItems.length <= 0) || (multiple && selectedItems.length < maxNum)" class="selector" :style="{ width: `${width}px`, height: `${width}px` }" @click="handleSelectImage">
<div class="img-cover" :style="{ backgroundImage: `url('${item.preview_url}')` }"></div> <a-icon class="icon-plus" :style="{ fontSize: `${width * 0.4}px` }" type="plus" />
</a> </div>
<!-- 删除文件 --> <!-- 文件选择器 -->
<a-icon <FilesModal ref="FilesModal" :multiple="multiple" :maxNum="maxNum" :selectedNum="selectedItems.length" @handleSubmit="handleSelectImageSubmit" />
class="icon-close" </div>
theme="filled"
type="close-circle"
@click="handleDeleteFileItem(index)"
/>
</div>
</transition-group>
</draggable>
<!-- 图片选择器 -->
<!-- 如果单选, selectedItems无内容时 显示 -->
<!-- 如果多选, selectedItems数量小于 maxNum 显示 -->
<div
v-show="(!multiple && selectedItems.length <= 0) || (multiple && selectedItems.length < maxNum)"
class="selector"
:style="{ width: `${width}px`, height: `${width}px` }"
@click="handleSelectImage"
>
<a-icon class="icon-plus" :style="{ fontSize: `${width * 0.4}px` }" type="plus" />
</div>
<!-- 文件选择器 -->
<FilesModal
ref="FilesModal"
:multiple="multiple"
:maxNum="maxNum"
:selectedNum="selectedItems.length"
@handleSubmit="handleSelectImageSubmit"
/>
</div>
</template> </template>
<script> <script>
@ -60,171 +33,181 @@ import { FilesModal } from '@/components/Modal'
// 图片选择器组件 // 图片选择器组件
export default { export default {
name: 'SelectImage', name: 'SelectImage',
components: { components: {
FilesModal, FilesModal,
draggable draggable
}, },
model: { model: {
prop: 'value', prop: 'value',
event: 'change' event: 'change'
}, },
props: { props: {
// 多选模式, 如果false为单选 // 多选模式, 如果false为单选
multiple: PropTypes.bool.def(false), multiple: PropTypes.bool.def(false),
// 最大选择的数量限制, multiple模式下有效 // 最大选择的数量限制, multiple模式下有效
maxNum: PropTypes.integer.def(100), maxNum: PropTypes.integer.def(100),
// 默认选中的文件 // 默认选中的文件
defaultList: PropTypes.array.def([]), defaultList: PropTypes.array.def([]),
// 元素的尺寸(宽) // 元素的尺寸(宽)
width: PropTypes.integer.def(80) width: PropTypes.integer.def(80),
}, source: PropTypes.any.def(0)
data () { },
return { data() {
// 选择的图片列表 return {
selectedItems: [], // 选择的图片列表
// 禁止传参 (防止selectedItems为空时defaultList重新赋值) selectedItems: [],
allowProps: true // 禁止传参 (防止selectedItems为空时defaultList重新赋值)
} allowProps: true
}, }
watch: { },
// 设置默认数据 watch: {
defaultList: { // 设置默认数据
// 首次加载的时候执行函数 defaultList: {
immediate: true, // 首次加载的时候执行函数
handler (val) { immediate: true,
const { selectedItems, allowProps } = this handler(val) {
if (val.length && !selectedItems.length && allowProps) { const { selectedItems, allowProps } = this
this.selectedItems = cloneDeep(val) if (val.length && !selectedItems.length && allowProps) {
this.onChange() this.selectedItems = cloneDeep(val)
} this.onChange()
} }
} }
}, }
created () { },
}, created() {
methods: { },
methods: {
// 拖动排序后的回调事件 // 拖动排序后的回调事件
onUpdate () { onUpdate() {
this.onChange() this.onChange()
}, },
// 打开文件选择器 // 打开文件选择器
handleSelectImage () { handleSelectImage() {
this.$refs.FilesModal.show() this.$refs.FilesModal.show()
}, },
// 文件库modal确认回调 // 文件库modal确认回调
handleSelectImageSubmit (result) { handleSelectImageSubmit(result) {
if (result.length > 0) { if (result.length > 0) {
// 记录选中的图片列表 // 记录选中的图片列表
const { multiple, selectedItems } = this const { multiple, selectedItems } = this
this.selectedItems = multiple ? selectedItems.concat(result) : result this.selectedItems = multiple ? selectedItems.concat(result) : result
this.onChange() this.onChange()
} }
}, },
// 删除文件 // 删除文件
handleDeleteFileItem (index) { handleDeleteFileItem(index) {
this.selectedItems.splice(index, 1) this.selectedItems.splice(index, 1)
if (this.selectedItems.length === 0) { if (this.selectedItems.length === 0) {
this.allowProps = false this.allowProps = false
} }
this.onChange() this.onChange()
}, },
// 触发change事件 // 触发change事件
onChange () { onChange() {
const { multiple, selectedItems } = this const { multiple, selectedItems } = this
if (selectedItems.length <= 0) { if (selectedItems.length <= 0) {
return this.$emit('change', multiple ? [] : 0) return this.$emit('change', multiple ? [] : 0)
} }
// 生成fileId // 生成fileId
const fileId = multiple ? selectedItems.map(item => item.file_id) : selectedItems[0].file_id if (this.source == 1) {
// 触发change事件 let fileId = []
return this.$emit('change', fileId, selectedItems) const list = multiple ? selectedItems.map(item => item) : selectedItems[0].file_id
} list.forEach(function (item) {
fileId.push({ file_id: item.file_id, image: item.preview_url })
})
return this.$emit('change', fileId, selectedItems)
} else {
const fileId = multiple ? selectedItems.map(item => item.file_id) : selectedItems[0].file_id
return this.$emit('change', fileId, selectedItems)
}
} }
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/.flip-list-move { /deep/.flip-list-move {
transition: transform 0.3s !important; transition: transform 0.3s !important;
} }
/deep/.no-move { /deep/.no-move {
transition: transform 0s; transition: transform 0s;
} }
.image-list { .image-list {
// 多选模式下margin // 多选模式下margin
&.multiple { &.multiple {
.file-item, .file-item,
.selector { .selector {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
} }
// 文件元素 // 文件元素
.file-item { .file-item {
position: relative; position: relative;
float: left; float: left;
width: 80px; width: 80px;
height: 80px; height: 80px;
position: relative; position: relative;
padding: 2px; padding: 2px;
border: 1px solid #ddd; border: 1px solid #ddd;
background: #fff; background: #fff;
.img-cover { .img-cover {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: no-repeat center center / 100%; background: no-repeat center center / 100%;
} }
&:hover { &:hover {
.icon-close { .icon-close {
display: block; display: block;
} }
} }
.icon-close { .icon-close {
display: none; display: none;
position: absolute; position: absolute;
top: -8px; top: -8px;
right: -8px; right: -8px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
color: #c5c5c5; color: #c5c5c5;
&:hover { &:hover {
color: #7d7d7d; color: #7d7d7d;
} }
} }
&:hover { &:hover {
border: 1px solid #a7c3de; border: 1px solid #a7c3de;
} }
} }
// 选择器 // 选择器
.selector { .selector {
width: 80px; width: 80px;
height: 80px; height: 80px;
float: left; float: left;
border: 1px dashed #e2e2e2; border: 1px dashed #e2e2e2;
text-align: center; text-align: center;
color: #dad9d9; color: #dad9d9;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:hover { &:hover {
border: 1px dashed #40a9ff; border: 1px dashed #40a9ff;
color: #40a9ff; color: #40a9ff;
} }
.icon-plus { .icon-plus {
font-size: 32px; font-size: 32px;
} }
} }
</style> </style>

42
src/views/goods/Create.vue
Unescape View File

@ -15,14 +15,14 @@
<a-form-item label="商品类型" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="商品类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<GoodsType v-decorator="['goods_type', { initialValue: 10}]" @change="onForceUpdate(true)" /> <GoodsType v-decorator="['goods_type', { initialValue: 10}]" @change="onForceUpdate(true)" />
</a-form-item> </a-form-item>
<!-- <a-form-item label="商品SKU" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="商品SKU" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div style=" display: flex;align-items: center;width:100%"> <div style=" display: flex;align-items: center;width:100%">
<a-input style="width:242px" placeholder="输入商品SKU" v-decorator="['goods_no', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" /> <a-input style="width:242px" placeholder="输入商品SKU" v-decorator="['goods_no', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
<div class="action-item"> <div class="action-item">
<a-button type="primary" @click="handInfo">一键获取</a-button> <a-button type="primary" @click="handInfo">一键获取</a-button>
</div> </div>
</div> </div>
</a-form-item> --> </a-form-item>
<a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入商品名称" v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" /> <a-input placeholder="请输入商品名称" v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
</a-form-item> </a-form-item>
@ -38,7 +38,7 @@
</div> </div>
</a-form-item> </a-form-item>
<a-form-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图"> <a-form-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图">
<SelectImage multiple :maxNum="10" v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]" /> <SelectImage :defaultList="goods_images" :source='1' multiple :maxNum="10" v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]" />
</a-form-item> </a-form-item>
<a-form-item label="商品来源" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="商品来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['goods_source', { initialValue: 'JD', rules: [{ required: true }] }]"> <a-radio-group v-decorator="['goods_source', { initialValue: 'JD', rules: [{ required: true }] }]">
@ -86,9 +86,9 @@
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="商品编码" :labelCol="labelCol" :wrapperCol="wrapperCol"> <!-- <a-form-item label="商品编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入商品编码" v-decorator="['goods_no']" /> <a-input placeholder="请输入商品编码" v-decorator="['goods_no']" />
</a-form-item> </a-form-item> -->
<a-form-item label="所属分类排行(0表示不参加排行)" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="所属分类排行(0表示不参加排行)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="所属分类排行" v-decorator="['paihang']" /> <a-input placeholder="所属分类排行" v-decorator="['paihang']" />
@ -407,7 +407,8 @@ export default {
} }
], ],
// 城市总数 // 城市总数
citysCount: null citysCount: null,
goods_images: []
} }
}, },
// 初始化数据 // 初始化数据
@ -420,11 +421,30 @@ export default {
}, },
methods: { methods: {
handInfo() { handInfo() {
let obj = { const { form } = this
goods_name: '测试', const goods_no = form.getFieldValue('goods_no')
goods_price: 123 if(goods_no){
let param = {
sku: goods_no
}
this.isLoading = true
GoodsApi.getCollector(param).then((result) => {
this.goods_images = result.data.goods_images
let obj = {
goods_name: result.data.name,
content: result.data.content,
goods_price: result.data.proxyPrice,
}
this.form.setFieldsValue(obj)
this.isLoading = false
})
.catch(() => {
this.isLoading = false
})
.finally(() => (this.isLoading = false))
}else{
this.$message.warning('请输入商品SKU', 1.5)
} }
this.form.setFieldsValue(obj)
}, },
// 手动强制更新页面 // 手动强制更新页面
onForceUpdate(bool = false) { onForceUpdate(bool = false) {

1418
src/views/goods/modules/Update.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save