main
parent
5bebf8966b
commit
49b2291f0f
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>test</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
export const columns = [
|
||||
{
|
||||
title: "商品状态",
|
||||
width: "7%",
|
||||
dataIndex: "status",
|
||||
customRender: function (status) {
|
||||
switch (status) {
|
||||
case 2: return '已下架'
|
||||
case 1: return '上架中'
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "推送状态",
|
||||
width: "7%",
|
||||
dataIndex: "appShopPush",
|
||||
customRender: function (appShopPush) {
|
||||
switch (appShopPush) {
|
||||
case false: return '未推送'
|
||||
case true: return '已推送'
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "编号",
|
||||
width: "16%",
|
||||
dataIndex: "code",
|
||||
},
|
||||
{
|
||||
title: "商品图片",
|
||||
width: "7%",
|
||||
dataIndex: "imgList",
|
||||
scopedSlots: { customRender: "mainPhoto"}
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
width: "10%",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "商品类型",
|
||||
width: "12%",
|
||||
dataIndex: "categoryNamePath",
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
width: "6%",
|
||||
dataIndex: "stock",
|
||||
},
|
||||
{
|
||||
title: "销量",
|
||||
width: "6%",
|
||||
dataIndex: "salesVolume",
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
width: "10%",
|
||||
dataIndex: "updatedAt",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
key: "action",
|
||||
width: "250",
|
||||
fixed: "right",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
]
|
||||
export const formItem = [
|
||||
{
|
||||
type: 'input',
|
||||
label:'sku编码',
|
||||
prop:'skuId',
|
||||
placeholder:'请输入'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label:'商品名称',
|
||||
prop:'skuName',
|
||||
placeholder:'请输入'
|
||||
},
|
||||
// {
|
||||
// type: 'select',
|
||||
// label:'上架状态',
|
||||
// prop:'status',
|
||||
// placeholder:'请选择',
|
||||
// option:[{ id: false,name:'下架'},{ id: true,name:'上架'}],
|
||||
// },
|
||||
]
|
||||
export const pagination = {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10','50','100','200'],
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
export const form = {
|
||||
id:undefined,
|
||||
//是否默认配置
|
||||
defaultSkuName: true,
|
||||
defaultShopName: true,
|
||||
defaultVendorName: true,
|
||||
defaultBrandName: true,
|
||||
defaultCategoryName: true,
|
||||
//
|
||||
skuName:undefined,
|
||||
shopId:undefined,
|
||||
vendorId:undefined,
|
||||
brandId:undefined,
|
||||
categoryFirstId:undefined,
|
||||
categorySecondId:undefined,
|
||||
categoryThirdId:undefined,
|
||||
sellPrice:undefined,
|
||||
discountPrice:undefined,
|
||||
}
|
||||
export const rules = {
|
||||
// skuName:[{required:true,message:'请输入',trigger:'blur'}],
|
||||
// shopId:[{required:true,message:'请选择',trigger:'change'}],
|
||||
// status:[{required:true,message:'请选择',trigger:'change'}],
|
||||
// vendorId:[{required:true,message:'请选择',trigger:'change'}],
|
||||
// brandId: [{ required: true, message: '请选择', trigger: 'change' }],
|
||||
sellPrice:[{required:true,message:'请输入',trigger:'blur'}],
|
||||
discountPrice:[{required:true,message:'请输入',trigger:'blur'}],
|
||||
}
|
||||
export const options = {
|
||||
cate:[],
|
||||
shop: [],
|
||||
vendor: [],
|
||||
brand: [],
|
||||
}
|
||||
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-drawer
|
||||
title="商品上架推送"
|
||||
:width="720"
|
||||
:visible="show"
|
||||
:body-style="{ paddingBottom: '60px' }"
|
||||
@close="addClose"
|
||||
>
|
||||
<div class="drawer-content">
|
||||
基本信息
|
||||
<a-divider></a-divider>
|
||||
<a-form-model
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row>
|
||||
<!-- <a-col :span="12">
|
||||
<a-form-model-item prop="status" label="上架状态">
|
||||
<a-switch v-model="form.status"></a-switch
|
||||
></a-form-model-item>
|
||||
</a-col> -->
|
||||
<a-col :span="11">
|
||||
<a-form-model-item prop="skuName" label="商品名称">
|
||||
<a-switch v-model="form.defaultSkuName" checked-children="默认" un-checked-children="自定义"></a-switch>
|
||||
<a-input v-if="form.defaultSkuName==false" v-model="form.skuName" placeholder="请输入商品名称" style='width:60%'></a-input>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-model-item prop="shopId" label="店铺">
|
||||
<a-switch v-model="form.defaultShopName" checked-children="默认" un-checked-children="自定义"></a-switch>
|
||||
<a-select v-if="form.defaultShopName==false" v-model="form.shopId" placeholder="请选择店铺" style='width:60%'>
|
||||
<a-select-option v-for="item in options.shop" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-model-item prop="vendorId" label="供应商">
|
||||
<a-switch v-model="form.defaultVendorName" checked-children="默认" un-checked-children="自定义"></a-switch>
|
||||
<a-select v-if="form.defaultVendorName==false" v-model="form.vendorId" placeholder="请选择供应商" style='width:60%'>
|
||||
<a-select-option v-for="item in options.vendor" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-model-item prop="brandId" label="品牌">
|
||||
<a-switch v-model="form.defaultBrandName" checked-children="默认" un-checked-children="自定义"></a-switch>
|
||||
<a-select v-if="form.defaultBrandName==false" v-model="form.brandId" placeholder="请选择品牌" style='width:60%'>
|
||||
<a-select-option v-for="item in options.brand" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-model-item prop="cateValue" label="商品分类">
|
||||
<a-switch v-model="form.defaultCategoryName" checked-children="默认" un-checked-children="自定义"></a-switch>
|
||||
<a-cascader
|
||||
v-model="cateValue" v-if="form.defaultCategoryName == false"
|
||||
:options="options.cate"
|
||||
placeholder="请选择分类"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'shopCategoryVoList'}"
|
||||
@change="change"
|
||||
style="width: 60%"
|
||||
></a-cascader> </a-form-model-item
|
||||
></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item prop="sellPrice" label="售卖价">
|
||||
<a-input v-model="form.sellPrice" style="width: 60%"></a-input>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item prop="discountPrice" label="划线价">
|
||||
<a-input
|
||||
v-model="form.discountPrice"
|
||||
style="width: 60%"
|
||||
></a-input> </a-form-model-item
|
||||
></a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
<div class="drawer-footer">
|
||||
<a-button :style="{ marginRight: '8px' }" @click="addClose">
|
||||
关闭
|
||||
</a-button>
|
||||
<a-button type="primary" @click="submit"> 提交 </a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { form, rules, options } from "./form.js";
|
||||
import {
|
||||
cateSelect,
|
||||
shopSelect,
|
||||
vendorSelect,
|
||||
brandSelect,
|
||||
selfItemPush,
|
||||
} from "@/api/shop/goods/index.js";
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
goodsId: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form,
|
||||
rules,
|
||||
options,
|
||||
fileList: [],
|
||||
cateValue: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getItem();
|
||||
},
|
||||
methods: {
|
||||
getItem() {
|
||||
// 分类 店铺 供应商 品牌
|
||||
Promise.all([
|
||||
cateSelect(),
|
||||
shopSelect(),
|
||||
vendorSelect(),
|
||||
brandSelect(),
|
||||
]).then((res) => {
|
||||
this.options.cate = res[0].data;
|
||||
this.options.shop = res[1].data;
|
||||
this.options.vendor = res[2].data;
|
||||
this.options.brand = res[3].data;
|
||||
});
|
||||
},
|
||||
addClose() {
|
||||
this.$refs.ruleForm.resetFields();
|
||||
this.form.categoryFirstId = undefined;
|
||||
this.form.categorySecondId = undefined;
|
||||
this.form.categoryThirdId = undefined;
|
||||
this.cateValue = [];
|
||||
this.$emit("addClose");
|
||||
},
|
||||
success() {
|
||||
this.$emit("success");
|
||||
this.addClose();
|
||||
},
|
||||
change(data) {
|
||||
// console.log(data);
|
||||
this.form.categoryFirstId = data[0];
|
||||
this.form.categorySecondId = data[1];
|
||||
this.form.categoryThirdId = data[2];
|
||||
},
|
||||
submit() {
|
||||
this.$refs.ruleForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
let res = await selfItemPush(this.form);
|
||||
if (res.code === 200) {
|
||||
this.$message.success(res.msg);
|
||||
this.success();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
goodsId: {
|
||||
handler(val) {
|
||||
if (val !== null) {
|
||||
this.form.id = val;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="cardTitle">
|
||||
<span>商品管理</span>
|
||||
</div>
|
||||
<!-- <searchForm :formItem="formItem" @getSearch="search($event)"></searchForm> -->
|
||||
<div class="search-box">
|
||||
<a-row>
|
||||
<a-col :span="20">
|
||||
<a-space size="large">
|
||||
<a-form-model layout="inline">
|
||||
<a-form-model-item label="店铺">
|
||||
<a-select v-model="searchForm.shopId" style="width: 200px">
|
||||
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="商品状态">
|
||||
<a-select v-model="searchForm.status" style="width: 200px">
|
||||
<a-select-option :value="1">上架</a-select-option>
|
||||
<a-select-option :value="2">下架</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="商品编号">
|
||||
<a-input v-model="searchForm.code" style="width: 200px" placeholder="请输入"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="商品名称">
|
||||
<a-input v-model="searchForm.name" style="width: 200px" placeholder="请输入"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="分类">
|
||||
<a-cascader v-model="casVal" style="width: 200px" :options="typeData" @change="typeChange" placeholder="请选择"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'shopCategoryVoList' }">
|
||||
</a-cascader>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="商品名称">
|
||||
<a-range-picker v-model="selTime" @change="timeChange" value-format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button type="primary" @click='getData'>查 询</a-button>
|
||||
<a-button @click='reset' style="margin-left: 24px">重 置</a-button>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:scroll="{ x: 2000 }"
|
||||
@change="handleTableChange"
|
||||
:loading="loading"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: selectionChoosed,
|
||||
}"
|
||||
:row-key="(record, index) => { return record.id }">
|
||||
<span slot="action" slot-scope="text, row">
|
||||
<a-space>
|
||||
<!-- <a class="ant-dropdown-link" @click="onSell([row.id])">上架</a>
|
||||
<a class="ant-dropdown-link" @click="offSell([row.id])">下架</a> -->
|
||||
<a class="ant-dropdown-link" @click="edit(row.id)">推送</a>
|
||||
</a-space>
|
||||
</span>
|
||||
<span slot="mainPhoto" slot-scope="text, row">
|
||||
<img v-for="(item,index) in row.imgList"
|
||||
:key="index" :src="'https://saas.kaidalai.cn/resource/merchant/'+item.url" class="table-img" />
|
||||
</span>
|
||||
</a-table>
|
||||
<div class="action">
|
||||
<a-dropdown :disabled="!hasSelected">
|
||||
<a-menu slot="overlay" @click="handleMenuClick">
|
||||
<!-- <a-menu-item key="on"> 批量上架 </a-menu-item>
|
||||
<a-menu-item key="off"> 批量下架 </a-menu-item> -->
|
||||
<a-menu-item key="push"> 批量推送 </a-menu-item>
|
||||
</a-menu>
|
||||
<a-button> 批量操作 <a-icon type="down" /> </a-button>
|
||||
</a-dropdown>
|
||||
<span style="margin-left: 8px">
|
||||
<template v-if="hasSelected">
|
||||
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<addForm
|
||||
:show="drawer.show"
|
||||
@success="success"
|
||||
@addClose="addClose"
|
||||
:goodsId="goodsId"
|
||||
></addForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findAllGoodsCategory } from "@/api/shop/goods/index.js";
|
||||
import { columns, pagination, formItem } from "./depend/config.js";
|
||||
import { selfGoodsList, selfGoodsMultiPush} from "@/api/shop/goods/index.js";
|
||||
import addForm from "./depend/form.vue";
|
||||
export default {
|
||||
components: {
|
||||
addForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawer: {
|
||||
show: false,
|
||||
},
|
||||
searchForm: {
|
||||
shopId: undefined,
|
||||
status: undefined,
|
||||
code: undefined,
|
||||
categoryId: undefined,
|
||||
name: undefined,
|
||||
createDateStart: undefined,
|
||||
createDateEnd: undefined,
|
||||
},
|
||||
loading: false,
|
||||
typeData: [],
|
||||
casVal: [],
|
||||
selTime: [],
|
||||
columns,
|
||||
goodsId:null,
|
||||
pagination,
|
||||
formItem,
|
||||
tableData: [],
|
||||
selectedRowKeys: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.getApi();
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getApi() {
|
||||
findAllGoodsCategory().then(res => {
|
||||
let data = res.data;
|
||||
this.typeData = data;
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
this.loading = true;
|
||||
selfGoodsList({
|
||||
...this.searchForm,
|
||||
pageNum: this.pagination.current,
|
||||
size: this.pagination.pageSize,
|
||||
}).then((res) => {
|
||||
this.tableData = res.data.rows;
|
||||
this.pagination.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.searchForm = {
|
||||
skuId: undefined,
|
||||
skuName: undefined,
|
||||
categoryFirstId: undefined,
|
||||
categorySecondId: undefined,
|
||||
categoryThirdId: undefined,
|
||||
};
|
||||
this.casVal = [];
|
||||
this.getData()
|
||||
},
|
||||
selectionChoosed(data) {
|
||||
this.selectedRowKeys = data;
|
||||
},
|
||||
handleTableChange(pagination) {
|
||||
const pager = { ...this.pagination };
|
||||
pager.current = pagination.current;
|
||||
pager.pageSize = pagination.pageSize;
|
||||
this.pagination = pager;
|
||||
this.selectedRowKeys = [];
|
||||
this.getData();
|
||||
},
|
||||
edit(id) {
|
||||
this.goodsId = id;
|
||||
this.drawer.show = true;
|
||||
},
|
||||
onSell(ids) {
|
||||
this.$confirm({
|
||||
title: "是否上架",
|
||||
icon: "caret-up",
|
||||
onOk: async () => {
|
||||
let res = await onShelf({ ids: ids });
|
||||
if (res.code === 200) {
|
||||
this.$message.success(res.msg);
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
offSell(ids) {
|
||||
this.$confirm({
|
||||
title: "是否下架",
|
||||
icon: "caret-down",
|
||||
onOk: async () => {
|
||||
let res = await offShelf({ ids: ids });
|
||||
if (res.code === 200) {
|
||||
this.$message.success(res.msg);
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
multiPush(ids) {
|
||||
this.$confirm({
|
||||
title: "是否推送",
|
||||
icon: "caret-up",
|
||||
onOk: async () => {
|
||||
let res = await selfGoodsMultiPush({ ids: ids });
|
||||
if (res.code === 200) {
|
||||
this.$message.success(res.msg);
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
handleMenuClick(data) {
|
||||
if (data.key === "on") {
|
||||
this.onSell(this.selectedRowKeys);
|
||||
} else if (data.key === "off") {
|
||||
this.offSell(this.selectedRowKeys);
|
||||
} else if (data.key === "push") {
|
||||
this.multiPush(this.selectedRowKeys);
|
||||
}
|
||||
},
|
||||
addClose() {
|
||||
this.drawer.show = false;
|
||||
this.goodsId = null;
|
||||
},
|
||||
success() {
|
||||
this.getData();
|
||||
},
|
||||
//改变积分兑换
|
||||
changePoingGood(val) {
|
||||
isEnableRedeem({appGoodsPushId: val.id}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success(res.msg);
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
typeChange(value) {
|
||||
this.searchForm.categoryFirstId = value[0];
|
||||
this.searchForm.categorySecondId = value[1];
|
||||
this.searchForm.categoryThirdId = value[2];
|
||||
},
|
||||
//
|
||||
timeChange() {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue