|
|
@@ -1,421 +1,461 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <div class="form-wrap">
|
|
|
- <el-form ref="form" :model="ruleForm" :rules="rules" label-width="120px">
|
|
|
- <el-form-item label="名称" prop="goodsName">
|
|
|
- <el-input v-model="ruleForm.goodsName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="已售" prop="sold">
|
|
|
- <el-input v-model="ruleForm.sold"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="库存" prop="stock">
|
|
|
- <el-input v-model="ruleForm.stock"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="分类">
|
|
|
- <el-checkbox-group v-model="ruleForm.categoryIdList">
|
|
|
- <el-checkbox
|
|
|
- border
|
|
|
- v-for="(item, index) in categoryData"
|
|
|
- :label="item.id"
|
|
|
- :key="index"
|
|
|
- size="small"
|
|
|
- @change="selChangeDialogFn($event, item)"
|
|
|
- >{{ item.categoryName }}</el-checkbox
|
|
|
- >
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="款式">
|
|
|
- <el-checkbox-group v-model="ruleForm.goodsStyle" @change="changeStyleFn">
|
|
|
- <el-checkbox label="1" name="goodsStyle" true-label="1" false-label="0">
|
|
|
- <span>多款式</span>
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="价格" prop="price">
|
|
|
- <el-input v-model="ruleForm.price"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图片">
|
|
|
- <div class="list-wrap">
|
|
|
- <cl-upload v-model="ruleForm.shopImg"></cl-upload>
|
|
|
- <!-- <div>
|
|
|
- <el-button type="primary" size="small">商品主图</el-button>
|
|
|
- <el-button type="warning" size="small">删除</el-button>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button type="primary" size="small" @click="imgStoreModal = true"
|
|
|
- >从图库选择</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt />
|
|
|
- </el-dialog>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品简介">
|
|
|
- <cl-editor-quill v-model="ruleForm.content" @load="editor"></cl-editor-quill>
|
|
|
- <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="节假日自动涨价">
|
|
|
- <el-checkbox-group v-model="ruleForm.autoRise">
|
|
|
- <el-checkbox label="1" name="autoRise" true-label="1" false-label="0">
|
|
|
- <span>需要</span>
|
|
|
- </el-checkbox>
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- width="100"
|
|
|
- trigger="hover"
|
|
|
- v-model="autoPricePopover"
|
|
|
- >
|
|
|
- <p>特定节日商品会自动进行涨价 无需手动调价</p>
|
|
|
- <div style="text-align: right; margin-top: 10px">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="primary"
|
|
|
- @click="autoPricePopover = false"
|
|
|
- >涨价设置</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-question"
|
|
|
- slot="reference"
|
|
|
- ></el-button>
|
|
|
- <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
- </el-popover>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="配送方式">
|
|
|
- <el-checkbox-group v-model="ruleForm.needSend">
|
|
|
- <el-checkbox label="1" name="type" true-label="1" false-label="0">
|
|
|
- <span>到店自提</span>
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="运费">
|
|
|
- <el-radio-group v-model="ruleForm.freightType">
|
|
|
- <el-radio label="0">
|
|
|
- <span>按距离收费</span>
|
|
|
- </el-radio>
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- width="100"
|
|
|
- trigger="hover"
|
|
|
- v-model="chargePopover"
|
|
|
- >
|
|
|
- <p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
|
|
|
- <div style="text-align: right; margin-top: 10px">
|
|
|
- <el-button size="mini" type="primary" @click="chargePopover = false"
|
|
|
- >修改</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-question"
|
|
|
- slot="reference"
|
|
|
- class="question-btn"
|
|
|
- ></el-button>
|
|
|
- <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
- </el-popover>
|
|
|
- <el-radio label="1">
|
|
|
- <span>免运费</span>
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submitForm('ruleForm')">上架出售</el-button>
|
|
|
- <el-button @click="resetForm('ruleForm')">加入仓库</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <!-- 从图库选择 -->
|
|
|
- <el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="600px">
|
|
|
- <div class="store-modal-content">
|
|
|
- <div class="select-wrap flex-center-start">
|
|
|
- <div style="width: 80px">选择分类</div>
|
|
|
- <el-select
|
|
|
- v-model="imgStoreVal"
|
|
|
- placeholder="选择分类"
|
|
|
- size="mini"
|
|
|
- :clearable="true"
|
|
|
- style="width: 200px"
|
|
|
- @change="selChangeFn"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in categoryData"
|
|
|
- :key="index"
|
|
|
- :label="item.id"
|
|
|
- :value="item.id"
|
|
|
- >{{ item.categoryName }}</el-option
|
|
|
- >
|
|
|
- </el-select>
|
|
|
- <!-- <div style="width: 80px">选择分类</div>
|
|
|
- <el-select
|
|
|
- v-model="imgStoreVal"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 200px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in imgStoreOpt"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select> -->
|
|
|
- </div>
|
|
|
- <div class="img-store-wrap">
|
|
|
- <el-checkbox-group v-model="imgStoreArr" class="list-store">
|
|
|
- <div
|
|
|
- class="list-checkbox"
|
|
|
- v-for="(item, index) in imgStoreData"
|
|
|
- :label="index"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <el-checkbox>
|
|
|
- <div class="list-img">
|
|
|
- <img :src="item.imgUrl" alt="图库图片" />
|
|
|
- </div>
|
|
|
- </el-checkbox>
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- <!-- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page.sync="currentPage"
|
|
|
- :page-size="100"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :total="1000"
|
|
|
- >
|
|
|
- </el-pagination> -->
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="small" @click="imgStoreModal = false">取 消</el-button>
|
|
|
- <el-button type="primary" size="small" @click="imgStoreModal = false"
|
|
|
- >确 定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!-- 选择款式 -->
|
|
|
- <el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
|
|
|
- <div class="style-modal-content">
|
|
|
- <el-form :inline="true" :model="styleStoreData" class="demo-form-inline">
|
|
|
- <div
|
|
|
- class="flex-center-between"
|
|
|
- v-for="(item, index) in styleStoreData"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <el-form-item label="款式名称">
|
|
|
- <el-input v-model="item.styleName" placeholder="款式名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="价格">
|
|
|
- <el-input v-model="item.price" placeholder="价格"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图片" class="flex-center">
|
|
|
- <cl-upload v-model="item.shopImg"></cl-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" size="small" @click="styleDelFn(index)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="small" @click="styleStoreModal = false">取 消</el-button>
|
|
|
- <el-button type="primary" size="small" @click="styleStoreModal = false"
|
|
|
- >确 定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="form-wrap">
|
|
|
+ <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
|
|
|
+ <el-form-item label="名称" prop="goodsName">
|
|
|
+ <el-input v-model="ruleForm.goodsName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已售" prop="sold">
|
|
|
+ <el-input v-model="ruleForm.sold"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="库存" prop="stock">
|
|
|
+ <el-input v-model="ruleForm.stock"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="categoryIdList">
|
|
|
+ <el-checkbox-group v-model="ruleForm.categoryIdList">
|
|
|
+ <el-checkbox
|
|
|
+ border
|
|
|
+ v-for="(item, index) in categoryData"
|
|
|
+ :label="item.id"
|
|
|
+ :key="index"
|
|
|
+ size="small"
|
|
|
+ @change="selChangeDialogFn($event, item)"
|
|
|
+ >{{ item.categoryName }}
|
|
|
+ </el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="款式" prop="goodsStyle">
|
|
|
+ <el-checkbox-group v-model="ruleForm.goodsStyle" @change="changeStyleFn">
|
|
|
+ <el-checkbox label="1" name="goodsStyle" true-label="1" false-label="0">
|
|
|
+ <span>多款式</span>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="价格" prop="price">
|
|
|
+ <el-input v-model="ruleForm.price"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="shopImg">
|
|
|
+ <div class="list-wrap">
|
|
|
+ <!--<cl-upload v-model="ruleForm.shopImg" :props="{multiple:true}"></cl-upload>-->
|
|
|
+
|
|
|
+ <elxUpload
|
|
|
+ :limit="4"
|
|
|
+ :fileList.sync="fileList_show"
|
|
|
+ @success="fromToData"
|
|
|
+ @handleRemove="fromToData"
|
|
|
+ ></elxUpload>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" size="small" @click="imgStoreModal = true"
|
|
|
+ >从图库选择
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt/>
|
|
|
+ </el-dialog>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品简介" prop="content">
|
|
|
+ <cl-editor-quill v-model="ruleForm.content" @load="editor"></cl-editor-quill>
|
|
|
+ <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="节假日自动涨价 ">
|
|
|
+ <el-checkbox-group v-model="ruleForm.autoRise">
|
|
|
+ <el-checkbox label="1" name="autoRise" true-label="1" false-label="0">
|
|
|
+ <span>需要</span>
|
|
|
+ </el-checkbox>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="100"
|
|
|
+ trigger="hover"
|
|
|
+ v-model="autoPricePopover"
|
|
|
+ >
|
|
|
+ <p>特定节日商品会自动进行涨价 无需手动调价</p>
|
|
|
+ <div style="text-align: right; margin-top: 10px">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="autoPricePopover = false"
|
|
|
+ >涨价设置
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-question"
|
|
|
+ slot="reference"
|
|
|
+ ></el-button>
|
|
|
+ <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
+ </el-popover>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="配送方式">
|
|
|
+ <el-checkbox-group v-model="ruleForm.needSend">
|
|
|
+ <el-checkbox label="1" name="type" true-label="1" false-label="0">
|
|
|
+ <span>到店自提</span>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运费">
|
|
|
+ <el-radio-group v-model="ruleForm.freightType">
|
|
|
+ <el-radio label="0">
|
|
|
+ <span>按距离收费</span>
|
|
|
+ </el-radio>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="100"
|
|
|
+ trigger="hover"
|
|
|
+ v-model="chargePopover"
|
|
|
+ >
|
|
|
+ <p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
|
|
|
+ <div style="text-align: right; margin-top: 10px">
|
|
|
+ <el-button size="mini" type="primary" @click="chargePopover = false"
|
|
|
+ >修改
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-question"
|
|
|
+ slot="reference"
|
|
|
+ class="question-btn"
|
|
|
+ ></el-button>
|
|
|
+ <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
+ </el-popover>
|
|
|
+ <el-radio label="1">
|
|
|
+ <span>免运费</span>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm',1)">上架出售</el-button>
|
|
|
+ <el-button @click="submitForm('ruleForm',0)">加入仓库</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 从图库选择 -->
|
|
|
+ <el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="600px">
|
|
|
+ <div class="store-modal-content">
|
|
|
+ <div class="select-wrap flex-center-start">
|
|
|
+ <div style="width: 80px">选择分类</div>
|
|
|
+ <el-select
|
|
|
+ v-model="imgStoreVal"
|
|
|
+ placeholder="选择分类"
|
|
|
+ size="mini"
|
|
|
+ :clearable="true"
|
|
|
+ style="width: 200px"
|
|
|
+ @change="selChangeFn"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in categoryData"
|
|
|
+ :key="index"
|
|
|
+ :label="item.categoryName"
|
|
|
+ :value="item.id"
|
|
|
+ >{{ item.categoryName }}
|
|
|
+ </el-option
|
|
|
+ >
|
|
|
+ </el-select>
|
|
|
+ <!-- <div style="width: 80px">选择分类</div>
|
|
|
+ <el-select
|
|
|
+ v-model="imgStoreVal"
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in imgStoreOpt"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select> -->
|
|
|
+ </div>
|
|
|
+ <div class="img-store-wrap">
|
|
|
+ <el-checkbox-group v-model="imgStoreArr" class="list-store" @change="setCheckImg">
|
|
|
+ <div
|
|
|
+ class="list-checkbox"
|
|
|
+ v-for="(item, index) in imgStoreData"
|
|
|
+ :key="index">
|
|
|
+ <el-checkbox :label="item.imgUrl+''">
|
|
|
+ <div class="list-img">
|
|
|
+ <img :src="item.imgUrl" alt="图库图片"/>
|
|
|
+ </div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <!-- <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="1000"
|
|
|
+ >
|
|
|
+ </el-pagination> -->
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="imgStoreModal = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="checkImage"
|
|
|
+ >确 定
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 选择款式 -->
|
|
|
+ <el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
|
|
|
+ <div class="style-modal-content">
|
|
|
+ <el-form :inline="true" :model="styleStoreData" class="demo-form-inline">
|
|
|
+ <div
|
|
|
+ class="flex-center-between"
|
|
|
+ v-for="(item, index) in styleStoreData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-form-item label="款式名称">
|
|
|
+ <el-input v-model="item.styleName" placeholder="款式名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="价格">
|
|
|
+ <el-input v-model="item.price" placeholder="价格"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" class="flex-center">
|
|
|
+ <cl-upload v-model="item.shopImg" :props="{multiple:true}"></cl-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="small" @click="styleDelFn(index)"
|
|
|
+ >删除
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="styleStoreModal = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="styleStoreModal = false"
|
|
|
+ >确 定
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
-export default {
|
|
|
- name: 'goods-add',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- ruleForm: {
|
|
|
- goodsName: '',
|
|
|
- sold: '',
|
|
|
- stock: '',
|
|
|
- categoryIdList: [],
|
|
|
- goodsStyle: '0',
|
|
|
- price: '',
|
|
|
- autoRise: '1',
|
|
|
- needSend: '0',
|
|
|
- shopImg: '',
|
|
|
- freightType: '0'
|
|
|
- },
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
|
|
- },
|
|
|
- // 图片
|
|
|
- dialogImageUrl: '',
|
|
|
- dialogVisible: false,
|
|
|
- // 需要自动涨价
|
|
|
- autoPricePopover: false,
|
|
|
- // 距离收费
|
|
|
- chargePopover: false,
|
|
|
- // 从图库中选择
|
|
|
- imgStoreData: [],
|
|
|
- imgStoreModal: false,
|
|
|
- imgStoreVal: '',
|
|
|
- imgStoreOpt: [],
|
|
|
- imgStoreArr: [],
|
|
|
- currentPage: 1,
|
|
|
- // 款式选择
|
|
|
- styleStoreModal: false,
|
|
|
- styleStoreData: [],
|
|
|
- styleForm: {
|
|
|
- styleName: '',
|
|
|
- price: '',
|
|
|
- img: ''
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ categoryData: 'category' })
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.$store.dispatch('getCategory');
|
|
|
- this._getImgStore();
|
|
|
- },
|
|
|
- _getImgStore() {
|
|
|
- return this.$service.imgStore
|
|
|
- .list({
|
|
|
- page: 1,
|
|
|
- categoryId: this.imgStoreVal
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.imgStoreData = res.list;
|
|
|
- });
|
|
|
- },
|
|
|
- // api
|
|
|
- addFn() {
|
|
|
- let form = JSON.parse(JSON.stringify(this.ruleForm));
|
|
|
- form.shopImg = [form.shopImg];
|
|
|
- this.$service.goods
|
|
|
- .add({
|
|
|
- ...form,
|
|
|
- goodsStyleList: this.styleStoreData
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.resetForm();
|
|
|
- this.$message.success('添加成功！');
|
|
|
- this.$router.push('/goods/list');
|
|
|
- });
|
|
|
- },
|
|
|
- // operate
|
|
|
- changeStyleFn(val) {
|
|
|
- console.log(val);
|
|
|
- if (val) {
|
|
|
- // this.styleFormAddFn()
|
|
|
- this.styleStoreModal = true;
|
|
|
- }
|
|
|
- },
|
|
|
- selChangeDialogFn(status, item) {
|
|
|
- console.log(status, item);
|
|
|
- },
|
|
|
- submitForm(formName) {
|
|
|
- this.$refs[formName].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.addFn();
|
|
|
- } else {
|
|
|
- console.log('error submit!!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- resetForm(formName) {
|
|
|
- this.$refs[formName].resetFields();
|
|
|
- },
|
|
|
- // 图片上传
|
|
|
- handleRemove(file, fileList) {
|
|
|
- console.log(file, fileList);
|
|
|
- },
|
|
|
- handlePictureCardPreview(file) {
|
|
|
- this.dialogImageUrl = file.url;
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
- // 编辑器
|
|
|
- editor(ref) {
|
|
|
- console.log(ref);
|
|
|
- },
|
|
|
- handleSizeChange(val) {
|
|
|
- console.log(`每页 ${val} 条`);
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- console.log(`当前页: ${val}`);
|
|
|
- },
|
|
|
- // 图库选择
|
|
|
- selChangeFn(e) {
|
|
|
- this.imgStoreVal = e;
|
|
|
- },
|
|
|
- // 款式选择弹窗
|
|
|
- styleDelFn(index) {
|
|
|
- this.styleStoreData.splice(index, 1);
|
|
|
- },
|
|
|
- styleFormAddFn() {
|
|
|
- let form = JSON.parse(JSON.stringify(this.styleForm));
|
|
|
- this.styleStoreData.push(form);
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ import {mapGetters} from 'vuex';
|
|
|
+ import elxUpload from '@/components/common/elx-upload.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'goods-add',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ goodsName: '',
|
|
|
+ sold: '',
|
|
|
+ stock: '',
|
|
|
+ categoryIdList: [],
|
|
|
+ goodsStyle: '0',
|
|
|
+ price: '',
|
|
|
+ autoRise: '1',
|
|
|
+ needSend: '0',
|
|
|
+ shopImg: [],
|
|
|
+ freightType: '0'
|
|
|
+ },
|
|
|
+
|
|
|
+ rules: {
|
|
|
+ goodsName: [{required: true, message: '请输入名称', trigger: 'blur'}],
|
|
|
+ categoryIdList: [{required: true, message: '请选择分类', trigger: 'blur'}],
|
|
|
+ stock: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+ price: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+ sold: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+ goodsStyle: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+ shopImg: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+ content: [{required: true, message: '必填', trigger: 'blur'}],
|
|
|
+
|
|
|
+ },
|
|
|
+ // 图片展示
|
|
|
+ fileList_show: [],
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ // 需要自动涨价
|
|
|
+ autoPricePopover: false,
|
|
|
+ // 距离收费
|
|
|
+ chargePopover: false,
|
|
|
+ // 从图库中选择
|
|
|
+ imgStoreData: [],
|
|
|
+ imgStoreModal: false,
|
|
|
+ imgStoreVal: '',
|
|
|
+ imgStoreOpt: [],
|
|
|
+ imgStoreArr: [],
|
|
|
+ currentPage: 1,
|
|
|
+ // 款式选择
|
|
|
+ styleStoreModal: false,
|
|
|
+ styleStoreData: [],
|
|
|
+ styleForm: {
|
|
|
+ styleName: '',
|
|
|
+ price: '',
|
|
|
+ img: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ elxUpload
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({categoryData: 'category'}),
|
|
|
+ ...mapGetters(['token'])
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.$store.dispatch('getCategory');
|
|
|
+ this._getImgStore();
|
|
|
+ },
|
|
|
+ _getImgStore() {
|
|
|
+ return this.$service.imgStore
|
|
|
+ .list({
|
|
|
+ page: 1,
|
|
|
+ categoryId: this.imgStoreVal
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.imgStoreData = res.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // api
|
|
|
+ addFn(type) {
|
|
|
+ let form = JSON.parse(JSON.stringify(this.ruleForm));
|
|
|
+ let status = type // 0加入仓库 ,1上架
|
|
|
+ this.$service.goods
|
|
|
+ .add({
|
|
|
+ ...form,
|
|
|
+ goodsStyleList: this.styleStoreData
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.resetForm('ruleForm');
|
|
|
+ this.$message.success('添加成功！');
|
|
|
+ this.$router.push('/goods/list');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fromToData({file, fileList}){
|
|
|
+ let list=[]
|
|
|
+ // console.log( file, fileList)
|
|
|
+ for (let i = 0; i <fileList.length ; i++) {
|
|
|
+ if(fileList[i].response){
|
|
|
+ list.push(fileList[i].response.url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.ruleForm.shopImg= list
|
|
|
+ console.log( this.ruleForm.shopImg)
|
|
|
+ },
|
|
|
+ // operate
|
|
|
+ changeStyleFn(val) {
|
|
|
+ console.log(val);
|
|
|
+ if (val) {
|
|
|
+ // this.styleFormAddFn()
|
|
|
+ this.styleStoreModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selChangeDialogFn(status, item) {
|
|
|
+ console.log(status, item);
|
|
|
+ },
|
|
|
+ submitForm(formName, type) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ console.log(valid)
|
|
|
+ if (valid) {
|
|
|
+ this.addFn(type);
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ checkImage() {
|
|
|
+ this.imgStoreModal = false
|
|
|
+ },
|
|
|
+ setCheckImg(val) {
|
|
|
+ this.$set(this.ruleForm, 'shopImg', this.ruleForm.shopImg.concat(val))
|
|
|
+ console.log(this.ruleForm.shopImg, val)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑器
|
|
|
+ editor(ref) {
|
|
|
+ console.log(ref);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ // 图库选择
|
|
|
+ selChangeFn(e) {
|
|
|
+ this.imgStoreVal = e;
|
|
|
+ },
|
|
|
+ // 款式选择弹窗
|
|
|
+ styleDelFn(index) {
|
|
|
+ this.styleStoreData.splice(index, 1);
|
|
|
+ },
|
|
|
+ styleFormAddFn() {
|
|
|
+ let form = JSON.parse(JSON.stringify(this.styleForm));
|
|
|
+ this.styleStoreData.push(form);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.form-wrap {
|
|
|
- // width: 60%;
|
|
|
- .question-btn {
|
|
|
- position: relative;
|
|
|
- right: 28px;
|
|
|
- }
|
|
|
-}
|
|
|
-.cl-editor-quill {
|
|
|
- /deep/ .editor {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
-}
|
|
|
-// 图库选择
|
|
|
-.store-modal-content {
|
|
|
- .select-wrap {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .img-store-wrap {
|
|
|
- .list-store {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- flex-wrap: wrap;
|
|
|
- .list-checkbox {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 10px;
|
|
|
- /deep/.el-checkbox__input {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-img {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// 风格选择
|
|
|
-.style-modal-content {
|
|
|
- /deep/.upload-wrap {
|
|
|
- width: 60px !important;
|
|
|
- height: 60px !important;
|
|
|
- }
|
|
|
-}
|
|
|
+ .form-wrap {
|
|
|
+ // width: 60%;
|
|
|
+ .question-btn {
|
|
|
+ position: relative;
|
|
|
+ right: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cl-editor-quill {
|
|
|
+ /deep/ .editor {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图库选择
|
|
|
+ .store-modal-content {
|
|
|
+ .select-wrap {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .img-store-wrap {
|
|
|
+ .list-store {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .list-checkbox {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /deep/ .el-checkbox__input {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 风格选择
|
|
|
+ .style-modal-content {
|
|
|
+ /deep/ .upload-wrap {
|
|
|
+ width: 60px !important;
|
|
|
+ height: 60px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
lzq