mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-11-30 22:20:45 +00:00
feat: #10000 前端优化修改
This commit is contained in:
parent
258a3ff8ca
commit
7e44bd1a27
5
resources/frontend/src/router/list.js
vendored
5
resources/frontend/src/router/list.js
vendored
@ -56,6 +56,11 @@ const list = [
|
||||
name: "新建商品",
|
||||
component: () => import("../views/goods/addgoods/addgoods.vue"),
|
||||
},
|
||||
{
|
||||
path: "EDIT_GOODS",
|
||||
name: "修改商品规格",
|
||||
component: () => import("../views/goods/editgoods.vue"),
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
redirect: "GOODS_LIST",
|
||||
|
||||
@ -1,178 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<div class="goods" style="margin: 20px">
|
||||
<div class="add-item-info" style="margin-bottom: 10px; margin-left: 52px">
|
||||
<div>
|
||||
<div style="font-size: 14px">商品列表：</div>
|
||||
<!-- 新建商品进入显示 -->
|
||||
<el-form ref="form" :inline="true" :model="form">
|
||||
<div>
|
||||
<el-form-item label="商品列表：">
|
||||
<el-select v-model="lid" placeholder="选择商品" @change="onchange" filterable>
|
||||
<el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<span style="font-size: 14px">商品图片：
|
||||
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="商品图片：">
|
||||
<el-image v-if="disabled" style="width: 148px; height: 148px" :src="form.img_url" fit="cover">
|
||||
</el-image>
|
||||
<el-upload v-else class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
|
||||
:show-file-list="true" list-type="picture-card" :on-change="handleAvatarSuccess">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 编辑按钮进入显示 -->
|
||||
<el-form ref="form" :inline="true" :model="form" v-if="goodsData != ''">
|
||||
<div>
|
||||
<el-form-item label="商品名称：">
|
||||
<el-input placeholder="商品名称" v-model="form.title" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品编码：">
|
||||
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品种类：">
|
||||
<el-select v-model="form.type_id" placeholder="商品种类" filterable :disabled="disabled">
|
||||
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌：">
|
||||
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable :disabled="disabled">
|
||||
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-for="(item, i) in skus" :key="i">
|
||||
<div>{{ i + 1 }}.</div>
|
||||
<el-form-item label="商品规格：">
|
||||
<el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格编码：">
|
||||
<el-input v-model="skus[i].sku_code" placeholder="商品编码">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态：">
|
||||
<el-select v-model="skus[i].reserve" placeholder="下架（默认）">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="商品名称：">
|
||||
<el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品编码：">
|
||||
<el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品种类：">
|
||||
<el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
|
||||
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌：">
|
||||
<el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
|
||||
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="商品规格：">
|
||||
<el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格编码：">
|
||||
<el-input v-model="goodsData.sku_code" placeholder="商品编码">
|
||||
<el-form-item label="商品数量：">
|
||||
<el-input v-model="skus[i].num" placeholder="商品数量">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态：">
|
||||
<el-select v-model="goodsData.status">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="商品数量：">
|
||||
<el-input v-model="goodsData.num" placeholder="商品数量">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品成本：">
|
||||
<el-input v-model="goodsData.cost" placeholder="商品成本">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="Edititem()">保存</el-button>
|
||||
<el-button plain @click="cancel()">取消</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 新建商品进入显示 -->
|
||||
<el-form ref="form" :inline="true" :model="form" v-if="goodsData == ''">
|
||||
<div>
|
||||
<el-form-item label="商品名称：">
|
||||
<el-input placeholder="商品名称" v-model="form.title" :disabled="true" v-if="isShow"></el-input>
|
||||
<el-input placeholder="商品名称" v-model="form.title" v-else></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品编码：">
|
||||
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="true" v-if="isShow">
|
||||
</el-input>
|
||||
<el-input placeholder="商品编码" v-model="form.goods_code" v-else></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品种类：">
|
||||
<el-select v-model="form.type_id" placeholder="商品种类" filterable>
|
||||
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌：">
|
||||
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable>
|
||||
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-for="(item, i) in skus" :key="i">
|
||||
<span style="margin-right: -15px">{{ i + 1 }}.</span>
|
||||
<el-form-item label="商品规格：">
|
||||
<el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
|
||||
</el-form-item>
|
||||
<span class="addto" @click="handleAdd()">+</span>
|
||||
<el-form-item label="规格编码：">
|
||||
<el-input v-model="skus[i].sku_code" placeholder="商品编码">
|
||||
<el-form-item label="商品成本：">
|
||||
<el-input v-model="skus[i].cost" placeholder="商品成本">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态：">
|
||||
<el-select v-model="skus[i].reserve" placeholder="下架（默认）">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="商品数量：">
|
||||
<el-input v-model="skus[i].num" placeholder="商品数量">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品成本：">
|
||||
<el-input v-model="skus[i].cost" placeholder="商品成本">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="handleDelete(i)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="danger" @click="handleDelete(i)">删除</el-button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave()">保存</el-button>
|
||||
<el-button plain @click="cancel()">取消</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave()">保存</el-button>
|
||||
<el-button plain @click="cancel()">取消</el-button>
|
||||
<el-button type="success" @click="handleAdd()">增加规格</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addGoods,
|
||||
checkGoods,
|
||||
goodsList,
|
||||
updateGoods,
|
||||
imgUpload,
|
||||
} from "../../../api/goods.js";
|
||||
import { addGoods, goodsList, imgUpload } from "../../../api/goods.js";
|
||||
import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgs: [],
|
||||
gallery: "",
|
||||
imageUrl: "",
|
||||
lid: "", // 选择的商品列表id
|
||||
gid: "", // 商品id
|
||||
brand: [], // 品牌列表
|
||||
cate: [], // 种类列表
|
||||
goodschoose: [], // 商品列表
|
||||
goodsID: "", //进入页面是否有商品id
|
||||
goodsData: [], //编辑按钮进入获取的商品数据
|
||||
// 规格列表
|
||||
skus: [
|
||||
{
|
||||
title: "",
|
||||
sku_code: "",
|
||||
status: "0",
|
||||
num: "0",
|
||||
cost: "0",
|
||||
reserve: "0",
|
||||
},
|
||||
],
|
||||
|
||||
skus: [],
|
||||
// 增加商品表单
|
||||
form: {
|
||||
goods_id: "",
|
||||
@ -198,11 +120,24 @@ export default {
|
||||
},
|
||||
],
|
||||
file: [],
|
||||
isShow: false,
|
||||
URL: "",
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let page = {
|
||||
per_page: 999,
|
||||
};
|
||||
// 获取商品种类
|
||||
goods_types(page).then((res) => {
|
||||
this.cate = res.data.data;
|
||||
});
|
||||
// 获取商品品牌
|
||||
Brand_goods_types(page).then((res) => {
|
||||
this.brand = res.data.data;
|
||||
});
|
||||
this.handleList();
|
||||
this.handleAdd();
|
||||
},
|
||||
watch: {
|
||||
lid: {
|
||||
handler(newVal, oldVal) {
|
||||
@ -218,7 +153,6 @@ export default {
|
||||
immediate: true, // 第一次改变就执行
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
//图片上传
|
||||
handleAvatarSuccess(res, files) {
|
||||
@ -226,7 +160,6 @@ export default {
|
||||
files.forEach((file) => {
|
||||
formData.append("uploadFile", file.raw); //文件
|
||||
});
|
||||
|
||||
let requestConfig = {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
@ -234,31 +167,8 @@ export default {
|
||||
};
|
||||
imgUpload(formData, requestConfig).then((res) => {
|
||||
this.form.img_url = res.data.resource;
|
||||
if (this.goodsData.length !== 0) {
|
||||
this.goodsData.goods.img_url = res.data.resource;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 查看一个商品
|
||||
handleUpdate() {
|
||||
this.gid = this.$route.query;
|
||||
if (this.gid.id) {
|
||||
checkGoods(this.gid.id).then((res) => {
|
||||
const data = res.data.data;
|
||||
const sku = this.skus[0];
|
||||
const list = {};
|
||||
Object.keys(data).map((key) => {
|
||||
Object.keys(sku).map((i) => {
|
||||
if (key == i) {
|
||||
list[i] = data[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 商品列表
|
||||
handleList() {
|
||||
goodsList().then((res) => {
|
||||
@ -272,7 +182,6 @@ export default {
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
// 添加商品
|
||||
handleSave() {
|
||||
const goods = this.form;
|
||||
@ -288,138 +197,38 @@ export default {
|
||||
message: "商品添加成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.updateForm();
|
||||
this.$router.push("/GOODS_LIST");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 修改成功后重置表单
|
||||
updateForm() {
|
||||
this.form = {
|
||||
title: "",
|
||||
img_url: "abc.jpg",
|
||||
type_id: "",
|
||||
brand_id: "",
|
||||
goods_code: "",
|
||||
};
|
||||
this.skus = [
|
||||
{
|
||||
title: "",
|
||||
sku_code: "",
|
||||
status: "",
|
||||
num: "",
|
||||
cost: "",
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// 增加一个商品规格
|
||||
handleAdd() {
|
||||
this.skus.push({
|
||||
let sku = {
|
||||
title: "",
|
||||
sku_code: "",
|
||||
status: "0",
|
||||
num: "",
|
||||
cost: "",
|
||||
});
|
||||
num: "0",
|
||||
cost: "0",
|
||||
reserve: "0",
|
||||
};
|
||||
this.skus.push(sku);
|
||||
},
|
||||
|
||||
// 删除一个商品规格
|
||||
handleDelete(index) {
|
||||
this.skus.splice(index, 1);
|
||||
},
|
||||
|
||||
|
||||
// 商品列表页进入带数据表单
|
||||
getgoodsidData() {
|
||||
let id = this.bigID;
|
||||
checkGoods(id).then((res) => {
|
||||
this.goodsData = res.data.data;
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑确认请求
|
||||
Edititem() {
|
||||
let id = this.bigID;
|
||||
let goods = {
|
||||
title: this.goodsData.goods.title,
|
||||
img_url: this.goodsData.goods.img_url,
|
||||
type_id: this.goodsData.goods.type_id,
|
||||
brand_id: this.goodsData.goods.brand_id,
|
||||
goods_code: this.goodsData.goods.goods_code,
|
||||
};
|
||||
let sku = {
|
||||
title: this.goodsData.title,
|
||||
sku_code: this.goodsData.sku_code,
|
||||
status: this.goodsData.status,
|
||||
num: this.goodsData.num,
|
||||
cost: this.goodsData.cost,
|
||||
};
|
||||
if (sku.status == "下架") {
|
||||
sku.status = 0;
|
||||
} else if (sku.status == "在售") {
|
||||
sku.status = 1;
|
||||
} else if (sku.status == "预警") {
|
||||
sku.status = 2;
|
||||
}
|
||||
let updateData = {
|
||||
goods_id: this.goodsData.goods_id,
|
||||
goods,
|
||||
sku,
|
||||
};
|
||||
updateGoods(id, updateData).then((res) => {
|
||||
this.$router.push("/GOODS_LIST");
|
||||
this.$message({
|
||||
message: "商品编辑成功！",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.$router.push("/GOODS_LIST");
|
||||
},
|
||||
|
||||
onchange(value) {
|
||||
if (value !== "") {
|
||||
this.isShow = true;
|
||||
}
|
||||
if (value === "") {
|
||||
this.isShow = false;
|
||||
this.disabled = value !== "";
|
||||
if (!this.disabled) {
|
||||
this.disabled = false;
|
||||
this.form = {};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.goodsID = sessionStorage.getItem("商品ID");
|
||||
this.bigID = sessionStorage.getItem("ID");
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.gid = this.$route.query;
|
||||
let page = {
|
||||
per_page: 999,
|
||||
};
|
||||
// 获取商品种类
|
||||
goods_types(page).then((res) => {
|
||||
this.cate = res.data.data;
|
||||
});
|
||||
// 获取商品品牌
|
||||
Brand_goods_types(page).then((res) => {
|
||||
this.brand = res.data.data;
|
||||
});
|
||||
this.handleList();
|
||||
this.handleUpdate();
|
||||
this.getgoodsidData();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
sessionStorage.removeItem("商品ID"); //销毁内存中的商品ID
|
||||
sessionStorage.removeItem("ID"); //销毁内存中的ID
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -430,20 +239,7 @@ export default {
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.addto {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 5px;
|
||||
margin-top: 4px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
/* 分割 */
|
||||
|
||||
292
resources/frontend/src/views/goods/editgoods.vue
Normal file
292
resources/frontend/src/views/goods/editgoods.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<el-form ref="form" :inline="true" :model="goodsData">
|
||||
<div>
|
||||
<el-form-item label="商品列表：">
|
||||
<el-select v-model="goodsData.goods_id" placeholder="选择商品" filterable :disabled="true">
|
||||
<el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="商品图片：">
|
||||
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
|
||||
:show-file-list="true" list-type="picture-card" :on-change="handleAvatarSuccess">
|
||||
<img v-if="goodsData.goods.img_url" :src="goodsData.goods.img_url" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="商品名称：">
|
||||
<el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品编码：">
|
||||
<el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品种类：">
|
||||
<el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
|
||||
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌：">
|
||||
<el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
|
||||
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="商品规格：">
|
||||
<el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格编码：">
|
||||
<el-input v-model="goodsData.sku_code" placeholder="商品编码">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态：">
|
||||
<el-select v-model="goodsData.status">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="商品数量：">
|
||||
<el-input v-model="goodsData.num" placeholder="商品数量">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品成本：">
|
||||
<el-input v-model="goodsData.cost" placeholder="商品成本">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="规格图片：">
|
||||
<div class="shop-sku-img">
|
||||
<div class="shop">
|
||||
<div class="shop-name">花梨油品</div>
|
||||
<div>
|
||||
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
|
||||
:show-file-list="true" list-type="picture-card"
|
||||
:on-change="handleAvatarSuccess">
|
||||
<img v-if="goodsData.goods.img_url" :src="goodsData.goods.img_url"
|
||||
class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop">
|
||||
<div class="shop-name">花梨油品</div>
|
||||
<div>
|
||||
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
|
||||
:show-file-list="true" list-type="picture-card"
|
||||
:on-change="handleAvatarSuccess">
|
||||
<img v-if="goodsData.goods.img_url" :src="goodsData.goods.img_url"
|
||||
class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="Edititem()">保存</el-button>
|
||||
<el-button plain @click="cancel()">取消</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeList } from "../../api/shop";
|
||||
import { checkGoods, goodsList, updateGoods, imgUpload } from "../../api/goods.js";
|
||||
import { goods_types, Brand_goods_types } from "../../api/rankingData.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brand: [], // 品牌列表
|
||||
cate: [], // 种类列表
|
||||
goodschoose: [], // 商品列表
|
||||
skuId: 0, // 商品id
|
||||
// 增加商品表单
|
||||
goodsData: {
|
||||
goods_id: "",
|
||||
title: "",
|
||||
status: "",
|
||||
num: "",
|
||||
cost: "",
|
||||
sku_code: "",
|
||||
goods: {
|
||||
img_url: "",
|
||||
title: "",
|
||||
type_id: "",
|
||||
brand_id: "",
|
||||
goods_code: "",
|
||||
}
|
||||
},
|
||||
// 商品状态
|
||||
options: [
|
||||
{
|
||||
id: "0",
|
||||
label: "下架",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
label: "在售",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "预警",
|
||||
},
|
||||
],
|
||||
file: [],
|
||||
shopList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//图片上传
|
||||
handleAvatarSuccess(res, files) {
|
||||
let formData = new FormData();
|
||||
files.forEach((file) => {
|
||||
formData.append("uploadFile", file.raw); //文件
|
||||
});
|
||||
let requestConfig = {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
};
|
||||
imgUpload(formData, requestConfig).then((res) => {
|
||||
this.goodsData.goods.img_url = res.data.resource;
|
||||
});
|
||||
},
|
||||
// 商品列表
|
||||
handleList() {
|
||||
goodsList().then((res) => {
|
||||
this.goodschoose = res.data.data;
|
||||
});
|
||||
},
|
||||
// 商品列表页进入带数据表单
|
||||
getGoodsSkuData() {
|
||||
checkGoods(this.skuId).then((res) => {
|
||||
this.goodsData = res.data.data;
|
||||
});
|
||||
},
|
||||
// 编辑确认请求
|
||||
Edititem() {
|
||||
let goods = {
|
||||
title: this.goodsData.goods.title,
|
||||
img_url: this.goodsData.goods.img_url,
|
||||
type_id: this.goodsData.goods.type_id,
|
||||
brand_id: this.goodsData.goods.brand_id,
|
||||
goods_code: this.goodsData.goods.goods_code,
|
||||
};
|
||||
let sku = {
|
||||
title: this.goodsData.title,
|
||||
sku_code: this.goodsData.sku_code,
|
||||
status: this.goodsData.status,
|
||||
num: this.goodsData.num,
|
||||
cost: this.goodsData.cost,
|
||||
};
|
||||
let updateData = {
|
||||
goods_id: this.goodsData.goods_id,
|
||||
goods,
|
||||
sku,
|
||||
};
|
||||
updateGoods(this.skuId, updateData).then((res) => {
|
||||
this.$message(res.data.message);
|
||||
this.$router.push("/GOODS_LIST");
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.$router.push("/GOODS_LIST");
|
||||
},
|
||||
getStoreList() {
|
||||
let params = {
|
||||
plat_id: 1,
|
||||
page: 1,
|
||||
per_page: 999,
|
||||
};
|
||||
storeList(params).then((res) => {
|
||||
this.shopList = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.skuId = parseInt(this.$route.query.id);
|
||||
},
|
||||
mounted() {
|
||||
let page = {
|
||||
per_page: 999,
|
||||
};
|
||||
// 获取商品种类
|
||||
goods_types(page).then((res) => {
|
||||
this.cate = res.data.data;
|
||||
});
|
||||
// 获取商品品牌
|
||||
Brand_goods_types(page).then((res) => {
|
||||
this.brand = res.data.data;
|
||||
});
|
||||
this.handleList();
|
||||
this.getGoodsSkuData();
|
||||
this.getStoreList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload--picture-card {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 分割 */
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
line-height: 148px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shop-sku-img {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.shop-sku-img .shop {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.shop-sku-img .shop .shop-name {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -246,7 +246,7 @@
|
||||
<el-table-column label="操作" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="ejectstock(scope.row)">库存</el-button>
|
||||
<el-button type="text" @click="handleEdit(scope.row.goods_id, scope.row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="goodslog(scope.row)">记录</el-button>
|
||||
<!-- <el-button type="text" @click="deleteSku(scope.row)">删除</el-button> -->
|
||||
</template>
|
||||
@ -497,10 +497,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 列表编辑
|
||||
handleEdit(goodsid, id) {
|
||||
sessionStorage.setItem("商品ID", goodsid);
|
||||
sessionStorage.setItem("ID", id);
|
||||
this.$router.push("/ADDGOODS");
|
||||
handleEdit(id) {
|
||||
this.$router.push({path:"EDIT_GOODS",query:{id:id}});
|
||||
},
|
||||
|
||||
// 获取商品列表
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user