添加分销商品管理页面

src/api/business/sale.js

+import request from '@/utils/request'
+
+export function createSale(data) {
+  return request({
+    url: '/supplierItem/create',
+    method: 'post',
+    data
+  })
+}
+export function getSaleList(data) {
+  return request({
+    url: '/supplierItem/findList',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -428,6 +428,44 @@ export const asyncRouterMap = [
       }
     ]
   },
+  {
+    path: '/sale',
+    component: Layout,
+    redirect: 'noredirect',
+    alwaysShow: true,
+    name: 'sale',
+    meta: {
+      title: '分销管理',
+      icon: 'table'
+    },
+    children: [
+      {
+        path: 'saleList',
+        component: () => import('@/views/sale/saleList'),
+        name: 'saleList',
+        meta: {
+          perms: [],
+          title: '分销商品管理',
+          icon: 'user',
+          noCache: true,
+          keepAlive: true
+        }
+      },
+      {
+        path: 'saleAdd',
+        component: () => import('@/views/sale/saleAdd'),
+        name: 'saleAdd',
+        meta: {
+          perms: [],
+          title: '添加/编辑商品',
+          icon: 'user',
+          noCache: true,
+          keepAlive: true
+        },
+        hidden: true
+      }
+    ]
+  },
   {
     path: '/service',
     component: Layout,

src/views/sale/saleAdd.vue

+<template>
+  <div>
+    <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基础信息</span>
+        </div>
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="goods.name" />
+        </el-form-item>
+        <el-form-item label="商品详情" prop="description">
+          <editor :init="editorInit" :style="{'min-height':'300px' }" v-model="goods.description" />
+        </el-form-item>
+
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>商品图片</span>
+        </div>
+        <el-form-item label="" prop="images">
+          <el-upload
+            :action="uploadPath"
+            :headers="headers"
+            :limit="9"
+            :file-list="itemImages"
+            :on-exceed="uploadOverrun"
+            :on-success="handleGalleryUrl"
+            :on-remove="handleRemove"
+            multiple
+            accept=".jpg,.jpeg,.png,.gif"
+            list-type="picture-card">
+            <i class="el-icon-plus" />
+          </el-upload>
+          <div>建议上传尺寸3：4的图片，最多不超过9张</div>
+        </el-form-item>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>商品设置</span>
+        </div>
+        <h5>定价</h5>
+        <div class="item">
+          <el-form-item label="供货价" prop="distributionPrice">
+            <el-input v-model="goods.distributionPrice" style="width: 300px">
+              <template slot="prepend">¥</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="进货价" prop="supplyPrice">
+            <el-input v-model="goods.supplyPrice" style="width: 300px">
+              <template slot="prepend">¥</template>
+            </el-input>
+          </el-form-item>
+        </div>
+
+        <h5>库存</h5>
+        <el-form-item label="数量" prop="stock">
+          <el-input-number v-model="goods.stock" :step="1" style="width: 200px" />
+        </el-form-item>
+        <h5>限购</h5>
+        <el-form-item label="" prop="numType">
+          <div class="item">
+            <el-radio-group v-model="numType">
+              <el-radio :label="-1">不限</el-radio>
+              <el-radio :label="2">自定义</el-radio>
+            </el-radio-group>
+            <el-form-item v-if="numType === 2" label="数量" prop="buyLimitNum" label-width="60px">
+              <el-input-number v-model="goods.buyLimitNum" :step="1" style="width: 200px" />
+            </el-form-item>
+          </div>
+
+        </el-form-item>
+        <h5>上架类型</h5>
+        <el-form-item label="" prop="type">
+          <el-radio-group v-model="goods.type">
+            <el-radio :label="1">一口价</el-radio>
+            <el-radio :label="2">竞拍</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <div v-if="goods.type === 2">
+          <div class="item">
+            <el-form-item label="开始时间" prop="auctionStartTime">
+              <el-date-picker
+                v-model="goods.auctionStartTime"
+                :picker-options="pickerOptions"
+                style="width:300px"
+                type="datetime"
+                value-format="timestamp"
+                placeholder="选择日期时间" />
+            </el-form-item>
+            <el-form-item label="截拍时间" prop="auctionEndTime">
+              <!-- <el-input v-model="dataForm.bidtime"/> -->
+              <el-date-picker
+                v-model="goods.auctionEndTime"
+                :picker-options="pickerOptions"
+                style="width:300px"
+                type="datetime"
+                value-format="timestamp"
+                placeholder="选择日期时间" />
+            </el-form-item>
+          </div>
+          <div class="item">
+            <el-form-item label="起拍价" prop="startPrice">
+              <el-input v-model="goods.startPrice" style="width: 300px">
+                <template slot="prepend">¥</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="加价幅度" prop="addExtent">
+              <el-input v-model="goods.addExtent" style="width: 300px">
+                <template slot="prepend">¥</template>
+              </el-input>
+            </el-form-item>
+          </div>
+        </div>
+      </el-card>
+    </el-form>
+    <div class="op-container">
+      <el-button @click="handleBack">返回</el-button>
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { uploadPath, createStorage } from '@/api/business/storage'
+import { getToken } from '@/utils/auth'
+import Editor from '@tinymce/tinymce-vue'
+import { MessageBox } from 'element-ui'
+import { createSale } from '../../api/business/sale'
+
+export default {
+  name: 'SaleAdd',
+  components: { Editor },
+  data() {
+    return {
+      uploadPath,
+      numType: -1,
+      goods: {
+        images: [],
+        type: 1,
+        buyLimitNum: -1
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          var todayYear = (new Date()).getFullYear()
+          var todayMonth = (new Date()).getMonth()
+          var todayDay = (new Date()).getDate() - 1
+          var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
+          return time.getTime() < todayTime
+        }
+      },
+      itemImages: [],
+      rules: {
+        images: [{ required: true, message: '至少一张图片', trigger: 'blur' }],
+        name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
+        distributionPrice: [{ required: true, message: '供货价不能为空', trigger: 'blur' }],
+        // buyLimitNum: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
+        auctionStartTime: [{ required: true, message: '开始不能为空', trigger: 'blur' }],
+        auctionEndTime: [{ required: true, message: '开始不能为空', trigger: 'blur' }],
+        startPrice: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+        addExtent: [{ required: true, message: '加价幅度不能为空', trigger: 'blur' }]
+      },
+      editorInit: {
+        language: 'zh_CN',
+        convert_urls: false,
+        plugins: [
+          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
+        ],
+        toolbar: [
+          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
+          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
+        ],
+        images_upload_handler: function(blobInfo, success, failure) {
+          const formData = new FormData()
+          formData.append('file', blobInfo.blob())
+          createStorage(formData)
+            .then(res => {
+              success(res.data.data.url)
+            })
+            .catch(() => {
+              failure('上传失败，请重新上传')
+            })
+        }
+      }
+    }
+  },
+  computed: {
+    headers() {
+      return {
+        'X-Dts-Admin-Token': getToken()
+      }
+    }
+  },
+  methods: {
+    handleBack() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/dashboard' })
+      } else {
+        this.$router.go(-1)
+      }
+    },
+    handleSave() {
+      this.$refs.goods.validate((valid) => {
+        if (valid) {
+          createSale(this.goods)
+            .then(response => {
+              this.$notify.success({
+                title: '成功',
+                message: '创建成功'
+              })
+              this.$router.push({ path: '/sale/saleList' })
+            })
+            .catch(response => {
+              MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+                confirmButtonText: '确定',
+                type: 'error'
+              })
+            })
+        }
+      })
+    },
+    limitInput(value) {
+      this.goods.price = ('' + value) // 第一步：转成字符串
+        .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
+        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
+        .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
+        .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
+    },
+    uploadOverrun: function() {
+      this.$message({
+        type: 'error',
+        message: '上传文件个数超出限制!最多上传5张图片!'
+      })
+    },
+    handleGalleryUrl(response, file, fileList) {
+      if (response.errno === 0) {
+        this.goods.images.push(response.data.url)
+      }
+    },
+    handleRemove: function(file, fileList) {
+      var url
+      if (file.response === undefined) {
+        url = file.url
+      } else {
+        url = file.response.data.url
+      }
+      if (url === this.goods.topImage) {
+        this.goods.topImage = ''
+      }
+      for (var i = 0; i < this.goods.images.length; i++) {
+        // 这里存在两种情况
+        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
+        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
+        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
+        if (url === this.goods.topImage) {
+          this.goods.topImage = ''
+        }
+        if (this.goods.images[i] === url) {
+          this.goods.images.splice(i, 1)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  margin: 24px;
+}
+
+.item {
+  display: flex;
+}
+
+.op-container {
+  display: flex;
+  justify-content: center;
+  padding: 0 24px 24px;
+}
+
+</style>

src/views/sale/saleList.vue

+<template>
+  <div class="page_consignList">
+    <div class="filter-container">
+      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      size="small"
+      element-loading-text="正在查询中..."
+      border
+      fit
+      highlight-current-row>
+      <!--      <el-table-column align="center" label="排行" width="100px" type="index" />-->
+      <el-table-column align="center" min-width="100px" prop="saleId" label="寄售单号" />
+      <el-table-column align="center" label="图片" prop="itemImg">
+        <template slot-scope="scope">
+          <img v-if="scope.row.itemImg" :src="scope.row.itemImg" width="60px" height="60px">
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="名称" prop="itemName" >
+        <template slot-scope="scope" >
+          <Line2Hidden :text="scope.row.itemName" />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="状态" prop="systemStateName" />
+      <el-table-column align="center" label="下单时间" prop="saleTime" />
+
+      <el-table-column align="center" label="操作" width="300">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleToDetail(scope.row)">编辑
+          </el-button>
+          <el-button
+            :disabled="scope.row.isHasPrice"
+            type="primary"
+            size="mini"
+            @click="handleImageValueDialogShow(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <Pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.size"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import Line2Hidden from '@/components/line2Hidden'
+import Pagination from '@/components/Pagination'
+import { getSaleList } from '@/api/business/sale'
+
+export default {
+  name: 'SaleList',
+  components: {
+    Pagination,
+    Line2Hidden
+  },
+  data() {
+    return {
+      itemKey: 0,
+
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        size: 20
+      },
+      list: [],
+      total: 0,
+      // 图文估价
+      imageValueDialogShow: false,
+      // 建议寄售价
+      identifyValueDialogShow: false,
+      // 货品售出
+      finishDialogShow: false,
+      // 寄售凭证
+      finishSettlementDialogShow: false,
+      // 取消
+      cancelConsignDialogShow: false,
+      currentSaleId: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  destroyed() {
+    this.clearAll()
+  },
+  methods: {
+    handleCreate() {
+      this.$router.push({ path: '/sale/saleAdd' })
+    },
+    // 清除所有定时器
+    clearAll() {
+      if (this.list) {
+        this.list.forEach((el) => {
+          clearInterval(el.countDown)
+        })
+      }
+    },
+    handlerGetList() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleClick(tab, event) {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    getList() {
+      localStorage.setItem('systemState', '')
+      this.listLoading = true
+      getSaleList(this.listQuery).then(response => {
+        this.clearAll()
+        this.list = response.data.data.dataList
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch((e) => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+    /**
+     * 详情
+     */
+    handleToDetail(item) {
+      this.$router.push({ path: '/consign/consignDetail', query: { saleId: item.saleId, timeStr: item.timeStr }})
+    },
+    /**
+     * 图文评估
+     */
+    handleImageValueDialogShow(item) {
+      this.imageValueDialogShow = true
+      this.currentSaleId = item.saleId
+    },
+    /**
+     * 货品签收
+     */
+    handleConfirmReceive(item) {
+
+      /*
+       const params = { saleId: item.saleId }
+      confirmReceive(params)
+        .then(response => {
+          this.$notify.success({
+            message: '货品签收成功'
+          })
+          this.getList()
+        })
+        .catch(response => {
+          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+            confirmButtonText: '确定',
+            type: 'error'
+          })
+        })*/
+    },
+    /**
+     * 实物评估
+     */
+    handleIdentifyValueDialogShow(item) {
+      this.identifyValueDialogShow = true
+      this.currentSaleId = item.saleId
+    },
+    /**
+     * 货品售出
+     */
+    handleFinishDialogShow(item) {
+      this.finishDialogShow = true
+      this.currentSaleId = item.saleId
+    },
+    /**
+     * 待用户结款
+     */
+    handleFinishSettlementDialogShow(item) {
+      this.finishSettlementDialogShow = true
+      this.currentSaleId = item.saleId
+    },
+    /**
+     * 取消寄售
+     */
+    handleCancelDialogShow(item) {
+      this.cancelConsignDialogShow = true
+      this.currentSaleId = item.saleId
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .cell {
+  display: flex;
+  justify-content: center;
+}
+.page_consignList {
+  padding: 20px;
+}
+
+</style>