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