order-ui-pc/src/views/goodStore/active/components/packForm.vue

<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    ref="ruleForm"
    :size="'mini'"
    label-width="110px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="1" class="dtitle">
        <ul>
          <li>包</li>
          <li>装</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="包装清单" prop="a1">
              <el-input
                placeholder="包装清单"
                v-model="ruleForm.a1"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装方式" prop="a2">
              <el-input
                placeholder="包装方式"
                v-model="ruleForm.a2"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装箱规格" prop="a3">
              <el-input
                placeholder="装箱规格"
                v-model="ruleForm.a3"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装箱重量" prop="a4">
              <el-input
                placeholder="装箱重量"
                v-model="ruleForm.a4"
                type="number"
                :min="0"
                :max="9999999999.99"
                :step="2"
              >
                <template slot="append">g</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装箱尺寸" prop="a5">
              <el-input
                placeholder="装箱尺寸"
                v-model="ruleForm.a5"
                maxlength="250"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商品条形码" prop="a6">
              <el-input
                placeholder="物流时间"
                v-model="ruleForm.a6"
                type="number"
                :min="0"
                :max="9999999999999"
                :step="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>发</li>
          <li>货</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="供货区域" prop="b1">
              <el-select
                v-model="ruleForm.b1"
                filterable
                clearable
                style="width: 100%"
                placeholder="供货区域"
              >
                <el-option
                  v-for="group in options6"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货地" prop="b2">
              <select-area
                :placeholder="'发货地'"
                :value="ruleForm.b2"
                :is-detail="id !== 'add'"
                :disabled="isDetail"
                :size="'mini'"
                @selectChange="selectAreab2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产地" prop="b3">
              <select-area
                :placeholder="'产地'"
                :value="ruleForm.b3"
                :size="'mini'"
                :is-detail="id !== 'add'"
                :disabled="isDetail"
                @selectChange="selectAreab3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流时间" prop="b4">
              <el-input
                placeholder="物流时间"
                v-model="ruleForm.b4"
                type="number"
                :min="0"
                :max="9999999999"
                :step="0"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供货周期" prop="b5">
              <el-input
                placeholder="供货周期"
                v-model="ruleForm.b5"
                type="number"
                :min="0"
                :max="9999999999"
                :step="0"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调样周期" prop="b6">
              <el-input
                placeholder="调样周期"
                v-model="ruleForm.b6"
                type="number"
                :min="0"
                :max="9999999999"
                :step="0"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>图</li>
          <li>片</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row style="padding: 0 0 20px 0">
          <el-col :span="8">
            <el-form-item label="缩略图" prop="c1" class="goodStore-upload">
              <div class="btnupload" style="position: relative">
                <img v-if="ruleForm.c1" :src="ruleForm.c1" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <file-upload
                  class="Upload"
                  :disabled="id == '007'"
                  :accept="'.jpg,.png,.jpeg'"
                  :multiple="true"
                  :uploadcondition="beforeAvatarUpload"
                  @UploadErrorEvent="UploadErrorEventc1"
                  @UploadSuccessEvent="UploadSuccessEventc1"
                ></file-upload>
              </div>
              <div class="txt-tips fl">
                <p>尺寸比例：</p>
                <p>1:1</p>
              </div>
            </el-form-item>
            <el-form-item label="详情主图" prop="c2" class="goodStore-upload">
              <div class="btnupload" style="position: relative">
                <img v-if="ruleForm.c2" :src="ruleForm.c2" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <file-upload
                  class="Upload"
                  :disabled="id == '007'"
                  :accept="'.jpg,.png,.jpeg'"
                  :multiple="true"
                  :uploadcondition="beforeAvatarUpload"
                  @UploadErrorEvent="UploadErrorEventc2"
                  @UploadSuccessEvent="UploadSuccessEventc2"
                ></file-upload>
              </div>
            </el-form-item>
                 <div style="font-size: 12px; color: #606266">
            <span style="padding: 0 0 0 20px">图片大小：小于1M</span>
            <span style="padding: 0 0 0 20px">图片类型.jpg/png/jpeg</span>
          </div>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详情介绍图" prop="c3">
              <div class="c3-div">
                <ul v-if="ruleForm.c3" class="clear">
                  <li class="img-show-li" v-viewer v-for="(img, iindex) in ruleForm.c3" :key="img + iindex">
                    <img :src="img" alt="" />
                    <i class="el-icon-close" @click="closeImg(iindex)"></i>
                  </li>
                  <li class="img-upload-li" v-if="ruleForm.c3.length < 10">
                    <div class="goodStore-upload">
                      <div class="btnupload" style="position: relative">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <file-upload
                          class="Upload"
                          :disabled="id == '007'"
                          :accept="'.jpg,.png,.jpeg'"
                          :multiple="true"
                          :uploadcondition="beforeAvatarUpload"
                          @UploadErrorEvent="UploadErrorEventc3"
                          @UploadSuccessEvent="UploadSuccessEventc3"
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
     
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/active";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import { options6 } from "../columns";
export default {
  name: "activeAdd",
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "activeAdd"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      size: "small",
      rulesThis: this.rules,
      loading: false,
      options6: options6,
      ruleForm: {},
      rules: {
        a1: [
          {
            required: true,
            message: "请输入包装清单",
            trigger: "blur",
          },
        ],
        a2: [
          {
            required: true,
            message: "请输入包装方式",
            trigger: "blur",
          },
        ],

        a3: [
          {
            required: true,
            message: "请输入装箱规格",
            trigger: "blur",
          },
        ],
        a4: [
          {
            required: true,
            message: "请输入装箱重量",
            trigger: "blur",
          },
        ],
        a5: [
          {
            required: true,
            message: "请输入装箱尺寸",
            trigger: "blur",
          },
        ],
        b1: [
          {
            required: true,
            message: "请选择供货区域",
            trigger: "change",
          },
        ],
        b2: [
          {
            type: "array",
            required: true,
            message: "请选择发货地",
            trigger: "change",
          },
        ],
        b3: [
          {
            type: "array",
            required: true,
            message: "请选择产地",
            trigger: "change",
          },
        ],
        b4: [
          {
            required: true,
            message: "请输入物流时间",
            trigger: "blur",
          },
        ],
        b5: [
          {
            required: true,
            message: "请输入供货周期",
            trigger: "blur",
          },
        ],
        b6: [
          {
            required: true,
            message: "请输入调样周期",
            trigger: "blur",
          },
        ],
        c1: [
          {
            required: true,
            message: "商品主图",
            trigger: "change",
          },
        ],
        c2: [
          {
            required: true,
            message: "商品分类",
            trigger: "change",
          },
        ],
        c3: [
          {
            type: "array",
            required: true,
            message: "商品品牌",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    handleClick(row) {
      console.log(row);
    },
    async initData() {
      this.loading = true;
      let res = await asyncRequest.detail({ id: this.id });
      this.loading = false;
      if (res.code === 0) {
        await this.resetForm(res.data);
      }
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.resetFormData();
        }
      });
    },
    resetFormData() {
      this.ruleForm = {
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
        a6: "",
        b1: "",
        b2: [],
        b3: [],
        b4: "",
        b5: "",
        b6: "",
        c1: "",
        c2: "",
        c3: [],
      };
    },
    //仓库省市区
    selectAreab2(e) {
      this.ruleForm.b2 = e;
      this.$refs.ruleForm.validateField("b2");
    },
    //仓库省市区
    selectAreab3(e) {
      this.ruleForm.b3 = e;
      this.$refs.ruleForm.validateField("b3");
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let change = false;
          this.mock.forEach((v1) => {
            if (v1.change && v1.change.length > 0) {
              change = true;
            }
          });
          if (!change) {
            this.ruleForm.spec = "规格！";
            return;
          } else {
            this.ruleForm.spec = "";
            let table = false;
            let hasnot = false;
            let stock = [];
            this.right.specList.forEach((v1) => {
              if (v1) {
                v1.forEach((v2) => {
                  if (v2 && v2.limit && v2.limit.length > 0) {
                    let list = [];
                    v2.limit.forEach((v3) => {
                      if (v3.num != 0 && v3.price != 0) {
                        table = true;
                        list.push(v3);
                      }
                      if (
                        (v3.num != 0 && v3.price == 0) ||
                        (v3.num == 0 && v3.price !== 0)
                      ) {
                        hasnot = true;
                      }
                    });
                    if (list.length > 0) {
                      let model = Object.assign({}, v2);
                      model.limit = list;
                      stock.push(model);
                    }
                  }
                });
              }
            });

            if (hasnot) {
              this.ruleForm.table =
                "起订量与成本价需成对填写，未成对请设为零！";
            } else {
              if (!table) {
                this.ruleForm.table = "至少填写一堆起订量与成本价！";
              } else {
                this.ruleForm.table = "";
                this.loading = true;
                let obj = JSON.parse(JSON.stringify(this.ruleForm));
                obj.stock = stock;
                obj.catid = obj.catid[obj.catid.length - 1];
                obj.image = obj.image.join();
                //split(",");
                console.log(obj);
                let res = {};
                if (this.id === "add") {
                  delete obj["id"];
                  res = await asyncRequest.add(obj);
                } else {
                  res = await asyncRequest.update(obj);
                }
                this.loading = false;
                if (res.code === 0) {
                  let title = this.id === "add" ? "添加成功" : "修改成功";
                  this.$notify.success({
                    title,
                    message: "",
                  });
                  // 刷新
                  this.$emit("refresh");
                }
              }
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    closeImg(index) {
      this.ruleForm.c3.splice(index, 1);
      this.$refs.ruleForm.validateField("c3");
    },
    //图片上传成功
    async UploadSuccessEventc1(data) {
      await this.UploadSuccessEvent(1, data);
    },
    //图片上传成功
    async UploadSuccessEventc2(data) {
      await this.UploadSuccessEvent(2, data);
    },
    //图片上传成功
    async UploadSuccessEventc3(data) {
      await this.UploadSuccessEvent(3, data);
    },
    //图片上传成功
    async UploadSuccessEvent(type, data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        if (type === 1) {
          this.ruleForm.c1 = url;
          this.$refs.ruleForm.validateField("c1");
        } else if (type === 2) {
          this.ruleForm.c2 = url;
          this.$refs.ruleForm.validateField("c2");
        } else {
          this.ruleForm.c3.push(url);
          this.$refs.ruleForm.validateField("c3");
        }
        this.$message.success("图片上传成功!");
      }
    },
    //图片上传失败
    UploadErrorEventc1(res) {
      this.imgUploadError(1, res);
    },
    //图片上传失败
    UploadErrorEventc2(res) {
      this.imgUploadError(2, res);
    },
    //图片上传失败
    UploadErrorEventc3(res) {
      this.imgUploadError(3, res);
    },
    imgUploadError(type, res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField(
          type === 1 ? "c1" : type === 2 ? "c2" : "c3"
        );
      }
    },
    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
   <style lang="scss" scoped>
.activeAdd {
  .c3-div {
    ul {
      float: left;
      width: 100%;

      li {
        float: left;
        width: 102px;
        height: 102px;
        overflow: hidden;
        margin: 0 10px 10px 0;
        border: 1px solid rgb(220, 223, 230);
        position: relative;
        &.img-upload-li {
          border: 0;
        }
        &.img-show-li {
          img {
            display: inline-block;
            width: 100%;
          }
          i {
            position: absolute;
            width: 20px;
            height: 20px;
            font-size: 13px;
            text-align: center;
            line-height: 20px;
            top: 0;
            right: 0;
            z-index: 2;
            color: rgb(220, 223, 230);
          }
          &:hover {
            i {
              color: #63cbe7;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>