chenrui 4 lat temu
rodzic
commit
2feaba43de

+ 31 - 15
src/views/shop/goodsEdit.vue

@@ -13,7 +13,7 @@
             'formData.images',
             { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] }
           ]"
-          ref="bannerImage"
+          ref="goodsImage"
           :maxNums="6"
           :fileSize="0.25"
           @change="changeImage"
@@ -42,17 +42,17 @@
               rules: [{ required: true, message: '请选择商品分类' }] },
           ]"
           placeholder="请选择商品分类">
-          <a-select-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
+          <a-select-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.goodsTypeNo">{{ item.name }}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="商品价格" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <a-input-number
-          id="goodsEdit-originalGold"
+          id="goodsEdit-sellGold"
           class="inpNumber-unit"
           :min="0"
           :max="999999"
           :precision="2"
-          v-decorator="[ 'formData.originalGold', { initialValue: formData.originalGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
+          v-decorator="[ 'formData.sellGold', { initialValue: formData.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
           placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
           allowClear />
         <span class="inp-unit">乐豆</span>
@@ -60,7 +60,7 @@
       <a-form-item label="商品状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" v-if="!isEdit">
         <v-select
           ref="state"
-          code="ADVERT_POSITION"
+          code="GOODS_STATE"
           allowClear
           id="goodsEdit-state"
           placeholder="请选择商品状态"
@@ -80,16 +80,16 @@
       </a-form-item>
       <a-form-item label="供货商" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <a-select
-          id="goodsEdit-officialPartnerType"
+          id="goodsEdit-officialPartnerNo"
           allowClear
-          :disable="isEdit"
+          :disabled="isEdit"
           v-decorator="[
-            'formData.officialPartnerType',
-            { initialValue: formData.officialPartnerType,
+            'formData.officialPartnerNo',
+            { initialValue: formData.officialPartnerNo,
               rules: [{ required: true, message: '请选择供货商' }] },
           ]"
           placeholder="请选择供货商">
-          <a-select-option v-for="(item,index) in partnerList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
+          <a-select-option v-for="(item,index) in partnerList" :key="index" :value="item.officialPartnerNo">{{ item.name }}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="商品详情" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
@@ -108,7 +108,7 @@ import { Upload, STable, VSelect } from '@/components'
 import Editor from '@/components/WEeditor'
 import { goodsTypeQueryList } from '@/api/goodsType'
 import { partnerQueryList } from '@/api/partner'
-import { goodsSave } from '@/api/goods'
+import { goodsSave, goodsFind } from '@/api/goods'
 export default {
   name: 'GoodsEdit',
   components: { Upload, STable, VSelect, Editor },
@@ -123,10 +123,10 @@ export default {
         images: '', //  商品图
         name: '', // 商品名称
         goodsTypeNo: undefined, // 商品分类
-        originalGold: '', //  商品价格
-        state: '1', //  商品状态
+        sellGold: '', //  商品价格
+        state: '', //  商品状态
         inventoryQty: '', // 库存数量
-        officialPartnerType: undefined, //  供货商
+        officialPartnerNo: undefined, //  供货商
         desc: null //  商品详情
       },
       goodsTypeList: [], //  商品分类下拉数据
@@ -140,6 +140,16 @@ export default {
     }
   },
   methods: {
+    //  获取商品详情
+    getGoodsDetail () {
+      goodsFind({ id: this.$route.params.id }).then(res => {
+        if (res.status == 200) {
+          this.formData = Object.assign(this.formData, res.data)
+          this.$refs.goodsImage.setFileList(res.data.images)
+          this.$refs.editor.setHtml(this.formData.desc)
+        }
+      })
+    },
     //  商品分类下拉数据
     getGoodsType () {
       goodsTypeQueryList().then(res => {
@@ -164,10 +174,12 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
       const _this = this
+      console.log(this.formData, '----表单上传')
       this.form.validateFields((err, values) => {
         if (!err) {
           const formData = values.formData
           formData.desc = _this.formData.desc
+          formData.id = this.isEdit ? this.$route.params.id : null
           goodsSave(formData).then(res => {
             if (res.status == 200) {
               _this.$message.success(res.message)
@@ -183,12 +195,12 @@ export default {
     close () {
       this.$router.push({ path: '/shop/goods/list' })
     },
+    //  图片上传
     changeImage (file) {
       this.formData.images = file
     },
     //  商品详情  文本编辑器
     editorChange (html, text) {
-      console.log(html, '文本编辑器')
       this.formData.desc = html
     }
   },
@@ -196,6 +208,10 @@ export default {
     next(vm => {
       vm.getGoodsType()
       vm.getPartnerQueryList()
+      console.log(vm.$route, vm.isEdit)
+      if (vm.isEdit) { //  详情页
+        vm.getGoodsDetail()
+      }
     })
   }
 }

+ 77 - 37
src/views/shop/goodsList.vue

@@ -1,27 +1,25 @@
 <template>
   <a-card :bordered="false" class="goodsList-table-page-wrapper">
     <div class="goodsList-searchForm">
-      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+      <a-form layout="inline" 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="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-input id="goodsList-name" v-model="queryParam.name" allowClear :maxLength="30" placeholder="请输入商品名称" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="商品分类" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <v-select
-                v-model="queryParam.goodsTypeNo"
-                ref="goodsTypeNo"
-                id="goodsList-goodsTypeNo"
-                code="SETTLE_STATUS_ALL"
-                placeholder="请选择商品分类"
-                allowClear></v-select>
+              <a-select id="goodsList-goodsTypeNo" allowClear placeholder="请选择商品分类" v-model="queryParam.goodsTypeNo">
+                <a-select-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.goodsTypeNo">{{ item.name }}</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="供货商" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <a-input id="goodsList-officialPartnerType" allowClear v-decorator="[ 'queryParam.officialPartnerType', { initialValue: queryParam.officialPartnerType, getValueFromEvent: $filterEmpty, rules: [] }]" :maxLength="30" placeholder="请输入供货商" />
+              <a-select id="goodsList-officialPartnerNo" allowClear placeholder="请选择供货商" v-model="queryParam.officialPartnerNo">
+                <a-select-option v-for="(item,index) in partnerList" :key="index" :value="item.officialPartnerNo">{{ item.name }}</a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
@@ -30,7 +28,7 @@
                 v-model="queryParam.state"
                 ref="state"
                 id="goodsList-state"
-                code="SETTLE_STATUS_ALL"
+                code="GOODS_STATE"
                 placeholder="请选择商品状态"
                 allowClear></v-select>
             </a-form-item>
@@ -55,12 +53,12 @@
       bordered>
       <!-- 商品状态 -->
       <template slot="state" slot-scope="text, record">
-        <span :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state==1 ? '已上架' : '未上架' }}</span>
+        <span :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state==0 ? '未上架' : record.state==1 ? '已上架' : '--' }}</span>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
         <a-button id="goodsList-btn-edit" class="icon-blues" type="link" @click="handleGoods('edit', record)">编辑</a-button>
-        <a-button id="goodsList-btn-shelves" class="icon-orange" type="link" @click="handleShelves(record)">上架</a-button>
+        <a-button v-if="record.state" id="goodsList-btn-shelves" class="icon-orange" type="link" @click="handleShelves(record)">{{ record.state == 0 ? '上架' : record.state == 1 ? '下架' : '' }}</a-button>
         <a-button id="goodsList-btn-delect" class="icon-red" type="link" @click="handleDel(record)">删除</a-button>
       </template>
     </s-table>
@@ -70,13 +68,14 @@
 
 <script>
 import { STable, VSelect } from '@/components'
-import { goodsList } from '@/api/goods'
+import { goodsList, goodsDel, goodsState } from '@/api/goods'
+import { goodsTypeQueryList } from '@/api/goodsType'
+import { partnerQueryList } from '@/api/partner'
 export default {
   name: 'GoodsList',
   components: { STable, VSelect },
   data () {
     return {
-      form: this.$form.createForm(this),
       formItemLayout: {
         labelCol: { span: 7 },
         wrapperCol: { span: 17 }
@@ -84,19 +83,18 @@ export default {
       // 查询参数
       queryParam: {
         name: '', //  商品名称
-        officialPartnerType: '', //  供货商
-        goodsTypeNo: null, //  商品分类
-        state: '' // 商品状态
+        officialPartnerNo: undefined, //  供货商
+        goodsTypeNo: undefined, //  商品分类
+        state: undefined // 商品状态
       },
-      loading: false, // 导出loading
       // 表头
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, 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: 'originalGold', width: 150, align: 'center' },
+        { title: '供货商', dataIndex: 'officialPartnerName', width: 100, align: 'center' },
+        { title: '商品状态', scopedSlots: { customRender: 'state' }, width: 100, align: 'center' },
+        { title: '库存数量', dataIndex: 'inventoryQty', width: 100, align: 'center' },
         { title: '已售数量', dataIndex: 'sellQty', width: 100, align: 'center' },
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
       ],
@@ -113,16 +111,38 @@ export default {
             return res.data
           }
         })
-      }
+      },
+      goodsTypeList: [], //  商品分类下拉数据
+      partnerList: [] //  供应商下拉数据
     }
   },
   methods: {
+    //  商品分类下拉数据
+    getGoodsType () {
+      goodsTypeQueryList().then(res => {
+        if (res.status == 200) {
+          this.goodsTypeList = res.data
+        } else {
+          this.goodsTypeList = []
+        }
+      })
+    },
+    //  供应商下拉数据
+    getPartnerQueryList () {
+      partnerQueryList().then(res => {
+        if (res.status == 200) {
+          this.partnerList = res.data
+        } else {
+          this.partnerList = []
+        }
+      })
+    },
     //  新增、编辑商品
     handleGoods (type, row) {
       if (type == 'add') {
         this.$router.push({ path: '/shop/goods/add' })
       } else if (type == 'edit') {
-        this.$router.push({ path: `/shop/goods/edit/${row.no}` })
+        this.$router.push({ path: `/shop/goods/edit/${row.id}` })
       }
     },
     //  删除商品
@@ -135,29 +155,49 @@ export default {
         okText: '确定',
         cancelText: '取消',
         onOk () {
-          // tenantsDelete({
-          // 	id: row.id
-          // }).then(res => {
-          // 	if (res.status == 200) {
-          // 		_this.$message.success('res.message')
-          // 		_this.$refs.table.refresh()
-          // 	}
-          // })
+          goodsDel({ id: row.id }).then(res => {
+          	if (res.status == 200) {
+          		_this.$message.success(res.message)
+          		_this.$refs.table.refresh()
+          	}
+          })
         }
       })
     },
     //  上下架
     handleShelves (row) {
-      console.log(row, '---上下架')
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        centered: true,
+        content: '确认更改商品状态吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          const state = row.state == 0 ? 1 : row.state == 1 ? 0 : ''
+          goodsState({ id: row.id, state: state }).then(res => {
+          	if (res.status == 200) {
+          		_this.$message.success(res.message)
+          		_this.$refs.table.refresh()
+          	}
+          })
+        }
+      })
     },
     // 重置
     handleReset () {
       this.queryParam.name = ''
-      this.queryParam.officialPartnerType = ''
-      this.queryParam.goodsTypeNo = null
-      this.queryParam.state = null
+      this.queryParam.officialPartnerNo = undefined
+      this.queryParam.goodsTypeNo = undefined
+      this.queryParam.state = undefined
       this.$refs.table.refresh(true)
     }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.getGoodsType()
+      vm.getPartnerQueryList()
+    })
   }
 }
 </script>

+ 4 - 5
src/views/shop/shopOrder.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
     <div class="shopOrder-searchForm">
-      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="48">
           <a-col :span="6">
             <a-form-item label="下单时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
@@ -16,12 +16,12 @@
           </a-col>
           <a-col :span="6">
             <a-form-item label="用户手机" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <a-input id="shopOrder-contactPhone" allowClear :maxLength="11" v-decorator="[ 'queryParam.contactPhone', { initialValue: queryParam.contactPhone, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入用户手机" />
+              <a-input id="shopOrder-contactPhone" allowClear :maxLength="11" v-model="queryParam.contactPhone" placeholder="请输入用户手机" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="订单编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <a-input id="shopOrder-orderNo" allowClear :maxLength="30" v-decorator="[ 'queryParam.orderNo', { initialValue: queryParam.orderNo, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入订单编号" />
+              <a-input id="shopOrder-orderNo" allowClear :maxLength="30" v-model="queryParam.orderNo" placeholder="请输入订单编号" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
@@ -79,7 +79,6 @@ export default {
   components: { STable, VSelect },
   data () {
     return {
-      form: this.$form.createForm(this),
       formItemLayout: {
         labelCol: { span: 7 },
         wrapperCol: { span: 17 }
@@ -156,7 +155,7 @@ export default {
     },
     //  查看详情
     handleView (row) {
-      this.$router.push({ path: `/shop/order/detail/${row.no}` })
+      this.$router.push({ path: `/shop/order/detail/${row.id}` })
     },
     // 重置
     handleReset () {