添加商品

src/views/modules/product/popup/add-attribute.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <el-alert class="Example" title="需要注意的事项" type="info">
+          <template slot="title">
+            <el-form label-width="80px">
+              <el-form-item label="示例：">
+                <div class="iconSize">属性名称：温度</div>
+                <div class="iconSize">属性内容：常温；冷饮</div>
+                <div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-alert>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="属性名称：" prop="name">
+            <el-input
+              style="width: 80%"
+              placeholder="请输入属性名称"
+              v-model="ruleForm.name"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="属性内容：" prop="value">
+            <el-tag
+              :key="tag"
+              v-for="tag in ruleForm.value"
+              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-form-item>
+        </el-form>
+      </div>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "属性",
+        show: false,
+        width: "80%",
+      },
+      modalData: {},
+      inputValue: "",
+      inputVisible: false,
+      ruleForm: {
+        name: "",
+        value: [],
+      },
+      rules: {
+        name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
+        value: [
+          {
+            required: true,
+            message: "请输入属性内容",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "添加属性";
+          this.$nextTick(() => {
+            this.modalData = {};
+            this.$refs.ruleForm.resetFields();
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+    },
+    handleClose(tag) {
+      this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
+    },
+    //聚焦
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.ruleForm.value.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          loading: this.isLoading,
+          // submit: true,
+          handle: () => {
+            this.$refs.ruleForm.validate((valid) => {
+              if (valid) {
+                this.$emit("getAttribute", this.ruleForm);
+                this.toggle();
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.Example {
+  margin: 0 0 20px 20px;
+  width: 80%;
+}
+.iconSize {
+  font-size: 15px;
+  //   padding: 3px;
+}
+.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>

src/views/modules/product/popup/add-or-update.vue

@@ -17,14 +17,24 @@
         </el-tabs>
       </template>
     </obj-modal>
-    <addSpecifications ref="addSpecifications"></addSpecifications>
+    <!-- 添加规格 -->
+    <addSpecifications
+      @getSpecs="getSpecs"
+      ref="addSpecifications"
+    ></addSpecifications>
+    <!-- 属性 -->
+    <addAttribute
+      @getAttribute="getAttribute"
+      ref="addAttribute"
+    ></addAttribute>
   </div>
 </template>
 <script>
+import addAttribute from "./add-attribute.vue";
 import addSpecifications from "./add-specifications.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
-  components: { addSpecifications },
+  components: { addSpecifications, addAttribute },
   data() {
     return {
       currentPanel: "基础信息",
@@ -84,7 +94,7 @@ export default {
         minSalePrice: 10,
         salePrice: 20,
         sort: 999,
-        status: "DOWN",
+        status: "DOWN", //up 上架 //DOWN 放入仓库
         stockNum: 200,
         specType: 1,
         productAttributeList: [
@@ -136,6 +146,7 @@ export default {
         fullscreen: true,
       },
       fileList: [], //回显图片
+      place: "", //场地
     };
   },
   mounted() {},
@@ -153,6 +164,36 @@ export default {
       return {
         add: (item) => {
           console.log(item);
+          this.$nextTick(() => {
+            this.modalData = {
+              description: "",
+              merchantId: "",
+              name: "",
+              otherAttribute: "",
+              productAttributeList: [],
+              productCategoryId: "",
+              productIntroducePhoto: "",
+              productPhotoList: [],
+              productPlace: "",
+              productSpecificationList: [],
+              productUnit: "",
+              productVideo: "",
+              shelfLife: "",
+              shopId: "",
+              singlePrice: "",
+              singleStock: "",
+              specType: "",
+              status: "UP",
+            };
+            this.modalData.merchantId = JSON.parse(
+              sessionStorage.getItem("userInfo")
+            ).merchantId;
+            this.modalData.shopId = JSON.parse(
+              sessionStorage.getItem("userInfo")
+            ).shopId;
+          });
+          console.log(this.modalData);
+
           this.isAdd = true;
         },
         update: (row) => {
@@ -166,6 +207,34 @@ export default {
       console.log("123");
       this.$refs.addSpecifications.toggle().add();
     },
+    //获取属性
+    getSpecs(tableData, AttributeData, salePrice, stockNum) {
+      let AttributeList = AttributeData.map((item) => {
+        return {
+          attributeName: item.attributeName,
+          attributeValue: item.attributeValue.join(","),
+        };
+      });
+      console.log(AttributeList);
+
+      this.$set(this.modalData, "productSpecificationList", tableData);
+      this.$set(this.modalData, "productAttributeList", AttributeList);
+      this.$set(this.modalData, "singlePrice", salePrice);
+      this.$set(this.modalData, "singleStock", stockNum);
+    },
+    addAttribute() {
+      this.$refs.addAttribute.toggle().add();
+    },
+    getAttribute(data) {
+      console.log(data);
+      this.modalData.otherAttribute = [
+        {
+          name: data.name,
+          value: data.value.join(","),
+        },
+      ];
+      console.log(this.modalData);
+    },
   },
   computed: {
     modalCols() {
@@ -186,16 +255,40 @@ export default {
                 const handleChange = (file, fileList) => {
                   // console.log(fileList);
                 };
-                const handleAvatarSuccess = (res, file) => {
+                const handleAvatarSuccess = (res, file, fileList) => {
-                  console.log(res);
+                  console.log(res, fileList);
-                  this.modalData.productPhotoList.push(res);
+                  this.modalData.productPhotoList = fileList.map(
+                    (item, index) => {
+                      if (index == 0) {
+                        return {
+                          isMain: 1,
+                          url: item.response.data,
+                        };
+                      } else {
+                        return {
+                          url: item.response.data,
+                        };
+                      }
+                    }
+                  );
                   console.log(this.modalData.productPhotoList);
                 };
                 const handleRemove = (file, fileList) => {
                   console.log(file, fileList);
-                  this.modalData.productPhotoList = fileList.map((item) => {
+                  this.modalData.productPhotoList = fileList.map(
-                    return item.response;
+                    (item, index) => {
-                  });
+                      if (index == 0) {
+                        return {
+                          isMain: 1,
+                          url: item.response.data,
+                        };
+                      } else {
+                        return {
+                          url: item.response.data,
+                        };
+                      }
+                    }
+                  );
                   console.log(this.modalData.productPhotoList);
                 };
                 return (
@@ -338,6 +431,9 @@ export default {
               render: () => {
                 return (
                   <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
+                    }
                     placeholder="请输入价格"
                     v-model={this.modalData.singlePrice}
                   ></el-input>
@@ -351,6 +447,9 @@ export default {
               render: () => {
                 return (
                   <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
+                    }
                     placeholder="请输入库存"
                     v-model={this.modalData.singleStock}
                   ></el-input>
@@ -362,7 +461,11 @@ export default {
               prop: "productAttributeList",
               type: "jsx",
               render: () => {
-                return <el-button>添加其他属性</el-button>;
+                return (
+                  <el-button onClick={this.addAttribute}>
+                    添加其他属性
+                  </el-button>
+                );
               },
             },
           ];
@@ -378,10 +481,12 @@ export default {
               render: () => {
                 const change = (e) => {
                   console.log(e);
+                  this.modalData.productPlace = e.join("-");
+                  console.log(aa);
                 };
                 return (
                   <el-cascader
-                    v-model={this.modalData.productPlace}
+                    v-model={this.place}
                     onChange={change}
                     options={this.$api.mer_admin.getCityOptions()}
                     {...{
@@ -426,16 +531,27 @@ export default {
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
-                  console.log(fileList);
+                  // console.log(fileList);
+                };
+                const handleAvatarSuccess = (res) => {
+                  this.modalData.productIntroducePhoto = res.data;
+                  console.log(this.modalData.productIntroducePhoto);
+                };
+                const handleRemove = () => {
+                  this.modalData.productIntroducePhoto = "";
+                  console.log(this.modalData.productIntroducePhoto);
                 };
                 return (
                   <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
+                    limit={1}
                     {...{
                       props: {
                         "on-change": handleChange,
+                        "on-success": handleAvatarSuccess,
+                        "on-remove": handleRemove,
                       },
                     }}
                     headers={{
@@ -468,14 +584,23 @@ export default {
                 const handleChange = (file, fileList) => {
                   console.log(fileList);
                 };
+                const handleAvatarSuccess = (res) => {
+                  this.modalData.productVideo = res.data;
+                };
+                const handleRemove = () => {
+                  this.modalData.productVideo = "";
+                };
                 return (
                   <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
+                    limit={1}
                     {...{
                       props: {
                         "on-change": handleChange,
+                        "on-success": handleAvatarSuccess,
+                        "on-remove": handleRemove,
                       },
                     }}
                     headers={{
@@ -514,7 +639,10 @@ export default {
             } else if (this.currentPanel == "销售信息") {
               this.currentPanel = "其他信息";
             } else {
-              console.log("请求接口");
+              console.log("请求接口", this.modalData);
+              this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
+                console.log(res);
+              });
             }
           }, 300),
         },

src/views/modules/product/popup/add-specifications.vue

@@ -8,50 +8,75 @@
       :modalHandles="modalHandles"
     >
       <div slot="dialog__content">
-        <div>
+        <div v-for="(item, index) in AttributeData" :key="index">
           <el-row>
             <el-input
               style="width: 80%; margin: 0 20px 0 0"
-              placeholder="请输入内容"
+              placeholder="请输入属性"
-              v-model="input"
+              v-model="item.attributeName"
               clearable
             >
             </el-input>
-            <el-button type="danger" icon="el-icon-delete" circle></el-button>
+            <el-button
+              @click="deleteAttribute(index)"
+              type="danger"
+              icon="el-icon-delete"
+              circle
+            ></el-button>
           </el-row>
 
           <el-row>
             <el-tag
               :key="tag"
-              v-for="tag in dynamicTags"
+              v-for="tag in item.attributeValue"
               closable
               :disable-transitions="false"
-              @close="handleClose(tag)"
+              @close="handleClose(index, tag)"
             >
               {{ tag }}
             </el-tag>
             <el-input
               class="input-new-tag"
-              v-if="inputVisible"
+              v-if="item.inputVisible"
               v-model="inputValue"
-              ref="saveTagInput"
+              :ref="`saveTagInput${index}`"
               size="small"
-              @keyup.enter.native="handleInputConfirm"
+              @keyup.enter.native="handleInputConfirm(index)"
-              @blur="handleInputConfirm"
+              @blur="handleInputConfirm(index)"
             >
             </el-input>
             <el-button
               v-else
               class="button-new-tag"
               size="small"
-              @click="showInput"
+              @click="showInput(index)"
               >+新增规格</el-button
             ></el-row
           >
         </div>
         <el-row type="flex" justify="center">
-          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row
+          <el-button @click="addAttribute" type="text"
+            >+添加其他属性</el-button
+          ></el-row
         >
+        <obj-table-plus
+          slot="dialog__after"
+          style="height: 50vh"
+          ref="oTable"
+          @query="queryTableData"
+          v-model="tableData"
+          :tableCols="tableCols"
+          :tableProp="tableProp"
+          :toolbarProp="toolbarProp"
+          :tableEvent="tableEvent"
+          :enableAutoQuery="false"
+        >
+          <!-- <div slot="tableTop" class="mb-2">
+            <el-button type="primary" size="mini" @click="calculation"
+              >计算属性</el-button
+            >
+          </div> -->
+        </obj-table-plus>
       </div>
     </obj-modal>
   </div>
@@ -66,20 +91,33 @@ export default {
       //监控对象数据
       tableData: [],
       //表格属性
-      tableProp: {},
+      //表格属性
+      tableProp: {
+        height: "auto",
+        border: true,
+        "auto-resize": false,
+        "print-config": {},
+        "row-config": { isCurrent: true, isHover: true },
+        "highlight-hover-row": true,
+        "highlight-current-row": true,
+      },
+      toolbarProp: {},
+      tableEvent: {},
       modalConfig: {
         title: "属性",
         show: false,
         width: "80%",
       },
       modalData: {},
-      AttributeData:[{
+      AttributeData: [
-        attributeName:"",
+        {
-        attributeValue:[]
+          attributeName: "",
-      }], //
+          attributeValue: [],
+          inputVisible: false,
+        },
+      ], //
       input: "",
       dynamicTags: [],
-      inputVisible: false,
       inputValue: "",
     };
   },
@@ -111,29 +149,164 @@ export default {
     init(row) {
       this.modalData = row;
     },
-    handleClose(tag) {
+    handleClose(index, tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      this.AttributeData[index].attributeValue.splice(
+        this.AttributeData[index].attributeValue.indexOf(tag),
+        1
+      );
     },
-    showInput() {
+    //聚焦
-      this.inputVisible = true;
+    showInput(index) {
-      this.$nextTick((_) => {
+      console.log(index);
-        this.$refs.saveTagInput.$refs.input.focus();
+
+      this.AttributeData[index].inputVisible = true;
+      this.$nextTick(() => {
+        console.log(this.$refs[`saveTagInput${index}`]);
+        this.$refs[`saveTagInput${index}`][0].focus();
       });
     },
-    handleInputConfirm() {
+    handleInputConfirm(index) {
       let inputValue = this.inputValue;
       if (inputValue) {
-        this.dynamicTags.push(inputValue);
+        this.AttributeData[index].attributeValue.push(inputValue);
       }
-      this.inputVisible = false;
+      this.AttributeData[index].inputVisible = false;
       this.inputValue = "";
+      this.calculation();
     },
     //添加属性
     addAttribute() {
-      console.log("添加属性");
+      this.AttributeData.push({
+        attributeName: "",
+        attributeValue: [],
+        inputVisible: false,
+      });
+      console.log(this.AttributeData);
+    },
+    //删除属性
+    deleteAttribute(index) {
+      this.AttributeData.splice(index, 1);
+      this.calculation();
+    },
+    //计算属性
+    calculation() {
+      let data = [];
+      let list = [];
+      for (let i = 0; i < this.AttributeData.length; i++) {
+        if (i == 0) {
+          data = this.AttributeData[i].attributeValue.map((item) => {
+            return this.AttributeData[i].attributeName + item;
+          });
+        } else {
+          data.forEach((it) => {
+            this.AttributeData[i].attributeValue.forEach((e) => {
+              let name = this.AttributeData[i].attributeName;
+              list.push(it + "/" + name + e);
+            });
+          });
+          data = list;
+          list = [];
+        }
+      }
+      this.tableData = data.map((item) => {
+        return {
+          attributeValue: item,
+          salePrice: "",
+          costPrice: "",
+          stockNum: "",
+        };
+      });
+      console.log(data);
     },
   },
   computed: {
+    tableCols() {
+      return [
+        { title: "序号", type: "seq", width: "60px", fixed: "left" },
+        {
+          title: "属性",
+          field: "attributeValue",
+          align: "center",
+          "min-width": "160px",
+        },
+        {
+          title: "价格",
+          field: "salePrice",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.salePrice}
+                  placeholder="请输入价格"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "成本",
+          field: "costPrice",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.costPrice}
+                  placeholder="请输入成本"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "库存",
+          field: "stockNum",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.stockNum}
+                  placeholder="请输入库存"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "操作",
+          fixed: "right",
+          width: "150px",
+          type: "jsx",
+          align: "center",
+          render: (row) => {
+            let remove = () => {
+              this.tableData.splice(row.$rowIndex, 1);
+            };
+            return (
+              <el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
+                <el-button type="danger" size="mini" slot="reference">
+                  删除
+                </el-button>
+              </el-popconfirm>
+            );
+          },
+        },
+      ];
+    },
     modalHandles() {
       return [
         {
@@ -147,7 +320,53 @@ export default {
           type: "primary",
           loading: this.isLoading,
           // submit: true,
-          handle: () => {},
+          handle: () => {
+            let salePrice = ""; //价格范围
+            let stockNum = ""; //库存范围
+            let minSalePrice = Math.min.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.salePrice;
+              })
+            );
+            let maxSalePrice = Math.max.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.salePrice;
+              })
+            );
+            let minStockNum = Math.min.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.stockNum;
+              })
+            );
+            let maxStockNum = Math.max.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.stockNum;
+              })
+            );
+            if (minSalePrice == maxSalePrice) {
+              salePrice = maxSalePrice;
+            } else {
+              salePrice = minSalePrice + "~" + maxSalePrice;
+            }
+            if (minStockNum == maxStockNum) {
+              stockNum = maxStockNum;
+            } else {
+              stockNum = minStockNum + "~" + maxStockNum;
+            }
+
+            this.$emit(
+              "getSpecs",
+              this.tableData,
+              this.AttributeData,
+              salePrice,
+              stockNum
+            );
+            this.toggle();
+          },
         },
       ];
     },