dy-admin-manager/src/views/businessManager/shopManager/shopOperation.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header
        @back="onCancel"
        :content="pageTitle[pageType] + '商品'"
      ></el-page-header>
    </h2>

    <div class="m-core">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="货号" prop="sn">
          <el-input
            v-model.trim="form.sn"
            :disabled="pageDisabled"
            placeholder="请输入货号"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input
            v-model.trim="form.brand"
            :disabled="pageDisabled"
            placeholder="请输入品牌"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="备查货号" prop="supplyChannel" v-if="pageType == 'create'">
          <el-input v-model.trim="form.supplyChannel" placeholder="请输入备查货号" style="width: 400px"></el-input>
        </el-form-item> -->
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入商品名称"
            :disabled="pageDisabled"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-select
            v-model.trim="form.type"
            placeholder="请选择商品类型"
            :disabled="pageDisabled"
            style="width: 400px !important"
          >
            <el-option
              v-for="(item, index) in goodsType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类" prop="goodsCategoryId">
          <el-select
            v-model.trim="form.goodsCategoryId"
            placeholder="请选择商品分类"
            :disabled="pageDisabled"
            style="width: 400px !important"
            filterable
          >
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品型号" prop="specification">
          <el-input
            v-model.trim="form.specification"
            placeholder="请输入商品型号"
            :disabled="pageDisabled"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="内部库存" prop="stockCount">
          <el-input type="number" :disabled="pageType != 'create'" v-model.trim="form.stockCount" placeholder="请输入内部库存" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="税务库存" prop="taxStockCount">
          <el-input type="number" :disabled="pageType != 'create'" v-model.trim="form.taxStockCount" placeholder="请输入税务库存" style="width: 400px"></el-input>
        </el-form-item> -->
        <el-form-item label="库存类型" prop="stockType">
          <el-select
            v-model="form.stockType"
            placeholder="请选择库存类型"
            :disabled="pageDisabled"
            style="width: 400px !important"
          >
            <el-option
              v-for="(item, index) in stockType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市场价" prop="marketPrice">
          <el-input
            type="number"
            placeholder="请输入市场价"
            :disabled="pageDisabled"
            @mousewheel.native.prevent
            v-model.trim="form.marketPrice"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="零售价" prop="discountPrice">
          <el-input
            type="number"
            placeholder="请输入零售价"
            @mousewheel.native.prevent
            :disabled="pageDisabled"
            v-model.trim="form.discountPrice"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品团购价" prop="groupPurchasePrice">
          <el-input
            type="number"
            placeholder="请输入商品团购价"
            @mousewheel.native.prevent
            :disabled="pageDisabled"
            v-model.trim="form.groupPurchasePrice"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学员是否展示" prop="clientShow">
          <el-select
            v-model="form.clientShow"
            placeholder="请选择学员是否展示"
            style="width: 400px !important"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教务端是否展示" prop="educationalShow">
          <el-select
            v-model="form.educationalShow"
            placeholder="请选择教务端是否展示"
            style="width: 400px !important"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乐团是否展示" prop="musicGroupShow">
          <el-select
            v-model="form.musicGroupShow"
            placeholder="请选择乐团是否展示"
            style="width: 400px !important"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否库存预警" prop="stockWarning">
          <el-select
            v-model="form.stockWarning"
            placeholder="请选择库存预警"
            :disabled="pageDisabled"
            style="width: 400px !important"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否参与置换" prop="replacementShow">
          <el-select
            v-model="form.replacementShow"
            placeholder="请选择库存预警"
            :disabled="pageDisabled"
            style="width: 400px !important"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-upload
            class="avatar-uploader"
            action="/api-web/uploadFile"
            accept=".jpg, .jpeg, .png"
            :headers="headers"
            :disabled="pageDisabled"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.image" :src="form.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述" prop="brief">
          <el-input
            type="textarea"
            v-model.trim="form.brief"
            :disabled="pageDisabled"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品详情" prop="desc">
          <el-input
            type="textarea"
            v-model.trim="form.desc"
            :disabled="pageDisabled"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="!pageDisabled">
          <el-button @click="onSubmit('form')" type="primary"
            >立即{{ pageType == "create" ? "创建" : "修改" }}</el-button
          >
          <el-button @click="onReSet('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  categoryListTree,
  goodsAdd,
  goodsUpdate,
  goodsSingleQuery,
} from "@/api/businessManager";
import { getToken } from "@/utils/auth";
import { goodsType, stockType } from "@/utils/searchArray";
let validPrice = (rule, value, callback) => {
  if ((value == "" && typeof value == "string") || value == null) {
    callback(new Error("请输入金额"));
  } else if (value < 0) {
    callback(new Error("输入金额必须大于或等于0"));
  } else if (value >= 100000) {
    callback(new Error("输入金额必须小于100000"));
  } else {
    callback();
  }
};
let validStock = (rule, value, callback) => {
  if ((value == "" && typeof value == "string") || value == null) {
    callback(new Error("请输入库存"));
  } else if (value < 0) {
    callback(new Error("库存数量必须大于或等于0"));
  } else {
    callback();
  }
};
export default {
  name: "shopOperation",
  data() {
    return {
      goodsType: goodsType,
      stockType: stockType,
      categoryList: [],
      pageType: null,
      pageTitle: {
        create: "添加",
        update: "修改",
        look: "查看",
      },
      pageDisabled: false,
      headers: {
        Authorization: getToken(),
      },
      form: {
        sn: null,
        brand: null,
        supplyChannel: null,
        name: null,
        type: null,
        goodsCategoryId: null,
        specification: null,
        stockCount: null,
        taxStockCount: null,
        stockType: null,
        marketPrice: null,
        discountPrice: null,
        groupPurchasePrice: null,
        clientShow: null,
        educationalShow: null,
        musicGroupShow: null,
        stockWarning: null,
        image: null,
        brief: null,
        desc: null,
        replacementShow:null

      },
      rules: {
        sn: [{ required: true, message: "请输入商品货号", trigger: "blur" }],
        brand: [
          {
            required: true,
            message: "请输入品牌",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        supplyChannel: [
          { required: true, message: "请输入备查货号", trigger: "blur" },
        ],
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择商品分类",
            trigger: "change",
          },
        ],
        goodsCategoryId: [
          {
            required: true,
            message: "请选择商品类型",
            trigger: "change",
          },
        ],
        specification: [
          {
            required: true,
            message: "请输入商品型号",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        stockCount: [
          { required: true, validator: validStock, trigger: "blur" },
        ],
        taxStockCount: [
          { required: true, validator: validStock, trigger: "blur" },
        ],
        stockType: [
          { required: true, message: "请选择库存类型", trigger: "change" },
        ],
        marketPrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        discountPrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        groupPurchasePrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        clientShow: [
          { required: true, message: "请选择学员是否展示", trigger: "change" },
        ],
        replacementShow:[
          { required: true, message: "是否参与乐器置换", trigger: "change" },
        ],
        educationalShow: [
          {
            required: true,
            message: "请选择教务端是否展示",
            trigger: "change",
          },
        ],
        musicGroupShow: [
          { required: true, message: "请选择乐团是否展示", trigger: "change" },
        ],
        stockWarning: [
          { required: true, message: "请选择是否库存预警", trigger: "change" },
        ],
        image: [
          {
            required: true,
            message: "请选择图片",
            trigger: "blur",
          },
        ],
        brief: [
          {
            required: true,
            message: "请输入商品描述",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入商品详情",
            trigger: "blur",
          },
        ],
      },
      Fsearch: null,
      Frules: null,
      imageWidthM: 400,
      imageHeightM: 400,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let query = this.$route.query;
      if (query.paramInfo) {
        let paramInfo = JSON.parse(query.paramInfo);
        this.pageType = paramInfo.type;
        this.id = paramInfo.id;
      }
      this.pageDisabled = this.pageType == "look" ? true : false;
      this.getList();
      this.getCatagory();
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.pageType == "create") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            this.form.status = "NO"; // 默认上架
            goodsAdd(this.form).then((res) => {
              this.messageTips("添加", res);
            });
          } else if (this.pageType == "update") {
            goodsUpdate(this.form).then((res) => {
              this.messageTips("修改", res);
            });
          }
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          });
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/shopManager/shopManager",
          query: {
            pageInfo: this.Frules,
            searchForm: this.Fsearch,
          },
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/shopManager/shopManager",
      });
    },
    onReSet(formName) {
      this.$refs[formName].resetFields();
    },
    getList() {
      if (this.pageType == "create") {
        this.form = {
          sn: null,
          brand: null,
          supplyChannel: null,
          name: null,
          type: null,
          goodsCategoryId: null,
          specification: null,
          stockCount: null,
          taxStockCount: null,
          stockType: null,
          marketPrice: null,
          discountPrice: null,
          groupPurchasePrice: null,
          clientShow: null,
          educationalShow: null,
          musicGroupShow: null,
          stockWarning: null,
          image: null,
          brief: null,
          desc: null,
        };
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      } else {
        goodsSingleQuery(this.id).then((res) => {
          if (res.code == 200) {
            let result = res.data;
            this.form = {
              id: result.id,
              sn: result.sn,
              brand: result.brand,
              supplyChannel: result.supplyChannel,
              name: result.name,
              type: result.type,
              goodsCategoryId: result.goodsCategoryId,
              specification: result.specification,
              stockCount: result.stockCount,
              taxStockCount: result.taxStockCount,
              stockType: result.stockType,
              marketPrice: result.marketPrice,
              discountPrice: result.discountPrice,
              groupPurchasePrice: result.groupPurchasePrice,
              clientShow: result.clientShow,
              educationalShow: result.educationalShow,
              musicGroupShow: result.musicGroupShow,
              stockWarning: result.stockWarning,
              image: result.image,
              brief: result.brief,
              desc: result.desc,
              replacementShow:result.replacementShow
            };
          }
        });
      }
    },
    getCatagory() {
      categoryListTree({
        delFlag: 0,
        rows: 9999,
      }).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          let tempArray = [];
          result.rows.forEach((row) => {
            tempArray.push({
              label: row.name,
              value: row.id,
            });
          });
          this.categoryList = tempArray;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.image = res.data.url;
    },
    beforeAvatarUpload(file) {
      const imageType = {
        "image/png": true,
        "image/jpeg": true,
      };
      const isImage = imageType[file.type];
      const isLt2M = file.size / 1024 / 1024 < 2;
      const imageWidth = this.imageWidthM;
      const imageHeigh = this.imageHeightM;
      const _URL = window.URL || window.webkitURL;
      const isSize = new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function () {
          if (imageWidth && imageHeigh) {
            this.width === imageWidth && this.height === imageHeigh
              ? resolve()
              : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`);
          } else if (imageWidth && !imageHeigh) {
            this.width === imageWidth
              ? resolve()
              : reject(`请上传宽为${imageWidth}的图片`);
          } else if (!imageWidth && imageHeigh) {
            this.height === imageHeigh
              ? resolve()
              : reject(`请上传高为${imageHeigh}的图片`);
          } else {
            resolve();
          }
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        (src) => {
          this.$message.error(src);
          this.uploadImgLoading = false;
          return Promise.reject();
        }
      );
      console.log(isSize);
      if (!isImage) {
        this.$message.error("只能上传图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImage && isLt2M && isSize;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;

  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}

.el-row {
  margin-top: 40px;
}

.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}

.el-input-group {
  width: 200px;
  margin: 0 20px;
}

/deep/.el-tree-node__content {
  height: 40px !important;
}

/deep/.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: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>