|
@@ -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;
|
|
|
}
|