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

<template>
  <div>
    <obj-modal
      class="obj-modal"
      ref="modal"
      labelWidth="100px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__before">
        <el-tabs :before-leave="beforeTabLeave" v-model="currentPanel">
          <el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
          <el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
          <el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
        </el-tabs>
      </template>
    </obj-modal>
    <!-- 添加规格 -->
    <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, addAttribute },
  data() {
    return {
      currentPanel: "基础信息",
      modalData: {
        merchantId: null,
        shopId: null,
        id: null,
        name: "",
        productCategoryId: "",
        productPhotoList: [
          // {
          //     "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
          //     "isMain": 1
          // }
        ],
        description: "",
        productUnit: "",
        productPlace: "",
        //保质期
        shelfLife: "",
        //产品介绍图
        productIntroducePhoto: "",
        //产品介绍视频
        productVideo: "",
        //单价
        singlePrice: "",
        //单库存
        singleStock: "",
        //其他属性
        otherAttribute: '[{"name":"颜色","value":"黄色；屎黄色"}]',
        //折扣情况
        discountActivity: {
          // "endTime": "2024-08-31 00:00:00",
          // "id": "1821213180710957056",
          // "merchantId": "1818337963053297664",
          // "ruleObject": {
          //     "discount": 5,
          //     "limitCount": 99
          // },
          // "shopId": "1818337963523059712",
          // "startTime": "2024-08-01 00:00:00",
          // "type": 0
        },
        //是否折扣
        isDiscount: 1,
        marketId: null,
        //最大消费
        maxCostPrice: 15,
        //市场最大消费
        maxMarketPrice: 35,
        //最大售价
        maxSalePrice: 17.5,
        //最低售价
        minCostPrice: 10,
        //市场最低售价
        minMarketPrice: 20,
        minSalePrice: 10,
        salePrice: 20,
        sort: 999,
        status: "DOWN", //up 上架 //DOWN 放入仓库
        stockNum: 200,
        specType: 1,
        productAttributeList: [
          // {
          //     "id": "1821213026050191360",
          //     "attributeName": "重量",
          //     "attributeValue": "1斤,2斤"
          // }
        ],
        productSpecificationList: [
          // {
          //     "attributeValue": "重量1斤",
          //     "costPrice": 10,
          //     "id": "1821213026083745792",
          //     "isDiscount": 1,
          //     "limitCount": 99,
          //     "marketPrice": 20,
          //     "productId": "1821207097380515840",
          //     "saleNum": 0,
          //     "salePrice": 10,
          //     "stockNum": 100,
          //     "virtualSaleNum": 0,
          //     "warnStockNum": 0,
          //     "_id": "重量1斤",
          //     "value": "售价￥10 成本￥10 库存100"
          // },
          // {
          //     "attributeValue": "重量2斤",
          //     "costPrice": 15,
          //     "id": "1821213026083745793",
          //     "isDiscount": 1,
          //     "limitCount": 99,
          //     "marketPrice": 35,
          //     "productId": "1821207097380515840",
          //     "saleNum": 0,
          //     "salePrice": 17.5,
          //     "stockNum": 100,
          //     "virtualSaleNum": 0,
          //     "warnStockNum": 0,
          //     "_id": "重量2斤",
          //     "value": "售价￥17.5 成本￥15 库存100"
          // }
        ],
      },
      modalConfig: {
        title: "编辑商品",
        show: false,
        width: "1300px",
        fullscreen: true,
      },
      fileList: [], //回显图片
      place: "", //场地
      passCheck: [], //通行证
    };
  },
  mounted() {},
  methods: {
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        console.log(e);
        this.init(cloneDeep(e.row));
      }
      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) => {
          this.modalData = row;
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    addSpecs() {
      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);
    },
    beforeTabLeave(activeName) {
      let state = "";
      this.$refs.modal.validate((valid) => {
        state = valid;
      });
      return state;
    },
  },
  computed: {
    modalCols() {
      switch (this.currentPanel) {
        case "基础信息":
          return [
            {
              label: "商品图片",
              prop: "productPhotoList",
              required: true,
              rules: {
                required: true,
                message: "请上传商品图片",
                trigger: "blur",
              },
              type: "jsx",
              render: () => {
                const handleChange = (file, fileList) => {
                  // console.log(fileList);
                };
                const handleAvatarSuccess = (res, file, fileList) => {
                  console.log(res, fileList);
                  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, index) => {
                      if (index == 0) {
                        return {
                          isMain: 1,
                          url: item.response.data,
                        };
                      } else {
                        return {
                          url: item.response.data,
                        };
                      }
                    }
                  );
                  console.log(this.modalData.productPhotoList);
                };
                return (
                  <el-upload
                    class="upload-demo"
                    drag
                    action={this.$api.mer_admin.uploadFile()}
                    {...{
                      props: {
                        "on-change": handleChange,
                        "on-success": handleAvatarSuccess,
                        "on-remove": handleRemove,
                      },
                    }}
                    headers={{
                      token: "Bearer " + this.$cookie.get("token"),
                    }}
                    multiple={true}
                    file-list={this.fileList}
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                );
              },
            },
            {
              label: "商品类目",
              prop: "productCategoryId",
              type: "jsx",
              required: true,
              rules: {
                required: true,
                message: "请选择商品类目",
                trigger: "blur",
              },
              render: () => {
                return (
                  <el-select
                    placeholder="请选择商品类目"
                    v-model={this.modalData.productCategoryId}
                  >
                    {this.getProductCategory.map((item) => {
                      return (
                        <el-option
                          label={item.name}
                          value={item.id}
                        ></el-option>
                      );
                    })}
                  </el-select>
                );
              },
            },
            {
              label: "商品名称",
              prop: "name",
              type: "Input",
              required: true,
              rules: {
                required: true,
                message: "请输入商品名称",
                trigger: "blur",
              },
              placeholder: "请输入商品名称",
            },
            {
              label: "商品描述",
              prop: "description",
              required: true,
              rules: {
                required: true,
                message: "请填写商品描述",
                trigger: "blur",
              },
              type: "jsx",
              render: () => {
                return (
                  <el-input
                    type="textarea"
                    v-model={this.modalData.description}
                    placeholder="请简单描述，如别称、口感、用途等"
                  />
                );
              },
            },
          ];
          break;
        case "销售信息":
          return [
            {
              label: "销售单位",
              prop: "productUnit",
              required: true,
              rules: {
                required: true,
                message: "请选择销售单位",
                trigger: "blur",
              },
              type: "jsx",
              render: () => {
                return (
                  <el-select
                    v-model={this.modalData.productUnit}
                    placeholder="请选择销售单位"
                  >
                    {this.getSaleUnit.map((item) => {
                      return (
                        <el-option
                          label={item.name}
                          value={item.id}
                        ></el-option>
                      );
                    })}
                  </el-select>
                );
              },
            },
            {
              label: "规格",
              prop: "productSpecificationList",
              type: "jsx",
              render: () => {
                return (
                  <el-button onClick={this.addSpecs}>
                    若有多规格请在此配置
                  </el-button>
                );
              },
            },
            {
              label: "价格",
              prop: "singlePrice",
              type: "jsx",
              render: () => {
                return (
                  <el-input
                    readonly={
                      this.modalData.productSpecificationList.length > 0
                    }
                    placeholder="请输入价格"
                    v-model={this.modalData.singlePrice}
                  ></el-input>
                );
              },
            },
            {
              label: "库存",
              prop: "singleStock",
              type: "jsx",
              render: () => {
                return (
                  <el-input
                    readonly={
                      this.modalData.productSpecificationList.length > 0
                    }
                    placeholder="请输入库存"
                    v-model={this.modalData.singleStock}
                  ></el-input>
                );
              },
            },
            {
              label: "其他属性",
              prop: "productAttributeList",
              type: "jsx",
              render: () => {
                return (
                  <el-button onClick={this.addAttribute}>
                    添加其他属性
                  </el-button>
                );
              },
            },
          ];
          break;
        case "其他信息":
          return [
            {
              label: "产地",
              prop: "productPlace",
              required: true,
              rules: { required: true, message: "请选择产地", trigger: "blur" },
              type: "jsx",
              render: () => {
                const change = (e) => {
                  console.log(e);
                  this.modalData.productPlace = e.join("-");
                  console.log(aa);
                };
                return (
                  <el-cascader
                    v-model={this.place}
                    onChange={change}
                    options={this.$api.mer_admin.getCityOptions()}
                    {...{
                      props: {
                        checkStrictly: true,
                      },
                    }}
                    clearable
                  ></el-cascader>
                );
              },
            },
            {
              label: "保质期",
              prop: "shelfLife",
              type: "jsx",
              // required: true,
              rules: {
                required: true,
                message: "请填写保质期",
                trigger: "blur",
              },
              render: () => {
                return (
                  <el-input
                    style="width:150px;"
                    placeholder="请填写保质期"
                    v-model={this.modalData.shelfLife}
                  >
                    <div slot="suffix">天</div>
                  </el-input>
                );
              },
            },
            {
              label: "商品介绍图",
              prop: "productIntroducePhoto",
              type: "Input",
              required: true,
              rules: { required: true, message: "商品介绍图", trigger: "blur" },
              placeholder: "商品介绍图",
              type: "jsx",
              render: () => {
                const handleChange = (file, 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={{
                      token: "Bearer " + this.$cookie.get("token"),
                    }}
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                );
              },
            },
            {
              label: "商品视频",
              prop: "productVideo",
              required: true,
              rules: {
                required: true,
                message: "请填写商品描述",
                trigger: "blur",
              },
              type: "jsx",
              render: () => {
                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={{
                      token: "Bearer " + this.$cookie.get("token"),
                    }}
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                );
              },
            },
          ];
          break;

        default:
          break;
      }
    },
    modalHandles() {
      return [
        {
          label: this.currentPanel === "其他信息" ? "确定" : "下一步",
          type: "primary",
          loading: this.isLoading,
          submit: true,
          handle: debounce(() => {
            if (this.currentPanel === "基础信息") {
              this.currentPanel = "销售信息";
            } else if (this.currentPanel == "销售信息") {
              this.currentPanel = "其他信息";
            } else {
              console.log("请求接口", this.modalData);
              this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
                console.log(res);
              });
            }
          }, 300),
        },
      ];
    },
  },
  asyncComputed: {
    async getProductCategory() {
      let res = await this.$api.mer_admin.getProductCategory();
      return res.data.data;
    },
    async getSaleUnit() {
      let res = await this.$api.mer_admin.getSaleUnit({
        shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
      });
      console.log(res);

      return res.data.data;
    },
  },
};
</script>
<style lang="scss" scoped>
.obj-modal ::v-deep {
  .el-dialog__body {
    padding: 0 30px;
  }
}
</style>