mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-11-30 22:20:45 +00:00
283 lines
10 KiB
Vue
283 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-card :body-style="{ padding: '20px 20px 0 20px' }">
|
|
<div class="goods">
|
|
<el-form ref="form" :inline="true" :model="searchForm">
|
|
<el-form-item label="商品名称:">
|
|
<el-input v-model="searchForm.goods_title" placeholder="商品名称" style="width: 100px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品编码:">
|
|
<el-input v-model="searchForm.external_sku_id" placeholder="商品编码" style="width: 100px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleChoose(1)">筛选</el-button>
|
|
<el-button plain @click="handleReChoose()">重置筛选</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card style="margin-top: 10px">
|
|
<div>
|
|
<!-- 表格头部操作 -->
|
|
<div class="btn">
|
|
<el-button type="primary" plain @click="addGoodsCombination">新增组合商品</el-button>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark"
|
|
style="width: 100%" row-key="id" :tree-props="{ children: 'children' }">
|
|
<el-table-column label="商品信息" width="400">
|
|
<template slot-scope="scope">
|
|
<div class="commodityimg">
|
|
<img :src="scope.row.img_url" class="Img" />
|
|
</div>
|
|
<div>
|
|
<p>{{ scope.row.title }}</p>
|
|
<p>{{ scope.row.external_sku_id }}</p>
|
|
<p>{{ scope.row.updated_at }}</p>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="num" label="数量"></el-table-column>
|
|
<el-table-column prop="reference_price" label="售价"></el-table-column>
|
|
<el-table-column prop="stock" label="库存"></el-table-column>
|
|
<el-table-column prop="status" label="状态"> </el-table-column>
|
|
<el-table-column label="操作" width="130">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
|
|
<!-- <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 分页功能 -->
|
|
<div class="page">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-dialog title="新增组合商品" :visible.sync="dialogVisible">
|
|
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
|
|
<el-form-item label="商品名称" prop="title" :rules="[
|
|
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
|
]">
|
|
<el-input v-model="dynamicValidateForm.title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品编码" prop="external_sku_id" :rules="[
|
|
{ required: true, message: '请输入商品编码', trigger: 'blur' },
|
|
]">
|
|
<el-input v-model="dynamicValidateForm.external_sku_id"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-for="(item, index) in dynamicValidateForm.combination_goods" :label="'子商品' + index"
|
|
:key="item.item_id" :prop="'combination_goods.' + index + '.item_id'" :rules="{
|
|
required: true, message: '子商品不能为空', trigger: 'blur'
|
|
}">
|
|
<el-col :span="8">
|
|
<el-select v-model="item.item_id" filterable remote reserve-keyword placeholder="请选择子商品"
|
|
:remote-method="remoteMethod" :loading="remoteLoading">
|
|
<el-option v-for="sku in skus" :key="sku.id" :label="sku.title" :value="sku.id"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-input v-model="item.item_num" placeholder="数量"></el-input>
|
|
</el-col>
|
|
<el-button type="danger" @click.prevent="removeItem(index)">删除</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
|
|
<el-button @click="addItem">添加子商品</el-button>
|
|
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getGoodsCombination, addGoodsCombination, showGoodsCombination, delGoodsCombination, getGoodsFilter } from "../../api/goods.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
loading: false,
|
|
tableData: [], // 商品列表
|
|
searchForm: {
|
|
external_sku_id: "",
|
|
goods_title: "", // 商品名称
|
|
},
|
|
Paginationdata: {}, // 分页相关数据
|
|
current_page: 1, // 当前页
|
|
per_page: 100, // 每页显示数量
|
|
dynamicValidateForm: {
|
|
id: 0,
|
|
title: '',
|
|
external_sku_id: '',
|
|
combination_goods: [{
|
|
item_id: '',
|
|
item_num: 1,
|
|
}],
|
|
},
|
|
skus: [{
|
|
'id': '',
|
|
'title': ''
|
|
}],
|
|
remoteLoading: false
|
|
};
|
|
},
|
|
methods: {
|
|
// 列表编辑
|
|
handleEdit(id) {
|
|
this.dialogVisible = true;
|
|
showGoodsCombination(id).then((res) => {
|
|
this.dynamicValidateForm = res.data.data;
|
|
this.skus = res.data.data.skus;
|
|
});
|
|
},
|
|
// 删除
|
|
handleDelete(id) {
|
|
|
|
},
|
|
// 获取商品列表
|
|
getList(params) {
|
|
getGoodsCombination(params).then((res) => {
|
|
this.tableData = res.data.data;
|
|
this.Paginationdata = res.data.meta;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 筛选
|
|
handleChoose() {
|
|
this.searchForm = {
|
|
...this.searchForm,
|
|
page: this.current_page,
|
|
per_page: this.per_page,
|
|
};
|
|
this.getList(this.searchForm);
|
|
},
|
|
// 重置筛选
|
|
handleReChoose() {
|
|
this.form = {
|
|
external_sku_id: "",
|
|
goods_title: "", // 商品名称
|
|
};
|
|
},
|
|
// 分页功能
|
|
handleSizeChange(val) {
|
|
// 当前条数
|
|
this.per_page = val;
|
|
this.current_page = 1;
|
|
this.handleChoose();
|
|
},
|
|
handleCurrentChange(val) {
|
|
// 当前页
|
|
this.current_page = val;
|
|
this.handleChoose();
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
addGoodsCombination(this.dynamicValidateForm).then((res) => {
|
|
this.$message({
|
|
message: res.data.message,
|
|
type: 'success'
|
|
});
|
|
this.dialogVisible = false;
|
|
})
|
|
this.getList();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
},
|
|
removeItem(index) {
|
|
this.dynamicValidateForm.combination_goods.splice(index, 1)
|
|
},
|
|
addItem() {
|
|
this.dynamicValidateForm.combination_goods.push({
|
|
item_id: '',
|
|
item_num: 1,
|
|
});
|
|
},
|
|
remoteMethod(query) {
|
|
if (query !== '') {
|
|
this.remoteLoading = true;
|
|
getGoodsFilter(query).then((res) => {
|
|
this.skus = res.data.data;
|
|
this.remoteLoading = false;
|
|
});
|
|
} else {
|
|
this.skus = [];
|
|
}
|
|
},
|
|
addGoodsCombination() {
|
|
this.dialogVisible = true;
|
|
this.dynamicValidateForm = {
|
|
id: 0,
|
|
title: '',
|
|
external_sku_id: '',
|
|
combination_goods: [{
|
|
item_id: '',
|
|
item_num: 1,
|
|
}],
|
|
};
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.table {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.btn {
|
|
float: right;
|
|
}
|
|
|
|
::v-deep .cell {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.commodityimg {
|
|
width: 59px;
|
|
height: 59px;
|
|
background: rgba(227, 227, 227, 0.39);
|
|
opacity: 1;
|
|
display: block;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.Img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
::v-deep .btn11 {
|
|
padding: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
::v-deep .btn11 img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|