cf_cloud/erp
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: #10000 前端

Browse Source
This commit is contained in:
赵世界 2022-10-19 21:06:09 +08:00
parent 7c3ee44bd1
commit cbec345d84
3 changed files with 343 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
resources/frontend/src/api/group.js vendored Normal file
View File

@ -0,0 +1,45 @@
import http from "@/util/http.js";
// 团购管理列表
export function groupList(params) {
return http({
url: "/api/group",
method: "get",
params
});
}
// 新增
export function addGroup(data) {
return http({
url: "/api/group",
method: "post",
data,
});
}
// 查看
export function showGroup(id) {
return http({
url: `/api/group/${id}`,
method: "get",
});
}
// 编辑
export function editGroup(id, data) {
return http({
url: `/api/group/${id}`,
method: "patch",
data,
});
}
// 获取团购商品列表
export function getGroupGoods(params) {
return http({
url: `/api/groupGoods`,
method: "get",
params,
});
}

314
resources/frontend/src/views/group/addGroup.vue
View File

@ -1,131 +1,151 @@
<template>
<div>
<el-card style="margin-top: 10px" class="box-card">
<el-form ref="formInline" :model="formInline" label-width="80px">
<el-form :model="group" label-width="80px">
<el-form-item label="店铺">
<el-select v-model="formInline.region" placeholder="店铺">
<el-option label="花里有品" value="1"></el-option>
<el-option label="花富贵儿" value="2"></el-option>
<el-select v-model="group.store_id" :disabled="disabled">
<el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动标题">
<el-input type="textarea" v-model="formInline.title"></el-input>
<el-input type="textarea" v-model="group.title" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="团购商品">
<el-button @click="centerDialogVisible = true">从商品列表导入</el-button>
<el-input placeholder="搜索商品名称、编码" v-model="input2" style="margin-left: 20px; width: 400px;">
<template slot="append">查询</template>
<el-input placeholder="搜索商品名称、编码" v-model="group.searchInput"
style="margin-left: 20px; width: 400px;">
<template slot="append" @click="groupGoodsSearch();">查询</template>
</el-input>
<div>
<span style="margin-right: 20px;">商品状态</span>
<el-button type="text">全部(100)</el-button>
<el-button type="text">在售中(80)</el-button>
<el-button type="text">已售罄(20)</el-button>
<el-button type="text" @click="groupGoodsSearch({statue: 2});">全部({{group.num}})</el-button>
<el-button type="text" @click="groupGoodsSearch({statue: 1});">在售中({{group.on_num}})</el-button>
<el-button type="text" @click="groupGoodsSearch({statue: 0});">已售罄({{group.off_num}})
</el-button>
</div>
<el-table v-loading="loading" :data="tableData" border style="width: 100%" height="800">
<el-table ref="multipleTableGroup" @selection-change="handleSelectionChangeGroup"
v-loading="groupLoading" :data="groupGoods.data" border style="width: 100%" height="800">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="sort" label="序号">
</el-table-column>
<el-table-column prop="name" label="商品名称">
</el-table-column>
<el-table-column prop="sku_name" label="规格">
<el-table-column prop="code" label="编码">
</el-table-column>
<el-table-column prop="category" label="分类">
</el-table-column>
<el-table-column prop="stock" label="库存">
<el-table-column prop="num" label="库存">
</el-table-column>
<el-table-column prop="limit_buy" label="限购数量">
</el-table-column>
<el-table-column prop="market_price" label="划线价">
</el-table-column>
<el-table-column prop="编码" label="编码">
</el-table-column>
<el-table-column prop="价格" label="价格">
</el-table-column>
<el-table-column prop="库存类型" label="库存类型">
<el-table-column prop="price" label="价格">
</el-table-column>
<el-table-column prop="options" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">编辑</el-button>
<el-button @click="handleClick(scope.row)" type="text" size="small">置顶</el-button>
<el-button @click="setTop(scope.row)" type="text" size="small">置顶</el-button>
<el-button type="text" size="small">设置限购</el-button>
<el-button type="text" size="small">设置秒杀</el-button>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="float: right;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="currentPage2" :page-sizes="[20, 30, 50, 100]" :page-size="20"
layout="sizes, prev, pager, next" :total="1000">
<div
style="display: flex; justify-content: space-between; align-items: center; line-height: 32px; margin-top: 20px;">
<el-button type="danger" size="small" @click="batchRemove();">批量删除</el-button>
<el-pagination @size-change="handleSizeChangeGroup" @current-change="handleCurrentChangeGroup"
:current-page.sync="groupGoods.meta.per_page" :page-sizes="[20, 30, 50, 100]"
:page-size="groupGoods.meta.size" layout="sizes, prev, pager, next"
:total="groupGoods.meta.total">
</el-pagination>
</div>
</el-form-item>
<el-form-item label="团购时间">
<el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期">
<el-date-picker v-model="group.datetimerange" type="datetimerange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item style="float: right;">
<el-button>保存预览</el-button>
<el-button type="primary" @click="onSubmit">发布</el-button>
<el-button type="primary" @click="onSubmit">修改团购</el-button>
<el-form-item style="display: flex; justify-content: flex-end;">
<el-button @click="onAdd(1);">保存预览</el-button>
<el-button type="primary" @click="onAdd(0);">发布</el-button>
<el-button type="success" @click="onEdit();">修改团购</el-button>
</el-form-item>
</el-form>
</el-card>
<el-dialog title="您的商品库中已有16件商品" :visible.sync="centerDialogVisible">
<el-form ref="formInline" :model="formInline" label-width="80px">
<el-form-item label="商品分类">
<el-button type="text">全部(100)</el-button>
<el-button type="text">在售中(80)</el-button>
<el-button type="text">已售罄(20)</el-button>
<el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" width="80%">
<el-form ref="goodsList" :model="goodsList" label-width="80px">
<el-form-item label="商品分类" prop="type_id">
<el-radio-group v-model="goodsList.type_id" size="small" @change="goodsSearch()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button v-for="goodsType in types" :key="goodsType.id" :label="goodsType.id">
{{goodsType.name}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="商品品牌">
<el-button type="text">全部(100)</el-button>
<el-button type="text">在售中(80)</el-button>
<el-button type="text">已售罄(20)</el-button>
<el-form-item label="商品品牌" prop="brand_id">
<el-radio-group v-model="goodsList.brand_id" size="small" @change="goodsSearch()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button v-for="goodsBrand in brands" :key="goodsBrand.id" :label="goodsBrand.id">
{{goodsBrand.name}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="搜索">
<el-input placeholder="搜索商品名称、编码" v-model="input2" style="width: 400px;">
<el-form-item label="搜索" prop="goodsKeyword">
<el-input placeholder="搜索商品名称、编码" v-model="goodsList.goodsKeyword" style="width: 400px;">
</el-input>
<el-button type="text">查询</el-button>
<el-button type="text">重置</el-button>
<el-radio-group v-model="goodsList.status" style="margin: 0 30px">
<el-radio label="1">有库存</el-radio>
<el-radio label="2">全部</el-radio>
</el-radio-group>
<el-button type="primary" size="small" @click="goodsSearch();">查询</el-button>
<el-button size="small" @click="resetForm('goodsList')">重置</el-button>
</el-form-item>
<el-table v-loading="loading" :data="tableData" border style="width: 100%" height="800">
</el-form>
<el-table ref="multipleTable" @selection-change="handleSelectionChange" v-loading="goodsLoading"
:data="goods.data" border style="width: 100%" height="520">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="商品信息">
<el-table-column label="商品信息">
<template slot-scope="scope">
{{scope.row.goods.title + ' ' + scope.row.title}}
</template>
</el-table-column>
<el-table-column prop="desc" label="描述">
<el-table-column label="编码">
<template slot-scope="scope">
{{scope.row.goods.goods_code + '_' + scope.row.sku_code}}
</template>
</el-table-column>
<el-table-column prop="code" label="编码">
<el-table-column label="品牌">
<template slot-scope="scope">
{{scope.row.goods.brand.name}}
</template>
</el-table-column>
<el-table-column prop="brand" label="品牌">
<el-table-column label="分类">
<template slot-scope="scope">
{{scope.row.goods.type.name}}
</template>
</el-table-column>
<el-table-column prop="category" label="分类">
</el-table-column>
<el-table-column prop="market_price" label="划线价">
</el-table-column>
<el-table-column prop="价格" label="价格">
</el-table-column>
<el-table-column prop="库存" label="库存">
<el-table-column prop="num" label="库存">
</el-table-column>
</el-table>
<div style="float: right;">
<div style="display: flex; flex-direction: row-reverse; align-items: center; margin-top: 10px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="currentPage2" :page-sizes="[20, 30, 50, 100]" :page-size="20"
layout="sizes, prev, pager, next" :total="1000">
:current-page.sync="goods.meta.current_page" :page-sizes="[20, 30, 50, 100]"
:page-size="goods.meta.per_page" layout="sizes, prev, pager, next" :total="goods.meta.total">
</el-pagination>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<div style="float: left;">
<el-button @click="centerDialogVisible = false">全选</el-button>
<el-button @click="centerDialogVisible = false">取消全选</el-button>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<el-button @click="toggleSelection(1)">全选</el-button>
<el-button @click="toggleSelection(0)">取消全选</el-button>
</div>
<span>已选0件</span>
<div>已选 {{selectNum}} 件</div>
<div>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
<el-button @click="centerDialogVisible = false">取 消</el-button>
</div>
</div>
</span>
</el-dialog>
</div>
@ -133,35 +153,163 @@
<script>
import { storeList } from "../../api/shop";
import { addGroup, showGroup, editGroup, getGroupGoods } from "../../api/group";
import { goods_types, Brand_goods_types } from "../../api/rankingData";
import { goods } from "../../api/goods";
export default {
data() {
return {
formInline: {
region: '',
status: '',
title: '',
resource: ''
group: {
store_id: "",
status: "",
title: "",
resource: "",
num: 0,
on_num: 0,
off_num: 0,
datetimerange: "",
searchInput: "",
},
loading: false,
input2: '',
activeName: '',
tableData: [],
value1: '',
centerDialogVisible: false
groupGoods: {
data: [],
meta: {
total: 0,
current_page: 1,
per_page: 20,
}
},
groupLoading: false,
goodsLoading: false,
goods: {
data: [],
meta: {
total: 0,
current_page: 1,
per_page: 20,
}
},
centerDialogVisible: false,
stores: [],
types: [],
brands: [],
goodsList: {
goodsKeyword: "",
status: "1",
type_id: 0,
brand_id: 0,
excludeIds: [],
page: 1,
per_page: 1,
},
disabled: false,
dialogTitle: "您的商品库中已有 0 件商品",
selectNum: 0,
selectGoods: []
}
},
mounted() {
this.getStoreList();
let id = parseInt(this.$route.query.id);
if (id) {
this.disabled = true;
this.getGoupInfo(this.$route.query.id);
this.dialogTitle = "您的商品库中已有 " + this.group.num + " 件商品";
}
this.getbrandType();
this.getgoodsType();
this.goodsSearch();
},
methods: {
onSubmit() {
console.log('submit!');
getStoreList() {
let page = {
page: 0,
per_page: 999,
};
storeList(page).then((res) => {
this.stores = res.data.data;
});
},
handleClick() {
onAdd(is_save_preview) {
console.log(is_save_preview)
console.log(group)
this.$message('add');
},
onEdit() {
console.log(group)
this.$message('edit');
},
setTop() {
},
handleSizeChange() {
handleSizeChange(val) {
this.$message({
message: val,
type: "success"
});
},
handleCurrentChange(val) {
this.$message({
message: val,
type: "success"
});
},
handleSizeChangeGroup(val) {
this.$message({
message: val,
type: "success"
});
},
handleCurrentChangeGroup(val) {
this.$message({
message: val,
type: "success"
});
},
groupGoodsSearch(params = {}) {
// getGroupGoods(params).then((res) => { })
},
getGoupInfo(id) {
// showGroup(id).then((res) => {
// })
},
getgoodsType() {
let params = {
per_page: 99999,
};
goods_types(params).then((res) => {
this.types = res.data.data;
});
},
getbrandType() {
let params = {
per_page: 99999,
};
Brand_goods_types(params).then((res) => {
this.brands = res.data.data;
});
},
goodsSearch() {
goods(this.goodsList).then((res) => {
this.goods = res.data;
})
},
toggleSelection(isAll) {
if (isAll) {
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.selectGoods = val;
console.log(this.selectGoods)
},
handleSelectionChangeGroup() {
},
handleCurrentChange() {
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}

77
resources/frontend/src/views/group/group.vue
View File

@ -1,47 +1,55 @@
<template>
<div>
<el-card class="box-card" :body-style="{ padding: '20px 20px 0 20px' }">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
<el-form-item label="店铺">
<el-select v-model="formInline.region" placeholder="店铺">
<el-option label="花里有品" value="1"></el-option>
<el-option label="花富贵儿" value="2"></el-option>
<el-select v-model="formSearch.store_id" placeholder="全部">
<el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="团购状态">
<el-select v-model="formInline.status" placeholder="团购状态">
<el-select v-model="formSearch.status" placeholder="团购状态">
<el-option label="未开始" value="0"></el-option>
<el-option label="跟团中" value="1"></el-option>
<el-option label="预览中" value="2"></el-option>
<el-option label="未开始" value="3"></el-option>
<el-option label="已结束" value="4"></el-option>
<el-option label="已结束" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动标题">
<el-input v-model="formInline.title" placeholder="活动标题"></el-input>
<el-input v-model="formSearch.title" placeholder="活动标题"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="onSubmit">新增团购</el-button>
<el-button type="primary" @click="getGroupList();">查询</el-button>
<el-button type="success" @click="groupSet(0);">新增团购</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="margin-top: 10px" class="box-card">
<el-table v-loading="loading" :data="tableData" border style="width: 100%">
<el-table-column prop="store" label="店铺">
<el-table-column prop="shop_name" label="店铺">
</el-table-column>
<el-table-column prop="title" label="活动标题">
</el-table-column>
<el-table-column prop="status" label="团购状态">
</el-table-column>
<el-table-column prop="dateTime" label="开团时间">
<el-table-column label="开团时间">
<template slot-scope="scope">
<div>{{scope.row.start_time}}</div>
<div>至</div>
<div>{{scope.row.end_time}}</div>
</template>
</el-table-column>
<el-table-column prop="ercode" label="手机查看">
<el-table-column label="手机查看">
<template slot-scope="scope">
<el-image style="width: 100px; height: 100px" :src="scope.row.ercode"></el-image>
</template>
</el-table-column>
<el-table-column prop="options" label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
<el-button @click="groupSet(scope.row.id)" type="text" size="small">查看</el-button>
<el-button @click="groupSet(scope.row.id)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
@ -51,20 +59,45 @@
<script>
import { storeList } from "../../api/shop";
import { groupList } from "../../api/group";
export default {
data() {
return {
formInline: {
region: '',
status: '',
title: '',
formSearch: {
store_id: "",
status: "",
title: "",
},
loading: false
stores: [],
loading: false,
tableData: [
{ id: 1, shop_name: "花富贵儿", title: "团购", status: "未开始", start_time: "2022-10-01 00:00:00", end_time: "2022-10-10 00:00:00", ercode: "https://ts1.cn.mm.bing.net/th/id/R-C.8c975bf1ced8f8aac41a73e8691b385c?rik=%2fOWwdmGCNTjfQA&riu=http%3a%2f%2ftupian.qqw21.com%2farticle%2fUploadPic%2f2012-9%2f201291621552596740.jpg&ehk=yDVF7XeRX8kqDF4CTnZ8JRMjF7yk%2f7G4GTzEVSmWlv0%3d&risl=&pid=ImgRaw&r=0" }
]
}
},
mounted() {
this.getStoreList();
this.getGroupList();
},
methods: {
onSubmit() {
console.log('submit!');
getStoreList() {
let page = {
page: 0,
per_page: 999,
};
storeList(page).then((res) => {
this.stores = res.data.data;
});
},
getGroupList() {
console.log(this.formSearch)
// groupList(this.formSearch).then((res) => {
// this.tableData = res.data.data;
// })
},
groupSet(id) {
this.$router.push({ path: "GROUP_ADD", query: { id: id } });
}
}
}