panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

库存规格

Browse Source
master
panqihua 2 years ago
parent 589bc2d017
commit 433c0fb49b
2 changed files with 190 additions and 2 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. 97
      src/views/platform/self-operated-mall/components/add_product.vue
  2. 95
      src/views/platform/self-operated-mall/components/tag_list.vue

97
src/views/platform/self-operated-mall/components/add_product.vue
Unescape View File

@ -55,17 +55,78 @@
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="$emit('close')">关闭</el-button>
</el-tab-pane>
<el-tab-pane label="库存规格" name="spec"></el-tab-pane>
<el-tab-pane label="库存规格" name="spec">
<el-row type="flex" justify="center">
<el-col :span="2">
<div class="left-title">库存/规格</div>
</el-col>
<el-col :span="16">
<el-input placeholder="输入规格名称">
<template slot="append">
<el-button>添加规格</el-button>
</template>
</el-input>
<div class="top">
<tag-list label="尺寸" @change-tags="(tags) => { console.info(tags) }" />
<tag-list label="颜色" @change-tags="(tags) => { console.info(tags) }" />
</div>
<el-table class="spec-table" :data="specList" :span-method="arraySpanMethod" border>
<el-table-column label="尺寸" align="center">
<template slot-scope="scope">
<span v-if="scope.row === undefined">批量设置</span>
</template>
</el-table-column>
<el-table-column label="颜色" align="center">
</el-table-column>
<el-table-column label="价格" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row === undefined">
<template slot="append">
<el-button>设置</el-button>
</template>
</el-input>
</template>
</el-table-column>
<el-table-column label="吊牌 价格" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row === undefined">
<template slot="append">
<el-button>设置</el-button>
</template>
</el-input>
</template>
</el-table-column>
<el-table-column label="库存" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row === undefined">
<template slot="append">
<el-button>设置</el-button>
</template>
</el-input>
</template>
</el-table-column>
<el-table-column label="图片" align="center"></el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapState } from 'vuex'
import TagList from "./tag_list"
export default {
name: "AddProduct",
components: { TagList },
data() {
return {
//库存数据
specList: [undefined],
// 最大上传文件数
maxFileCount: 2,
//最大上传文件体积 单位字节
@ -84,6 +145,18 @@ export default {
}
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === this.specList.length - 1) {
switch (columnIndex) {
case 0: return [1, 2]
case 1: return [0, 0]
default: return [1, 1]
}
} else {
return [1, 1]
}
},
// 设置主图
setPrimary(index) {
let _index = this.form.fileList.findIndex(item => item.primary)
@ -136,7 +209,23 @@ export default {
},
}
</script>
<style>
<style lang="scss">
.spec-table {
margin-top: 10px;
thead th {
background-color: #fff !important;
}
}
.top {
margin-top: 5px;
background-color: #f5f5f5;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.img {
width: 145px;
height: 145px;
@ -149,6 +238,10 @@ export default {
font-size: 50px;
}
.left-title {
font-size: 16px;
}
.title {
color: rgba(16, 16, 16, 1);
font-size: 16px;

95
src/views/platform/self-operated-mall/components/tag_list.vue
Unescape View File

@ -0,0 +1,95 @@
<template>
<div>
<div class="size">
<i class="el-icon-delete"></i>
<span>{{ this.label }}</span>
<i class="el-icon-delete" @click="tags = []"></i>
</div>
<el-row class="add" type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="value">
<template slot="append">
<el-button @click="addTag">添加</el-button>
</template>
</el-input>
</el-col>
<el-col :span="11">
<el-tag v-for="(tag, index) in tags" :key="tag.name" closable :type="tag.type"
@close="tags.splice(index, 1)">
{{ tag.name }}
</el-tag>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "TagList",
props: {
label: String
},
data() {
return {
//当前尺寸文本
value: '',
tags: [],
}
},
methods: {
addTag() {
let value = this.value
if (value) {
if (this.tags.find(item => item.name === value)) {
this.$modal.msgWarning(`请问重复添加${value}`)
} else {
this.tags.push({ name: value, type: '' })
this.value = ''
}
}
}
},
watch: {
tags(value) {
this.$emit('change-tags', value)
}
}
}
</script>
<style scoped lang="scss">
.add {
background-color: #ffffff;
padding: 5px;
&>div:last-child {
display: flex;
align-items: center;
overflow-x: auto;
&>span {
margin-left: 5px;
}
}
}
.size {
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
&>span {
font-weight: bold;
}
&>i:first-child {
visibility: hidden;
}
&>i:last-child {
color: red;
}
}
</style>
Write Preview
Loading…
Cancel
Save