|
|
@@ -1,1182 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-dialog
|
|
|
- :title="title"
|
|
|
- :center="true"
|
|
|
- align="left"
|
|
|
- top="8vh"
|
|
|
- width="1040px"
|
|
|
- @close="closeModel"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :visible.sync="showModelThis"
|
|
|
- v-loading="loading"
|
|
|
- element-loading-text="拼命加载中"
|
|
|
- element-loading-spinner="el-icon-loading"
|
|
|
- element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
- >
|
|
|
- <el-card>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="24">
|
|
|
- <el-col :span="10" :offset="7">
|
|
|
- <div style="margin: -5px 0 10px 0">
|
|
|
- <el-steps
|
|
|
- :active="step"
|
|
|
- simple
|
|
|
- process-status="finish"
|
|
|
- finish-status="success"
|
|
|
- >
|
|
|
- <el-step
|
|
|
- v-for="(item, index) in stepList"
|
|
|
- :key="index"
|
|
|
- :title="item"
|
|
|
- />
|
|
|
- </el-steps>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-row :gutter="10" v-if="step === 0">
|
|
|
- <el-form
|
|
|
- :model="baseForm"
|
|
|
- status-icon
|
|
|
- :rules="baseRules"
|
|
|
- ref="baseForm"
|
|
|
- label-width="110px"
|
|
|
- class="demo-ruleForm"
|
|
|
- >
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="商品名称" prop="good_name">
|
|
|
- <el-input
|
|
|
- placeholder="请输入商品名称"
|
|
|
- v-model="baseForm.good_name"
|
|
|
- maxlength="100"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="供应商联系人" prop="supplier">
|
|
|
- <el-select
|
|
|
- v-model="baseForm.supplier"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- style="width: 100%"
|
|
|
- placeholder="请选择供应商联系人"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="group in supplierOptions"
|
|
|
- :key="group.id"
|
|
|
- :label="group.name"
|
|
|
- :value="group.id"
|
|
|
- >
|
|
|
- <span>{{ group.name }}</span
|
|
|
- ><span class="fr">{{ group.company }}</span>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品单位" prop="unit">
|
|
|
- <el-input
|
|
|
- placeholder="请输入单位"
|
|
|
- v-model="baseForm.unit"
|
|
|
- maxlength="10"
|
|
|
- :disabled="isDetail"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="商品分类" prop="catid">
|
|
|
- <el-cascader
|
|
|
- v-model="baseForm.catid"
|
|
|
- style="width: 100%"
|
|
|
- filterable
|
|
|
- placeholder="请选择商品分类"
|
|
|
- clearable
|
|
|
- :options="catOptions"
|
|
|
- :props="{ expandTrigger: 'hover', checkStrictly: true }"
|
|
|
- ></el-cascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品品牌" prop="brandid">
|
|
|
- <el-select
|
|
|
- style="width: 100%"
|
|
|
- v-model="baseForm.brandid"
|
|
|
- clearable
|
|
|
- placeholder="请选择商品品牌"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in brandidOptions"
|
|
|
- :key="item.id"
|
|
|
- :label="item.brand_name"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item
|
|
|
- label="商品主图"
|
|
|
- prop="image"
|
|
|
- class="activity-upload"
|
|
|
- >
|
|
|
- <div class="img-list-main clearfix">
|
|
|
- <div
|
|
|
- class="img-item"
|
|
|
- v-for="(item, index) in baseForm.image"
|
|
|
- :key="item + index"
|
|
|
- >
|
|
|
- <img :src="item" class="avatar" />
|
|
|
- <i class="el-icon-close" @click="closeImg(index)"></i>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="btnupload"
|
|
|
- v-if="baseForm.image.length < 5"
|
|
|
- style="position: relative"
|
|
|
- >
|
|
|
- <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
- <file-upload
|
|
|
- class="Upload"
|
|
|
- :accept="'.jpg,.png,.jpeg'"
|
|
|
- :multiple="true"
|
|
|
- :uploadcondition="beforeAvatarUpload"
|
|
|
- @UploadErrorEvent="UploadErrorEvent"
|
|
|
- @UploadSuccessEvent="UploadSuccessEvent"
|
|
|
- ></file-upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="txt-tips fl">
|
|
|
- <p>
|
|
|
- <span sty>大小：小于1M；</span><span>尺寸：100*100；</span
|
|
|
- ><span>类型：jpg.png.jpeg</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <el-col :span="24" style="text-align: right">
|
|
|
- <el-tag type="warning" class="fl" style="margin-left: 100px"
|
|
|
- >更换商品分类，会影响规格与价格，请慎重修改</el-tag
|
|
|
- >
|
|
|
- <el-button type="primary" @click="baseSubmitForm"
|
|
|
- >下一步
|
|
|
- </el-button>
|
|
|
- <el-button @click="showModelThis = false">{{
|
|
|
- isDetail ? "关 闭" : "取 消"
|
|
|
- }}</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="10" v-else>
|
|
|
- <el-col :span="24" style="max-height: 560px; overflow-y: scroll">
|
|
|
- <el-form
|
|
|
- :model="ruleForm"
|
|
|
- status-icon
|
|
|
- ref="ruleForm"
|
|
|
- label-width="60px"
|
|
|
- class="demo-dealGoodsPool-ruleForm"
|
|
|
- >
|
|
|
- <el-form-item label="规格" required>
|
|
|
- <div class="mack-mian clearfix">
|
|
|
- <div
|
|
|
- class="mock-item-div clearfix"
|
|
|
- v-for="(item, index) in mock"
|
|
|
- :key="'specItem' + index"
|
|
|
- >
|
|
|
- <div class="mock-title clearfix">
|
|
|
- <el-input
|
|
|
- :size="size"
|
|
|
- class="fr"
|
|
|
- style="width: 250px"
|
|
|
- maxlength="40"
|
|
|
- placeholder="新增规格值，如红色"
|
|
|
- v-model="item.value"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- slot="append"
|
|
|
- @click="specinfoadd(item.spec_id, item.value)"
|
|
|
- >提交</el-button
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <span class="fl">{{ item.spec_name }}</span>
|
|
|
- </div>
|
|
|
- <div v-if="item.child && item.child.length > 0">
|
|
|
- <el-checkbox-group
|
|
|
- v-model="item.change"
|
|
|
- @change="groupChange($event, index, item)"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- v-for="(sub, i) in item.child"
|
|
|
- :key="'sub' + i"
|
|
|
- :label="sub.id"
|
|
|
- >{{ sub.spec_value }}</el-checkbox
|
|
|
- >
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- <div v-else style="padding: 0 0 12px 0">
|
|
|
- <el-tag type="info">暂无规格值</el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <div class="tips-error">{{ ruleForm.spec }}</div>
|
|
|
- <el-form-item label="价格" required style="padding: 0 0 12px 0">
|
|
|
- <div
|
|
|
- class="ladder-table clearfix"
|
|
|
- v-if="left && left.header && left && left.header.length > 0"
|
|
|
- >
|
|
|
- <div class="left" :style="{ width: leftS }">
|
|
|
- <div class="ladder-header" v-if="left && left.header">
|
|
|
- <ul class="header-spec clearfix">
|
|
|
- <li
|
|
|
- v-for="(h, hi) in left.header"
|
|
|
- :key="'leftHeader' + hi"
|
|
|
- >
|
|
|
- <span>{{ h.spec_name }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="ladder-body" v-if="left.specList">
|
|
|
- <ul
|
|
|
- v-for="(item, index) in left.specList"
|
|
|
- :key="'item' + index"
|
|
|
- >
|
|
|
- <li
|
|
|
- class="clearfix"
|
|
|
- v-for="(sub, subi) in item"
|
|
|
- :key="'sub' + subi"
|
|
|
- >
|
|
|
- <span>
|
|
|
- {{ sub.spec_value }}
|
|
|
- </span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right" :style="{ paddingLeft: leftS }">
|
|
|
- <div class="ladder-header" v-if="right && right.header">
|
|
|
- <ul class="header-spec clearfix">
|
|
|
- <li
|
|
|
- v-for="(h, hi) in right.header"
|
|
|
- :key="'rightHeader' + hi"
|
|
|
- >
|
|
|
- <div class="all">
|
|
|
- <div class="title">
|
|
|
- <span> 阶梯{{ hi + 1 }}</span>
|
|
|
- <i
|
|
|
- class="el-icon-close"
|
|
|
- @click="closeImg(index)"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <span>{{ h.num }}</span>
|
|
|
- <span>{{ h.price }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="ladder-body" v-if="right && right.specList">
|
|
|
- <ul
|
|
|
- v-for="(h, hi) in right.specList"
|
|
|
- :key="'rightspec' + hi"
|
|
|
- >
|
|
|
- <li v-for="(s, si) in h" :key="'rightspecsi' + si">
|
|
|
- <div
|
|
|
- class="input-main"
|
|
|
- v-for="(n, ni) in s.limit"
|
|
|
- :key="'rightni' + ni"
|
|
|
- >
|
|
|
- <el-input-number
|
|
|
- style="width: 50%"
|
|
|
- v-model="n.num"
|
|
|
- :step="1"
|
|
|
- :min="0"
|
|
|
- :max="99999999"
|
|
|
- :precision="0"
|
|
|
- placeholder="起订量"
|
|
|
- step-strictly
|
|
|
- :controls="false"
|
|
|
- ></el-input-number>
|
|
|
- <el-input-number
|
|
|
- style="width: 50%"
|
|
|
- v-model="n.price"
|
|
|
- :step="0.01"
|
|
|
- :min="0"
|
|
|
- :max="99999999"
|
|
|
- :precision="2"
|
|
|
- step-strictly
|
|
|
- placeholder="成本价"
|
|
|
- :controls="false"
|
|
|
- ></el-input-number>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <el-tag type="warning">请选择规格值</el-tag>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <div class="tips-error">{{ ruleForm.table }}</div>
|
|
|
- </el-form>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" style="text-align: right">
|
|
|
- <el-button type="primary" @click="step--" v-if="!isDetail"
|
|
|
- >上一步
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" @click="submitForm" v-if="!isDetail"
|
|
|
- >保 存
|
|
|
- </el-button>
|
|
|
- <el-button @click="showModelThis = false">{{
|
|
|
- isDetail ? "关 闭" : "取 消"
|
|
|
- }}</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
- <script>
|
|
|
-import asyncRequest from "@/apis/service/goodStore/dealGoodsPool";
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "dealGoodsPool",
|
|
|
- props: ["showModel", "id", "isDetail"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- leftS: "0px",
|
|
|
- size: "small",
|
|
|
- mock: [],
|
|
|
- ladderNum: 5, //阶梯数
|
|
|
- left: {
|
|
|
- header: [],
|
|
|
- middle: [],
|
|
|
- specList: [],
|
|
|
- },
|
|
|
- right: {
|
|
|
- header: [],
|
|
|
- specList: [],
|
|
|
- },
|
|
|
- headLadder: {
|
|
|
- num: "起订量≥",
|
|
|
- price: "成本价",
|
|
|
- },
|
|
|
-
|
|
|
- catOptions: [],
|
|
|
- brandidOptions: [],
|
|
|
- supplierOptions: [],
|
|
|
- oldcatid: [],
|
|
|
- stepList: ["基础信息", "规格与价格"],
|
|
|
- step: 0,
|
|
|
- loading: false,
|
|
|
- title: "添加商品",
|
|
|
- showModelThis: this.showModel,
|
|
|
- baseForm: {
|
|
|
- id: this.id,
|
|
|
- catid: [],
|
|
|
- good_name: "",
|
|
|
- unit: "",
|
|
|
- supplier: "",
|
|
|
- brandid: "",
|
|
|
- image: [],
|
|
|
- },
|
|
|
-
|
|
|
- baseRules: {
|
|
|
- supplier: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择供应商联系人",
|
|
|
- trigger: "change",
|
|
|
- },
|
|
|
- ],
|
|
|
- image: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择商品主图",
|
|
|
- trigger: "change",
|
|
|
- },
|
|
|
- ],
|
|
|
- catid: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择商品分类",
|
|
|
- trigger: "change",
|
|
|
- },
|
|
|
- ],
|
|
|
- brandid: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择商品品牌",
|
|
|
- trigger: "change",
|
|
|
- },
|
|
|
- ],
|
|
|
- good_name: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入商品名称",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- {
|
|
|
- min: 2,
|
|
|
- max: 50,
|
|
|
- message: "长度在 2 到 50 个字符",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- unit: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入商品单位",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1,
|
|
|
- max: 10,
|
|
|
- message: "长度在 1 到 10 个字符",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ruleForm: {
|
|
|
- spec: "",
|
|
|
- table: "",
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- closeModel() {
|
|
|
- this.showModelThis = false;
|
|
|
- },
|
|
|
- async initForm() {
|
|
|
- this.mock = [];
|
|
|
- this.left = {
|
|
|
- header: [],
|
|
|
- middle: [],
|
|
|
- specList: [],
|
|
|
- };
|
|
|
- this.right = {
|
|
|
- header: [],
|
|
|
- specList: [],
|
|
|
- };
|
|
|
- this.step = 0;
|
|
|
- this.loading = true;
|
|
|
- // brandidOptions
|
|
|
- await this.getAllbrandid();
|
|
|
- await this.getAllCat();
|
|
|
- await this.getAllSupplier();
|
|
|
-
|
|
|
- if (this.id === "add") {
|
|
|
- this.title = "添加商品";
|
|
|
- // this.ruleForm.isAdmin = 0;
|
|
|
-
|
|
|
- await this.resetForm();
|
|
|
- } else {
|
|
|
- if (this.isDetail) {
|
|
|
- this.title = "商品详情";
|
|
|
- } else {
|
|
|
- this.title = "修改商品";
|
|
|
- }
|
|
|
- await this.resetForm();
|
|
|
- await this.initData();
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
- 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(data) {
|
|
|
- // 重置
|
|
|
- await this.$nextTick(async () => {
|
|
|
- if (this.$refs.baseForm) {
|
|
|
- this.$refs.baseForm.resetFields();
|
|
|
- this.$refs.baseForm.clearValidate();
|
|
|
- if (data) {
|
|
|
- this.baseForm = {
|
|
|
- id: this.id,
|
|
|
- catid: data.good_cat.split(","),
|
|
|
- good_name: data.good_name,
|
|
|
- unit: data.good_unit,
|
|
|
- supplier: data.supplier,
|
|
|
- brandid: data.brand_id,
|
|
|
- image: data.galley.split(","),
|
|
|
- };
|
|
|
- this.oldcatid = this.baseForm.catid;
|
|
|
- await this.specByCat(false);
|
|
|
- this.dealWithEditMock(data.attr);
|
|
|
- } else {
|
|
|
- this.baseForm = {
|
|
|
- id: this.id,
|
|
|
- catid: ["1", "2", "3"],
|
|
|
- good_name:
|
|
|
- "2018春秋新款V领修身丝绒西装女 双排扣复古极简中长款工装外套",
|
|
|
- unit: "件",
|
|
|
- supplier: "8",
|
|
|
- brandid: "3",
|
|
|
- image: [
|
|
|
- "http://cum.sit.wanyuhengtong.com/20210425/1edfa0da4eee9b24d1f35d52b6a0ec0a.jpg",
|
|
|
- "http://cum.sit.wanyuhengtong.com/20210425/cc70a4c06c83d9d8ac27ae35b118a23f.jpg",
|
|
|
- "http://cum.sit.wanyuhengtong.com/20210425/a5e05dc1c5c75030bcc95f1da1d2d9cb.jpg",
|
|
|
- "http://cum.sit.wanyuhengtong.com/20210425/9d505e7632891459a29f2fafe28d6705.jpg",
|
|
|
- "http://cum.sit.wanyuhengtong.com/20210425/714914d7545184e99e240b3affeada07.jpg",
|
|
|
- ],
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- this.ruleForm = {
|
|
|
- spec: "",
|
|
|
- table: "",
|
|
|
- };
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- dealWithEditMock(attr) {
|
|
|
- console.log(this.mock);
|
|
|
- attr.forEach((v1) => {
|
|
|
- if (v1 && v1.spec && v1.spec.length > 0) {
|
|
|
- v1.spec.forEach((v2) => {
|
|
|
- this.mock.forEach((v3, i) => {
|
|
|
- if (v2.spec_id === v3.spec_id) {
|
|
|
- console.log(v2.spec_info_id);
|
|
|
- console.log(v3);
|
|
|
- let index = v3.change.findIndex((v4) => {
|
|
|
- v4 === v2.spec_info_id;
|
|
|
- });
|
|
|
- if (index === -1) {
|
|
|
- v3.change.push(v2.spec_info_id);
|
|
|
- }
|
|
|
- }
|
|
|
- this.$set(this.mock, i, v3);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- // console.log(attr);
|
|
|
- console.log(this.mock);
|
|
|
- this.groupChange();
|
|
|
- this.resume(attr);
|
|
|
- },
|
|
|
- resume(attr) {
|
|
|
- this.right.specList.forEach((v1) => {
|
|
|
- v1.forEach((v2) => {
|
|
|
- attr.forEach((v3) => {
|
|
|
- let is = true;
|
|
|
- v3.spec.forEach((v4) => {
|
|
|
- let index = v2.specid.findIndex((v5) => v5 === v4.spec_info_id);
|
|
|
- if (index === -1) {
|
|
|
- is = false;
|
|
|
- }
|
|
|
- });
|
|
|
- if (is) {
|
|
|
- v2.limit.forEach((v6, i) => {
|
|
|
- if (v3.limit[i]) {
|
|
|
- v6.num = v3.limit[i].begin_num;
|
|
|
- v6.price = v3.limit[i].shop_price;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- console.log(attr);
|
|
|
- console.log(this.right.specList);
|
|
|
- },
|
|
|
- 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.baseForm));
|
|
|
- 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.showModelThis = false;
|
|
|
- // 刷新
|
|
|
- this.$emit("refresh");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log("error submit!!");
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- async baseSubmitForm() {
|
|
|
- await this.$refs.baseForm.validate(async (valid) => {
|
|
|
- if (valid) {
|
|
|
- await this.handleChange();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- groupChange($event, index, item) {
|
|
|
- this.$set(this.mock, index, item);
|
|
|
- this.actionSpecList();
|
|
|
- },
|
|
|
- actionSpecList() {
|
|
|
- // this.leftS = "0px";
|
|
|
- this.left.header = [];
|
|
|
- this.left.middle = [];
|
|
|
- this.left.specList = [];
|
|
|
- console.log(this.mock);
|
|
|
- console.log(this.right.specList);
|
|
|
- this.mock.forEach((v1) => {
|
|
|
- if (
|
|
|
- v1.change &&
|
|
|
- v1.change.length > 0 &&
|
|
|
- v1.child &&
|
|
|
- v1.child.length > 0
|
|
|
- ) {
|
|
|
- this.left.header.push({
|
|
|
- spec_id: v1.spec_id,
|
|
|
- spec_name: v1.spec_name,
|
|
|
- });
|
|
|
- let arr = [];
|
|
|
- let changeList = v1.change;
|
|
|
- changeList.forEach((v2) => {
|
|
|
- let index = v1.child.findIndex((v3) => v2 === v3.id);
|
|
|
- if (index !== -1) {
|
|
|
- let x = {
|
|
|
- spec_id: v1.spec_id,
|
|
|
- spec_name: v1.spec_name,
|
|
|
- id: v1.child[index].id,
|
|
|
- spec_value: v1.child[index].spec_value,
|
|
|
- };
|
|
|
- arr.push(x);
|
|
|
- }
|
|
|
- });
|
|
|
- this.left.middle.push(arr);
|
|
|
- }
|
|
|
- });
|
|
|
- let lang = this.left.header.length;
|
|
|
- this.leftS = lang * 70 + "px";
|
|
|
- if (this.left.middle.length > 1) {
|
|
|
- this.left.specList = this.doExchange(this.left.middle);
|
|
|
- } else if (this.left.middle.length === 0) {
|
|
|
- this.left.specList = [];
|
|
|
- } else {
|
|
|
- let list1 = [];
|
|
|
- this.left.middle.forEach((v1) => {
|
|
|
- if (v1) {
|
|
|
- v1.forEach((v2) => {
|
|
|
- let list2 = [];
|
|
|
- list2.push(v2);
|
|
|
- list1.push(list2);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.left.specList = list1;
|
|
|
- }
|
|
|
- this.right.header = [];
|
|
|
- for (let i = 0; i < this.ladderNum; i++) {
|
|
|
- this.right.header.push(this.headLadder);
|
|
|
- }
|
|
|
- this.right.specList = [];
|
|
|
- this.left.specList.forEach((v1) => {
|
|
|
- let arr = [];
|
|
|
- let model = {
|
|
|
- specid: [],
|
|
|
- limit: [],
|
|
|
- };
|
|
|
- v1.forEach((v2) => {
|
|
|
- model.specid.push(v2.id);
|
|
|
- });
|
|
|
- for (let i = 0; i < this.ladderNum; i++) {
|
|
|
- let bodyLadder = {
|
|
|
- num: 0,
|
|
|
- price: 0,
|
|
|
- };
|
|
|
- model.limit.push(bodyLadder);
|
|
|
- }
|
|
|
- arr.push(model);
|
|
|
- this.right.specList.push(arr);
|
|
|
- });
|
|
|
- console.log(this.right.specList);
|
|
|
- },
|
|
|
-
|
|
|
- closeLadder(index) {
|
|
|
- console.log(index);
|
|
|
- },
|
|
|
- async handleChange(type) {
|
|
|
- if (this.baseForm.catid !== this.oldcatid && this.oldcatid.length === 0) {
|
|
|
- await this.specByCat();
|
|
|
-
|
|
|
- if (this.step === 0 && !type) {
|
|
|
- this.step = 1;
|
|
|
- }
|
|
|
- } else if (
|
|
|
- this.baseForm.catid !== this.oldcatid &&
|
|
|
- this.oldcatid.length > 0
|
|
|
- ) {
|
|
|
- await this.$confirm(
|
|
|
- "分类修改会影响该商品规格与价格！",
|
|
|
- "确定要修改？",
|
|
|
- {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- }
|
|
|
- )
|
|
|
- .then(async () => {
|
|
|
- await this.specByCat();
|
|
|
- if (this.step === 0) {
|
|
|
- this.step = 1;
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.baseForm.catid = this.oldcatid;
|
|
|
- });
|
|
|
- } else {
|
|
|
- if (this.step === 0 && !type) {
|
|
|
- this.step = 1;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 商品种类ID换取规格值
|
|
|
- async specByCat(type) {
|
|
|
- console.log("准备拉取！");
|
|
|
- this.mock = [];
|
|
|
- this.$set(this.mock);
|
|
|
- let list = this.baseForm.catid;
|
|
|
- let res = await asyncRequest.specByCat({ catid: list[list.length - 1] });
|
|
|
- if (res.code === 0) {
|
|
|
- this.dealWitHInitMock(res.data, type);
|
|
|
- this.oldcatid = list;
|
|
|
- } else if (res.code !== 101 && res.code !== 102) {
|
|
|
- this.baseForm.catid = this.oldcatid;
|
|
|
- }
|
|
|
- },
|
|
|
- // 规格属性值新建
|
|
|
- async specinfoadd(id, value) {
|
|
|
- console.log(id, value);
|
|
|
- let list = this.baseForm.catid;
|
|
|
- let model = {
|
|
|
- catid: list[list.length - 1],
|
|
|
- specid: id,
|
|
|
- spec_value: value,
|
|
|
- };
|
|
|
- let res = await asyncRequest.specinfoadd(model);
|
|
|
- if (res.code === 0) {
|
|
|
- await this.specByCat(true);
|
|
|
- }
|
|
|
- },
|
|
|
- dealWitHInitMock(list, type) {
|
|
|
- console.log(list, type);
|
|
|
- if (!type) {
|
|
|
- this.mock = [];
|
|
|
- console.log("12345678");
|
|
|
- console.log(this.mock);
|
|
|
-
|
|
|
- this.left.header = [];
|
|
|
- this.left.specList = [];
|
|
|
- this.right.header = [];
|
|
|
- this.right.specList = [];
|
|
|
- list.map((v1) => {
|
|
|
- v1.value = "";
|
|
|
- v1.change = [];
|
|
|
- return v1;
|
|
|
- });
|
|
|
- this.mock = list;
|
|
|
- console.log(this.mock);
|
|
|
- this.mock.forEach((v3, i) => {
|
|
|
- this.$set(this.mock, i, v3);
|
|
|
- });
|
|
|
- } else {
|
|
|
- let arr = JSON.parse(JSON.stringify(this.mock));
|
|
|
- list.map((v1) => {
|
|
|
- v1.value = "";
|
|
|
- let index = arr.findIndex((v2) => v2.spec_id === v1.spec_id);
|
|
|
- if (index !== -1) {
|
|
|
- v1.change = arr[index].change;
|
|
|
- }
|
|
|
- return v1;
|
|
|
- });
|
|
|
- this.mock = list;
|
|
|
- this.mock.forEach((v3, i) => {
|
|
|
- this.$set(this.mock, i, v3);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- async getAllbrandid() {
|
|
|
- const res = await asyncRequest.brandAll({});
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
- this.brandidOptions = res.data;
|
|
|
- }
|
|
|
- },
|
|
|
- async getAllCat() {
|
|
|
- const res = await asyncRequest.catAll({});
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
- let list = res.data;
|
|
|
- list.map((v1) => {
|
|
|
- v1.value = v1.id;
|
|
|
- v1.label = v1.cat_name;
|
|
|
- if (v1.child && v1.child.length > 0) {
|
|
|
- v1.child.map((v2) => {
|
|
|
- v2.value = v2.id;
|
|
|
- v2.label = v2.cat_name;
|
|
|
- if (v2.child && v2.child.length > 0) {
|
|
|
- v2.child.map((v3) => {
|
|
|
- v3.value = v3.id;
|
|
|
- v3.label = v3.cat_name;
|
|
|
- return v3;
|
|
|
- });
|
|
|
- v2.children = v2.child;
|
|
|
- }
|
|
|
- return v2;
|
|
|
- });
|
|
|
- v1.children = v1.child;
|
|
|
- }
|
|
|
-
|
|
|
- return v1;
|
|
|
- });
|
|
|
- this.catOptions = list;
|
|
|
- }
|
|
|
- },
|
|
|
- async getAllSupplier() {
|
|
|
- const res = await asyncRequest.supplierAll({});
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
- let list = res.data;
|
|
|
- this.supplierOptions = list;
|
|
|
- }
|
|
|
- },
|
|
|
- //图片上传失败
|
|
|
- UploadErrorEvent(res) {
|
|
|
- if (res !== "break") {
|
|
|
- this.$message.error("图片上传失败!");
|
|
|
- this.$refs.ruleForm.validateField("image");
|
|
|
- }
|
|
|
- },
|
|
|
- closeImg(index) {
|
|
|
- this.baseForm.image.splice(index, 1);
|
|
|
- this.$refs.baseForm.validateField("image");
|
|
|
- },
|
|
|
- //图片上传成功
|
|
|
- async UploadSuccessEvent(data) {
|
|
|
- const { url } = data;
|
|
|
- if (url === "noToken") {
|
|
|
- await this.logout();
|
|
|
- } else {
|
|
|
- this.baseForm.image.push(url);
|
|
|
- this.$message.success("图片上传成功!");
|
|
|
- this.$refs.baseForm.validateField("image");
|
|
|
- }
|
|
|
- },
|
|
|
- //判断图片规格
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- console.log(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;
|
|
|
- },
|
|
|
- doExchange(arr) {
|
|
|
- let len = arr.length;
|
|
|
- // 当数组大于等于2个的时候
|
|
|
- if (len >= 2) {
|
|
|
- // 第一个数组的长度
|
|
|
- let len1 = arr[0].length;
|
|
|
- // 第二个数组的长度
|
|
|
- let len2 = arr[1].length;
|
|
|
- // 2个数组产生的组合数
|
|
|
- let lenBoth = len1 * len2;
|
|
|
- // 申明一个新数组
|
|
|
- let items = new Array(lenBoth);
|
|
|
- // 申明新数组的索引
|
|
|
- let index = 0;
|
|
|
- for (let i = 0; i < len1; i++) {
|
|
|
- for (let j = 0; j < len2; j++) {
|
|
|
- if (arr[0][i] instanceof Array) {
|
|
|
- items[index] = arr[0][i].concat(arr[1][j]);
|
|
|
- } else {
|
|
|
- items[index] = [arr[0][i]].concat(arr[1][j]);
|
|
|
- }
|
|
|
- index++;
|
|
|
- }
|
|
|
- }
|
|
|
- let newArr = new Array(len - 1);
|
|
|
- for (let i = 2; i < arr.length; i++) {
|
|
|
- newArr[i - 1] = arr[i];
|
|
|
- }
|
|
|
- newArr[0] = items;
|
|
|
- return this.doExchange(newArr);
|
|
|
- } else {
|
|
|
- return arr[0];
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- showModel: function (val) {
|
|
|
- this.showModelThis = val;
|
|
|
- if (val) {
|
|
|
- this.initForm();
|
|
|
- }
|
|
|
- },
|
|
|
- showModelThis(val) {
|
|
|
- if (!val) {
|
|
|
- this.$emit("cancel");
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
- <style lang="scss" scoped>
|
|
|
-.dealGoodsPool {
|
|
|
- $dealGoodsPoolBoderColor: #dfe6ec;
|
|
|
- .tips-error {
|
|
|
- color: #ff8888;
|
|
|
- font-size: 12px;
|
|
|
- height: 22px;
|
|
|
- line-height: 20px;
|
|
|
- padding-left: 60px;
|
|
|
- }
|
|
|
- .ladder-table {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- border: 1px solid $dealGoodsPoolBoderColor;
|
|
|
-
|
|
|
- .left {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 3;
|
|
|
- background: #fff;
|
|
|
- // width: 140px;
|
|
|
- .ladder-header {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- .header-spec {
|
|
|
- position: relative;
|
|
|
- // border-bottom: 1px solid $dealGoodsPoolBoderColor;
|
|
|
- li {
|
|
|
- float: left;
|
|
|
- width: 70px;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 10px;
|
|
|
- font-size: 12px;
|
|
|
- color: #909399;
|
|
|
- border-right: 1px solid $dealGoodsPoolBoderColor;
|
|
|
- span {
|
|
|
- height: 25px;
|
|
|
- line-height: 25px;
|
|
|
- min-height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ladder-body {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- ul {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- li {
|
|
|
- flex: 1;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 10px;
|
|
|
- // border-top: 1px solid $dealGoodsPoolBoderColor;
|
|
|
- // border-right: 1px solid $goodsBoderColor;
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- height: 40px;
|
|
|
- width: 49px;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 40px;
|
|
|
- color: #606266;
|
|
|
- font-size: 12px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: normal;
|
|
|
- word-break: break-all;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow:ellipsis;
|
|
|
- // white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- position: relative;
|
|
|
- // padding-left: 140px;
|
|
|
- width: 100%;
|
|
|
- overflow-x: scroll;
|
|
|
- background: #fff;
|
|
|
- .ladder-header {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- .header-spec {
|
|
|
- display: flex;
|
|
|
- li {
|
|
|
- min-width: 240px;
|
|
|
- flex: 1;
|
|
|
- .all {
|
|
|
- width: 100%;
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 25px;
|
|
|
- padding: 0 10px;
|
|
|
- font-size: 12px;
|
|
|
- color: #909399;
|
|
|
- line-height: 25px;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- // border-right: 1px solid $goodsBoderColor;
|
|
|
- // border-bottom: 1px solid $goodsBoderColor;
|
|
|
- i {
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- right: 2px;
|
|
|
- z-index: 2;
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- width: 100%;
|
|
|
- height: 25px;
|
|
|
- span {
|
|
|
- vertical-align: top;
|
|
|
- width: 50%;
|
|
|
- height: 25px;
|
|
|
- line-height: 25px;
|
|
|
- text-align: center;
|
|
|
- padding: 0 10px;
|
|
|
- font-size: 12px;
|
|
|
- color: #909399;
|
|
|
- line-height: 25px;
|
|
|
- display: inline-block;
|
|
|
- // border-right: 1px solid $goodsBoderColor;
|
|
|
- // border-bottom: 1px solid $goodsBoderColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ladder-body {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- ul {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- li {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- .input-main {
|
|
|
- flex: 1;
|
|
|
- min-width: 240px;
|
|
|
- .el-input-number {
|
|
|
- .el-input {
|
|
|
- input.el-input_inner {
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .mack-mian {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- .mock-item-div {
|
|
|
- width: 100%;
|
|
|
- background: rgba(246, 247, 248, 1);
|
|
|
- padding: 12px 12px 0 12px;
|
|
|
- margin: 0 0 10px 0;
|
|
|
- .mock-title {
|
|
|
- width: 100%;
|
|
|
- padding: 0 0 5px 0;
|
|
|
- border-bottom: 1px solid rgba(226, 226, 226, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
