|
@@ -1,23 +1,69 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<el-card class="box-card">
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-button type="primary" @click="dialogVisible = true"
|
|
|
+ >新建sku</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
- style="width: 100%;fontSize:12px;"
|
|
|
+ style="width: 100%; fontsize: 12px"
|
|
|
v-loading="listLoading"
|
|
|
- :cell-style="{padding:'6px 0'}"
|
|
|
+ :cell-style="{ padding: '6px 0' }"
|
|
|
>
|
|
|
<el-table-column prop="id" label="ID" width="50px"></el-table-column>
|
|
|
- <el-table-column prop="category" label="category" width="100"></el-table-column>
|
|
|
- <el-table-column prop="description" label="description" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="image" show-overflow-tooltip label="image"></el-table-column>
|
|
|
- <el-table-column prop="name" label="name" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="nameeng" label="nameeng" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="pricenow" label="pricenow" width="100"></el-table-column>
|
|
|
- <el-table-column prop="priceorigin" label="priceorigin" width="100"></el-table-column>
|
|
|
- <el-table-column prop="property" label="property" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="recommendation" label="recommendation" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="rule" show-overflow-tooltip label="rule" width="120"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="category"
|
|
|
+ label="category"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="description"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="image"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="image"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="name"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nameeng"
|
|
|
+ label="nameeng"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="pricenow"
|
|
|
+ label="pricenow"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="priceorigin"
|
|
|
+ label="priceorigin"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="property"
|
|
|
+ label="property"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="recommendation"
|
|
|
+ label="recommendation"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="rule"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="rule"
|
|
|
+ width="120"
|
|
|
+ ></el-table-column>
|
|
|
<!--
|
|
|
<el-table-column prop="isbuild" label="状态">
|
|
|
<template slot-scope="{row}">
|
|
@@ -26,16 +72,250 @@
|
|
|
</el-table-column>-->
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog title="新增" :visible.sync="dialogVisible">
|
|
|
+ <!-- 新增sku -->
|
|
|
+ <el-form
|
|
|
+ :model="dynamicValidateForm"
|
|
|
+ ref="dynamicValidateForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-dynamic"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-form-item prop="id" label="菜单id">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="number"
|
|
|
+ v-model="dynamicValidateForm.id"
|
|
|
+ placeholder="菜单id,尽量把同一类别的放一块"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1"
|
|
|
+ >菜单id,尽量把同一类别的放一块</el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="name" label="名称">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ v-model="dynamicValidateForm.name"
|
|
|
+ placeholder="神奇咖啡"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="nameeng" label="英文名">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ v-model="dynamicValidateForm.nameeng"
|
|
|
+ placeholder="legend coffee"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="pricenow" label="现价">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="number"
|
|
|
+ v-model="dynamicValidateForm.pricenow"
|
|
|
+ placeholder="现价"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span>现价,2.0/3.0门店有统一折扣,则此字段没什么用</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="priceorigin" label="原价">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="number"
|
|
|
+ v-model="dynamicValidateForm.priceorigin"
|
|
|
+ placeholder="原价"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="image" label="产品图片">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ v-model="dynamicValidateForm.image"
|
|
|
+ placeholder="元气樱樱抹茶拿铁.jpg"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span>
|
|
|
+ 请先把该名字命名的大图和小图分别传到mpmedium和mpthumb目录下</span
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="slides" label="大图轮播">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-tag
|
|
|
+ :key="tag"
|
|
|
+ v-for="tag in dynamicValidateForm.slides"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleClose(tag)"
|
|
|
+ >
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="inputVisible"
|
|
|
+ v-model="inputValue"
|
|
|
+ ref="saveTagInput"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleInputConfirm"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ class="button-new-tag"
|
|
|
+ size="small"
|
|
|
+ @click="showInput"
|
|
|
+ >+</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span> 元气樱樱抹茶拿铁.jpg</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="category" label="新品推荐">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ v-model="dynamicValidateForm.category"
|
|
|
+ placeholder="新品推荐"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span> 同一类别的咖啡会归一起</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="recommendation" label="推荐语">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ v-model="dynamicValidateForm.recommendation"
|
|
|
+ placeholder="有颜有料,樱你而美"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span> 推荐语,同一类别的咖啡共用一个推荐语</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="description" label="商品描述">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ v-model="dynamicValidateForm.description"
|
|
|
+ placeholder="限量赠网红樱花饼干。优选宇治抹茶,精细石 磨研磨,搭配进口樱花粉,碰撞绝妙层次感。"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="property" label="属性">
|
|
|
+ <el-row :span="24">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ v-model="dynamicValidateForm.property"
|
|
|
+ placeholder="热,冰,少冰,去冰;标准糖,半糖; 含咖啡"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <span> 不同类的属性用分号隔开,同类属性用逗号隔开</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- --------------------------------------------- -->
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel('dynamicValidateForm')">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('dynamicValidateForm')"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-link
|
|
|
+ href="https://help.aliyun.com/document_detail/195868.html?spm=a2c4g.11186623.6.620.74d062e7wbqjEy"
|
|
|
+ target="_blank"
|
|
|
+ type="success"
|
|
|
+ >图片上传工具下载</el-link
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getGoodsList } from "@/api/order";
|
|
|
+import { createSku } from "@/api/shop";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tableData: [],
|
|
|
listLoading: true,
|
|
|
+ dialogVisible: false,
|
|
|
+ // form
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: "",
|
|
|
+ dynamicValidateForm: {
|
|
|
+ id: "",
|
|
|
+ name: "",
|
|
|
+ nameeng: "",
|
|
|
+ pricenow: "",
|
|
|
+ priceorigin: "",
|
|
|
+ image: "",
|
|
|
+ slides: [],
|
|
|
+ category: "",
|
|
|
+ recommendation: "",
|
|
|
+ description: "",
|
|
|
+ property: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ id: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ name: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ nameeng: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ pricenow: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ priceorigin: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ image: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ slides: [{ required: true, message: " ", trigger: "change" }],
|
|
|
+ category: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ recommendation: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ description: [{ required: true, message: " ", trigger: "blur" }],
|
|
|
+ property: [{ required: true, message: " ", trigger: "blur" }]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -44,13 +324,71 @@ export default {
|
|
|
methods: {
|
|
|
getList() {
|
|
|
this.listLoading = true;
|
|
|
- getGoodsList().then((res) => {
|
|
|
+ getGoodsList().then(res => {
|
|
|
console.log(res);
|
|
|
this.tableData = res;
|
|
|
this.listLoading = false;
|
|
|
});
|
|
|
},
|
|
|
- },
|
|
|
+ // form
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let params = Object.assign({}, this.dynamicValidateForm, {
|
|
|
+ id: this.dynamicValidateForm.id - 0,
|
|
|
+ slides: this.dynamicValidateForm.slides.join(";"),
|
|
|
+ pricenow: this.dynamicValidateForm.pricenow - 0,
|
|
|
+ priceorigin: this.dynamicValidateForm.priceorigin - 0
|
|
|
+ });
|
|
|
+ createSku(params)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res === "OK") {
|
|
|
+ this.cancel("dynamicValidateForm");
|
|
|
+ this.$message.success("sku创建成功!");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ console.log(params);
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ cancel(formName) {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // tag
|
|
|
+ handleClose(tag) {
|
|
|
+ this.dynamicValidateForm.slides.splice(
|
|
|
+ this.dynamicValidateForm.slides.indexOf(tag),
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ showInput() {
|
|
|
+ this.inputVisible = true;
|
|
|
+ this.$nextTick(_ => {
|
|
|
+ this.$refs.saveTagInput.$refs.input.focus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInputConfirm() {
|
|
|
+ let inputValue = this.inputValue;
|
|
|
+ if (inputValue) {
|
|
|
+ this.dynamicValidateForm.slides.push(inputValue);
|
|
|
+ }
|
|
|
+ this.inputVisible = false;
|
|
|
+ this.inputValue = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -58,4 +396,23 @@ export default {
|
|
|
.container {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
-</style>
|
|
|
+.filter-container {
|
|
|
+ padding: 20px;
|
|
|
+ // text-align: right;
|
|
|
+}
|
|
|
+.el-tag + .el-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.button-new-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+.input-new-tag {
|
|
|
+ width: 90px;
|
|
|
+ margin-left: 10px;
|
|
|
+ vertical-align: bottom;
|
|
|
+}
|
|
|
+</style>
|