1.0
This commit is contained in:
zkthink
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
top="25px"
|
||||
:visible.sync="isVisible"
|
||||
class="goods-dialog"
|
||||
@opened="open"
|
||||
>
|
||||
<div class="product-page">
|
||||
<div class="toolbar">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formParams"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formParams.keyword"
|
||||
size="mini"
|
||||
placeholder="店铺名称/商品ID/商品分组"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架状态">
|
||||
<el-select
|
||||
v-model="formParams.status"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
label="上架"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="下架"
|
||||
:value="0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="官方分类">
|
||||
<el-select
|
||||
v-model="formParams.categoryId"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
v-for="(category, index) in categoryList"
|
||||
:key="index"
|
||||
:label="category.categoryName"
|
||||
:value="category.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="fetch"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData.adminProductVOList"
|
||||
style="width: 100%"
|
||||
:row-key="getRowKeys"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column v-if="radioState" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-radio
|
||||
v-model="radioId"
|
||||
:label="scope.row.id"
|
||||
size="medium"
|
||||
class="textRadio"
|
||||
@change.native="getCurrentRow(scope.row)"
|
||||
> </el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-else
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column label="产品主图">
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
class="product-img"
|
||||
height="80"
|
||||
width="80"
|
||||
:src="scope.row.productImg"
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productName"
|
||||
label="产品名称"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
width="200"
|
||||
class="text-overflow"
|
||||
label="产品ID"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
label="售价"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="applyPrice"
|
||||
label="原价"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="stock"
|
||||
label="库存"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sellCount"
|
||||
label="销量"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:limit.sync="formParams.pageSize"
|
||||
:page.sync="formParams.pageIndex"
|
||||
:total="Number(tableData.total)"
|
||||
@pagination="fetch"
|
||||
/>
|
||||
</div>
|
||||
<div slot="footer" class="add-btn-wrap">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import Goods from '@/api/Goods'
|
||||
import Pagination from '@/components/Pagination'
|
||||
export default {
|
||||
components: {
|
||||
Pagination
|
||||
},
|
||||
props: {
|
||||
exclude: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
radioState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formParams: {
|
||||
"categoryId": '',
|
||||
"hasStock": '',
|
||||
"keyword": "",
|
||||
"pageSize": 10,
|
||||
"pageIndex": 1,
|
||||
"status": ''
|
||||
},
|
||||
dialog: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
},
|
||||
tableData: [],
|
||||
categoryList: [],
|
||||
multipleSelectionMap: [],
|
||||
select_orderId: [],
|
||||
select_order_number: 0,
|
||||
selectOneGoods: {},
|
||||
radioId: null,
|
||||
getRowKeys(row) {
|
||||
return row.id
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isVisible: {
|
||||
get () {
|
||||
return this.dialogVisible
|
||||
},
|
||||
set () {
|
||||
this.close()
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
title () {
|
||||
return '选择商品'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
exclude() {
|
||||
this.select_orderId = []
|
||||
this.multipleSelection = []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentRow(row) {
|
||||
this.radioId = row.id
|
||||
this.selectOneGoods = {
|
||||
id: row.id,
|
||||
productName: row.productName
|
||||
}
|
||||
},
|
||||
// 复选框
|
||||
handleSelectionChange(rows) {
|
||||
this.multipleSelection = rows
|
||||
this.select_order_number = this.multipleSelection.length
|
||||
this.select_orderId = []
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
if (row && row.id) {
|
||||
const isHas = this.select_orderId.some(i => i.id === row.id)
|
||||
if (!isHas) {
|
||||
this.select_orderId.push({
|
||||
productName: row.productName,
|
||||
id: row.id
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async getProductList () {
|
||||
const res = await Goods.findAdminProductList(this.formParams)
|
||||
const resData = res.data
|
||||
const { code } = resData
|
||||
if (code === 0) {
|
||||
this.tableData = resData.data
|
||||
this.formatData()
|
||||
}
|
||||
},
|
||||
async findCategoryList () {
|
||||
const res = await Goods.findCategoryList(3)
|
||||
const resData = res.data
|
||||
this.categoryList = resData.data
|
||||
},
|
||||
fetch (config) {
|
||||
const { limit, page } = config
|
||||
this.formParams.pageIndex = page || 1
|
||||
this.formParams.pageSize = limit || 10
|
||||
this.getProductList()
|
||||
},
|
||||
editClose () {
|
||||
this.dialog.isVisible = false
|
||||
},
|
||||
onSubmit () {
|
||||
if (this.radioState) {
|
||||
this.$emit('success', [this.selectOneGoods])
|
||||
} else {
|
||||
this.$emit('success', this.select_orderId)
|
||||
}
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
},
|
||||
open() {
|
||||
this.getProductList()
|
||||
this.findCategoryList()
|
||||
},
|
||||
formatData() {
|
||||
if (this.radioState) {
|
||||
this.tableData.adminProductVOList.map(item => {
|
||||
if (this.radioId === item.id) {
|
||||
this.selectOneGoods = {
|
||||
id: item.id,
|
||||
productName: item.productName
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const excludeIds = this.exclude.map(i => i.id)
|
||||
this.tableData.adminProductVOList.map(item => {
|
||||
if (excludeIds.indexOf(item.id) > 0) {
|
||||
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(item, true)
|
||||
} else {
|
||||
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(item, false)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
reset () {
|
||||
this.radioId = null
|
||||
this.formParams = {
|
||||
"categoryId": '',
|
||||
"hasStock": '',
|
||||
"keyword": "",
|
||||
"pageSize": 10,
|
||||
"pageIndex": 1,
|
||||
"status": ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.add-dialog-component {
|
||||
.form-inline{
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
.tree-box {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.goods-dialog{
|
||||
/deep/ .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
min-width: 1000px;
|
||||
overflow: hidden;
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.dialog-from {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
.btn-wrap {
|
||||
margin: 45px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
.form-item-row {
|
||||
padding-top: 40px;
|
||||
/deep/ .el-input {
|
||||
width: 100px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-page {
|
||||
padding: 15px 20px;
|
||||
.toolbar {
|
||||
margin-bottom: 25px;
|
||||
.product-name {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="isVisible"
|
||||
width="60%"
|
||||
class="group-dialog"
|
||||
@open="open"
|
||||
>
|
||||
<div class="add-dialog-component">
|
||||
<el-form ref="form" class="form-inline" label-width="80px">
|
||||
<el-form-item label="一级分类">
|
||||
<el-select v-model="value" placeholder="请选择" @change="change(value, 1)">
|
||||
<el-option
|
||||
v-for="item in categorys"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类">
|
||||
<el-select v-model="value1" placeholder="请选择" @change="change(value1, 2)">
|
||||
<el-option
|
||||
v-for="item in secondaryList"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="三级分类">
|
||||
<el-select v-model="value2" placeholder="请选择" @change="change(value2, 3)">
|
||||
<el-option
|
||||
v-for="item in level3List"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="add-btn-wrap">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import Classification from '@/api/Classification.js'
|
||||
export default {
|
||||
props: {
|
||||
exclude: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formParams: {
|
||||
pageSize: 100,
|
||||
pageIndex: 1
|
||||
},
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
categoryList: [],
|
||||
secondaryList: [],
|
||||
level3List: [],
|
||||
currentObj: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isVisible: {
|
||||
get () {
|
||||
return this.dialogVisible
|
||||
},
|
||||
set () {
|
||||
this.close()
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
title () {
|
||||
return '选择分类'
|
||||
},
|
||||
categorys() {
|
||||
return this.categoryList.filter(i => {
|
||||
return this.exclude.indexOf(i.id) === -1
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getProductCategory () {
|
||||
const res = await Classification.getProductCategory(this.formParams)
|
||||
const categoryList = res.data.data && res.data.data.productCategoryList || []
|
||||
this.categoryList = categoryList.filter(i => {
|
||||
return this.exclude.indexOf(i.id) === -1 && i.categoryName
|
||||
})
|
||||
},
|
||||
change(id, deep) {
|
||||
if (deep === 1) {
|
||||
this.categoryList.map(i => {
|
||||
if (i.id === id) {
|
||||
this.currentObj = {
|
||||
id,
|
||||
categoryName: i.categoryName
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (deep === 2) {
|
||||
this.value2 = ''
|
||||
this.secondaryList.map(i => {
|
||||
if (i.id === id) {
|
||||
this.currentObj = {
|
||||
id,
|
||||
categoryName: i.categoryName
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (deep === 3) {
|
||||
this.level3List.filter(i => {
|
||||
if (i.id === id) {
|
||||
this.currentObj = {
|
||||
id,
|
||||
categoryName: i.categoryName
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.queryChildCategory(id, deep)
|
||||
},
|
||||
async queryChildCategory (id, deep) {
|
||||
const res = await Classification.queryChildCategory({
|
||||
id
|
||||
})
|
||||
const list = res.data.data || []
|
||||
if (deep === 1) {
|
||||
this.secondaryList = list.filter(i => {
|
||||
return this.exclude.indexOf(i.id) === -1
|
||||
})
|
||||
this.value1 = ''
|
||||
this.value2 = ''
|
||||
this.level3List = []
|
||||
}
|
||||
if (deep === 2) {
|
||||
this.value2 = ''
|
||||
this.level3List = list.filter(i => {
|
||||
return this.exclude.indexOf(i.id) === -1
|
||||
})
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$emit('success', this.currentObj)
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.reset()
|
||||
},
|
||||
open() {
|
||||
this.getProductCategory()
|
||||
},
|
||||
reset () {
|
||||
this.value = ''
|
||||
this.value1 = ''
|
||||
this.value2 = ''
|
||||
this.currentObj = {}
|
||||
this.secondaryList = []
|
||||
this.level3List = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.add-dialog-component {
|
||||
.form-inline{
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
.tree-box {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.group-dialog {
|
||||
/deep/ .el-dialog {
|
||||
min-width: 620px;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.add-dialog-component {
|
||||
padding: 0 20px;
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
.tree-box {
|
||||
margin: 15px 0;
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.content {
|
||||
flex: 1;
|
||||
.input {
|
||||
width: 180px;
|
||||
}
|
||||
.textarea-input {
|
||||
width: 100%;
|
||||
margin-left: 15px;
|
||||
/deep/ textarea {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.level-3-wrap {
|
||||
display: flex;
|
||||
.upload-wrap {
|
||||
margin-bottom: 25px;
|
||||
/deep/ .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
}
|
||||
i {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-btn-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user