创建商品新增类型 卡密

src/components/Camilo/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-dialog title="查看卡密" :visible.sync="camiloShow" :before-close="close">
+      <el-table :data="camiloData">
+        <el-table-column property="date" label="卡号" min-width="250"></el-table-column>
+        <el-table-column property="name" label="密码（激活码）" min-width="250"></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "camilo",
+  props: {
+    camiloShow: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      camiloData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+    };
+  },
+  methods: {
+    close() {
+      this.$emit('cancel')
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/business/goods/add.vue

@@ -2,6 +2,16 @@
   <div class="app-container goods-add">
     <el-divider content-position="left">商品信息</el-divider>
     <el-form ref="addItem" :rules="rules" :model="addData" label-width="120px">
+      <el-row :gutter="40" style="width: 500px">
+        <el-col :span="23">
+          <el-form-item label="商品类型:" prop="type">
+            <el-radio-group v-model="addData.type">
+              <el-radio :label="1">实物商品</el-radio>
+              <el-radio :label="2">卡密商品</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-row :gutter="40" style="width: 600px">
         <el-col :span="23">
           <el-form-item label="商品名称:" prop="title">
@@ -10,7 +20,7 @@
         </el-col>
         <el-col :span="23">
           <el-form-item label="商品主图:" prop="picUrl">
-            <Upload v-model="mainPicUrl" :limit="10" />
+            <Upload v-model="mainPicUrl" :limit="10"/>
             <div class="tip">第一张图片将作为商品列表图片，最多上传10张，多张图片之间可随意调整位置，支持jpg、png格式，推荐750*750px；</div>
           </el-form-item>
         </el-col>
@@ -18,12 +28,12 @@
       <el-row :gutter="40" style="width: 500px">
         <el-col :span="23">
           <el-form-item label="支持盲豆兑换:" prop="exchangeShow">
-<!--            <el-switch-->
-<!--              v-model="addData.exchangeShow"-->
-<!--              :active-value="1"-->
-<!--              :inactive-value="0"-->
-<!--            />-->
-<!--            <div class="tip">关闭则不再兑换大厅显示，不支持盲豆兑换。</div>-->
+            <!--            <el-switch-->
+            <!--              v-model="addData.exchangeShow"-->
+            <!--              :active-value="1"-->
+            <!--              :inactive-value="0"-->
+            <!--            />-->
+            <!--            <div class="tip">关闭则不再兑换大厅显示，不支持盲豆兑换。</div>-->
             <el-radio-group v-model="addData.exchangeShow">
               <el-radio :label="0">不支持</el-radio>
               <el-radio :label="1">支持</el-radio>
@@ -37,7 +47,8 @@
           <el-form-item label="商品分类:" prop="categoryId">
             <el-cascader
               v-model="addData.categoryId" clearable
-              :options="goodsCategoryItemsList" :props="{ expandTrigger: 'hover', value: 'categoryId',label: 'name', children: 'goodsCategoryList', }"></el-cascader>
+              :options="goodsCategoryItemsList"
+              :props="{ expandTrigger: 'hover', value: 'categoryId',label: 'name', children: 'goodsCategoryList', }"></el-cascader>
           </el-form-item>
         </el-col>
       </el-row>
@@ -50,9 +61,9 @@
               filterable
               clearable
             >
-              <el-option :label="item.name" :value="item.id" v-for="(item, index) in SupplierList" :key="index" />
+              <el-option :label="item.name" :value="item.id" v-for="(item, index) in SupplierList" :key="index"/>
             </el-select>
-            <a style="margin-left: 20px;color:#3983EF;" @click="handleAdd">添加供应商</a>
+            <a style="margin-left: 20px;color: #1890FF;" @click="handleAdd">添加供应商</a>
           </el-form-item>
 
         </el-col>
@@ -65,7 +76,7 @@
         </el-col>
       </el-row>
 
-       <el-row :gutter="40" style="width: 500px">
+      <el-row :gutter="40" style="width: 500px">
         <el-col :span="23">
           <el-form-item label="商品标签:">
             <el-select
@@ -74,21 +85,22 @@
               multiple
               clearable
             >
-              <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList" :key="index" />
+              <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList"
+                         :key="index"/>
             </el-select>
           </el-form-item>
         </el-col>
-         <el-col :span="23">
-           <el-form-item label="商家信息:">
-             <Upload v-model="MerchantInformation" :limit="10" />
-             <div class="tip">上传商家营业执照</div>
-           </el-form-item>
-         </el-col>
+        <el-col :span="23">
+          <el-form-item label="商家信息:">
+            <Upload v-model="MerchantInformation" :limit="10"/>
+            <div class="tip">上传商家营业执照</div>
+          </el-form-item>
+        </el-col>
       </el-row>
       <el-divider content-position="left">价格库存</el-divider>
       <el-row>
         <el-col :span="23">
-          <el-form-item label="启用多SKU:">
+          <el-form-item label="启用多SKU:" v-if="addData.type == '1'">
             <el-switch
               v-model="addData.multiSku"
               :active-value="1"
@@ -100,7 +112,7 @@
       <el-row>
         <el-col :span="22">
           <el-form-item prop="skuList">
-            <Spec ref="spec" @valid="update" :multiSku="addData.multiSku" />
+            <Spec ref="spec" @valid="update" :multiSku="addData.multiSku"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -128,7 +140,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="23">
-          <el-form-item label="盲豆划线价:" >
+          <el-form-item label="盲豆划线价:">
             <el-input v-model="addData.originPrice" type="number" placeholder="请输入盲豆数量">
               <template slot="append">盲豆</template>
             </el-input>
@@ -148,18 +160,51 @@
           </el-form-item>
         </el-col>
         <el-col :span="23">
-          <el-form-item label="库存:" prop="quantity">
+          <el-form-item label="库存:" prop="quantity" v-if="addData.type == '1'">
             <el-input v-model="addData.quantity" type="number" placeholder="请输入商品库存">
               <template slot="append">件</template>
             </el-input>
           </el-form-item>
         </el-col>
+        <el-col :span="23">
+          <el-form-item label="使用链接:" v-if="addData.type == '2'">
+            <el-input v-model="addData.type" placeholder="请输入商品采购链接"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="23">
+          <el-form-item label="查看卡密:" v-if="addData.goodsId && addData.type == '2'">
+            <a style="color: #1890FF;" @click="camiloShow = true">查看已有卡密</a>
+          </el-form-item>
+        </el-col>
+        <el-col :span="23">
+          <el-form-item label="添加卡密:" v-if="addData.type == '2'">
+            <a style="color: #1890FF;">下载Excel模版</a>
+            <el-upload
+              ref="upload"
+              :limit="1"
+              :data="reqData"
+              accept=".xlsx, .xls"
+              :headers="upload.headers"
+              :action="upload.url"
+              :disabled="upload.isUploading"
+              :on-progress="handleFileUploadProgress"
+              :on-success="handleFileSuccess"
+              :auto-upload="false"
+              :http-request="reqUploadFile"
+              :on-exceed="exceedMax"
+              drag
+            >
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            </el-upload>
+          </el-form-item>
+        </el-col>
       </el-row>
       <!-- <el-divider content-position="left">商品详情</el-divider> -->
       <el-row>
         <el-col :span="22">
           <el-form-item label="商品详情" prop="description">
-            <wang-editor ref="editor" v-model="addData.description" />
+            <wang-editor ref="editor" v-model="addData.description"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -176,6 +221,7 @@
       :dialog-show="createShow"
       @close="close"
     />
+    <camilo v-if="camiloShow" @cancel="cancel" :camiloShow="camiloShow"></camilo>
   </div>
 </template>
 <script>
@@ -183,13 +229,17 @@ import Upload from '@/components/DragImageUpload'
 import WangEditor from '@/components/WangEditor'
 import Spec from './components/spec'
 import TinyEditor from '@/components/TinyEditor'
-import { getGoodsDetail, addGoods } from '@/api/business/goods'
-import { goodsCategoryListTree } from '@/api/business/category'
-import { getSupplierList } from '@/api/business/supplier'
-import { goodsTagItems } from '@/api/business/tag'
-import { publicFileGetUrl } from "@/api/common"
-import { accDiv, accMul } from '@/utils/util'
+import Camilo from '@/components/Camilo'
+import {getGoodsDetail, addGoods} from '@/api/business/goods'
+import {goodsCategoryListTree} from '@/api/business/category'
+import {getSupplierList} from '@/api/business/supplier'
+import {goodsTagItems} from '@/api/business/tag'
+import {publicFileGetUrl} from "@/api/common"
+import {accDiv, accMul} from '@/utils/util'
 import AddSupplier from "../supplier/components/addSupplier";
+import {randomStr20} from '@/utils/util'
+import {getToken, getSign} from "@/utils/auth";
+
 export default {
   name: 'GoodsAdd',
   components: {
@@ -197,7 +247,8 @@ export default {
     WangEditor,
     Upload,
     Spec,
-    AddSupplier
+    AddSupplier,
+    Camilo
   },
   data() {
     return {
@@ -207,29 +258,34 @@ export default {
       SupplierList: [],
       goodsTagItemsList: [],
       addData: {
+        type: 1,
         multiSku: 0,
         description: '',
         originPrice: 0,
         exchangeShow: 0,
       },
-      createShow:false,
+      createShow: false,
       rules: {
-        title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
-        picUrl: [{ required: true, message: '请上传商品图片', trigger: 'change' }],
-        categoryId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
-        supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
-        exchangeShow: [{ required: true, message: '请选择是否支持盲豆兑换', trigger: 'change' }],
-        multiSku: [{ required: true, message: '请选择SKU类型', trigger: 'change' }],
+        title: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
+        picUrl: [{required: true, message: '请上传商品图片', trigger: 'change'}],
+        categoryId: [{required: true, message: '请选择商品分类', trigger: 'change'}],
+        supplierId: [{required: true, message: '请选择供应商', trigger: 'change'}],
+        exchangeShow: [{required: true, message: '请选择是否支持盲豆兑换', trigger: 'change'}],
+        multiSku: [{required: true, message: '请选择SKU类型', trigger: 'change'}],
         value: [
-          { required: true, message: '请输商品入价格', trigger: 'blur' },
-          { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }
+          {required: true, message: '请输商品入价格', trigger: 'blur'},
+          {
+            pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
+            message: "请输入正确的金额，最多两位小数",
+            trigger: ["blur", "change"]
+          }
         ],
         exchangePrice: [
-          { required: true,message:'请输入盲豆数量', trigger: 'blur' },
-          { pattern: /^([1-9]\d*)$/, message: "请输入正确盲豆数量", trigger: ["blur", "change"] }
+          {required: true, message: '请输入盲豆数量', trigger: 'blur'},
+          {pattern: /^([1-9]\d*)$/, message: "请输入正确盲豆数量", trigger: ["blur", "change"]}
         ],
         discountRate: [
-          { required: true,message:'请输入回收折扣', trigger: 'blur' },
+          {required: true, message: '请输入回收折扣', trigger: 'blur'},
           {
             pattern:
               /^([0-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
@@ -238,15 +294,29 @@ export default {
           },
         ],
         cost: [
-          { required: false, message: '请输入商品成本', trigger: 'blur' },
-          { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }
+          {required: false, message: '请输入商品成本', trigger: 'blur'},
+          {
+            pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
+            message: "请输入正确的金额，最多两位小数",
+            trigger: ["blur", "change"]
+          }
         ],
         quantity: [
-          { required: true, message: '请输入库存', trigger: 'blur' },
-          { pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"] }
+          {required: true, message: '请输入库存', trigger: 'blur'},
+          {pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"]}
         ],
-        description: [{ required: true, message: '请输入商品详情', trigger: 'blur' }]
-      }
+        description: [{required: true, message: '请输入商品详情', trigger: 'blur'}]
+      },
+      reqData: {},
+      // 用户导入参数
+      upload: {
+        title: "",// 弹出层标题（用户导入）
+        isUploading: false,// 是否禁用上传
+        url: "",// 上传的地址
+        headers: {},//请求头
+      },
+      camiloShow: false,
+
     }
   },
   computed: {
@@ -259,10 +329,12 @@ export default {
         }) : []
       },
       set(val) {
-        this.$set(this.addData, 'picUrl', val.map(item => { return item.fileName }).toString())
+        this.$set(this.addData, 'picUrl', val.map(item => {
+          return item.fileName
+        }).toString())
       }
     },
-    MerchantInformation:{
+    MerchantInformation: {
       get() {
         return this.addData.merchantInfo ? this.addData.merchantInfo.split(',').map(item => {
           return {
@@ -271,7 +343,9 @@ export default {
         }) : []
       },
       set(val) {
-        this.$set(this.addData, 'merchantInfo', val.map(item => { return item.fileName }).toString())
+        this.$set(this.addData, 'merchantInfo', val.map(item => {
+          return item.fileName
+        }).toString())
       }
     }
   },
@@ -281,13 +355,51 @@ export default {
     this.getGoodsTagItems()
     if (this.id) {
       getGoodsDetail(this.id).then(res => {
-        const { goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, value, exchangePrice, originPrice, discountRate, cost, quantity, description, skuList, categoryId, supplierId, shoppingLink, tagIds } = res.data
+        const {
+          goodsId,
+          title,
+          type,
+          goodsCode,
+          picUrl,
+          merchantInfo,
+          exchangeShow,
+          multiSku,
+          value,
+          exchangePrice,
+          originPrice,
+          discountRate,
+          cost,
+          quantity,
+          description,
+          skuList,
+          categoryId,
+          supplierId,
+          shoppingLink,
+          tagIds
+        } = res.data
         this.addData = {
           value: accDiv(value, 100),
           cost: cost == '' || cost == null ? '' : accDiv(cost, 100),
-          goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, exchangePrice, discountRate, originPrice, quantity, description, skuList, categoryId, supplierId, shoppingLink, tagIds
+          goodsId,
+          title,
+          type,
+          goodsCode,
+          picUrl,
+          merchantInfo,
+          exchangeShow,
+          multiSku,
+          exchangePrice,
+          discountRate,
+          originPrice,
+          quantity,
+          description,
+          skuList,
+          categoryId,
+          supplierId,
+          shoppingLink,
+          tagIds
         }
-        if(description) {
+        if (description) {
           this.$refs.editor.setContent(description)
         }
         if (multiSku && skuList instanceof Array && skuList.length > 0) {
@@ -297,27 +409,31 @@ export default {
         }
       })
     }
+    this.getHttpHeader()
   },
   methods: {
-    getGoodsCategoryItems(){
-      goodsCategoryListTree("",{}).then(res => {
+    getGoodsCategoryItems() {
+      goodsCategoryListTree("", {}).then(res => {
         this.goodsCategoryItemsList = res && res.rows
       })
     },
     //获取供应商
-    getSupplierItems(){
-      getSupplierList('',{name:""}).then(res => {
+    getSupplierItems() {
+      getSupplierList('', {name: ""}).then(res => {
         this.SupplierList = res && res.rows
       })
     },
     handleAdd() {
       this.createShow = true;
     },
-    close(){
+    close() {
       this.createShow = false;
       this.getSupplierItems()
     },
-    getGoodsTagItems(){
+    cancel() {
+      this.camiloShow = false
+    },
+    getGoodsTagItems() {
       goodsTagItems({}).then(res => {
         this.goodsTagItemsList = res && res.data
       })
@@ -329,18 +445,62 @@ export default {
         this.update()
       }
     },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.isUploading = false;
+    },
+    // 超出限制时的提示
+    exceedMax() {
+      this.$message({
+        message:  '请移除已有文件后再进行上传',
+        type: 'warning'
+      })
+    },
+    //请求头
+    getHttpHeader() {
+      let timestamp = parseInt(new Date().getTime()),
+        nonce = randomStr20();
+      let sign = getSign(this.reqData || {}, timestamp)
+      let url = process.env.VUE_APP_BASE_API + '/api/v1/mp/admin/deliver/order/batchShip' + '?sign=' + sign + '&nonce=' + nonce;
+      this.upload.url = url
+      let headers = {
+        "Authorization": "Bearer " + getToken(),
+        "x-zz-timestamp": timestamp
+      }
+      this.upload.headers = headers
+    },
+    // 自定义文件上传的实现
+    reqUploadFile(param) {
+      var data = this.reqData || {}
+      var params = {
+        file: param.file,
+        ...data
+      }
+      // setBatchShip(params, this.headers).then(response => {
+      //   this.upload.isUploading = false;
+      //   this.$refs.upload.clearFiles();
+      //   if(response.data){
+      //   }
+      // })
+    },
     update(skuList) {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
           this.addData.skuList = skuList
-          const { value, categoryId, cost,exchangePrice, description, ...rest } = this.addData
-          addGoods({...rest, ...{
-            value: accMul(value, 100),
-            cost: cost == '' || cost == null ? '' : accMul(cost, 100),
-            exchangePrice: accMul(exchangePrice, 1),
-            description: encodeURI(description),
-            categoryId:categoryId[1],
-          }}).then(res => {
+          const {value, categoryId, cost, exchangePrice, description, ...rest} = this.addData
+          addGoods({
+            ...rest, ...{
+              value: accMul(value, 100),
+              cost: cost == '' || cost == null ? '' : accMul(cost, 100),
+              exchangePrice: accMul(exchangePrice, 1),
+              description: encodeURI(description),
+              categoryId: categoryId[1],
+            }
+          }).then(res => {
             if (res.code === 0) {
               this.$message({
                 message: this.addData.goodsId ? '修改成功!' : '添加成功!',
@@ -351,7 +511,7 @@ export default {
             }
           })
         } else {
-          if (items && Object.keys(items).length>0) {
+          if (items && Object.keys(items).length > 0) {
             this.$message({
               message: items[Object.keys(items)[0]][0].message,
               type: 'warning'
@@ -369,6 +529,7 @@ export default {
     font-size: 12px;
     color: #999;
   }
+
   .el-divider {
     .is-left {
       color: #409EFF;

src/views/business/goods/index.vue

@@ -19,6 +19,13 @@
           @keyup.enter.native="queryParams.pageNum = 1;getList()"
         />
       </el-form-item>
+      <el-form-item label="商品类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择是否支持兑换" clearable @change="queryParams.pageNum = 1;getList()">
+          <el-option label="全部" value="" />
+          <el-option label="实物商品" value="1" />
+          <el-option label="卡密商品" value="2" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="商品分类" prop="categoryIdList">
         <el-cascader
           v-model="queryParams.categoryIdList" collapse-tags clearable
@@ -35,7 +42,6 @@
           <el-option :label="item.name" :value="item.tagId" v-for="(item, index) in goodsTagItemsList" :key="index" />
         </el-select>
       </el-form-item>
-      <br>
       <el-form-item label="上架状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable @change="queryParams.pageNum = 1;getList()">
           <el-option label="全部" value="" />
@@ -127,6 +133,12 @@
           <span v-if="row.exchangeShow == '2'">盲票商品</span>
         </template>
       </el-table-column>
+      <el-table-column label="商品类型" prop="type" min-width="100px">
+        <template slot-scope="{row}">
+          <span v-if="row.type == '1'">实物商品</span>
+          <span v-if="row.type == '2'">卡密商品</span>
+        </template>
+      </el-table-column>
       <el-table-column label="盲豆兑换数量" prop="exchangePrice" sortable="custom" min-width="125" />
       <el-table-column label="销量" prop="exchangedQty" sortable="custom" />
       <el-table-column label="库存" prop="quantity" sortable="custom" />