387 lines
10 KiB
Vue
387 lines
10 KiB
Vue
<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-select v-model="lid" placeholder="选择商品">
|
||
<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"
|
||
>商品图片：
|
||
<UploadTem />
|
||
</span>
|
||
<!-- <UploadTem @urlimg='hanleurlimg'
|
||
:number="2"
|
||
:file='file' /> -->
|
||
<!-- <el-upload class="upload"
|
||
action="https://ct-upimg.yx090.com/api/upload"
|
||
list-type="picture-card"
|
||
:on-success="successUpload"
|
||
:on-error="errorUpload"
|
||
:on-remove="removeUpload"
|
||
:headers="headers"
|
||
:limit="1">
|
||
<img v-if="imageUrl"
|
||
:src="imageUrl"
|
||
class="avatar">
|
||
<i v-else
|
||
class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload> -->
|
||
</div>
|
||
<el-form ref="form" :inline="true" :model="form">
|
||
<div>
|
||
<el-form-item label="商品名称：">
|
||
<el-input placeholder="商品名称" v-model="form.title"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="商品编码：">
|
||
<el-input
|
||
placeholder="商品编码"
|
||
v-model="form.goods_code"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="商品种类：">
|
||
<el-select v-model="form.type_id" placeholder="商品种类">
|
||
<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="商品品牌">
|
||
<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" v-if="!gid" @click="handleAdd()">+</span>
|
||
<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].status" 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>
|
||
</div>
|
||
<div class="btn">
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleSave()">保存</el-button>
|
||
<el-button plain>取消</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import UploadTem from "../../../components/upload/index.vue";
|
||
import {
|
||
addGoods,
|
||
checkGoods,
|
||
goodsList,
|
||
updateGoods,
|
||
} from "../../../api/goods.js";
|
||
import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
|
||
import axios from "axios";
|
||
export default {
|
||
components: {
|
||
UploadTem,
|
||
},
|
||
data() {
|
||
return {
|
||
gallery: "",
|
||
imageUrl: "",
|
||
lid: "", // 选择的商品列表id
|
||
gid: "", // 商品id
|
||
brand: [], // 品牌列表
|
||
cate: [], // 种类列表
|
||
goodschoose: [], // 商品列表
|
||
// 规格列表
|
||
skus: [
|
||
{
|
||
title: "",
|
||
sku_code: "",
|
||
status: "",
|
||
num: "",
|
||
cost: "",
|
||
},
|
||
],
|
||
|
||
// 增加商品表单
|
||
form: {
|
||
goods_id: "",
|
||
title: "",
|
||
img_url: "https://cn.vuejs.org/images/logo.svg",
|
||
type_id: "",
|
||
brand_id: "",
|
||
goods_code: "",
|
||
},
|
||
// 商品状态
|
||
options: [
|
||
{
|
||
id: "1",
|
||
label: "在售",
|
||
},
|
||
{
|
||
id: "2",
|
||
label: "预警",
|
||
},
|
||
{
|
||
id: "0",
|
||
label: "下架",
|
||
},
|
||
],
|
||
file: [],
|
||
};
|
||
},
|
||
|
||
watch: {
|
||
lid: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
this.goodschoose.forEach((item) => {
|
||
if (item.id == newVal) {
|
||
this.form = { ...item };
|
||
}
|
||
});
|
||
}
|
||
},
|
||
deep: true, // 深度监听
|
||
immediate: true, // 第一次改变就执行
|
||
},
|
||
},
|
||
methods: {
|
||
// 查看一个商品
|
||
handleUpdate() {
|
||
this.gid = this.$route.query;
|
||
if (this.gid.id) {
|
||
checkGoods(this.gid.id).then((res) => {
|
||
console.log(res.data.data, "oooppuu");
|
||
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) => {
|
||
this.goodschoose = res.data.data;
|
||
});
|
||
},
|
||
// 保存，增加一个商品
|
||
handleSave() {
|
||
const goods = this.form;
|
||
const sku2 = this.skus[0];
|
||
const skus = [];
|
||
skus.push(sku2);
|
||
// console.log(goods, skus);
|
||
|
||
const updata = {
|
||
...goods,
|
||
goods_id: this.lid,
|
||
skus: skus,
|
||
};
|
||
// console.log(updata);
|
||
|
||
axios
|
||
.post("/api/goods", updata, {
|
||
headers: {
|
||
Authorization:
|
||
"Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.statusText === "OK") {
|
||
this.$message({
|
||
message: "商品添加成功！",
|
||
type: "success",
|
||
});
|
||
this.updateForm();
|
||
} else {
|
||
this.$message({
|
||
message: "商品添加失败！",
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
|
||
// if (this.gid) {
|
||
// const goods = this.form;
|
||
// const sku = this.skus[0];
|
||
// const updata = {
|
||
// ...goods,
|
||
// ...sku,
|
||
// goods_id: this.lid,
|
||
// };
|
||
// console.log(updata);
|
||
// } else {
|
||
// console.log(1111);
|
||
// const datas = {
|
||
// ...this.form,
|
||
// skus: this.skus,
|
||
// };
|
||
|
||
// addGoods(datas)
|
||
// .then((res) => {
|
||
// console.log("请求发起");
|
||
// if (res.data.httpCode == 200) {
|
||
// this.$message({
|
||
// type: "success",
|
||
// message: "添加成功",
|
||
// });
|
||
// this.updateForm();
|
||
// }
|
||
// })
|
||
// .catch((e) => {
|
||
// this.$message({
|
||
// type: "error",
|
||
// message: e.response.data.errorMessage.goods_code[0],
|
||
// });
|
||
// });
|
||
// }
|
||
},
|
||
|
||
// 修改成功后重置表单
|
||
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({
|
||
title: "",
|
||
sku_code: "",
|
||
status: "",
|
||
num: "",
|
||
cost: "",
|
||
});
|
||
},
|
||
// 删除一个商品规格
|
||
handleDelete(index) {
|
||
this.skus.splice(index, 1);
|
||
},
|
||
hanleurlimg(val) {
|
||
console.log(val, "=+++++++++");
|
||
},
|
||
// 上传商品图片
|
||
successUpload(file, fileList) {
|
||
console.log(file, fileList, 5555);
|
||
},
|
||
errorUpload(file, fileList) {
|
||
console.log(file, fileList, 5555);
|
||
},
|
||
// 移除商品图片
|
||
removeUpload() {},
|
||
},
|
||
mounted() {
|
||
this.gid = this.$route.query;
|
||
// 获取商品种类
|
||
goods_types().then((res) => {
|
||
this.cate = res.data.data;
|
||
});
|
||
// 获取商品品牌
|
||
Brand_goods_types().then((res) => {
|
||
this.brand = res.data.data;
|
||
});
|
||
this.handleList();
|
||
this.handleUpdate();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-upload--picture-card {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
.el-form-item {
|
||
margin-left: 60px;
|
||
}
|
||
.addto {
|
||
display: inline-block;
|
||
width: 28px;
|
||
height: 28px;
|
||
background-color: blue;
|
||
color: #fff;
|
||
font-size: 25px;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
}
|
||
/* .btn {
|
||
text-align: center;
|
||
} */
|
||
</style>
|