chenrui 4 tahun lalu
induk
melakukan
7fa495c9c9
3 mengubah file dengan 108 tambahan dan 81 penghapusan
  1. 35 0
      src/api/goodsType.js
  2. 33 19
      src/views/shop/goodsEdit.vue
  3. 40 62
      src/views/shop/goodsList.vue

+ 35 - 0
src/api/goodsType.js

@@ -0,0 +1,35 @@
+import { axios } from '@/utils/request'
+
+// 商品分类列表
+export const goodsTypeList = (params) => {
+  const url = `/goodsType/query/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+// 保存商品分类
+export const goodsTypeSave = (params) => {
+  return axios.request({
+    url: '/goodsType/save',
+    data: params,
+    method: 'post'
+  })
+}
+// 商品分类详情
+export const goodsTypeFind = (params) => {
+  return axios.request({
+    url: `/goodsType/findById/${params.id}`,
+    method: 'get'
+  })
+}
+// 商品分类启禁用
+export const goodsTypeEnable = (params) => {
+  return axios.request({
+    url: `/goodsType/enable/${params.id}/${params.flag}`,
+    method: 'get'
+  })
+}

+ 33 - 19
src/views/shop/goodsEdit.vue

@@ -8,10 +8,10 @@
       @submit="handleSubmit">
       <a-form-item label="商品图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <Upload
-          id="goodsEdit-commodity"
+          id="goodsEdit-images"
           v-decorator="[
-            'formData.commodity',
-            { initialValue: formData.commodity, rules: [{ required: true, message: '请上传商品图片' }] }
+            'formData.images',
+            { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] }
           ]"
           ref="bannerImage"
           :maxNums="6"
@@ -34,34 +34,44 @@
       </a-form-item>
       <a-form-item label="商品分类" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <v-select
-          ref="classification"
+          ref="goodsTypeNo"
           code="ADVERT_POSITION"
           allowClear
-          id="goodsEdit-classification"
+          id="goodsEdit-goodsTypeNo"
           placeholder="请选择商品分类"
-          v-decorator="['formData.classification', { initialValue: formData.classification, rules: [{ required: true, message: '请选择商品分类' }] }]"
+          v-decorator="['formData.goodsTypeNo', { initialValue: formData.goodsTypeNo, rules: [{ required: true, message: '请选择商品分类' }] }]"
         ></v-select>
       </a-form-item>
       <a-form-item label="商品价格" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <a-input-number
-          id="goodsEdit-price"
-          class="inpNumber"
+          id="goodsEdit-originalGold"
+          class="inpNumber-unit"
           :min="0"
           :max="999999"
           :precision="2"
-          v-decorator="[ 'formData.price', { initialValue: formData.price, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
+          v-decorator="[ 'formData.originalGold', { initialValue: formData.originalGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
           placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
           allowClear />
         <span class="inp-unit">乐豆</span>
       </a-form-item>
+      <a-form-item label="商品状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <v-select
+          ref="state"
+          code="ADVERT_POSITION"
+          allowClear
+          id="goodsEdit-state"
+          placeholder="请选择商品状态"
+          v-decorator="['formData.state', { initialValue: formData.state, rules: [{ required: true, message: '请选择商品状态' }] }]"
+        ></v-select>
+      </a-form-item>
       <a-form-item label="库存数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <a-input-number
-          id="goodsEdit-stockNum"
+          id="goodsEdit-inventoryQty"
           class="inpNumber"
           :min="0"
           :max="999999"
           :precision="2"
-          v-decorator="['formData.stockNum', { initialValue: formData.stockNum, rules: [{ required: true, message: '请输入库存数量(0~999999)' }] }]"
+          v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [{ required: true, message: '请输入库存数量(0~999999)' }] }]"
           placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
           allowClear />
       </a-form-item>
@@ -100,13 +110,14 @@ export default {
         wrapperCol: { span: 16 }
       },
       formData: {
-        commodity: '', //  商品图
+        images: '', //  商品图
         name: '', // 商品名称
-        classification: '', // 商品分类
-        price: '', //  商品价格
-        stockNum: '', // 库存数量
+        goodsTypeNo: '', // 商品分类
+        originalGold: '', //  商品价格
+        state: '', //  商品状态
+        inventoryQty: '', // 库存数量
         supplierName: null, //  供货商
-        goodsDesc: null //  商品详情
+        desc: null //  商品详情
       }
     }
   },
@@ -125,13 +136,13 @@ export default {
     close () {
       this.$router.push({ path: '/shop/goods/list' })
     },
-    changeImage () {
-
+    changeImage (file) {
+      console.log(file, '-----file')
     },
     //  商品详情  文本编辑器
     editorChange (html, text) {
       console.log(html, '文本编辑器')
-      this.formData.goodsDesc = html
+      this.formData.desc = html
     }
   }
 }
@@ -146,6 +157,9 @@ export default {
     }
     //  input-number 框宽度
     .inpNumber{
+      width: 100%;
+    }
+    .inpNumber-unit{  //  有单位的
       width: 90%;
       margin-right: 8px;
     }

+ 40 - 62
src/views/shop/goodsList.vue

@@ -1,35 +1,35 @@
 <template>
   <a-card :bordered="false" class="goodsList-table-page-wrapper">
     <div class="goodsList-searchForm">
-      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="商品名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="商品名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-input id="goodsList-name" allowClear v-decorator="[ 'queryParam.name', { initialValue: queryParam.name, getValueFromEvent: $filterEmpty, rules: [] }]" :maxLength="30" placeholder="请输入商品名称" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="商品分类" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="商品分类" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <v-select
-                v-model="queryParam.goodsType"
-                ref="goodsStatus"
-                id="goodsList-type"
+                v-model="queryParam.goodsTypeNo"
+                ref="goodsTypeNo"
+                id="goodsList-goodsTypeNo"
                 code="SETTLE_STATUS_ALL"
-                placeholder="请选择商品状态"
+                placeholder="请选择商品分类"
                 allowClear></v-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="供货商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="供货商" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-input id="goodsList-supplierName" allowClear v-decorator="[ 'queryParam.supplierName', { initialValue: queryParam.supplierName, getValueFromEvent: $filterEmpty, rules: [] }]" :maxLength="30" placeholder="请输入供货商" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="商品状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="商品状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <v-select
-                v-model="queryParam.goodsStatus"
-                ref="goodsStatus"
-                id="goodsList-status"
+                v-model="queryParam.state"
+                ref="state"
+                id="goodsList-state"
                 code="SETTLE_STATUS_ALL"
                 placeholder="请选择商品状态"
                 allowClear></v-select>
@@ -54,8 +54,8 @@
       :data="loadData"
       bordered>
       <!-- 商品状态 -->
-      <template slot="orderStatus" slot-scope="text, record">
-        <span>{{ record.orderStatus==1 ? '已启用' : '已禁用' }}</span>
+      <template slot="state" slot-scope="text, record">
+        <span :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state==1 ? '已上架' : '未上架' }}</span>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
@@ -70,62 +70,52 @@
 
 <script>
 import { STable, VSelect } from '@/components'
+import { goodsList } from '@/api/goods'
 export default {
   name: 'GoodsList',
   components: { STable, VSelect },
   data () {
     return {
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
       // 查询参数
       queryParam: {
         name: '', //  商品名称
         supplierName: '', //  供货商
-        goodsType: null, //  商品分类
-        goodsStatus: '' // 商品状态
+        goodsTypeNo: null, //  商品分类
+        state: '' // 商品状态
       },
       loading: false, // 导出loading
       // 表头
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
-        { title: '商品名称', dataIndex: 'orderDate', width: 200, align: 'center' },
-        { title: '商品价格(乐豆)', dataIndex: 'userMoblie', width: 200, align: 'center' },
-        { title: '供货商', dataIndex: 'orderNo', width: 200, align: 'center' },
-        { title: '商品状态', scopedSlots: { customRender: 'orderStatus' }, width: 200, align: 'center' },
-        { title: '库存数量', dataIndex: 'orderPrice', width: 200, align: 'center' },
-        { title: '已售数量', dataIndex: 'orderNum', width: 100, align: 'center' },
+        { title: '商品名称', dataIndex: 'name', width: 200, align: 'center' },
+        { title: '商品价格(乐豆)', dataIndex: 'originalGold', width: 200, align: 'center' },
+        { title: '供货商', dataIndex: 'officialPartnerNo', width: 200, align: 'center' },
+        { title: '商品状态', scopedSlots: { customRender: 'state' }, width: 200, align: 'center' },
+        { title: '库存数量', dataIndex: 'inventoryQty', width: 200, align: 'center' },
+        { title: '已售数量', dataIndex: 'sellQty', width: 100, align: 'center' },
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        // return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
-        //   if (res.status == 200) {
-        //     const no = (res.data.pageNo - 1) * res.data.pageSize
-        //     for (let i = 0; i < res.data.list.length; i++) {
-        //       const _item = res.data.list[i]
-        //       _item.no = no + i + 1
-        //       _item.status = _item.status + '' === '1'
-        //     }
-        //     return res.data
-        //   }
-        // })
-        return new Promise((resolve) => {
-          const data = [
-            { no: 1, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '1', orderPrice: '155', orderNum: '67' },
-            { no: 2, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '0', orderPrice: '155', orderNum: '67' },
-            { no: 3, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '1', orderPrice: '155', orderNum: '67' },
-            { no: 4, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '1', orderPrice: '155', orderNum: '67' },
-            { no: 5, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '0', orderPrice: '155', orderNum: '67' },
-            { no: 6, orderDate: '2020-10-30 09:14', userMoblie: '15709252525', orderNo: 'NO54456798', orderStatus: '0', orderPrice: '155', orderNum: '67' }
-          ]
-          resolve(data)
+        return goodsList(Object.assign(parameter, this.queryParam)).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+              _item.status = _item.status + '' === '1'
+            }
+            return res.data
+          }
         })
       }
     }
   },
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      vm.handleReset()
-    })
-  },
   methods: {
     //  新增、编辑商品
     handleGoods (type, row) {
@@ -164,7 +154,8 @@ export default {
     handleReset () {
       this.queryParam.name = ''
       this.queryParam.supplierName = ''
-      this.queryParam.goodsStatus = null
+      this.queryParam.goodsTypeNo = null
+      this.queryParam.state = null
       this.$refs.table.refresh(true)
     }
   }
@@ -187,19 +178,6 @@ export default {
         margin-right: 10px;
       }
     }
-    .export-btn{
-      background-color: #ff9900;
-      border-color: #ff9900;
-      color: #fff;
-    }
-    .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
-      color: #fff;
-      border-color: #ff9900;
-    }
-    .actionBtn {
-    	font-size: 20px;
-    	padding: 0 10px;
-    }
     .blue {
     	color: #1890FF;
     }